ui: formule to 1.3.0, update schema saving/loading

Signed-off-by: Miguel Garcia Garcia <[email protected]>

Author: miguelgrc

.pre-commit-config.yaml

@@ -14,7 +14,7 @@ repos:
         args: ["--config=.flake8"]
 
   - repo: https://github.com/pycqa/isort
-    rev: "5.10.1"
+    rev: "5.12.0"
     hooks:
       - id: isort
 

ui/cap-react/package.json

@@ -57,7 +57,7 @@
     "query-string": "^5.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-formule": "1.2.1",
+    "react-formule": "1.3.0",
     "react-infinite-scroll-component": "6.1.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-joyride": "^2.5.4",

ui/cap-react/src/actions/builder.js

@@ -12,6 +12,7 @@ export const SYNCHRONIZE_FORMULE_STATE = "SYNCHRONIZE_FORMULE_STATE";
 
 export const SET_SCHEMA_LOADING = "SET_SCHEMA_LOADING";
 export const UPDATE_SCHEMA_CONFIG = "UPDATE_SCHEMA_CONFIG";
+export const UPDATE_SCHEMA_INITIAL_CONFIG = "UPDATE_SCHEMA_INITIAL_CONFIG";
 
 export const UPDATE_NOTIFICATION_BY_INDEX = "UPDATE_NOTIFICATION_BY_INDEX";
 export const UPDATE_NOTIFICATIONS = "UPDATE_NOTIFICATIONS";
@@ -35,6 +36,11 @@ export const updateSchemaConfig = config => ({
   config,
 });
 
