Rich preview in AttributeAddModal (#724)

Author: KWMORALE

mwdb/web/src/components/AttributesAddModal.js

@@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect, useCallback } from "react";
 
 import api from "@mwdb-web/commons/api";
 import { ConfirmationModal } from "@mwdb-web/commons/ui";
+import RichAttributeRenderer from "./RichAttribute/RichAttributeRenderer";
 
 import AceEditor from "react-ace";
 
@@ -13,8 +14,10 @@ import "ace-builds/src-noconflict/ext-searchbox";
 export default function AttributesAddModal({ isOpen, onAdd, onRequestClose }) {
     const [attributeDefinitions, setAttributeDefinitions] = useState({});
     const [attributeKey, setAttributeKey] = useState("");
+    const [richTemplate, setRichTemplate] = useState("");
     const [attributeValue, setAttributeValue] = useState("");
     const [attributeType, setAttributeType] = useState("string");
+    const [invalid, setInvalid] = useState(false);
     const [error, setError] = useState(null);
     const attributeForm = useRef(null);
 
@@ -35,6 +38,17 @@ export default function AttributesAddModal({ isOpen, onAdd, onRequestClose }) {
 
     function handleKeyChange(ev) {
         setAttributeKey(ev.target.value);
+        if (!ev.target.value.length) setRichTemplate("");
+        else {
+            setRichTemplate(
+                attributeDefinitions[ev.target.value].rich_template
+            );
+            setAttributeValue(
+                attributeDefinitions[ev.target.value].example_value || ""
+            );
+        }
+        setAttributeType("object");
+
         setError(null);
     }
 
@@ -81,7 +95,7 @@ export default function AttributesAddModal({ isOpen, onAdd, onRequestClose }) {
             isOpen={isOpen}
             onRequestClose={onRequestClose}
             onConfirm={handleSubmit}
-            confirmDisabled={!attributesAvailable}
+            confirmDisabled={!attributesAvailable || (invalid && richTemplate)}
         >
             {error ? (
                 <div
@@ -123,7 +137,7 @@ export default function AttributesAddModal({ isOpen, onAdd, onRequestClose }) {
                         </select>
                         {attributeDefinitions[attributeKey] &&
                         attributeDefinitions[attributeKey].description ? (
-                            <div className="form-hint">
+                            <div className="form-group pt-2">
                                 {attributeDefinitions[attributeKey].description}
                             </div>
                         ) : (
@@ -183,14 +197,39 @@ export default function AttributesAddModal({ isOpen, onAdd, onRequestClose }) {
                                 wrapEnabled
                                 onChange={(input) => setAttributeValue(input)}
                                 value={attributeValue}
-                                width="300px"
+                                width="500px"
                                 height="150px"
                                 setOptions={{
                                     useWorker: false,
                                 }}
                             />
                         )}
                     </div>
+                    {richTemplate ? (
+                        <div className="form-group">
+                            <label>Rich attribute preview</label>
+                            <table
+                                className="table table-striped table-bordered table-hover data-table"
+                                style={{
+                                    width: `500px`,
+                                }}
+                            >
+                                <tbody>
+                                    <RichAttributeRenderer
+                                        template={richTemplate}
+                                        value={
+                                            attributeType === "string"
+                                                ? JSON.stringify(attributeValue)
+                                                : attributeValue
+                                        }
+                                        setInvalid={setInvalid}
+                                    />
+                                </tbody>
+                            </table>
+                        </div>
+                    ) : (
+                        []
+                    )}
                 </form>
             )}
         </ConfirmationModal>

mwdb/web/src/components/RichAttribute/RichAttributePreview.js

@@ -1,6 +1,6 @@
-import React, { useReducer, useState } from "react";
+import React, { useReducer, useState, useEffect } from "react";
 import AceEditor from "react-ace";
-import { renderValue } from "./MarkedMustache";
+import RichAttributeRenderer from "./RichAttributeRenderer";
 
 import "ace-builds/src-noconflict/mode-markdown";
 import "ace-builds/src-noconflict/mode-json";
@@ -62,6 +62,8 @@ export default function RichAttributePreview({
         valueInput: storedExampleValue,
     });
     const [showContext, setShowContext] = useState(false);
+    const [invalid, setInvalid] = useState(false);
+    const [contextValue, setContextValue] = useState(null);
 
     function chooseTemplate(ev) {
         const index = ev.target.value;
@@ -80,19 +82,15 @@ export default function RichAttributePreview({
         templateState.chosenExample !== "custom"
             ? exampleTemplates[templateState.chosenExample].value
             : templateState.valueInput;
-    let renderedValue,
-        contextValue,
-        invalid = false;
-    try {
-        contextValue = makeContext(JSON.parse(value));
-        renderedValue = renderValue(template, contextValue, {
-            searchEndpoint: "/",
-        });
-    } catch (e) {
-        renderedValue = e.toString();
-        contextValue = null;
-        invalid = true;
-    }
+
+    useEffect(() => {
+        try {
+            setContextValue(makeContext(JSON.parse(value)));
+        } catch (e) {
+            setContextValue(null);
+            setInvalid(true);
+        }
+    }, [value, setContextValue, setInvalid]);
 
     return (
         <View ident="attributePreview">
@@ -177,10 +175,11 @@ export default function RichAttributePreview({
                 <div className="col">
                     <strong>Preview</strong>
                     <DataTable>
-                        <tr>
-                            <th>My attribute</th>
-                            <td>{renderedValue}</td>
-                        </tr>
+                        <RichAttributeRenderer
+                            template={template}
+                            value={value}
+                            setInvalid={setInvalid}
+                        />
                     </DataTable>
                 </div>
             </div>

mwdb/web/src/components/RichAttribute/RichAttributeRenderer.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { renderValue } from "./MarkedMustache";
+
+import { makeContext } from "./exampleTemplates";
+
+export default function RichAttributeRenderer({ template, value, setInvalid }) {
+    let renderedValue;
+    try {
+        renderedValue = renderValue(template, makeContext(JSON.parse(value)), {
+            searchEndpoint: "/",
+        });
+        setInvalid(false);
+    } catch (e) {
+        renderedValue = e.toString();
+        setInvalid(true);
+    }
+    return (
+        <tr>
+            <th>{"My attribute"}</th>
+            <td>{renderedValue}</td>
+        </tr>
+    );
+}