feat(form): rework ui schema settings

cern-sis · Sep 17, 2024 · 4f043b7 · 4f043b7
1 parent 208dbc1
commit 4f043b7
Show file tree

Hide file tree

Showing 12 changed files with 224 additions and 99 deletions.
diff --git a/src/admin/components/Customize.jsx b/src/admin/components/Customize.jsx
@@ -74,11 +74,11 @@ const Customize = () => {
     <Tabs
       className="scrollableTabs"
       centered
-      style={{ flex: 1 }}
+      style={{ height: "100%", width: "100%" }}
       items={[
         {
           key: "1",
-          label: "Schema Settings",
+          label: "Settings",
           children: (
             <PropertyKeyEditorForm
               schema={schema && schema}
@@ -92,7 +92,7 @@ const Customize = () => {
         },
         {
           key: "2",
-          label: "UI Schema Settings",
+          label: "UI Settings",
           children:
             path.length != 0 ? (
               <PropertyKeyEditorForm
@@ -105,10 +105,7 @@ const Customize = () => {
                 key={uiPath}
               />
             ) : (
-              <Space
-                direction="vertical"
-                style={{ padding: "0 12px", width: "100%" }}
-              >
+              <Space direction="vertical" style={{ padding: "0 12px" }}>
                 <Typography.Text>Size Options</Typography.Text>
                 <Radio.Group
                   size="small"

diff --git a/src/admin/components/PropertyEditor.jsx b/src/admin/components/PropertyEditor.jsx
@@ -18,6 +18,8 @@ import {
   renameIdByPath,
 } from "../../store/schemaWizard";
 import CustomizationContext from "../../contexts/CustomizationContext";
+import { get } from "lodash-es";
+import { getIconByType } from "../utils";
 
 const { useBreakpoint } = Grid;
 
@@ -48,6 +50,7 @@ const renderPath = (path) => {
 
   return <Breadcrumb items={breadcrumbItems} />;
 };
+
 const PropertyEditor = () => {
   const [name, setName] = useState();
   const screens = useBreakpoint();
@@ -57,6 +60,13 @@ const PropertyEditor = () => {
   const path = useSelector((state) => state.schemaWizard.field.path);
   const uiPath = useSelector((state) => state.schemaWizard.field.uiPath);
 
+  const schema = useSelector((state) =>
+    get(state.schemaWizard, ["current", "schema", ...path]),
+  );
+  const uiSchema = useSelector((state) =>
+    get(state.schemaWizard, ["current", "uiSchema", ...uiPath]),
+  );
+
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -97,7 +107,7 @@ const PropertyEditor = () => {
         }
       />
       <Row justify="center">
-        <Col xs={22} style={{ paddingBottom: "10px", textAlign: "center" }}>
+        <Col xs={22} style={{ paddingBottom: "10px" }}>
           {renderPath(path)}
         </Col>
         <Col xs={18} data-cy="editFieldId">
@@ -116,13 +126,20 @@ const PropertyEditor = () => {
                   ),
               }
             }
-            style={{ textAlign: "center" }}
+            style={{ textAlign: "center", margin: "10px 0" }}
           >
+            {getIconByType(
+              schema,
+              uiSchema,
+              customizationContext.allFieldTypes,
+            )}{" "}
             {name}
           </Typography.Title>
         </Col>
       </Row>
-      <Customize />
+      <Row style={{ overflowY: "hidden", flex: 1 }}>
+        <Customize />
+      </Row>
     </div>
   );
 };

diff --git a/src/admin/components/SchemaPreview.jsx b/src/admin/components/SchemaPreview.jsx
@@ -6,10 +6,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { selectProperty } from "../../store/schemaWizard";
 
 const SchemaPreview = () => {
+  const schema = useSelector((state) => state.schemaWizard.current.schema);
 
-  const schema = useSelector((state) => state.schemaWizard.current.schema)
-
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   return (
     <div style={{ height: "80%" }} data-cy="schemaTree">
@@ -29,18 +28,25 @@ const SchemaPreview = () => {
         align="middle"
         style={{ padding: "0 10px" }}
       >
-        <Typography.Title level={5} style={{ margin: 0 }} ellipsis data-cy="rootTitle">
+        <Typography.Title
+          level={5}
+          style={{ margin: 0 }}
+          ellipsis
+          data-cy="rootTitle"
+        >
           {(schema && schema.title) || "root"}
         </Typography.Title>
         <Tooltip title="Edit root settings">
-        <Button
-          type="link"
-          shape="circle"
-          icon={<SettingOutlined />}
-          onClick={() => dispatch(selectProperty({ path: { schema: [], uiSchema: [] }}))}
-          className="tour-root-settings"
-          data-cy="rootSettings"
-        />
+          <Button
+            type="link"
+            shape="circle"
+            icon={<SettingOutlined />}
+            onClick={() =>
+              dispatch(selectProperty({ path: { schema: [], uiSchema: [] } }))
+            }
+            className="tour-root-settings"
+            data-cy="rootSettings"
+          />
         </Tooltip>
       </Row>
       <Row style={{ padding: "0 10px" }}>

diff --git a/src/admin/formComponents/SchemaTreeItem.jsx b/src/admin/formComponents/SchemaTreeItem.jsx
@@ -1,18 +1,12 @@
 import { useDispatch } from "react-redux";
 import { PropTypes } from "prop-types";
 
-import {
-  DownOutlined,
-  QuestionOutlined,
-  UpOutlined,
-  CopyOutlined,
-} from "@ant-design/icons";
+import { DownOutlined, UpOutlined, CopyOutlined } from "@ant-design/icons";
 import { Col, Dropdown, Row, Tag, Typography } from "antd";
-import { isItTheArrayField } from "../utils";
+import { getIconByType, isItTheArrayField } from "../utils";
 import { useContext } from "react";
 import CustomizationContext from "../../contexts/CustomizationContext";
 import { selectProperty } from "../../store/schemaWizard";
-import { hiddenFields } from "../utils/fieldTypes";
 
 const SchemaTreeItem = ({
   path,
@@ -45,46 +39,6 @@ const SchemaTreeItem = ({
     return uiSchema["ui:field"] !== undefined;
   };
 
-  const getIconByType = (uiSchema = {}, schema = {}) => {
-    let type = "unknown";
-    // in case we can not define the type of the element from the uiSchema,
-    // extract the type from the schema
-    if (
-      !uiSchema ||
-      (!uiSchema["ui:widget"] &&
-        !uiSchema["ui:field"] &&
-        !uiSchema["ui:object"])
-    ) {
-      type = schema.type === "string" ? "text" : schema.type;
-    } else {
-      if (uiSchema["ui:widget"]) {
-        type = schema.format === "uri" ? schema.format : uiSchema["ui:widget"];
-      }
-      if (uiSchema["ui:field"]) {
-        type = uiSchema["ui:field"];
-      }
-      if (uiSchema["ui:object"]) {
-        type = uiSchema["ui:object"];
-      }
-    }
-
-    const allFieldTypes = {
-      ...customizationContext.allFieldTypes,
-      hidden: { fields: hiddenFields },
-    };
-
-    for (const category in allFieldTypes) {
-      for (const [key, value] of Object.entries(
-        allFieldTypes[category].fields,
-      )) {
-        if (key === type) {
-          return value.icon;
-        }
-      }
-    }
-    return <QuestionOutlined />;
-  };
-
   const dropdownItems = [
     {
       key: "copy",
@@ -114,7 +68,13 @@ const SchemaTreeItem = ({
         trigger={["contextMenu"]}
       >
         <Row gutter={8} onClick={handleClick} align="middle" wrap={false}>
-          <Col flex="none">{getIconByType(uiSchema, schema)}</Col>
+          <Col flex="none">
+            {getIconByType(
+              schema,
+              uiSchema,
+              customizationContext.allFieldTypes,
+            )}
+          </Col>
           <Col flex="auto">
             <Row
               style={{