template support for array item names (#25)

* feat(form): add template support for array item names * fix(actions): change semantic-release branches to master
cern-sis · Apr 16, 2024 · 0be1932 · 0be1932
1 parent d25bba4
commit 0be1932
Show file tree

Hide file tree

Showing 11 changed files with 261 additions and 72 deletions.
diff --git a/formule-demo/yarn.lock b/formule-demo/yarn.lock
@@ -443,6 +443,34 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
+"@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
+  integrity sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==
+
+"@lezer/highlight@^1.0.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.0.tgz#e5898c3644208b4b589084089dceeea2966f7780"
+  integrity sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/json@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@lezer/json/-/json-1.0.2.tgz#bdc849e174113e2d9a569a5e6fb1a27e2f703eaf"
+  integrity sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.0.tgz#ed52a75dbbfbb0d1eb63710ea84c35ee647cb67e"
+  integrity sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -812,6 +840,11 @@
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/yauzl@^2.9.1":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.3.tgz#e9b2808b4f109504a03cda958259876f61017999"
@@ -1264,6 +1297,11 @@ [email protected], classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classna
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
+classnames@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -1410,6 +1448,11 @@ csstype@^3.0.2, csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 cypress-vite@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/cypress-vite/-/cypress-vite-1.5.0.tgz#471ecc1175c7ab51b3b132c595dc3c7e222fe944"
@@ -1923,6 +1966,11 @@ follow-redirects@^1.15.4:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
   integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
 
+follow-redirects@^1.15.4:
+  version "1.15.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
+  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -2152,6 +2200,16 @@ immutability-helper@^3.1.1:
   resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-3.1.1.tgz#2b86b2286ed3b1241c9e23b7b21e0444f52f77b7"
   integrity sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==
 
+immer@^9.0.21:
+  version "9.0.21"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
+  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
+
+immutability-helper@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-3.1.1.tgz#2b86b2286ed3b1241c9e23b7b21e0444f52f77b7"
+  integrity sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3489,6 +3547,11 @@ shallowequal@^1.1.0:
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -3725,6 +3788,11 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 undici-types@~5.26.4:
   version "5.26.5"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/language": "^6.8.0",
     "@codemirror/legacy-modes": "^6.3.3",
+    "@codemirror/lint": "^6.5.0",
     "@codemirror/merge": "^6.1.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@rjsf/antd": "^5.13.0",

diff --git a/release.config.js b/release.config.js
@@ -1,5 +1,5 @@
 export default {
-  branches: ["add-semantic-release"],
+  branches: ["master"],
   plugins: [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",

diff --git a/src/admin/utils/fieldTypes.jsx b/src/admin/utils/fieldTypes.jsx
@@ -195,11 +195,40 @@ const collections = {
     },
     optionsSchemaUiSchema: {},
     optionsUiSchema: {
-      ...common.optionsUiSchema,
+      type: "object",
+      title: "UI Schema",
+      properties: {
+        "ui:options": {
+          type: "object",
+          title: "UI Options",
+          properties: {
+            ...common.optionsUiSchema.properties["ui:options"].properties,
+            itemsDisplayTitle: {
+              type: "string",
+              title: "Items Display Title",
+              description:
+                "You can set a fixed value or you can reference child fields between `{{` and `}}`",
+            },
+          },
+        },
+      },
     },
     optionsUiSchemaUiSchema: {
       ...common.optionsUiSchemaUiSchema,
+      "ui:options": {
+        itemsDisplayTitle: {
+          "ui:widget": "itemsDisplayTitle",
+          "ui:options": {
+            descriptionIsMarkdown: true,
+            showAsModal: true,
+            modal: {
+              buttonInNewLine: true,
+            },
+          },
+        },
+      },
     },
+
     default: {
       schema: {
         type: "array",

diff --git a/src/forms/templates/ArrayFieldTemplates/LayerArrayFieldTemplate.jsx b/src/forms/templates/ArrayFieldTemplates/LayerArrayFieldTemplate.jsx
@@ -1,35 +1,44 @@
 import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Col, List, Modal, Row, Typography } from "antd";
-
-import * as Sqrl from "squirrelly";
-
+import { render } from "squirrelly";
 import ArrowUpOutlined from "@ant-design/icons/ArrowUpOutlined";
 import ArrowDownOutlined from "@ant-design/icons/ArrowDownOutlined";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 import { isFieldContainsError } from "../utils";
 
-const LayerArrayFieldTemplate = ({ items = [] }) => {
+const LayerArrayFieldTemplate = ({ items = [], uiSchema }) => {
   const [itemToDisplay, setItemToDisplay] = useState(null);
   const [visible, setVisible] = useState(false);
 
+  // FIXME: stringifyTmpl and stringify are deprecated and will be removed in favor of itemsDisplayTitle
   const stringifyItem = (options, item) => {
-    let stringifyTmpl = options ? options.stringifyTmpl : null;
-    if (stringifyTmpl) {
+    const itemsDisplayTitle = uiSchema?.["ui:options"]?.itemsDisplayTitle;
+
+    /**
+     * @deprecated
+     */
+    const stringifyTmpl = options ? options.stringifyTmpl : null;
+    if (itemsDisplayTitle || stringifyTmpl) {
       try {
-        let str = Sqrl.render(stringifyTmpl, item);
+        const str = render(itemsDisplayTitle || stringifyTmpl, item, {
+          useWith: true,
+        });
         return str;
       } catch (_err) {
         return null;
       }
     }
 
+    /**
+     * @deprecated
+     */
     const stringify = options ? options.stringify : [],
       reducer = (acc, val) => (item[val] ? `${acc} ${item[val]}` : acc);
 
     return stringify ? stringify.reduce(reducer, "") : null;
   };
-  
+
   useEffect(() => {
     if (items && itemToDisplay)
       setItemToDisplay({
@@ -140,7 +149,7 @@ const LayerArrayFieldTemplate = ({ items = [] }) => {
                 <Typography.Text ellipsis>
                   {stringifyItem(
                     item?.children?.props?.uiSchema?.["ui:options"] ?? null,
-                    item.children.props.formData
+                    item.children.props.formData,
                   ) || `Item #${item.index + 1}`}
                 </Typography.Text>
               }

diff --git a/src/forms/templates/ArrayFieldTemplates/NormalArrayFieldTemplate.jsx b/src/forms/templates/ArrayFieldTemplates/NormalArrayFieldTemplate.jsx
@@ -48,15 +48,15 @@ const NormalArrayFieldTemplate = ({
   const [emailModal, setEmailModal] = useState(false);
   const [selectedEmailList, setSelectedEmailList] = useState(
     uiSchema["ui:options"] && uiSchema["ui:options"].email
-      ? formData.map(user => user?.profile?.email)
-      : []
+      ? formData.map((user) => user?.profile?.email)
+      : [],
   );
   const [copy, setCopy] = useState(false);
   const [importModal, setImportModal] = useState(false);
   const labelClsBasic = `${prefixCls}-item-label`;
   const labelColClassName = classNames(
     labelClsBasic,
-    labelAlign === "left" && `${labelClsBasic}-left`
+    labelAlign === "left" && `${labelClsBasic}-left`,
   );
   const { token } = useToken();
 
@@ -72,14 +72,17 @@ const NormalArrayFieldTemplate = ({
     uiEmailDefaults = uiSchema["ui:options"].emailDefaults || [];
   }
 
-  let typeOfArrayToDisplay = uiSchema && uiSchema.items && uiSchema.items["ui:object"] ? uiSchema.items["ui:object"] : "default";
+  let typeOfArrayToDisplay =
+    uiSchema && uiSchema.items && uiSchema.items["ui:object"]
+      ? uiSchema.items["ui:object"]
+      : "default";
 
-  const getArrayContent = type => {
+  const getArrayContent = (type) => {
     const choices = {
       layerObjectField: (
         <LayerArrayFieldTemplate
           items={items}
-          formContext={formContext}
+          uiSchema={uiSchema}
           id={idSchema.$id}
         />
       ),
@@ -107,7 +110,7 @@ const NormalArrayFieldTemplate = ({
     let { to } = uiImport;
     let data = formData;
 
-    if (type == "object" && to) data = formData.map(item => item[to] || "");
+    if (type == "object" && to) data = formData.map((item) => item[to] || "");
 
     if (!latexData) {
       axios
@@ -127,25 +130,25 @@ const NormalArrayFieldTemplate = ({
     }
   };
 
-  const updateEmailSelectedList = email => {
+  const updateEmailSelectedList = (email) => {
     selectedEmailList.includes(email)
-      ? setSelectedEmailList(selectedEmailList =>
-          selectedEmailList.filter(item => item != email)
+      ? setSelectedEmailList((selectedEmailList) =>
+          selectedEmailList.filter((item) => item != email),
         )
-      : setSelectedEmailList(selectedEmailList => [
+      : setSelectedEmailList((selectedEmailList) => [
           ...selectedEmailList,
           email,
         ]);
   };
   const updateEmailSelectedListAll = () => {
     formData.length === selectedEmailList.length
       ? setSelectedEmailList([])
-      : setSelectedEmailList(formData.map(user => user?.profile?.email));
+      : setSelectedEmailList(formData.map((user) => user?.profile?.email));
   };
 
   useEffect(() => {
     if (emailModal && formData.length != selectedEmailList.length)
-      setSelectedEmailList(formData.map(user => user?.profile?.email));
+      setSelectedEmailList(formData.map((user) => user?.profile?.email));
   }, [emailModal]);
 
   return (
@@ -162,30 +165,12 @@ const NormalArrayFieldTemplate = ({
             setShowModal(false);
             setLatexData(null);
           }}
-          footer={
-            <Row justify="end">
-              <Space>
-                <Button
-                  onClick={() => {
-                    setShowModal(false);
-                    setLatexData(null);
-                  }}
-                >
-                  Close
-                </Button>
-                <Button
-                  type="primary"
-                  onClick={() => {
-                    navigator.clipboard.writeText(decodeURI(latexData));
-                    setCopy(true);
-                  }}
-                  icon={copy ? <CheckOutlined /> : <CopyOutlined />}
-                >
-                  {copy ? "Copied" : "Copy to clipboard"}
-                </Button>
-              </Space>
-            </Row>
-          }
+          okText={copy ? "Copied" : "Copy to clipboard"}
+          okButtonProps={{ icon: copy ? <CheckOutlined /> : <CopyOutlined /> }}
+          onOk={() => {
+            navigator.clipboard.writeText(decodeURI(latexData));
+            setCopy(true);
+          }}
         >
           <CodeViewer
             value={latexData}
@@ -233,14 +218,14 @@ const NormalArrayFieldTemplate = ({
               <Col>
                 Default email recepients:{" "}
                 <Space>
-                  {uiEmailDefaults.map(i => (
+                  {uiEmailDefaults.map((i) => (
                     <Tag key={i}>{i}</Tag>
                   ))}
                 </Space>
               </Col>
             ) : null}
             <Table
-              dataSource={formData.map(i => i.profile || i)}
+              dataSource={formData.map((i) => i.profile || i)}
               columns={[
                 {
                   title: "Email User",
@@ -261,13 +246,13 @@ const NormalArrayFieldTemplate = ({
                   title: "Email",
                   dataIndex: "email",
                   key: "email",
-                  render: txt => <Tag color="geekblue">{txt}</Tag>,
+                  render: (txt) => <Tag color="geekblue">{txt}</Tag>,
                 },
                 {
                   title: "Department",
                   dataIndex: "department",
                   key: "department",
-                  render: txt => <Tag color="blue">{txt}</Tag>,
+                  render: (txt) => <Tag color="blue">{txt}</Tag>,
                 },
               ]}
             />