holdingpen: author submission prototype

* ref: cern-sis/issues-inspire#468
drjova · Jun 12, 2024 · 8604af5 · 8604af5
1 parent edcc1e0
commit 8604af5
Show file tree

Hide file tree

Showing 69 changed files with 5,432 additions and 404 deletions.
diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -17,6 +17,7 @@ import {
   HOME,
   USER,
   HOLDINGPEN,
+  HOLDINGPEN_NEW,
   LITERATURE,
   AUTHORS,
   SUBMISSIONS,
@@ -27,7 +28,7 @@ import {
   SEMINARS,
   EXPERIMENTS,
   BIBLIOGRAPHY_GENERATOR,
-  JOURNALS
+  JOURNALS,
 } from './common/routes';
 import UserFeedback from './common/components/UserFeedback';
 import { setUserCategoryFromRoles, setClientId } from './tracker';
@@ -47,56 +48,57 @@ import Seminars from './seminars';
 import Experiments from './experiments';
 import Journals from './journals';
 import BibliographyGeneratorPageContainer from './bibliographyGenerator/BibliographyGeneratorPageContainer';
+import { SUPERUSER_OR_CATALOGER } from './common/authorization';
 
 const Holdingpen$ = Loadable({
   loader: () => import('./holdingpen'),
   loading: Loading,
 });
+const HoldingpenNew$ = Loadable({
+  loader: () => import('./holdingpen-new'),
+  loading: Loading,
+});
 const Submissions$ = Loadable({
   loader: () => import('./submissions'),
   loading: Loading,
 });
 
 function App({ userRoles, dispatch, guideModalVisibility }) {
-  useEffect(
-    () => {
-      dispatch(fetchLoggedInUser());
-    },
-    [dispatch]
-  );
+  useEffect(() => {
+    dispatch(fetchLoggedInUser());
+  }, [dispatch]);
 
-  useEffect(
-    () => {
-      const hasGuideModalBeenDisplayed = guideModalVisibility != null;
-      const shouldDisplayGuideOnStart = getConfigFor('DISPLAY_GUIDE_ON_START');
-      if (!hasGuideModalBeenDisplayed && shouldDisplayGuideOnStart) {
-        setTimeout(() => {
-          dispatch(changeGuideModalVisibility(true));
-        }, 3000);
-      }
-    },
-    [guideModalVisibility, dispatch]
-  );
+  useEffect(() => {
+    const hasGuideModalBeenDisplayed = guideModalVisibility != null;
+    const shouldDisplayGuideOnStart = getConfigFor('DISPLAY_GUIDE_ON_START');
+    if (!hasGuideModalBeenDisplayed && shouldDisplayGuideOnStart) {
+      setTimeout(() => {
+        dispatch(changeGuideModalVisibility(true));
+      }, 3000);
+    }
+  }, [guideModalVisibility, dispatch]);
 
-  useEffect(
-    () => {
-      setUserCategoryFromRoles(userRoles);
-    },
-    [userRoles]
-  );
+  useEffect(() => {
+    setUserCategoryFromRoles(userRoles);
+  }, [userRoles]);
 
   useEffect(() => {
     setClientId();
   }, []);
 
   return (
-    <Layout className="__App__" data-testid='app'>
+    <Layout className="__App__" data-testid="app">
       <Header />
       <Layout.Content className="content">
         <SafeSwitch id="main">
           <Route exact path={HOME} component={Home} />
           <Route path={USER} component={User} />
           <PrivateRoute path={HOLDINGPEN} component={Holdingpen$} />
+          <PrivateRoute
+            path={HOLDINGPEN_NEW}
+            component={HoldingpenNew$}
+            authorizedRoles={SUPERUSER_OR_CATALOGER}
+          />
           <Route path={LITERATURE} component={Literature} />
           <Route path={AUTHORS} component={Authors} />
           <Route path={JOBS} component={Jobs} />
@@ -126,12 +128,12 @@ App.propTypes = {
   dispatch: PropTypes.func.isRequired,
 };
 
-const stateToProps = state => ({
+const stateToProps = (state) => ({
   guideModalVisibility: state.ui.get('guideModalVisibility'),
   userRoles: state.user.getIn(['data', 'roles']),
 });
 
-const dispatchToProps = dispatch => ({
+const dispatchToProps = (dispatch) => ({
   dispatch,
 });
 

diff --git a/ui/src/__tests__/App.test.tsx b/ui/src/__tests__/App.test.tsx
@@ -110,6 +110,53 @@ describe('App', () => {
     expect(holdingpen).not.toBeInTheDocument();
   });
 
+  it('navigates to new Holdingpen when /holdingpen-new if superuser logged in', async () => {
+    const store = getStoreWithState({
+      user: fromJS({
+        loggedIn: true,
+        data: {
+          roles: ['superuser'],
+        },
+      }),
+    });
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/holdingpen-new']} initialIndex={0}>
+          <App />
+        </MemoryRouter>
+      </Provider>
+    );
+    await Loadable.preloadAll();
+
+    const app = getByTestId('app');
+    const holdingpen = within(app).getByTestId('holdingpen-new');
+
+    expect(holdingpen).toBeInTheDocument();
+  });
+
+  it('does not navigate to Holdingpen when /holdingpen if not logged in', async () => {
+    const store = getStoreWithState({
+      user: fromJS({
+        loggedIn: false,
+        data: {
+          roles: [],
+        },
+      }),
+    });
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/holdingpen-new']} initialIndex={0}>
+          <App />
+        </MemoryRouter>
+      </Provider>
+    );
+    await Loadable.preloadAll();
+    const app = getByTestId('app');
+    const holdingpen = within(app).queryByTestId('holdingpen-new');
+
+    expect(holdingpen).not.toBeInTheDocument();
+  });
+
   it('navigates to User when /user', () => {
     const { getByTestId } = render(
       <Provider store={getStore()}>

diff --git a/ui/src/authors/components/PublicationsSelectAll.tsx b/ui/src/authors/components/PublicationsSelectAll.tsx
@@ -1,16 +1,22 @@
 import React, { useMemo } from 'react';
-import { List, Map, Set } from 'immutable';
+import { List, Set } from 'immutable';
 import { Checkbox } from 'antd';
 
-function getRecordId<T>(result: { getIn: (args: string[], arg?: boolean) => T }) {
+function getRecordId<T>(result: {
+  getIn: (args: string[], arg?: boolean) => T;
+}) {
   return result.getIn(['metadata', 'control_number']);
 }
 
-function getClaimed<T>(result: { getIn: (args: string[], arg?: boolean) => T }) {
+function getClaimed<T>(result: {
+  getIn: (args: string[], arg?: boolean) => T;
+}) {
   return result.getIn(['metadata', 'curated_relation'], false);
 }
 
-function getCanClaim<T>(result: { getIn: (args: string[], arg?: boolean) => T }) {
+function getCanClaim<T>(result: {
+  getIn: (args: string[], arg?: boolean) => T;
+}) {
   return result.getIn(['metadata', 'can_claim'], false);
 }
 
@@ -20,10 +26,10 @@ function PublicationsSelectAll<T>({
   onChange,
   disabled,
 }: {
-  publications: List<any>,
-  selection: Set<T>,
-  onChange: Function,
-  disabled: boolean,
+  publications: List<any>;
+  selection: Set<T>;
+  onChange: Function;
+  disabled?: boolean;
 }) {
   const checked = useMemo(
     () =>

diff --git a/ui/src/common/components/ContentBox/ContentBox.tsx b/ui/src/common/components/ContentBox/ContentBox.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Row, Col, Card } from 'antd';
+import classNames from 'classnames';
 
 import './ContentBox.less';
 
@@ -11,6 +12,8 @@ const ContentBox = ({
   children,
   subTitle,
   className,
+  fullHeight = true,
+  smallPadding = true,
 }: {
   title: string;
   leftActions: JSX.Element | JSX.Element[];
@@ -19,12 +22,26 @@ const ContentBox = ({
   children: JSX.Element | JSX.Element[] | any;
   subTitle: string;
   className: string;
+  fullHeight?: boolean;
+  smallPadding?: boolean;
 }) => {
   return (
     children && (
-      <div className={`__ContentBox__ h-100 ${className}`}>
+      <div
+        className={classNames(
+          '__ContentBox__',
+          { 'h-100': fullHeight },
+          className
+        )}
+      >
         <Card className="h-100" title={title} loading={loading}>
-          <div className="pa2">
+          <div
+            className={classNames(
+              { pa2: smallPadding },
+              { pa3: !smallPadding },
+              className
+            )}
+          >
             {subTitle && <h3 className="pb1">{subTitle}</h3>}
             <div>{children}</div>
           </div>

diff --git a/ui/src/common/components/LinkLikeButton/LinkLikeButton.less b/ui/src/common/components/LinkLikeButton/LinkLikeButton.less
@@ -11,7 +11,7 @@
       & > *:hover {
         text-decoration: underline;
       }
-    } 
+    }
   }
   &.blue {
     color: #0050b3;
@@ -20,7 +20,7 @@
     }
   }
   &.middle {
-    font-size: 1rem;
+    font-size: 1.1rem;
   }
   &.big {
     font-size: 1.5rem;

diff --git a/ui/src/common/components/LinkLikeButton/LinkLikeButton.tsx b/ui/src/common/components/LinkLikeButton/LinkLikeButton.tsx
@@ -10,19 +10,21 @@ const LinkLikeButton = ({
   dataTestId,
   color,
   disabled,
+  className,
 }: {
   children: JSX.Element | string;
   onClick: MouseEventHandler<HTMLElement>;
   dataTestId: string;
   color: string;
   disabled: boolean;
+  className?: string;
 }) => (
   <Button
     disabled={disabled}
     type="text"
     data-test-id={dataTestId}
     onClick={onClick}
-    className={classNames('__LinkLikeButton__', color, { 'disabled': disabled })}
+    className={classNames('__LinkLikeButton__', color, { disabled }, className)}
     data-testid={dataTestId}
   >
     {children}

diff --git a/ui/src/common/components/Logo/Logo.less b/ui/src/common/components/Logo/Logo.less
@@ -4,4 +4,8 @@
     height: 32px;
     vertical-align: middle;
   }
-}
+}
+.holdingpen .logo {
+  height: fit-content;
+  padding: 5px;
+}
diff --git a/ui/src/common/components/Logo/LogoHoldingpen.tsx b/ui/src/common/components/Logo/LogoHoldingpen.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './Logo.less';
+import { HOLDINGPEN } from '../../routes';
+import { ReactComponent as LogoSvg } from './logo-holdingpen.svg';
+
+const LogoHoldingpen = () => (
+  <Link className="__Logo__" to={HOLDINGPEN}>
+    <LogoSvg className="logo" />
+  </Link>
+);
+
+export default LogoHoldingpen;