+export const updateSchemaInitialConfig = config => ({
+  type: UPDATE_SCHEMA_INITIAL_CONFIG,
+  config,
+});
+
 export const updateNotificationByIndex = data => ({
   type: UPDATE_NOTIFICATION_BY_INDEX,
   payload: data,
@@ -158,7 +164,7 @@ export const saveSchemaChanges = () => (dispatch, getState) => {
   );
   // check whether there are changes to the config object
   const isConfigVersionUpdated =
-    config.get("version") != state.builder.get("initialConfig").version;
+    config.get("version") != state.builder.getIn(["initialConfig", "version"]);
 
   if (isSchemaUpdated && !isConfigVersionUpdated) {
     notification.warning({

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

@@ -46,7 +46,7 @@ const AdminPanel = ({ location, match, getSchema, loading, formuleState }) => {
       case "notifications":
         return <Notifications />;
       case "permissions":
-        return <Permissions />;
+        return <Permissions isNew={match.params.schema_name === "new"} />;
       default:
         return (
           <SchemaWizard

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

@@ -6,8 +6,7 @@ import { initFormuleSchemaWithNotifications } from "../utils";
 const CreateForm = ({ history }) => {
   const onFinish = content => {
     let { name, description } = content;
-    const config = { config: { fullname: name } };
-    initFormuleSchemaWithNotifications({ config }, name, description);
+    initFormuleSchemaWithNotifications({ fullname: name }, name, description);
     history.push(CMS_NEW);
   };
 

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

@@ -59,10 +59,12 @@ const Header = ({
 
     const a = document.createElement("a");
     const file = new Blob([fileData], { type: "text/json" });
+    const { name, version } = config.toJS();
+    const versionStr = version ? `v${version}` : "";
     a.href = URL.createObjectURL(file);
-    a.download = `${config.toJS().name || "cap-schema"}-export-v${
-      config.toJS().version
-    }-${Date.now()}.json`;
+    a.download = `${
+      name || "cap-schema"
+    }-export${versionStr}-${Date.now()}.json`;
     a.click();
   };
   const _renderSchemaPreview = schemaPreviewDisplay => {

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

@@ -1,8 +1,5 @@
 import { connect } from "react-redux";
-import {
-  saveSchemaChanges,
-  updateSchemaConfig,
-} from "../../../actions/builder";
+import { saveSchemaChanges } from "../../../actions/builder";
 import { pushPath } from "../../../actions/support";
 import Header from "../components/Header";
 
@@ -18,7 +15,6 @@ function mapDispatchToProps(dispatch) {
   return {
     saveSchemaChanges: () => dispatch(saveSchemaChanges()),
     pushPath: path => dispatch(pushPath(path)),
-    updateSchemaConfig: config => dispatch(updateSchemaConfig(config)),
   };
 }
 

ui/cap-react/src/antd/admin/permissions/Permissions.js

@@ -29,6 +29,23 @@ import {
 import { configSchema } from "../utils/schemaSettings";
 import { FormuleForm } from "react-formule";
 
+// Left as documentation
+/*
+  const initialStatePermissions = Map({
+    deposit: {
+      read: { users: [], roles: [] },
+      update: { users: [], roles: [] },
+      admin: { users: [], roles: [] },
+      review: { users: [], roles: [] },
+      create: { users: [], roles: [] },
+    },
+    records: {
+      read: { users: [], roles: [] },
+      review: { users: [], roles: [] },
+    },
+  });
+*/
+
 const Permissions = ({
   schemaName,
   schemaVersion,
@@ -38,11 +55,12 @@ const Permissions = ({
   deleteSchemaPermissions,
   config,
   updateSchemaConfig,
+  isNew,
 }) => {
   const [editable, setEditable] = useState(false);
   const [addEnabled, setAddEnabled] = useState(false);
   useEffect(() => {
-    getSchemaPermissions(schemaName, schemaVersion);
+    !isNew && getSchemaPermissions(schemaName, schemaVersion);
   }, []);
 
   const addSchemaPermissionsToEmail = (
@@ -148,7 +166,7 @@ const Permissions = ({
                         <Typography.Paragraph style={{ marginBottom: 0 }}>
                           Here you can manage access to your{" "}
                           <Typography.Text strong>
-                            {schemaName} ({schemaVersion})
+                            {schemaName} {schemaVersion && `(${schemaVersion})`}
                           </Typography.Text>{" "}
                           collection. You can determine who can perform specific
                           action for both states of your document
@@ -205,8 +223,8 @@ Permissions.propTypes = {
 
 const mapStateToProps = state => {
   return {
-    schemaName: state.builder.get("formuleState").config.name,
-    schemaVersion: state.builder.get("formuleState").config.version,
+    schemaName: state.builder.getIn(["config", "name"]),
+    schemaVersion: state.builder.getIn(["config", "version"]),
     permissions: state.builder.get("permissions"),
     config: state.builder.get("config"),
   };

ui/cap-react/src/antd/admin/utils/index.js

@@ -1,7 +1,10 @@
 import { initFormuleSchema } from "react-formule";
 import { merge } from "lodash-es";
 import store from "../../../store/configureStore";
-import { updateSchemaConfig } from "../../../actions/builder";
+import {
+  updateSchemaConfig,
+  updateSchemaInitialConfig,
+} from "../../../actions/builder";
 
 export const SIZE_OPTIONS = {
   xsmall: 8,
@@ -20,25 +23,18 @@ const NOTIFICATIONS = {
   },
 };
 
-export const slugify = text => {
-  return text
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, "-") // Replace spaces with -
-    .replace(/[^\w-]+/g, "") // Remove all non-word chars
-    .replace(/--+/g, "-") // Replace multiple - with single -
-    .replace(/^-+/, "") // Trim - from start of text
-    .replace(/-+$/, ""); // Trim - from end of text
-};
-
 export const initFormuleSchemaWithNotifications = (
   data = {},
-  name,
+  title,
   description
 ) => {
   data.config = merge(data.config || {}, NOTIFICATIONS);
-  initFormuleSchema(data, name, description);
-  /* eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
   const { deposit_schema, deposit_options, ...configs } = data;
+  initFormuleSchema(
+    { schema: deposit_schema, uiSchema: deposit_options, id: configs.name },
+    title,
+    description
+  );
   store.dispatch(updateSchemaConfig(configs));
+  store.dispatch(updateSchemaInitialConfig(configs));
 };

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

@@ -64,8 +64,8 @@ const Editor = ({
             schema={_schema}
             uiSchema={schemas.uiSchema || {}}
             extraErrors={extraErrors || {}}
-            draftEditor
-            readonly={mode != "edit" || !canEdit(canAdmin, canUpdate)}
+            readonly={!canEdit(canAdmin, canUpdate)}
+            isPublished={mode != "edit"}
             transformErrors={transformErrors}
           />
         </Layout.Content>