cernanalysispreservation · pamfilos · Sep 6, 2023 · Jul 21, 2023 · Jul 25, 2023 · Jul 25, 2023
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -1,3 +1,5 @@
+- [News](./news.md)
+
 ### DOCUMENTATION
 
 - [Introduction](./introduction.md)
@@ -22,7 +24,8 @@
 - [Sharing your analysis](./share_analysis.md)
 - [How to search](./search.md)
 - [Workflows](./workflows.md)
-
+- [Collections](./collections.md)
+- [Admin panel](./admin.md)
 
 ### Tutorials
 

diff --git a/docs/admin.md b/docs/admin.md
@@ -0,0 +1,19 @@
+# Admin panel
+
+The admin panel lets you access existing schemas for your collaboration to either view or edit them, as well as create new schemas or import them from JSON files. It is only accessible by users with admin privileges in the collaboration.
+
+If you have such privileges, you can access the admin panel at https://analysispreservation.cern.ch/admin or by clicking on the _Admin_ button at the bottom right of the screen in CAP.
+
+The tools available in the admin section are listed below.
+
+## Schema viewer
+
+The schema viewer displays the JSON schemas and lets you do manual changes to certain parts of them. You can use the diff view to see your changes, and you can easily revert or save them.
+
+## Form builder
+
+The form builder is a powerful tool which makes it easy to interactively create and edit forms. It includes a **tour** that we encourage you to follow in order to understand the basics of the tool. The tour is automatically run on your first visit to the admin, and can be run manually whenever you needed by clicking on the _Tour_ button in the bottom right corner of the form builder.
+
+## Notifications
+
+The notifications tab allows you to define notifications for a given category. You can add as many notifications as you want, each of them with a different content and addressed to different people. The email notifications can contain information directly extracted from the form, using the provided _context options_.
diff --git a/docs/collections.md b/docs/collections.md
@@ -0,0 +1,8 @@
+# Collections
+
+The collections page is a centralized place from which you can access all drafts and published records for that collection, being able to **filter** by version.
+
+It contains a **permissions** table showing all permissions assigned to users, which are applied globally to all records in the collection.
+Each entry indicates the type of the user (egroup or user), and its permissions for read, create, review, update and admin, for both drafts (D) and published records (P).
+
+Admins are also able to define a **readme** for the collection, which can be useful to provide some instructions for other members of the collaboration.
diff --git a/docs/introduction.md b/docs/introduction.md
@@ -12,6 +12,8 @@ Find our contact information [here](./support.md).
 
 ## Overview
 
+- [News](./news.md)
+
 ##### DOCUMENTATION
 
 - [Introduction](./introduction.md)
@@ -34,6 +36,8 @@ Find our contact information [here](./support.md).
 - [Sharing your analysis](./share_analysis.md)
 - [How to search](./search.md)
 - [Workflows](./workflows.md)
+- [Collections](./collections.md)
+- [Admin panel](./admin.md)
 
 ##### Tutorials
 
@@ -50,6 +54,7 @@ Find our contact information [here](./support.md).
 ---
 
 - [FAQ](./faq.md)
+- [Glossary](./GLOSSARY.md)
 - [Related Projects](./related-projects.md)
 
 ---

diff --git a/docs/news.md b/docs/news.md
@@ -0,0 +1 @@
+# News
diff --git a/ui/cap-react/index.html b/ui/cap-react/index.html
@@ -9,6 +9,8 @@
   </head>
   <body>
     <div id="app"></div>
+    <!-- Needed for react-joyride with Vite -->
+    <script>window.global = window;</script>
     <script type="module" src="./src/index.js"></script>
   </body>
 </html>
diff --git a/ui/cap-react/package.json b/ui/cap-react/package.json
@@ -69,6 +69,7 @@
     "react-dnd-html5-backend": "9.3.4",
     "react-dom": "^18.2.0",
     "react-input-mask": "3.0.0-alpha.2",
+    "react-joyride": "^2.5.4",
     "react-markdown-editor-lite": "1.2.4",
     "react-redux": "6.0.0",
     "react-router": "^4.3.1",

diff --git a/ui/cap-react/src/antd/App/App.js b/ui/cap-react/src/antd/App/App.js
@@ -23,6 +23,7 @@ import * as Sentry from "@sentry/react";
 import useTrackPageViews from "../hooks/useTrackPageViews";
 import { lazy } from "react";
 import Loading from "../routes/Loading/Loading";
+import MessageBanner from "../partials/MessageBanner";
 
 const AdminPage = lazy(() => import("../admin"));
 
