WIP ui: externalize form builder #2859

miguelgrc · 2023-10-20T13:23:52Z

DO NOT MERGE

Part of #2844

Removes all the form builder code and does some refactoring to be able to import the components from https://github.com/miguelgrc/cap-moses. To test locally, go to ui/cap-react/package.json and change the uri for the cap-moses dependency to the location of the cap-moses project in your machine, and link it like this:

# from cap-moses: 
yarn link

# from cap:
yarn link cap-moses
yarn install

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

pamfilos · 2023-12-20T16:13:46Z

ui/cap-react/src/antd/partials/FileList/components/Files.js

@@ -76,7 +76,9 @@ const Files = ({
    return choices[value];
  };

-  return renderList.map(item => getContentFromProps(item));
+  return renderList.map(item => (
+    <div key={item}>{getContentFromProps(item)}</div>


add key inside getContentFromProps. also lets not use object as key (e.g. item)

Using item as key should be fine in this case, as it's just a string (one of files|repositories|title)

pamfilos · 2023-12-20T16:23:39Z

ui/cap-react/src/antd/partials/JSONSchemaPreviewer/JSONSchemaPreviewer.js

@@ -14,7 +14,7 @@ const JSONSchemaPreviewer = ({
 }) => {
  return (
    schema && (
-      <Form
+      <FormuleForm


why not import(export from formule) as Form? do we need the Formule part?

pamfilos · 2024-01-12T12:35:16Z

ui/cap-react/src/antd/App/App.js

-                {isAdmin && <Route path={CMS} component={AdminPage} />}
-                <Route path={HOME} component={requireAuth(IndexPage)} />
-              </Switch>
+              <FormuleContext


do we need this to wrap the whole app?

Part of the reason is that we need to have access to the Formule context both from the admin pages and from the draft page, and having two FormuleContexts might be problematic. I think there was another important reason but I can't remember it now.

ui/cap-react/src/antd/admin/components/Header.js

pamfilos · 2024-01-12T13:03:56Z

ui/cap-react/src/antd/admin/components/Header.js

@@ -27,16 +26,14 @@ import { configSchema } from "../utils/schemaSettings";
 import CodeViewer from "../../utils/CodeViewer";
 import { json } from "@codemirror/lang-json";
 import CodeDiffViewer from "../../utils/CodeDiffViewer";
+import { FormuleForm } from "react-formule";


maybe we should export as Form from the formule package (makes more sense). we can import as as FormuleForm here if we want

pamfilos · 2024-01-12T13:40:14Z

ui/cap-react/src/antd/admin/notifications/components/NotificationEdit.js

 import { schema, uiSchema } from "../utils";
 import { DeleteOutlined } from "@ant-design/icons";
+import { FormuleForm } from "react-formule";


same as above

pamfilos · 2024-01-12T13:54:26Z

ui/cap-react/src/antd/drafts/components/Editor/Editor.js

 import { canEdit } from "../../utils/permissions";
-import { debounce } from "lodash-es";
+import { FormuleForm } from "react-formule";


pamfilos · 2024-01-12T13:59:02Z

ui/cap-react/src/antd/forms/formuleConfig.js

+        },
+      },
+    },
+  },


should we add customFiteldTypes for CERNUsers, schemaPathSuggester components?

We don't need it as they're not used in the form editor. schemaPathSuggester is only used for notifications and, actually, CERNUsers is not used anywhere, do we need it?

pamfilos · 2024-01-12T14:01:20Z

ui/cap-react/src/antd/welcome/Contact/Contact.js

-import { ReactComponent as AtlasIcon } from "../img/atlas.svg";
-import { ReactComponent as CmsIcon } from "../img/cms.svg";
-import { ReactComponent as LHCbLogo } from "../img/lhcb-logo.svg";
+import AliceIcon from "../img/alice.svg?react";


The syntax has changed with the latest versions of vite-plugin-svgr

pamfilos · 2024-01-12T14:02:24Z

please rebase also

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

miguelgrc · 2024-02-22T14:32:06Z

Superseded by ##2878 which incorporates all these changes in a squashed commit

miguelgrc force-pushed the externalize-editor branch from f5cf0f9 to cdef0af Compare October 20, 2023 13:52

miguelgrc force-pushed the externalize-editor branch 2 times, most recently from 878b0e3 to b69760f Compare November 14, 2023 17:33

miguelgrc added 6 commits November 14, 2023 18:34

ui: remove form builder components

70e9a16

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

ui: externalize form builder

19cfe5f

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

ui: apply theme also to drafts and other forms

2c87b48

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

ui: add and pass to moses custom cap-only fields

4efeee1

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

ui: add text field autofill to the library

8a8a3e2

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

ui: pass transformSchema to the form builder lib

8e022c4

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

miguelgrc force-pushed the externalize-editor branch from b69760f to 8e022c4 Compare November 14, 2023 17:34

ui: improve dev experience with form builder lib

707edb6

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

miguelgrc force-pushed the externalize-editor branch from beeead6 to 707edb6 Compare November 20, 2023 14:22

miguelgrc added 3 commits November 23, 2023 16:34

ui: temp workaround for border-radius of textarea

10fa738

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

ui: update to vite v5

6b30800

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

ui: replace occurrences of moses with formule

cb3ca10

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

pamfilos requested changes Jan 12, 2024

View reviewed changes

miguelgrc added 2 commits January 16, 2024 16:04

ui: change download name, replace bodyStyle

da3804f

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

global: update with latest master

4e4ce52

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

miguelgrc force-pushed the externalize-editor branch from 048a3e3 to 4e4ce52 Compare January 18, 2024 16:24

Merge branch 'master' into externalize-editor

b5ccd81

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>

This was referenced Feb 20, 2024

ui: rename .js files containing JSX to .jsx #2863

Open

WIP ui: migrate to react-formule #2878

Open

miguelgrc closed this Feb 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP ui: externalize form builder #2859

WIP ui: externalize form builder #2859

miguelgrc commented Oct 20, 2023 •

edited

Loading

pamfilos Dec 20, 2023

miguelgrc Jan 15, 2024

pamfilos Dec 20, 2023

pamfilos Jan 12, 2024

miguelgrc Jan 15, 2024

pamfilos Jan 12, 2024

pamfilos Jan 12, 2024

pamfilos Jan 12, 2024

pamfilos Jan 12, 2024

miguelgrc Jan 15, 2024

pamfilos Jan 12, 2024

miguelgrc Jan 15, 2024

pamfilos commented Jan 12, 2024

miguelgrc commented Feb 22, 2024

WIP ui: externalize form builder #2859

WIP ui: externalize form builder #2859

Conversation

miguelgrc commented Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pamfilos commented Jan 12, 2024

miguelgrc commented Feb 22, 2024

miguelgrc commented Oct 20, 2023 •

edited

Loading