PR 2747 2848

cap/modules/fixtures/schemas/cms.json

@@ -326,7 +326,7 @@
           "ana_notes": {
             "items": {
               "pattern": "^AN-[0-9]{4}/[0-9]{3}$",
-              "placeholder": "e.g. AN-2010-107",
+              "placeholder": "e.g. AN-2010/107",
               "type": "string"
             },
             "type": "array",
@@ -1160,7 +1160,7 @@
         "ui:array": "StringArrayField",
         "items": {
           "ui:options": {
-            "mask":"\\AN-0000-000"
+            "mask":"\\AN-0000/000"
           }
         }
       }

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", () => {

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`;

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,9 +218,15 @@ export function createContentType(content_type) {
   };
 }
 
-export function selectContentType(id) {
+export function selectContentTypeEdit(id) {
   return function (dispatch) {
-    dispatch(push(`${CMS}/${id}`));
+    dispatch(push(`${CMS_EDITOR}/${id}`));
+  };
+}
+
+export function selectContentTypeView(id) {
+  return function (dispatch) {
+    dispatch(push(`${CMS_SCHEMA}/${id}`));
   };
 }
 

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,8 @@ import Footer from "../partials/Footer";
 import DocumentTitle from "../partials/DocumentTitle";
 import { Layout, Row, Spin } from "antd";
 
-import { HOME, WELCOME, ABOUT, POLICY, CMS, SCHEMAS } from "../routes";
+import { HOME, WELCOME, ABOUT, POLICY, CMS } from "../routes";
+
 import ErrorPage from "../utils/ErrorPage";
 import * as Sentry from "@sentry/react";
 import useTrackPageViews from "../hooks/useTrackPageViews";
@@ -65,7 +65,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={SCHEMAS} component={SchemasPage} />
                 <Route path={HOME} component={requireAuth(IndexPage)} />
               </Switch>
             </Suspense>

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>
   );

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

@@ -13,6 +13,9 @@ const PropertyKeyEditorForm = ({
 }) => {
   let type;
 
+  const cleanupSelect = () =>
+    schema.type === "array" ? delete formData.enum : delete formData.items;
+
   // in case we can not define the type of the element from the uiSchema,
   // extract the type from the schema
   if (
@@ -23,6 +26,9 @@ const PropertyKeyEditorForm = ({
   } else {
     if (uiSchema["ui:widget"]) {
       type = uiSchema["ui:widget"];
+      if (uiSchema["ui:widget"] === "select") {
+        cleanupSelect();
+      }
     }
     if (uiSchema["ui:field"]) {
       type = uiSchema["ui:field"];

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>
+    </>
   );
 };
 

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);