ui: remove form builder components

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

.prettierignore

@@ -6,4 +6,6 @@ yarn.lock
 .gitignore
 Dockerfile
 *.svg
-.npmrc
+.npmrc
+.yalc
+yalc.lock

ui/cap-react/.gitignore

@@ -43,3 +43,6 @@ bundle-stats.html
 cypress/screenshots
 
 .env
+
+.yalc
+yalc.lock

ui/cap-react/package.json

@@ -2,6 +2,7 @@
   "name": "cap-react",
   "version": "0.3.0",
   "description": "CERN Analysis Preservation UI",
+  "type": "module",
   "engines": {
     "npm": ">=3"
   },
@@ -39,12 +40,8 @@
     "@codemirror/state": "6.1.3",
     "@codemirror/view": "6.4.2",
     "@datapunt/matomo-tracker-react": "0.5.1",
-    "@rjsf/antd": "5.8.1",
-    "@rjsf/core": "5.8.1",
-    "@rjsf/utils": "5.8.1",
-    "@rjsf/validator-ajv8": "5.8.1",
     "@sentry/react": "^5.0.0",
-    "@vitejs/plugin-react": "3.1.0",
+    "@vitejs/plugin-react": "^4.2.0",
     "antd": "^5.4.2",
     "axios": "0.27.2",
     "classnames": "2.3.1",
@@ -65,9 +62,8 @@
     "pretty-bytes": "^4.0.2",
     "query-string": "^5.1.0",
     "react": "^18.2.0",
-    "react-dnd": "^9.3.4",
-    "react-dnd-html5-backend": "9.3.4",
     "react-dom": "^18.2.0",
+    "react-formule": "file:.yalc/react-formule",
     "react-infinite-scroll-component": "6.1.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-joyride": "^2.5.4",
@@ -84,8 +80,7 @@
     "redux-thunk": "2.3.0",
     "sanitize-html": "2.4.0",
     "squirrelly": "8.0.8",
-    "vite": "4.2.1",
-    "vite-plugin-svgr": "2.4.0"
+    "vite": "^5.0.2"
   },
   "devDependencies": {
     "autoprefixer": "7.1.4",
@@ -110,6 +105,8 @@
     "replace": "0.3.0",
     "rimraf": "2.6.1",
     "rollup-plugin-visualizer": "5.9.0",
+    "vite-plugin-restart": "^0.4.0",
+    "vite-plugin-svgr": "^4.2.0",
     "vitest": "0.30.1"
   },
   "keywords": [],

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

