feat(form): add right click action to copy field id

cern-sis · May 6, 2024 · c0d46e8 · c0d46e8
1 parent 52685e0
commit c0d46e8
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 51 deletions.
diff --git a/src/admin/formComponents/SchemaTreeItem.jsx b/src/admin/formComponents/SchemaTreeItem.jsx
@@ -5,8 +5,9 @@ import {
   DownOutlined,
   QuestionOutlined,
   UpOutlined,
+  CopyOutlined,
 } from "@ant-design/icons";
-import { Col, Row, Tag, Typography } from "antd";
+import { Col, Dropdown, Row, Tag, Typography } from "antd";
 import { isItTheArrayField } from "../utils";
 import { useContext } from "react";
 import CustomizationContext from "../../contexts/CustomizationContext";
@@ -20,21 +21,27 @@ const SchemaTreeItem = ({
   display,
   updateDisplay,
 }) => {
-  const customizationContext = useContext(CustomizationContext)
+  const customizationContext = useContext(CustomizationContext);
 
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   // selects the item for the property editor
   const handleClick = () => {
-    dispatch(selectProperty({path}));
+    dispatch(selectProperty({ path }));
   };
 
-  const handleUpdateDisplay = e => {
+  const handleUpdateDisplay = (e) => {
     e.stopPropagation();
     updateDisplay();
   };
 
-  const shouldBoxAcceptChildren = uiSchema => {
+  const handleDropdownClick = (e) => {
+    if (e.key === "copy") {
+      navigator.clipboard.writeText(path.schema[path.schema.length - 1]);
+    }
+  };
+
+  const shouldBoxAcceptChildren = (uiSchema) => {
     return uiSchema["ui:field"] !== undefined;
   };
 
@@ -61,18 +68,31 @@ const SchemaTreeItem = ({
       }
     }
 
-    const allFieldTypes = {...customizationContext.allFieldTypes, hidden: {fields: hiddenFields}}
+    const allFieldTypes = {
+      ...customizationContext.allFieldTypes,
+      hidden: { fields: hiddenFields },
+    };
 
     for (const category in allFieldTypes) {
-      for (const [key, value] of Object.entries(allFieldTypes[category].fields)) {
+      for (const [key, value] of Object.entries(
+        allFieldTypes[category].fields,
+      )) {
         if (key === type) {
           return value.icon;
         }
       }
     }
-    return <QuestionOutlined />
+    return <QuestionOutlined />;
   };
 
+  const dropdownItems = [
+    {
+      key: "copy",
+      label: "Copy key",
+      icon: <CopyOutlined />,
+    },
+  ];
+
   return (
     <Tag
       style={{
@@ -88,49 +108,63 @@ const SchemaTreeItem = ({
         backgroundColor: "white",
       }}
       data-cy="treeItem"
+      id="tag-jaja"
     >
-      <Row gutter={8} onClick={handleClick} align="middle" wrap={false}>
-        <Col flex="none">{getIconByType(uiSchema, schema)}</Col>
-        <Col flex="auto">
-          <Row
-            style={{ width: "100%", marginTop: schema.title ? "-9px" : "0" }}
-            justify="space-between"
-            wrap={false}
-            gutter={8}
-          >
-            <Col>
-              <Typography.Text style={{ fontSize: "14px" }} ellipsis>
-                {path.schema[path.schema.length - 1]}
-              </Typography.Text>
-            </Col>
-          </Row>
-          {schema.title && (
+      <Dropdown
+        menu={{ items: dropdownItems, onClick: handleDropdownClick }}
+        trigger={["contextMenu"]}
+      >
+        <Row gutter={8} onClick={handleClick} align="middle" wrap={false}>
+          <Col flex="none">{getIconByType(uiSchema, schema)}</Col>
+          <Col flex="auto">
             <Row
-              style={{ width: "100%", marginTop: "-9px", marginBottom: "-9px" }}
+              style={{
+                width: "100%",
+                marginTop: schema.title ? "-9px" : "0",
+              }}
+              justify="space-between"
+              wrap={false}
+              gutter={8}
             >
               <Col>
-                <Typography.Text
-                  type="secondary"
-                  style={{ fontSize: "12px" }}
-                  ellipsis
-                >
-                  {schema.title}
+                <Typography.Text style={{ fontSize: "14px" }} ellipsis>
+                  {path.schema[path.schema.length - 1]}
                 </Typography.Text>
               </Col>
             </Row>
-          )}
-        </Col>
-        <Col>
-          {schema &&
-            ((schema.type == "object" && !shouldBoxAcceptChildren(uiSchema)) ||
-              isItTheArrayField(schema, uiSchema)) &&
-            (display ? (
-              <UpOutlined onClick={handleUpdateDisplay} />
-            ) : (
-              <DownOutlined onClick={handleUpdateDisplay} />
-            ))}
-        </Col>
-      </Row>
+            {schema.title && (
+              <Row
+                style={{
+                  width: "100%",
+                  marginTop: "-9px",
+                  marginBottom: "-9px",
+                }}
+              >
+                <Col>
+                  <Typography.Text
+                    type="secondary"
+                    style={{ fontSize: "12px" }}
+                    ellipsis
+                  >
+                    {schema.title}
+                  </Typography.Text>
+                </Col>
+              </Row>
+            )}
+          </Col>
+          <Col>
+            {schema &&
+              ((schema.type == "object" &&
+                !shouldBoxAcceptChildren(uiSchema)) ||
+                isItTheArrayField(schema, uiSchema)) &&
+              (display ? (
+                <UpOutlined onClick={handleUpdateDisplay} />
+              ) : (
+                <DownOutlined onClick={handleUpdateDisplay} />
+              ))}
+          </Col>
+        </Row>
+      </Dropdown>
     </Tag>
   );
 };
@@ -148,4 +182,4 @@ SchemaTreeItem.propTypes = {
   uiSchema: PropTypes.object,
 };
 
-export default SchemaTreeItem
+export default SchemaTreeItem;
diff --git a/src/admin/utils/fieldTypes.jsx b/src/admin/utils/fieldTypes.jsx
@@ -209,7 +209,9 @@ const collections = {
               type: "string",
               title: "Items Display Title",
               description:
-                "You can set a fixed value or you can reference child fields between `{{` and `}}`",
+                "You can set a fixed value or you can reference child fields by id between `{{` and `}}`",
+              tooltip:
+                "You can easily copy the field id by right-clicking the desired field in the tree",
             },
           },
         },

diff --git a/src/forms/templates/Field/FieldModal.jsx b/src/forms/templates/Field/FieldModal.jsx
@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { Button, Modal, Space } from "antd";
-import { EditOutlined } from "@ant-design/icons";
+import { Button, Modal, Space, Tooltip, theme } from "antd";
+import { EditOutlined, QuestionCircleOutlined } from "@ant-design/icons";
 
-const FieldModal = ({ id, label, content, options }) => {
+const FieldModal = ({ id, label, content, options, tooltip }) => {
   const [modalOpen, setModalOpen] = useState(false);
+  const { token } = theme.useToken();
 
   return (
     <>
@@ -17,7 +18,14 @@ const FieldModal = ({ id, label, content, options }) => {
           justifyContent: "space-between",
         }}
       >
-        {label}
+        <Space>
+          {label}
+          <Tooltip title={tooltip}>
+            <QuestionCircleOutlined
+              style={{ color: token.colorTextTertiary, cursor: "help" }}
+            />
+          </Tooltip>
+        </Space>
         <Button
           id={id}
           size="small"

diff --git a/src/forms/templates/Field/FieldTemplate.jsx b/src/forms/templates/Field/FieldTemplate.jsx
@@ -69,6 +69,7 @@ const FieldTemplate = ({
         options={{
           ...uiOptions?.modal,
         }}
+        tooltip={schema.tooltip}
       />
     );
   } else {