From 0d3df51dec1c1258e5222063f92d654e2f35858f Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Wed, 11 Mar 2020 13:00:51 +0100
Subject: [PATCH] Added ability to edit project/collection/process/workflow
 description.

---
 .../src/js/component/wb-collection-listing.js | 11 ++--
 .../src/js/component/wb-process-listing.js    | 10 +++-
 .../src/js/component/wb-project-listing.js    | 10 ++--
 .../src/js/component/wb-workflow-listing.js   | 12 +++--
 .../js/dialog/wb-edit-description-dialog.js   | 52 +++++++++++++++++++
 frontend/src/js/page/wb-browse.js             | 15 ++++++
 6 files changed, 99 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-edit-description-dialog.js

diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 663b11e..2e96671 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -22,7 +22,8 @@ class WBCollectionListing extends Component {
 
   prepareRows(items, ownerLookup) {
     let { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
 
     return items.map(item => [
       renderSelectionCell(item),
@@ -34,7 +35,9 @@ class WBCollectionListing extends Component {
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
-      item['description'],
+      (<div>
+        { item['description'] } { renderEditDescription(item, () => this.fetchItems()) }
+      </div>),
       (<div>
         <div>
           { ownerLookup[item.owner_uuid] ? (
@@ -153,7 +156,9 @@ class WBCollectionListing extends Component {
 
 WBCollectionListing.defaultProps = {
   'itemsPerPage': 100,
-  'ownerUuid': null
+  'ownerUuid': null,
+  'renderSharingButton': () => null,
+  'renderEditDescription': () => null
 };
 
 export default WBCollectionListing;
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 45e0e35..b4f9130 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -29,7 +29,9 @@ class WBProcessListing extends Component {
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
     const { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
+
     return requests.map(item => {
       return ( [
         renderSelectionCell(item),
@@ -40,6 +42,9 @@ class WBProcessListing extends Component {
             </a> { renderRenameLink(item, () => this.fetchItems()) }
           </div>
           <div>{ item['uuid'] }</div>
+          <div class="mt-2">
+            { item.description } { renderEditDescription(item, () => this.fetchItems()) }
+          </div>
         </div>),
         ( <WBProcessState app={ app } process={ item } /> ),
         ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } /> ),
@@ -121,7 +126,8 @@ WBProcessListing.defaultProps = {
   renderRenameLink: () => null,
   renderDeleteButton: () => null,
   renderSelectionCell: () => null,
-  renderSharingButton: () => null
+  renderSharingButton: () => null,
+  renderEditDescription: () => null
 };
 
 export default WBProcessListing;
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index db05be9..e0bf9ee 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -18,7 +18,8 @@ class WBProjectListing extends Component {
 
   prepareRows(items) {
     const { app, renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
 
     return items.map(item => [
       renderSelectionCell(item),
@@ -30,7 +31,9 @@ class WBProjectListing extends Component {
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
-      item['description'],
+      (<div>
+        { item['description'] } { renderEditDescription(item, () => this.fetchItems()) }
+      </div>),
       item['owner_uuid'],
       (<div>
         { renderDeleteButton(item, () => this.fetchItems()) }
@@ -87,7 +90,8 @@ WBProjectListing.defaultProps = {
   'ownerUuid': null,
   'renderRenameLink': () => null,
   'renderDeleteButton': () => null,
-  'renderSelectionCell': () => null
+  'renderSelectionCell': () => null,
+  'renderEditDescription': () => null
 };
 
 export default WBProjectListing;
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index bd2bf37..84f2d14 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -22,7 +22,9 @@ class WBWorkflowListing extends Component {
 
   prepareRows(items, ownerLookup) {
     const { renderRenameLink, renderDeleteButton,
-      renderSelectionCell, renderSharingButton } = this.props;
+      renderSelectionCell, renderSharingButton,
+      renderEditDescription } = this.props;
+
     return items.map(item => [
       renderSelectionCell(item),
       (
@@ -35,7 +37,9 @@ class WBWorkflowListing extends Component {
           <div>{ item.uuid }</div>
         </div>
       ),
-      item.description,
+      (<div>
+         { item.description } { renderEditDescription(item, () => this.fetchItems()) }
+      </div>),
       ( <WBNameAndUuid uuid={ item.owner_uuid } lookup={ ownerLookup } /> ),
       wbFormatDate(item.created_at),
       (<div>
@@ -97,7 +101,9 @@ class WBWorkflowListing extends Component {
 
 WBWorkflowListing.defaultProps = {
   'itemsPerPage': 100,
-  'ownerUuid': null
+  'ownerUuid': null,
+  'renderSharingButton': () => null,
+  'renderEditDescription': () => null
 };
 
 export default WBWorkflowListing;
diff --git a/frontend/src/js/dialog/wb-edit-description-dialog.js b/frontend/src/js/dialog/wb-edit-description-dialog.js
new file mode 100644
index 0000000..b2f920c
--- /dev/null
+++ b/frontend/src/js/dialog/wb-edit-description-dialog.js
@@ -0,0 +1,52 @@
+import { h, Component, createRef } from 'preact';
+import WBDialog from 'wb-dialog';
+import linkState from 'linkstate';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+
+class WBEditDescriptionDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.dialogRef = createRef();
+    this.state.inputId = uuid.v4();
+  }
+
+  show(item, callback) {
+    const { inputId } = this.state;
+    this.setState({
+      'item': item,
+      'newDescription': null,
+      'callback': callback || (() => {})
+    });
+    this.dialogRef.current.show();
+    $('#' + inputId).focus();
+  }
+
+  hide() {
+    this.dialogRef.current.hide();
+  }
+
+  render({ app }, { item, newDescription, callback, inputId }) {
+    const { arvHost, arvToken } = app.state;
+    return (
+      <WBDialog title="Edit Description" ref={ this.dialogRef } accept={ () =>
+          makeArvadosRequest(arvHost, arvToken,
+            '/arvados/v1/' + arvadosTypeName(item.uuid) +
+            's/' + item.uuid, {
+              method: 'PUT',
+              data: JSON.stringify({
+                description: newDescription || null
+              })
+            }).then(callback)
+      }>
+        <div>
+          <input type="text" class="form-control" id={ inputId }
+            placeholder={ (item && item.description) ? item.description : 'Type new description here' }
+            value={ newDescription } onChange={ linkState(this, 'newDescription') } />
+        </div>
+      </WBDialog>
+    );
+  }
+}
+
+export default WBEditDescriptionDialog;
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index d4c2dc5..da81311 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -11,6 +11,7 @@ import WBWorkflowListing from 'wb-workflow-listing';
 import WBRenameDialog from 'wb-rename-dialog';
 import WBDeleteDialog from 'wb-delete-dialog';
 import WBNewProjectDialog from 'wb-new-project-dialog';
+import WBEditDescriptionDialog from 'wb-edit-description-dialog';
 import wbMoveObject from 'wb-move-object';
 import wbCopyCollection from 'wb-copy-collection';
 import arvadosTypeName from 'arvados-type-name';
@@ -45,6 +46,7 @@ class WBBrowse extends Component {
     this.newProjectDialogRef = createRef();
     this.projectListingRef = createRef();
     this.projectTabsRef = createRef();
+    this.editDescriptionDialogRef = createRef();
     this.state.selected = {};
   }
 
@@ -85,6 +87,16 @@ class WBBrowse extends Component {
     );
   }
 
+  renderEditDescription(item, callback) {
+    return (
+      <a href="#" title="Edit description" onclick={ e => { e.preventDefault();
+        this.editDescriptionDialogRef.current.show(item, callback); } }>
+
+        <i class="fas fa-edit text-secondary"></i>
+      </a>
+    );
+  }
+
   renderDeleteButton(item, callback) {
     return (
       <button class="btn btn-outline-danger m-1" title="Delete"
@@ -148,6 +160,7 @@ class WBBrowse extends Component {
 
     const commonProps = {
       renderRenameLink: (it, cb) => this.renderRenameLink(it, cb),
+      renderEditDescription: (it, cb) => this.renderEditDescription(it, cb),
       renderDeleteButton: (it, cb) => this.renderDeleteButton(it, cb),
       renderSelectionCell: it => this.renderSelectionCell(it),
       renderSharingButton: it => this.renderSharingButton(it),
@@ -167,6 +180,8 @@ class WBBrowse extends Component {
 
         <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />
 
+        <WBEditDescriptionDialog app={ app } ref={ this.editDescriptionDialogRef } />
+
         <WBNavbarCommon app={ app }
           activeItem={ mode === 'shared-with-me' ? 'shared-with-me' :
             (!ownerUuid) ? 'all-projects' :