@@ -0,0 +1,287 @@
+import axios from "../axios";
+import { isEqual } from "lodash-es";
+import { fromJS } from "immutable";
+import { push } from "connected-react-router";
+import { notification } from "antd";
+import { CMS, CMS_NEW } from "../antd/routes";
+import { initFormuleSchemaWithNotifications } from "../antd/admin/utils";
+import { updateDepositGroups } from "./auth";
+import { getFormuleState } from "react-formule";
+
+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_NOTIFICATION_BY_INDEX = "UPDATE_NOTIFICATION_BY_INDEX";
+export const UPDATE_NOTIFICATIONS = "UPDATE_NOTIFICATIONS";
+export const REMOVE_NOTIFICATION = "REMOVE_NOTIFICATION";
+export const CREATE_NOTIFICATION_GROUP = "CREATE_NOTIFICATION_GROUP";
+
+export const SET_SCHEMA_PERMISSIONS = "SET_SCHEMA_PERMISSIONS";
+
+export const synchronizeFormuleState = value => ({
+  type: SYNCHRONIZE_FORMULE_STATE,
+  value,
+});
+
+export const setSchemaLoading = value => ({
+  type: SET_SCHEMA_LOADING,
+  value,
+});
+
+export const updateSchemaConfig = config => ({
+  type: UPDATE_SCHEMA_CONFIG,
+  config,
+});
+
+export const updateNotificationByIndex = data => ({
+  type: UPDATE_NOTIFICATION_BY_INDEX,
+  payload: data,
+});
+
+export const updateNotifications = item => ({
+  type: UPDATE_NOTIFICATIONS,
+  payload: item,
+});
+
+export const deleteNotification = notification => ({
+  type: REMOVE_NOTIFICATION,
+  payload: notification,
+});
+
+export const createNotificationCategory = category => ({
+  type: CREATE_NOTIFICATION_GROUP,
+  path: ["config", "config", "notifications", "actions", category],
+});
+
+export const createNewNotification = category => (dispatch, getState) => {
+  const valuesPath = ["config", "config", "notifications", "actions", category];
+
+  let notifications = fromJS(getState().builder.getIn(valuesPath, []));
+  notifications = notifications.push(fromJS({}));
+
+  dispatch(
+    updateNotifications({
+      path: valuesPath,
+      value: notifications,
+      category,
+      index: notifications.size - 1,
+    })
+  );
+
+  return notifications.size - 1;
+};
+
+export const removeNotification = (index, category) => (dispatch, getState) => {
+  const path = ["config", "config", "notifications", "actions", category];
+  let notification = getState().builder.getIn(path);
+  let newNotification = notification.delete(index);
+  dispatch(deleteNotification({ path, notification: newNotification }));
+};
+
+export const updateNotificationData = (data, index, category) => {
+  return dispatch => {
+    const valuesPath = [
+      "config",
+      "config",
+      "notifications",
+      "actions",
+      category,
+      index,
+    ];
+
+    dispatch(
+      updateNotificationByIndex({ path: valuesPath, value: fromJS(data) })
+    );
+  };
+};
+
+export const getSchema = (name, version = null) => {
+  const schemaLink = version
+    ? `/api/jsonschemas/${name}/${version}?resolve=1&config=1`
+    : `/api/jsonschemas/${name}?resolve=1&config=1`;
+
+  return dispatch => {
+    dispatch(setSchemaLoading(true));
+    axios
+      .get(schemaLink)
+      .then(resp => {
+        let schema = resp.data;
+        let { deposit_schema, deposit_options } = schema;
+
+        if (deposit_schema && deposit_options) {
+          // The schemas are sent to be managed by formule but the config is kept in CAP (see function body)
+          initFormuleSchemaWithNotifications(schema);
+          dispatch(setSchemaLoading(false));
+        }
+      })
+      .catch(() => {
+        dispatch(push(CMS));
+        notification.error({
+          message: "Schema fetch failed",
+          description: "Make sure that schema name and version are correct ",
+        });
+      });
+  };
+};
+
+export const saveSchemaChanges = () => (dispatch, getState) => {
+  const state = getState();
+  const config = state.builder.get("config");
+  const formuleState = getFormuleState();
+  const pathname = state.router.location.pathname;
+  const sendData = {
+    deposit_schema: formuleState.current.schema,
+    deposit_options: formuleState.current.uiSchema,
+    ...config.toJS(),
+  };
+
+  // check if there is no name or version
+  // these fields are required for the schema to be created or updated
+  if (
+    !config.get("name") ||
+    !config.get("version") ||
+    !config.get("fullname")
+  ) {
+    notification.warning({
+      description: "Schema name, fullname and version are required",
+      message: "Missing information",
+    });
+    return;
+  }
+
+  // check whether there are changes to the deposit schema
+  const isSchemaUpdated = !isEqual(
+    formuleState.current.schema,
+    formuleState.initial.schema
+  );
+  // check whether there are changes to the config object
+  const isConfigVersionUpdated =
+    config.get("version") != state.builder.get("initialConfig").version;
+
+  if (isSchemaUpdated && !isConfigVersionUpdated) {
+    notification.warning({
+      message: "These changes require new version",
+      description: "please make sure to update the version of the schema",
+    });
+    return;
+  }
+
+  if (pathname.startsWith(CMS_NEW) || isSchemaUpdated) {
+    return axios
+      .post("/api/jsonschemas", sendData)
+      .then(res => {
+        initFormuleSchemaWithNotifications(res.data);
+        notification.success({
+          message: "New schema created",
+          description: "schema successfully created",
+        });
+        dispatch(updateDepositGroups());
+        dispatch(push(`/admin/${config.get("name")}/${config.get("version")}`));
+      })
+      .catch(err => {
+        let errorHeading, errorMessage;
+        if (typeof err.response.data.message === "object") {
+          let errMsg = Object.entries(err.response.data.message);
+          errorHeading = errMsg[0][0];
+          errorMessage = errMsg[0][1][0];
+        } else {
+          errorHeading = "Schema Creation";
+          errorMessage =
+            err.response.data.message ||
+            "Error while creating, please try again";
+        }
+        notification.error({
+          message: errorHeading,
+          description: errorMessage,
+        });
+      });
+  }
+
+  return axios
+    .put(
+      `/api/jsonschemas/${config.get("name")}/${config.get("version")}`,
+      sendData
+    )
+    .then(() =>
+      notification.success({
+        message: "Schema Updated",
+        description: "changes successfully applied",
+      })
+    )
+    .catch(() =>
+      notification.error({
+        message: "Schema Updates",
+        description: "Error while saving, please try again",
+      })
+    );
+};
+
+export const setSchemaPermissions = permissions => ({
+  type: SET_SCHEMA_PERMISSIONS,
+  permissions,
+});
+
+export const getSchemaPermissions = (name, version = null) => {
+  let schemaPermissionLink;
+
+  if (version)
+    schemaPermissionLink = `/api/jsonschemas/${name}/${version}/permissions`;
+  else schemaPermissionLink = `/api/jsonschemas/${name}/permissions`;
+  return function (dispatch) {
+    axios
+      .get(schemaPermissionLink)
+      .then(resp => {
+        dispatch(setSchemaPermissions(resp.data));
+      })
+      .catch(() => {
+        notification.error({
+          message: "Fetching permissions failed",
+          description: "There was an error fetching the schema permissions",
+        });
+      });
+  };
+};
+
+export const postSchemaPermissions = (name, version = null, permissions) => {
+  let schemaPermissionLink;
+
+  if (version)
+    schemaPermissionLink = `/api/jsonschemas/${name}/${version}/permissions`;
+  else schemaPermissionLink = `/api/jsonschemas/${name}/permissions`;
+  return function (dispatch) {
+    axios
+      .post(schemaPermissionLink, permissions)
+      .then(() => {
+        dispatch(getSchemaPermissions(name, version));
+      })
+      .catch(() => {
+        notification.error({
+          message: "Updating schema permissions failed",
+          description: "There was an error updating the schema permissions",
+        });
+      });
+  };
+};
+
+export const deleteSchemaPermissions = (name, version = null, permissions) => {
+  let schemaPermissionLink;
+
+  if (version)
+    schemaPermissionLink = `/api/jsonschemas/${name}/${version}/permissions`;
+  else schemaPermissionLink = `/api/jsonschemas/${name}/permissions`;
+  return function (dispatch) {
+    axios
+      .delete(schemaPermissionLink, { data: permissions })
+      .then(() => {
+        dispatch(getSchemaPermissions(name, version));
+      })
+      .catch(() => {
+        notification.error({
+          message: "Deleting schema permissions failed",
+          description: "There was an error deleting the schema permissions",
+        });
+      });
+  };
+};