From eb6d797455cbe015bae8f7bc09fca322ef81d701 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 16 Apr 2020 16:38:34 +0200
Subject: [PATCH] Added properties editor to WBProjectFields.

---
 .../src/js/component/wb-project-fields.js     | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/frontend/src/js/component/wb-project-fields.js b/frontend/src/js/component/wb-project-fields.js
index f859fcf..db36b7e 100644
--- a/frontend/src/js/component/wb-project-fields.js
+++ b/frontend/src/js/component/wb-project-fields.js
@@ -6,46 +6,51 @@ import WBJsonViewer from 'wb-json-viewer';
 import wbFormatSpecialValue from 'wb-format-special-value';
 import WBLazyInlineName from 'wb-lazy-inline-name';
 import wbFormatDate from 'wb-format-date';
+import wbUpdateField from 'wb-update-field';
+import WBJsonEditor from 'wb-json-editor';
 
 class WBProjectFields extends Component {
   componentDidMount() {
-    this.prepareRows();
+    this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.prepareRows();
+    this.fetchData();
   }
 
-  prepareRows() {
+  prepareRows(item) {
+    const { app } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    const rows = [
+      [ 'Name', wbFormatSpecialValue(item.name) ],
+      [ 'Description', wbFormatSpecialValue(item.description) ],
+      [ 'Properties', (
+        <WBJsonEditor name="Properties" app={ app } value={ item.properties }
+          onChange={ value => wbUpdateField(arvHost, arvToken, item.uuid, 'properties', value)
+            .then(() => { item.properties = value; this.prepareRows(item); }) } />
+      ) ],
+      [ 'Writable by', item.writable_by
+        .map(a => (<WBLazyInlineName app={ app } identifier={ a } />))
+        .reduce((a, b) => [].concat(a).concat(', ').concat(b))
+      ],
+      [ 'Trash At', wbFormatDate(item.trash_at) ],
+      [ 'Delete At', wbFormatDate(item.delete_at) ],
+      [ 'Is Trashed', wbFormatSpecialValue(item.is_trashed) ]
+    ];
+
+    this.setState({ rows });
+  }
+
+  fetchData() {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/groups/' + uuid);
 
-    prom = prom.then(xhr => {
-      const item = xhr.response;
-
-      const rows = [
-        [ 'Name', wbFormatSpecialValue(item.name) ],
-        [ 'Description', wbFormatSpecialValue(item.description) ],
-        [ 'Properties', (
-          <WBAccordion names={[ 'Properties' ]} cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.properties } />
-          </WBAccordion>
-        ) ],
-        [ 'Writable by', item.writable_by
-          .map(a => (<WBLazyInlineName app={ app } identifier={ a } />))
-          .reduce((a, b) => [].concat(a).concat(', ').concat(b))
-        ],
-        [ 'Trash At', wbFormatDate(item.trash_at) ],
-        [ 'Delete At', wbFormatDate(item.delete_at) ],
-        [ 'Is Trashed', wbFormatSpecialValue(item.is_trashed) ]
-      ];
-
-      this.setState({ 'rows': rows });
-    });
+    prom = prom.then(xhr => this.prepareRows(xhr.response));
   }
 
   render({}, { rows }) {