feat(form): rework ui schema settings

cern-sis · Jun 4, 2024 · 8020458 · 8020458
1 parent 4315e42
commit 8020458
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 38 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
@@ -17,6 +17,9 @@ import {
   enableCreateMode,
   renameIdByPath,
 } from "../../store/schemaWizard";
+import { get } from "lodash-es";
+// TODO: Replace with the correct icon from getIconByType
+import { QuestionOutlined } from "@ant-design/icons";
 
 const { useBreakpoint } = Grid;
 
@@ -54,6 +57,13 @@ const PropertyEditor = () => {
   const path = useSelector((state) => state.schemaWizard.field.path);
   const uiPath = useSelector((state) => state.schemaWizard.field.uiPath);
 
+  const schema = useSelector(
+    (state) =>
+      uiPath && get(state.schemaWizard, ["current", "schema", ...path]),
+  );
+
+  console.log(schema);
+
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -111,11 +121,13 @@ const PropertyEditor = () => {
             }
             style={{ textAlign: "center" }}
           >
-            {name}
+            <QuestionOutlined /> {name}
           </Typography.Title>
         </Col>
       </Row>
-      <Customize />
+      <Row style={{ overflowY: "hidden", flex: 1 }}>
+        <Customize />
+      </Row>
     </div>
   );
 };

diff --git a/src/admin/utils/fieldTypes.jsx b/src/admin/utils/fieldTypes.jsx
@@ -18,6 +18,8 @@ import {
   UnorderedListOutlined,
 } from "@ant-design/icons";
 import { placeholder } from "@codemirror/view";
+import CollapseObjectFieldTemplate from "../../forms/templates/CollapseObjectFieldTemplate";
+import NoTitleObjectFieldTemplate from "../../forms/templates/NoTitleObjectFieldTemplate";
 
 // COMMON / EXTRA PROPERTIES:
 
@@ -112,10 +114,12 @@ export const common = {
         "ui:widget": "switch",
       },
       "ui:order": ["showAsModal", "modal", "*"],
+      "ui:ObjectFieldTemplate": NoTitleObjectFieldTemplate, // We could also pass a custom prop like hideTitle directly and avoid using a custom template
     },
     "ui:label": {
       "ui:widget": "switch",
     },
+    "ui:ObjectFieldTemplate": CollapseObjectFieldTemplate,
   },
 };
 
@@ -203,7 +207,9 @@ const collections = {
         ...common.optionsSchema,
       },
     },
