ui: move schema viewer under admin

Signed-off-by: Miguel Garcia Garcia <[email protected]>
cernanalysispreservation · Jul 18, 2023 · 2722cd1 · 2722cd1
1 parent 2114a62
commit 2722cd1
Show file tree

Hide file tree

Showing 15 changed files with 249 additions and 119 deletions.
diff --git a/ui/cap-react/cypress/e2e/formBuilder/formBuilder_spec.js b/ui/cap-react/cypress/e2e/formBuilder/formBuilder_spec.js
@@ -1,31 +1,33 @@
-import { CMS } from "../../routes";
+import { CMS, CMS_NEW } from "../../routes";
 
-describe("Form Builder", function() {
+describe("Form Builder", function () {
   // with respect to the current working folder
 
-  it("Select the CMS Analysis from the predefined schems", function() {
+  it("Select the CMS Analysis from the predefined schemas", function () {
     cy.loginUrl("[email protected]", "infoinfo", CMS);
 
     // select the div contains the CMS Analysis text
     cy.get("[data-cy=admin-predefined-content]")
       .contains("CMS Analysis")
       .click();
+    cy.get("[data-cy=editSchemaButton]").click();
 
     cy.url().should("include", "cms-analysis");
   });
 
-  it("Select the CMS Statistics Questionnaire from the predefined schems", function() {
+  it("Select the CMS Statistics Questionnaire from the predefined schemas", function () {
     cy.loginUrl("[email protected]", "infoinfo", CMS);
 
     // select the div contains the CMS Analysis text
     cy.get("[data-cy=admin-predefined-content]")
       .contains("CMS Statistics Questionnaire")
       .click();
+    cy.get("[data-cy=editSchemaButton]").click();
 
     cy.url().should("include", "cms-stats-questionnaire");
   });
 
-  it("Start a new schema on your own", function() {
+  it("Start a new schema on your own", function () {
     cy.loginUrl("[email protected]", "infoinfo", CMS);
 
     const name = "Name of the form";
@@ -38,7 +40,7 @@ describe("Form Builder", function() {
     // create the form
     cy.get("[data-cy=admin-form-submit]").click();
 
-    cy.url().should("include", `${CMS}/new`);
+    cy.url().should("include", CMS_NEW);
   });
 
   // it("Download Schema File", () => {

diff --git a/ui/cap-react/cypress/routes/index.js b/ui/cap-react/cypress/routes/index.js
@@ -7,11 +7,13 @@ export const SEARCH_TIPS = "/search-tips";
 export const STATUS = "/status";
 
 export const CMS = "/admin";
-export const CMS_NEW = `${CMS}/new`;
-export const CMS_SCHEMA_PATH = `${CMS}/:schema_name?/:schema_version?`;
-export const CMS_NOTIFICATION = `${CMS_SCHEMA_PATH}/notifications/:category?`;
-export const CMS_NOTIFICATION_CATEGORY = `${CMS_NOTIFICATION}/:category`;
-export const CMS_NOTIFICATION_EDIT = `${CMS_NOTIFICATION_CATEGORY}/:id`;
+export const CMS_SCHEMA = `${CMS}/schema`;
+export const CMS_SCHEMA_PATH = `${CMS}/schema/:schema_name/:schema_version?`;
+export const CMS_EDITOR = `${CMS}/editor`;
+export const CMS_NEW = `${CMS_EDITOR}/new`;
+export const CMS_EDITOR_PATH = `${CMS_EDITOR}/:schema_name?/:schema_version?`;
+export const COLLECTION_BASE = "/collection";
+export const COLLECTION = `${COLLECTION_BASE}/:collection_name/:version?`;
 
 export const DRAFTS = "/drafts";
 export const DRAFT_ITEM = `${DRAFTS}/:draft_id`;

diff --git a/ui/cap-react/src/actions/schemaWizard.js b/ui/cap-react/src/actions/schemaWizard.js
@@ -3,7 +3,7 @@ import { merge } 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 { CMS, CMS_EDITOR, CMS_NEW, CMS_SCHEMA } from "../antd/routes";
 import { slugify, _initSchemaStructure } from "../antd/admin/utils";
 import { updateDepositGroups } from "./auth";
 
@@ -218,12 +218,18 @@ export function createContentType(content_type) {
   };
 }
 
-export function selectContentType(id) {
+export function selectContentTypeEdit(id) {
   return function (dispatch) {
     dispatch(push(`${CMS_EDITOR}/${id}`));
   };
 }
 
+export function selectContentTypeView(id) {
+  return function (dispatch) {
+    dispatch(push(`${CMS_SCHEMA}/${id}`));
+  };
+}
+
 export function selectFieldType(path, change) {
   return function (dispatch) {
     dispatch(updateByPath(path, change));

diff --git a/ui/cap-react/src/antd/App/App.js b/ui/cap-react/src/antd/App/App.js
@@ -6,7 +6,6 @@ import IndexPage from "../index/IndexPage";
 
 import AboutPage from "../about";
 import PolicyPage from "../policy";
-import SchemasPage from "../schemas";
 
 import noRequireAuth from "../auth/NoAuthorizationRequired";
 import requireAuth from "../auth/AuthorizationRequired";
@@ -17,7 +16,7 @@ import Footer from "../partials/Footer";
 import DocumentTitle from "../partials/DocumentTitle";
 import { Layout, Row, Spin } from "antd";
 
-import { HOME, WELCOME, ABOUT, POLICY, CMS, SCHEMA } from "../routes";
+import { HOME, WELCOME, ABOUT, POLICY, CMS } from "../routes";
 
 import ErrorPage from "../utils/ErrorPage";
 import * as Sentry from "@sentry/react";
@@ -64,7 +63,6 @@ const App = ({ initCurrentUser, loadingInit, history, roles }) => {
                 <Route path={ABOUT} component={AboutPage} />
                 <Route path={POLICY} component={PolicyPage} />
                 {isAdmin && <Route path={CMS} component={AdminPage} />}
-                <Route path={SCHEMA} component={SchemasPage} />
                 <Route path={HOME} component={requireAuth(IndexPage)} />
               </Switch>
             </Suspense>

diff --git a/ui/cap-react/src/antd/Root.js b/ui/cap-react/src/antd/Root.js
@@ -4,8 +4,7 @@ import { Provider } from "react-redux";
 import App from "../antd/App";
 import { ConfigProvider } from "antd";
 import { MatomoProvider, createInstance } from "@datapunt/matomo-tracker-react";
-
-const PRIMARY_COLOR = "#006996";
+import { PRIMARY_COLOR } from "./utils";
 
 export const matomoInstance =
   process.env.PIWIK_URL && process.env.PIWIK_SITEID

diff --git a/ui/cap-react/src/antd/admin/Admin.js b/ui/cap-react/src/antd/admin/Admin.js
@@ -1,15 +1,17 @@
 import DocumentTitle from "../partials/DocumentTitle";
 import { Switch, Route } from "react-router-dom";
-import { CMS, CMS_NEW, CMS_SCHEMA_PATH } from "../routes";
+import { CMS, CMS_NEW, CMS_EDITOR_PATH, CMS_SCHEMA_PATH } from "../routes";
 import AdminIndex from "./components/AdminIndex";
 import AdminPanel from "./containers/AdminPanel";
+import SchemasPage from "../schemas";
 
 const Admin = () => {
   return (
     <DocumentTitle title={"Admin Page"}>
       <Switch>
-        <Route path={CMS} exact component={AdminIndex} />
-        <Route path={[CMS_SCHEMA_PATH, CMS_NEW]} component={AdminPanel} />
+        <Route path={CMS_SCHEMA_PATH} component={SchemasPage} />
+        <Route path={[CMS_EDITOR_PATH, CMS_NEW]} component={AdminPanel} />
+        <Route path={CMS} component={AdminIndex} />
       </Switch>
     </DocumentTitle>
   );

diff --git a/ui/cap-react/src/antd/admin/components/SelectContentType.js b/ui/cap-react/src/antd/admin/components/SelectContentType.js
@@ -1,20 +1,56 @@
 import PropTypes from "prop-types";
-import { Space, Tag } from "antd";
-const SelectContentType = ({ contentTypes, select }) => {
+import { Button, Col, Row, Space } from "antd";
+import CheckableTag from "antd/es/tag/CheckableTag";
+import { useState } from "react";
+import { PRIMARY_COLOR } from "../../utils";
+import { EditOutlined, EyeOutlined } from "@ant-design/icons";
+const SelectContentType = ({ contentTypes, selectEdit, selectView }) => {
+  const [selectedTag, setSelectedTag] = useState();
+
   return (
-    <Space style={{ width: "100%", flexWrap: "wrap" }}>
-      {contentTypes &&
-        contentTypes.map(item => (
-          <Tag
-            className="hoverPointer"
-            onClick={() => select(item.get("deposit_group"))}
-            key={item.get("deposit_group")}
-            data-cy={"admin-predefined-content"}
+    <>
+      <Space size={[0, 8]} wrap>
+        {contentTypes &&
+          contentTypes.map(item => (
+            <CheckableTag
+              style={{ border: `1px solid ${PRIMARY_COLOR}` }}
+              onChange={checked =>
+                checked
+                  ? setSelectedTag(item.get("deposit_group"))
+                  : setSelectedTag(undefined)
+              }
+              checked={selectedTag === item.get("deposit_group")}
+              key={item.get("deposit_group")}
+              data-cy={"admin-predefined-content"}
+            >
+              {item.get("name")}
+            </CheckableTag>
+          ))}
+      </Space>
+      <Row justify="center" gutter={10} style={{ marginTop: "25px" }}>
+        <Col>
+          <Button
+            disabled={!selectedTag}
+            onClick={() => selectView(selectedTag)}
+            icon={<EyeOutlined />}
+            data-cy="viewSchemaButton"
+          >
+            View
+          </Button>
+        </Col>
+        <Col>
+          <Button
+            disabled={!selectedTag}
+            onClick={() => selectEdit(selectedTag)}
+            type="primary"
+            icon={<EditOutlined />}
+            data-cy="editSchemaButton"
           >
-            {item.get("name")}
-          </Tag>
-        ))}
-    </Space>
+            Edit
+          </Button>
+        </Col>
+      </Row>
+    </>
   );
 };
 

diff --git a/ui/cap-react/src/antd/admin/containers/SelectContentType.js b/ui/cap-react/src/antd/admin/containers/SelectContentType.js
@@ -1,20 +1,21 @@
 import { connect } from "react-redux";
 import SelectContentType from "../components/SelectContentType";
-import { selectContentType } from "../../../actions/schemaWizard";
+import {
+  selectContentTypeEdit,
+  selectContentTypeView,
+} from "../../../actions/schemaWizard";
 
 function mapStateToProps(state) {
   return {
-    contentTypes: state.auth.getIn(["currentUser", "depositGroups"])
+    contentTypes: state.auth.getIn(["currentUser", "depositGroups"]),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    select: id => dispatch(selectContentType(id))
+    selectEdit: id => dispatch(selectContentTypeEdit(id)),
+    selectView: id => dispatch(selectContentTypeView(id)),
   };
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SelectContentType);
+export default connect(mapStateToProps, mapDispatchToProps)(SelectContentType);
diff --git a/ui/cap-react/src/antd/admin/formComponents/HoverBox.js b/ui/cap-react/src/antd/admin/formComponents/HoverBox.js
@@ -1,6 +1,7 @@
 import { useDrop } from "react-dnd";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { PRIMARY_COLOR } from "../../utils";
 
 function getStyle(isOverCurrent) {
   const style = {
@@ -10,7 +11,7 @@ function getStyle(isOverCurrent) {
 
   return isOverCurrent
     ? {
-        outline: "1px solid #006996",
+        outline: `1px solid ${PRIMARY_COLOR}`,
         outlineOffset: "-1px",
         ...style,
       }

diff --git a/ui/cap-react/src/antd/routes/index.js b/ui/cap-react/src/antd/routes/index.js
@@ -5,12 +5,13 @@ export const ABOUT = "/about";
 export const POLICY = "/policy";
 export const SEARCH_TIPS = "/search-tips";
 export const STATUS = "/status";
-export const SCHEMA = "/admin/schema/:schema_name/:schema_version?";
 
 export const CMS = "/admin";
+export const CMS_SCHEMA = `${CMS}/schema`;
+export const CMS_SCHEMA_PATH = `${CMS}/schema/:schema_name/:schema_version?`;
 export const CMS_EDITOR = `${CMS}/editor`;
 export const CMS_NEW = `${CMS_EDITOR}/new`;
-export const CMS_SCHEMA_PATH = `${CMS_EDITOR}/:schema_name?/:schema_version?`;
+export const CMS_EDITOR_PATH = `${CMS_EDITOR}/:schema_name?/:schema_version?`;
 export const COLLECTION_BASE = "/collection";
 export const COLLECTION = `${COLLECTION_BASE}/:collection_name/:version?`;