@@ -55,6 +56,7 @@ const App = ({ initCurrentUser, loadingInit, history, roles }) => {
         <Layout className="__mainLayout__">
           <Layout.Header className="__mainHeader__">
             <Header />
+            <MessageBanner />
           </Layout.Header>
           <Layout.Content className="__mainContent__">
             <Suspense fallback={<Loading pastDelay />}>

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 { theme } from "./utils/theme";
 
 export const matomoInstance =
   process.env.PIWIK_URL && process.env.PIWIK_SITEID
@@ -20,18 +19,7 @@ const Root = ({ store, history }) => {
     <Provider store={store}>
       <MatomoProvider value={matomoInstance}>
         <ConnectedRouter history={history}>
-          <ConfigProvider
-            theme={{
-              token: {
-                colorPrimary: PRIMARY_COLOR,
-                colorLink: PRIMARY_COLOR,
-                colorLinkHover: "#1a7fa3",
-                borderRadius: 2,
-                colorBgLayout: "#f0f2f5",
-                fontFamily: "Titillium Web",
-              },
-            }}
-          >
+          <ConfigProvider theme={theme}>
             <App />
           </ConfigProvider>
         </ConnectedRouter>

diff --git a/ui/cap-react/src/antd/admin/components/AdminPanel.js b/ui/cap-react/src/antd/admin/components/AdminPanel.js
@@ -5,7 +5,13 @@ import { CMS_NEW } from "../../routes";
 import DocumentTitle from "../../partials/DocumentTitle";
 import SchemaWizard from "../containers/SchemaWizard";
 import Notifications from "../notifications/containers/Notifications";
-import { Layout } from "antd";
+import { FloatButton, Layout } from "antd";
+import Joyride, { STATUS } from "react-joyride";
+import { steps } from "../utils/tour/admin";
+import TourTooltip from "../utils/tour/TourTooltip";
+import { CarOutlined } from "@ant-design/icons";
+import useStickyState from "../../hooks/useStickyState";
+import { PRIMARY_COLOR } from "../../utils/theme";
 
 const AdminPanel = ({ location, match, schema, schemaInit, getSchema }) => {
   useEffect(() => {
@@ -24,16 +30,48 @@ const AdminPanel = ({ location, match, schema, schemaInit, getSchema }) => {
 
   const [display, setDisplay] = useState("builder");
 
+  const [tourDone, setTourDone] = useStickyState(false, "tourDone");
+
   const getPageTitle = () =>
     location.pathname.includes("notifications")
       ? "Notifications"
       : "Form Builder";
+
   return (
     <DocumentTitle title={getPageTitle()}>
       <Layout style={{ height: "100%", padding: 0 }}>
         <Header display={display} setDisplay={setDisplay} />
         <Layout.Content>
+          <Joyride
+            steps={steps}
+            continuous
+            disableCloseOnEsc
+            showProgress
+            showSkipButton
+            hideCloseButton
+            spotlightPadding={0}
+            tooltipComponent={joyrideProps => (
+              <TourTooltip total={steps.length} {...joyrideProps} />
+            )}
+            run={!tourDone && display != "notifications"}
+            spotlightClicks
+            callback={({ status }) =>
+              [STATUS.FINISHED, STATUS.SKIPPED].includes(status) &&
+              setTourDone(true)
+            }
+            styles={{
+              options: { primaryColor: PRIMARY_COLOR },
+              spotlight: { borderRadius: 0 },
+            }}
+          />
           {display === "notifications" ? <Notifications /> : <SchemaWizard />}
+          <FloatButton
+            icon={<CarOutlined />}
+            type="primary"
+            shape="square"
+            description="Tour"
+            onClick={() => setTourDone(false)}
+          />
         </Layout.Content>
       </Layout>
     </DocumentTitle>

diff --git a/ui/cap-react/src/antd/admin/components/Draggable.js b/ui/cap-react/src/antd/admin/components/Draggable.js
@@ -19,7 +19,7 @@ const Draggable = ({ data, children }) => {
   const opacity = isDragging ? 0.4 : 1;
 
   return (
-    <div ref={drag} style={{ ...style, opacity }}>
+    <div ref={drag} style={{ ...style, opacity }} className={data.className}>
       {children}
     </div>
   );

diff --git a/ui/cap-react/src/antd/admin/components/Header.js b/ui/cap-react/src/antd/admin/components/Header.js
@@ -105,11 +105,16 @@ const Header = ({
     return previews[schemaPreviewDisplay]; //?
   };
 
-  const getMenuItem = (key, label, icon, onClick, type) => ({
+  const getMenuItem = (key, label, icon, onClick, className) => ({
     key,
     label: (
       <Tooltip title={!screens.lg && label}>
-        <Button icon={icon} type={type || "text"} onClick={onClick}>
+        <Button
+          icon={icon}
+          type={key === "save" ? "primary" : "text"}
+          onClick={onClick}
+          className={className}
+        >
           {screens.lg && label}
         </Button>
       </Tooltip>
@@ -213,6 +218,7 @@ const Header = ({
               key: "notifications",
               label: "Notifications",
               icon: <NotificationOutlined />,
+              className: "tour-notifications-tab",
             },
           ]}
         />
@@ -229,18 +235,22 @@ const Header = ({
             getMenuItem("export", "Export Schema", <DownloadOutlined />, () =>
               _getSchema()
             ),
-            getMenuItem("diff", "Diff", <DiffOutlined />, () =>
-              setDiffModal(true)
-            ),
-            getMenuItem("settings", "Settings", <SettingOutlined />, () =>
-              setSettingsModal(true)
+            getMenuItem(
+              "diff",
+              "Diff",
+              <DiffOutlined />,
+              () => setDiffModal(true),
+              "tour-diff"
             ),
             getMenuItem(
-              "save",
-              "Save updates",
-              <SaveOutlined />,
-              () => saveSchemaChanges(),
-              "primary"
+              "settings",
+              "Settings",
+              <SettingOutlined />,
+              () => setSettingsModal(true),
+              "tour-schema-settings"
+            ),
+            getMenuItem("save", "Save updates", <SaveOutlined />, () =>
+              saveSchemaChanges()
             ),
           ]}
         />

diff --git a/ui/cap-react/src/antd/admin/components/SchemaPreview.js b/ui/cap-react/src/antd/admin/components/SchemaPreview.js
@@ -30,6 +30,7 @@ const SchemaPreview = ({ schema, selectProperty }) => {
           shape="circle"
           icon={<SettingOutlined />}
           onClick={() => selectProperty({ schema: [], uiSchema: [] })}
+          className="tour-root-settings"
         />
       </Row>
       <Row style={{ padding: "0 10px" }}>

diff --git a/ui/cap-react/src/antd/admin/components/SchemaWizard.js b/ui/cap-react/src/antd/admin/components/SchemaWizard.js
@@ -25,6 +25,7 @@ const SchemaWizard = ({ field, loader }) => {
             height: "100%",
             display: "flex",
           }}
+          className="tour-field-types"
         >
           {field ? <PropertyEditor /> : <SelectFieldType />}
         </Col>
@@ -37,13 +38,15 @@ const SchemaWizard = ({ field, loader }) => {
             padding: "0px 15px",
             backgroundColor: "#F6F7F8",
           }}
+          className="tour-schema-preview"
         >
           <SchemaPreview />
         </Col>
         <Col
           xs={24}
           sm={14}
           style={{ overflowX: "hidden", height: "100%", padding: "0px 15px" }}
+          className="tour-form-preview"
         >
           <FormPreview />
         </Col>

diff --git a/ui/cap-react/src/antd/admin/components/SelectFieldType.js b/ui/cap-react/src/antd/admin/components/SelectFieldType.js
@@ -31,6 +31,7 @@ const SelectFieldType = () => {
               ))}
             </Row>
           ),
+          className: type.className,
         }))}
       />
     </div>

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/theme";
 
 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/admin/utils/fieldTypes.js b/ui/cap-react/src/antd/admin/utils/fieldTypes.js
@@ -89,6 +89,7 @@ const collections = {
     title: "Object",
     icon: <div>&#123;&#32;&#125;</div>,
     description: "Data in JSON format, Grouped section",
+    className: "tour-object-field",
     child: {},
     optionsSchema: {
       type: "object",
@@ -132,6 +133,7 @@ const collections = {
     icon: <UnorderedListOutlined />,
     description:
       "A list of things. List of strings, numbers, objects, references",
+    className: "tour-list-field",
     child: {},
     optionsSchema: {
       type: "object",
@@ -249,6 +251,7 @@ const simple = {
     title: "Text",
     icon: <FontSizeOutlined />,
     description: "Titles, names, paragraphs, IDs, list of names",
+    className: "tour-text-field",
     child: {},
     optionsSchema: {
       type: "object",
@@ -1058,6 +1061,7 @@ const fields = {
     title: "Collections",
     description: "",
     fields: collections,
+    className: "tour-collections",
   },
   simple: {
     title: "Fields",

diff --git a/ui/cap-react/src/antd/admin/utils/tour/TourTooltip.js b/ui/cap-react/src/antd/admin/utils/tour/TourTooltip.js
@@ -0,0 +1,40 @@
+import { Button, Card, Col, Row, Typography } from "antd";
+
+const TourTooltip = ({
+  index,
+  step,
+  backProps,
+  primaryProps,
+  tooltipProps,
+  isLastStep,
+  skipProps,
+  total,
+}) => {
+  return (
+    <Card {...tooltipProps} style={{ maxWidth: "300px", border: 0 }}>
+      <Row justify="center">
+        {step.title && (
+          <Typography.Title level={5}>{step.title}</Typography.Title>
+        )}
+        <Typography.Text style={{ textAlign: "center" }}>
+          {step.content}
+        </Typography.Text>
+      </Row>
+      <Row style={{ marginTop: "20px" }} align="middle" gutter={10}>
+        <Col flex="auto">
+          <Button type="text" {...skipProps}>
+            Skip
+          </Button>
+        </Col>
+        <Col>{index > 0 && <Button {...backProps}>Back</Button>}</Col>
+        <Col>
+          <Button type="primary" {...primaryProps}>
+            {isLastStep ? "Finish" : `Next (${index + 1}/${total})`}
+          </Button>
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default TourTooltip;
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,7 @@ const SelectFieldType = () => { @@
                   ))}
                 </Row>
               ),
+              className: type.className,
             }))}
           />
         </div>
@@ Expand Down @@