-    optionsSchemaUiSchema: {},
+    optionsSchemaUiSchema: {
+      "ui:ObjectFieldTemplate": NoTitleObjectFieldTemplate,
+    },
     optionsUiSchema: {
       type: "object",
       title: "UI Schema",
@@ -227,6 +233,7 @@ const collections = {
       },
     },
     optionsUiSchemaUiSchema: {
+      ...common.optionsUiSchemaUiSchema,
       "ui:options": {
         ...common.optionsUiSchemaUiSchema["ui:options"],
         itemsDisplayTitle: {
@@ -248,7 +255,6 @@ const collections = {
           "ui:field": "codeEditor",
         },
       },
-      "ui:label": common.optionsUiSchemaUiSchema["ui:label"],
     },
 
     default: {

diff --git a/src/forms/Form.less b/src/forms/Form.less
@@ -136,3 +136,7 @@
   background-color: @field-error-bg-color !important;
   color: @field-error-color !important;
 }
+
+.scrollableTabs .ant-tabs-content-holder {
+  overflow-y: scroll;
+}
diff --git a/src/forms/templates/CollapseObjectFieldTemplate.jsx b/src/forms/templates/CollapseObjectFieldTemplate.jsx
@@ -0,0 +1,24 @@
+import { Collapse } from "antd";
+
+// For use in fieldTypes for the PropKeyEditor
+const CollapseObjectFieldTemplate = ({ properties }) => {
+  const [first, ...rest] = properties;
+  const elements = [first, { title: "Field UI Options", content: rest }];
+
+  return (
+    <Collapse
+      style={{ margin: "0 10px 10px 10px" }}
+      defaultActiveKey={Array.from(Array(properties.length).keys())}
+      expandIconPosition="right"
+      items={elements.map((item, index) => ({
+        key: index,
+        label: item.title || item.content.props.schema.title,
+        children: item.content.length
+          ? item.content.map((i) => i.content)
+          : item.content,
+      }))}
+    />
+  );
+};
+
+export default CollapseObjectFieldTemplate;
diff --git a/src/forms/templates/NoTitleObjectFieldTemplate.jsx b/src/forms/templates/NoTitleObjectFieldTemplate.jsx
@@ -0,0 +1,7 @@
+import ObjectFieldTemplate from "./ObjectFieldTemplate";
+
+const NoTitleObjectFieldTemplate = (props) => {
+  return <ObjectFieldTemplate {...props} hideHeader />;
+};
+
+export default NoTitleObjectFieldTemplate;
diff --git a/src/forms/templates/ObjectFieldTemplate.jsx b/src/forms/templates/ObjectFieldTemplate.jsx
@@ -21,28 +21,29 @@ const ObjectFieldTemplate = ({
   schema,
   title,
   uiSchema,
+  hideHeader,
 }) => {
   const { colSpan = 24, labelAlign = "right", rowGutter = 24 } = formContext;
 
   const labelClsBasic = `${prefixCls}-item-label`;
   const labelColClassName = classNames(
     labelClsBasic,
-    labelAlign === "left" && `${labelClsBasic}-left`
+    labelAlign === "left" && `${labelClsBasic}-left`,
   );
 
-  const findSchema = element => element.content.props.schema;
+  const findSchema = (element) => element.content.props.schema;
 
-  const findSchemaType = element => findSchema(element).type;
+  const findSchemaType = (element) => findSchema(element).type;
 
-  const findUiSchema = element => element.content.props.uiSchema || {};
+  const findUiSchema = (element) => element.content.props.uiSchema || {};
 
-  const findUiSchemaField = element => findUiSchema(element)["ui:field"];
+  const findUiSchemaField = (element) => findUiSchema(element)["ui:field"];
 
-  const findUiSchemaOptions = element => findUiSchema(element)["ui:options"];
+  const findUiSchemaOptions = (element) => findUiSchema(element)["ui:options"];
 
-  const findUiSchemaWidget = element => findUiSchema(element)["ui:widget"];
+  const findUiSchemaWidget = (element) => findUiSchema(element)["ui:widget"];
 
-  const calculateColSpan = element => {
+  const calculateColSpan = (element) => {
     const type = findSchemaType(element);
     const field = findUiSchemaField(element);
     const widget = findUiSchemaWidget(element);
@@ -77,28 +78,34 @@ const ObjectFieldTemplate = ({
   return (
     <fieldset style={{ margin: "0 12px" }} id={idSchema.$id}>
       <Row gutter={rowGutter}>
-        <Col
-          style={{
-            padding: "0",
-            marginBottom: "12px",
-          }}
-          className={labelColClassName}
-          span={24}
-        >
-          <FieldHeader
-            label={uiSchema["ui:title"] || title}
-            isObject
-            description={uiSchema["ui:description"] || description}
-            uiSchema={uiSchema}
-            idSchema={idSchema}
-          />
-        </Col>
+        {!hideHeader && (
+          <Col
+            style={{
+              padding: "0",
+              marginBottom: "12px",
+            }}
+            className={labelColClassName}
+            span={24}
+          >
+            <FieldHeader
+              label={uiSchema["ui:title"] || title}
+              isObject
+              description={uiSchema["ui:description"] || description}
+              uiSchema={uiSchema}
+              idSchema={idSchema}
+            />
+          </Col>
+        )}
         <Col span={24} className="nestedObject">
           <Row gutter={10}>
             {properties
-              .filter(e => !e.hidden)
-              .map(element => (
-                <Col key={element.name} span={calculateColSpan(element)} data-cy="spanColWrapper">
+              .filter((e) => !e.hidden)
+              .map((element) => (
+                <Col
+                  key={element.name}
+                  span={calculateColSpan(element)}
+                  data-cy="spanColWrapper"
+                >
                   {element.content}
                 </Col>
               ))}