From f49e5564d8a1d7a6ee3606a930200098213a59b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Srokosz?= <pawel.srokosz@cert.pl>
Date: Fri, 23 Feb 2024 19:19:51 +0100
Subject: [PATCH] Fix AttributeAddModal to make JSON values less concerning

---
 .../web/src/components/AttributesAddModal.tsx | 48 ++++++++-----------
 .../ShowObject/common/AttributeRenderer.tsx   |  2 +-
 .../ShowObject/common/AttributeValue.tsx      |  2 +-
 3 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/mwdb/web/src/components/AttributesAddModal.tsx b/mwdb/web/src/components/AttributesAddModal.tsx
index fb885fecb..b9d2a5151 100644
--- a/mwdb/web/src/components/AttributesAddModal.tsx
+++ b/mwdb/web/src/components/AttributesAddModal.tsx
@@ -4,7 +4,7 @@ import { toast } from "react-toastify";
 
 import { api } from "@mwdb-web/commons/api";
 import { ConfirmationModal } from "@mwdb-web/commons/ui";
-import { RichAttributeRenderer } from "./RichAttribute/RichAttributeRenderer";
+import { AttributeRenderer } from "@mwdb-web/components/ShowObject/common/AttributeRenderer";
 
 import AceEditor from "react-ace";
 
@@ -41,7 +41,7 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
         if (ev) ev.preventDefault();
         if (!attributeForm.current?.reportValidity()) return;
         let value = attributeValue;
-        if (attributeType === "object") {
+        if (attributeType === "json") {
             try {
                 value = JSON.parse(attributeValue);
             } catch (e: any) {
@@ -63,8 +63,6 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
                 attributeDefinitions[ev.target.value].example_value || ""
             );
         }
-        setAttributeType("object");
-
         setError(null);
     }
 
@@ -167,17 +165,17 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
                             <input
                                 className="form-check-input"
                                 type="radio"
-                                id="value-object"
+                                id="value-json"
                                 name="value-type"
-                                checked={attributeType === "object"}
-                                value="object"
+                                checked={attributeType === "json"}
+                                value="json"
                                 onChange={handleTypeChange}
                             />
                             <label
                                 className="form-check-label"
-                                htmlFor="value-object"
+                                htmlFor="value-json"
                             >
-                                Object
+                                JSON
                             </label>
                         </div>
                     </div>
@@ -206,9 +204,9 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
                             />
                         )}
                     </div>
-                    {richTemplate ? (
+                    {attributeDefinitions[attributeKey] ? (
                         <div className="form-group">
-                            <label>Rich attribute preview</label>
+                            <label>Attribute preview</label>
                             <table
                                 className="table table-striped table-bordered table-hover data-table"
                                 style={{
@@ -216,22 +214,18 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
                                 }}
                             >
                                 <tbody>
-                                    <tr>
-                                        <th>{"My attribute"}</th>
-                                        <td>
-                                            <RichAttributeRenderer
-                                                template={richTemplate}
-                                                value={
-                                                    attributeType === "string"
-                                                        ? JSON.stringify(
-                                                              attributeValue
-                                                          )
-                                                        : attributeValue
-                                                }
-                                                setInvalid={setInvalid}
-                                            />
-                                        </td>
-                                    </tr>
+                                    <AttributeRenderer
+                                        attributes={[
+                                            {
+                                                key: attributeKey,
+                                                id: 0,
+                                                value: attributeValue,
+                                            },
+                                        ]}
+                                        attributeDefinition={
+                                            attributeDefinitions[attributeKey]
+                                        }
+                                    />
                                 </tbody>
                             </table>
                         </div>
diff --git a/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx b/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx
index a5845cb07..5818d7cd9 100644
--- a/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx
+++ b/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx
@@ -7,7 +7,7 @@ import { AttributeDefinition } from "@mwdb-web/types/types";
 type Props = {
     attributes: Attribute[];
     attributeDefinition: AttributeDefinition;
-    onRemoveAttribute: (id: number) => void;
+    onRemoveAttribute?: (id: number) => void;
 };
 
 export function AttributeRenderer({
diff --git a/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx b/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx
index 0e7e7255c..5b1cb8e86 100644
--- a/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx
+++ b/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx
@@ -14,7 +14,7 @@ type Props = {
         rich_template: string;
         key: string;
     };
-    onRemove: (id: number) => void;
+    onRemove?: (id: number) => void;
 };
 
 export function AttributeValue({