Skip to content

Commit

Permalink
ui: refactor config store, formule 1.2 and fixes
Browse files Browse the repository at this point in the history
Signed-off-by: Miguel Garcia Garcia <[email protected]>
  • Loading branch information
miguelgrc committed Sep 30, 2024
1 parent 114b3de commit a918d29
Show file tree
Hide file tree
Showing 14 changed files with 67 additions and 47 deletions.
2 changes: 1 addition & 1 deletion ui/cap-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"query-string": "^5.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-formule": "1.1.1",
"react-formule": "1.2.0",
"react-infinite-scroll-component": "6.1.0",
"react-input-mask": "3.0.0-alpha.2",
"react-joyride": "^2.5.4",
Expand Down
8 changes: 7 additions & 1 deletion ui/cap-react/src/actions/builder.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion ui/cap-react/src/antd/admin/components/AdminPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 1 addition & 2 deletions ui/cap-react/src/antd/admin/components/CreateForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

Expand Down
8 changes: 5 additions & 3 deletions ui/cap-react/src/antd/admin/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
6 changes: 1 addition & 5 deletions ui/cap-react/src/antd/admin/containers/Header.js
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -18,7 +15,6 @@ function mapDispatchToProps(dispatch) {
return {
saveSchemaChanges: () => dispatch(saveSchemaChanges()),
pushPath: path => dispatch(pushPath(path)),
updateSchemaConfig: config => dispatch(updateSchemaConfig(config)),
};
}

Expand Down
24 changes: 21 additions & 3 deletions ui/cap-react/src/antd/admin/permissions/Permissions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 = (
Expand Down Expand Up @@ -205,10 +223,10 @@ Permissions.propTypes = {

const mapStateToProps = state => {
return {
schemaName: state.builder.get("formuleState").config.name,
schemaVersion: state.builder.get("formuleState").config.version,
permissions: state.builder.get("permissions"),
config: state.builder.get("config"),
schemaName: state.builder.getIn(["config", "name"]),
schemaVersion: state.builder.get(["config", "version"]),
};
};

Expand Down
26 changes: 11 additions & 15 deletions ui/cap-react/src/antd/admin/utils/index.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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));
};
6 changes: 4 additions & 2 deletions ui/cap-react/src/antd/drafts/components/Editor/Editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,11 @@ 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}
// FIXME: this is a temporary fix for tab field content not refreshing on isPublished/readonly change
key={mode}
/>
</Layout.Content>
</Layout>
Expand Down
17 changes: 9 additions & 8 deletions ui/cap-react/src/antd/forms/customFields/services/CAPDeposit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,22 @@ import PropTypes from "prop-types";
import { Card, Divider, Modal, Space, Tag, Typography } from "antd";
import { EyeFilled, LinkOutlined } from "@ant-design/icons";
import { useState } from "react";
import { CodeEditor } from "react-formule";
import { CodeViewer } from "react-formule";

const CAPDeposit = ({ data }) => {
const [showModal, setShowModal] = useState(false);

console.log(JSON.stringify(data, null, 2));

return (
<>
<Modal open={showModal} onCancel={() => setShowModal(false)}>
<CodeEditor
<Modal
open={showModal}
onCancel={() => setShowModal(false)}
footer={null}
width={1000}
>
<CodeViewer
lang="json"
initialValue={JSON.stringify(data, null, 2)}
lint="json"
isEditable={false} // TODO: Change to !isEditable?
value={JSON.stringify(data, null, 2)}
height="calc(100vh - 325px)"
/>
</Modal>
Expand Down
2 changes: 2 additions & 0 deletions ui/cap-react/src/antd/forms/formuleConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import CernUsers from "./customFields/CernUsers";
import CapFiles from "./customFields/CapFiles";
import IdFetcher from "./customFields/IdFetcher";
import ImportDataField from "./customFields/ImportDataField";
import SchemaPathSuggester from "./customFields/SchemaPathSuggester";

export const customFieldTypes = {
advanced: {
Expand Down Expand Up @@ -202,4 +203,5 @@ export const customFields = {
CapFiles: CapFiles,
idFetcher: IdFetcher,
importData: ImportDataField,
schemaPathSuggester: SchemaPathSuggester,
};
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const JSONSchemaPreviewer = ({
readonlyPreview: true,
isPublished: isPublished,
}}
isPublished
>
{children}
</FormuleForm>
Expand Down
3 changes: 3 additions & 0 deletions ui/cap-react/src/reducers/builder.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Map, fromJS } from "immutable";

import {
UPDATE_SCHEMA_CONFIG,
UPDATE_SCHEMA_INITIAL_CONFIG,
UPDATE_NOTIFICATION_BY_INDEX,
UPDATE_NOTIFICATIONS,
REMOVE_NOTIFICATION,
Expand All @@ -26,6 +27,8 @@ export default function schemaReducer(state = initialState, action) {
return state.set("loading", action.value);
case UPDATE_SCHEMA_CONFIG:
return state.set("config", fromJS(action.config));
case UPDATE_SCHEMA_INITIAL_CONFIG:
return state.set("initialConfig", fromJS(action.config));
case UPDATE_NOTIFICATION_BY_INDEX:
return state.setIn(action.payload.path, action.payload.value);
case UPDATE_NOTIFICATIONS:
Expand Down
6 changes: 0 additions & 6 deletions ui/cap-react/src/style.less
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,3 @@ body,
border-radius: 2px;
font-family: "Titillium Web";
}

.__PublishedForm__ {
textarea {
resize: none;
}
}

0 comments on commit a918d29

Please sign in to comment.