ui: display decision on ui instantly in new holdingpen

* ref: cern-sis/issues-inspire#553
DonHaul · Aug 30, 2024 · 3f3108c · 3f3108c
1 parent a3a5bb2
commit 3f3108c
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 113 deletions.
diff --git a/ui/src/actions/holdingpen.ts b/ui/src/actions/holdingpen.ts
@@ -31,6 +31,7 @@ import {
   BACKOFFICE_SEARCH_API,
   HOLDINGPEN_NEW,
   HOLDINGPEN_LOGIN_NEW,
+  HOLDINGPEN_SEARCH_NEW,
 } from '../common/routes';
 import { Credentials } from '../types';
 import storage from '../common/storage';
@@ -302,16 +303,14 @@ export function resolveAction(
   return async (dispatch) => {
     dispatch(resolvingAction(action));
     try {
-      await httpClient.post(
+      const response = await httpClient.post(
         `${BACKOFFICE_API}/authors/${id}/${action}/`,
         payload
       );
 
       dispatch(resolveActionSuccess());
       notifyActionSuccess(action);
-      setTimeout(() => {
-        window?.location?.reload();
-      }, 3000);
+      dispatch(fetchAuthorSuccess(response.data));
     } catch (err) {
       const { error } = httpErrorToActionPayload(err);
       notifyActionError(
@@ -355,6 +354,7 @@ export function deleteWorkflow(
 
       dispatch(deleteWorkflowSuccess());
       notifyDeleteSuccess();
+      dispatch(push(HOLDINGPEN_SEARCH_NEW));
     } catch (err) {
       const { error } = httpErrorToActionPayload(err);
 

diff --git a/ui/src/holdingpen-new/components/SearchFilters.tsx b/ui/src/holdingpen-new/components/SearchFilters.tsx
@@ -80,7 +80,7 @@ const SearchFilters: React.FC<SearchFiltersProps> = ({
   };
 
   return (
-    <Col xs={0} lg={5}>
+    <Col xs={0} lg={4}>
       <LoadingOrChildren loading={loading}>
         <Card>
           <p className="facet-category">Results per page</p>

diff --git a/ui/src/holdingpen-new/containers/DetailPageContainer/AuthorDetailPageContainer.tsx b/ui/src/holdingpen-new/containers/DetailPageContainer/AuthorDetailPageContainer.tsx
@@ -8,7 +8,7 @@ import {
   SyncOutlined,
   PlayCircleOutlined,
 } from '@ant-design/icons';
-import { Action, ActionCreator } from 'redux';
+import { ActionCreator, Action } from 'redux';
 import { connect, RootStateOrAny } from 'react-redux';
 import { Map } from 'immutable';
 import { push } from 'connected-react-router';
@@ -30,7 +30,6 @@ import { getConfigFor } from '../../../common/config';
 import { resolveDecision } from '../../utils/utils';
 import DeleteWorkflow from '../../components/DeleteWorkflow/DeleteWorkflow';
 import EmptyOrChildren from '../../../common/components/EmptyOrChildren';
-import GoBackLinkContainer from '../../../common/containers/GoBackLinkContainer';
 import LinkLikeButton from '../../../common/components/LinkLikeButton/LinkLikeButton';
 import { HOLDINGPEN_SEARCH_NEW } from '../../../common/routes';
 
@@ -53,21 +52,31 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
     dispatch(fetchAuthor(id));
   }, []);
 
-  const data = author?.get('data') as Map<any, any>;
-  const tickets = author?.get('tickets') as Map<any, any>;
-  const decision = author?.get('decisions')?.first();
+  const data = author?.get('data');
+  const tickets = author?.get('tickets')?.size !== 0 && author?.get('tickets');
+  const decision = author?.getIn(['decisions', 0]) as Map<string, any>;
+  const status = author?.get('status');
+
+  const shouldDisplayDecisionsBox =
+    decision || status === 'approval' || (decision && status !== 'approval');
 
   const ERRORS_URL = getConfigFor('INSPIRE_WORKFLOWS_DAGS_URL');
 
   const OPEN_SECTIONS = [
     data?.get('positions') && 'institutions',
     data?.get('project_membership') && 'projects',
     (data?.get('urls') || data?.get('ids')) && 'links',
-    (data?.get('arxiv_categories') || data?.get('.advisors')) && 'other',
-    author?.get('status') === 'error' && 'errors',
+    (data?.get('arxiv_categories') || data?.get('advisors')) && 'other',
+    status === 'error' && 'errors',
     'delete',
   ].filter(Boolean);
 
+  const handleResolveAction = (value: string, createTicket = false) => {
+    dispatch(
+      resolveAction(id, 'resolve', { value, create_ticket: createTicket })
+    );
+  };
+
   return (
     <div
       className="__DetailPageContainer__"
@@ -76,7 +85,7 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
       <Breadcrumbs
         title1="Search"
         href1={`${document.referrer}`}
-        title2={(data?.getIn(['name', 'value']) as string) || 'Details'}
+        title2={data?.getIn(['name', 'value']) || 'Details'}
         href2={id}
       />
       <LoadingOrChildren loading={loading}>
@@ -95,17 +104,15 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
         >
           <Row justify="center">
             <Col xs={24} md={22} lg={21} xxl={18}>
-              {author?.get('status') && (
+              {status && (
                 <Row className="mv3" justify="center" gutter={35}>
                   <Col xs={24}>
                     <div
-                      className={`bg-${author?.get('status')?.toLowerCase()} ${
-                        author?.get('status') === 'error' ? 'white' : ''
+                      className={`bg-${status?.toLowerCase()} ${
+                        status === 'error' ? 'white' : ''
                       } w-100`}
                     >
-                      <p className="b f3 tc pv2">
-                        {author?.get('status').toUpperCase()}
-                      </p>
+                      <p className="b f3 tc pv2">{status?.toUpperCase()}</p>
                     </div>
                   </Col>
                 </Row>
@@ -125,19 +132,21 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
                         <b>Status:</b> {data?.get('status')}
                       </p>
                     )}
-                    {(data?.get('ids') as any[])?.find(
-                      (id: any) => id?.get('schema') === 'ORCID'
-                    ) && (
-                      <p className="mt3 mb0">
-                        <Ids
-                          ids={
-                            (data?.get('ids') as any[])?.filter(
-                              (id: any) => id?.get('schema') === 'ORCID'
-                            ) as unknown as Map<string, any>
-                          }
-                          noIcon
-                        />
-                      </p>
+                    {data
+                      ?.get('ids')
+                      ?.find(
+                        (id: { get: (arg0: string) => string }) =>
+                          id.get('schema') === 'ORCID'
+                      ) && (
+                      <Ids
+                        ids={data
+                          ?.get('ids')
+                          ?.filter(
+                            (id: { get: (arg0: string) => string }) =>
+                              id?.get('schema') === 'ORCID'
+                          )}
+                        noIcon
+                      />
                     )}
                   </ContentBox>
                   <CollapsableForm openSections={OPEN_SECTIONS}>
@@ -206,7 +215,7 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
                         </Col>
                       </Row>
                     </CollapsableForm.Section>
-                    {author?.get('status') === 'error' && (
+                    {status === 'error' && (
                       <CollapsableForm.Section header="Errors" key="errors">
                         <p>
                           See error details here:{' '}
@@ -223,71 +232,48 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
                   </CollapsableForm>
                 </Col>
                 <Col xs={24} lg={8}>
-                  {author?.get('status') &&
-                    author?.get('status') !== 'error' &&
-                    author?.get('status') !== 'running' && (
-                      <ContentBox
-                        className="mb3"
-                        fullHeight={false}
-                        subTitle="Decision"
-                      >
-                        {author?.get('status') === 'approval' ? (
-                          <div className="w-100 flex flex-column items-center">
-                            <Button
-                              className="font-white bg-completed w-75 mb2"
-                              onClick={() =>
-                                dispatch(
-                                  resolveAction(id, 'resolve', {
-                                    value: 'accept',
-                                    create_ticket: false,
-                                  })
-                                )
-                              }
-                              loading={actionInProgress === 'resolve'}
-                            >
-                              Accept
-                            </Button>
-                            <Button
-                              className="font-white bg-halted w-75 mb2"
-                              onClick={() =>
-                                dispatch(
-                                  resolveAction(id, 'resolve', {
-                                    value: 'accept_curate',
-                                    create_ticket: false,
-                                  })
-                                )
-                              }
-                              loading={actionInProgress === 'resolve'}
-                            >
-                              Accept + Curation
-                            </Button>
-                            <Button
-                              className="font-white bg-error w-75"
-                              onClick={() =>
-                                dispatch(
-                                  resolveAction(id, 'resolve', {
-                                    value: 'reject',
-                                    create_ticket: false,
-                                  })
-                                )
-                              }
-                              loading={actionInProgress === 'resolve'}
-                            >
-                              Reject
-                            </Button>
-                          </div>
-                        ) : (
-                          <p className="mb0">
-                            This workflow is{' '}
-                            <b>
-                              {resolveDecision(decision?.get('action'))
-                                ?.decision || 'completed'}
-                            </b>
-                            .
-                          </p>
-                        )}
-                      </ContentBox>
-                    )}
+                  {shouldDisplayDecisionsBox && (
+                    <ContentBox
+                      className="mb3"
+                      fullHeight={false}
+                      subTitle="Decision"
+                    >
+                      {!decision ? (
+                        <div className="w-100 flex flex-column items-center">
+                          <Button
+                            className="font-white bg-completed w-75 mb2"
+                            onClick={() => handleResolveAction('accept')}
+                            loading={actionInProgress === 'resolve'}
+                          >
+                            Accept
+                          </Button>
+                          <Button
+                            className="font-white bg-halted w-75 mb2"
+                            onClick={() => handleResolveAction('accept_curate')}
+                            loading={actionInProgress === 'resolve'}
+                          >
+                            Accept + Curation
+                          </Button>
+                          <Button
+                            className="font-white bg-error w-75"
+                            onClick={() => handleResolveAction('reject')}
+                            loading={actionInProgress === 'resolve'}
+                          >
+                            Reject
+                          </Button>
+                        </div>
+                      ) : (
+                        <p className="mb0">
+                          This workflow is{' '}
+                          <b>
+                            {resolveDecision(decision?.get('action'))
+                              ?.decision || 'completed'}
+                          </b>
+                          .
+                        </p>
+                      )}
+                    </ContentBox>
+                  )}
                   <ContentBox
                     className="mb3"
                     fullHeight={false}
@@ -297,8 +283,8 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
                     <i>{data?.getIn(['acquisition_source', 'email'])}</i> on{' '}
                     <b>
                       {new Date(
-                        data?.getIn(['acquisition_source', 'datetime']) as Date
-                      ).toLocaleDateString()}
+                        data?.getIn(['acquisition_source', 'datetime'])
+                      )?.toLocaleDateString()}
                     </b>
                     .
                   </ContentBox>
@@ -309,11 +295,20 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
                       subTitle="Notes"
                     >
                       <i>
-                        {data?.get('_private_notes')?.map((note: any) => (
-                          <p className="mb0" key={note?.get('value')}>
-                            &quot;{note?.get('value')}&quot;
-                          </p>
-                        ))}
+                        {data
+                          ?.get('_private_notes')
+                          ?.map(
+                            (note: {
+                              get: (arg0: string) => {} | null | undefined;
+                            }) => (
+                              <p
+                                className="mb0"
+                                key={note?.get('value') as string}
+                              >
+                                &quot;{note?.get('value')}&quot;
+                              </p>
+                            )
+                          )}
                       </i>
                     </ContentBox>
                   )}
@@ -375,7 +370,6 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
                           Open in Editor
                         </a>
                       </Button>
-                      {/* TODO2: change to skip step once it's ready */}
                       <Button
                         className="w-75"
                         onClick={() => {}}
@@ -396,10 +390,10 @@ const AuthorDetailPageContainer: React.FC<AuthorDetailPageContainerProps> = ({
   );
 };
 
-const stateToProps = (state: RootStateOrAny) => ({
+const mapStateToProps = (state: RootStateOrAny) => ({
   author: state.holdingpen.get('author'),
   loading: state.holdingpen.get('loading'),
   actionInProgress: state.holdingpen.get('actionInProgress'),
 });
 
-export default connect(stateToProps)(AuthorDetailPageContainer);
+export default connect(mapStateToProps)(AuthorDetailPageContainer);
diff --git a/ui/src/holdingpen-new/containers/SearchPageContainer/SearchPageContainer.less b/ui/src/holdingpen-new/containers/SearchPageContainer/SearchPageContainer.less
@@ -1,6 +1,6 @@
 .__SearchPageContainer__ {
   width: 100%;
-  max-width: 2200px;
+  max-width: 2300px;
 
   .facet-category {
     font-size: 1rem;

diff --git a/ui/src/holdingpen-new/containers/SearchPageContainer/SearchPageContainer.tsx b/ui/src/holdingpen-new/containers/SearchPageContainer/SearchPageContainer.tsx
@@ -50,7 +50,7 @@ const SearchPageContainer: React.FC<SearchPageContainerProps> = ({
       <Breadcrumbs title1="Search" href1="search" />
       <Row className="mt2 mb4" gutter={SEARCH_PAGE_GUTTER} justify="center">
         <SearchFilters />
-        <Col xs={24} lg={19}>
+        <Col xs={24} lg={20}>
           <EmptyOrChildren data={results} title="0 Results">
             <>
               <Row justify="space-between" wrap={false}>

diff --git a/.../containers/SearchPageContainer/__tests__/__snapshots__/SearchPageContainer.test.tsx.snap b/.../containers/SearchPageContainer/__tests__/__snapshots__/SearchPageContainer.test.tsx.snap
@@ -130,7 +130,7 @@ exports[`SearchPageContainer renders the SearchPage component 1`] = `
       style="margin-left: -16px; margin-right: -16px;"
     >
       <div
-        class="ant-col ant-col-xs-0 ant-col-lg-5"
+        class="ant-col ant-col-xs-0 ant-col-lg-4"
         style="padding-left: 16px; padding-right: 16px;"
       >
         <div
@@ -285,7 +285,7 @@ exports[`SearchPageContainer renders the SearchPage component 1`] = `
         </div>
       </div>
       <div
-        class="ant-col ant-col-xs-24 ant-col-lg-19"
+        class="ant-col ant-col-xs-24 ant-col-lg-20"
         style="padding-left: 16px; padding-right: 16px;"
       >
         <div

diff --git a/ui/src/holdingpen-new/notifications.ts b/ui/src/holdingpen-new/notifications.ts
@@ -11,9 +11,11 @@ export function notifyLoginError(error: string) {
 }
 
 export function notifyActionSuccess(action: string) {
+  const displayAction = action === 'resolve' ? 'decision' : action;
+
   notification.success({
     message: 'Success',
-    description: `${_.capitalize(action)} performed successfully`,
+    description: `${_.capitalize(displayAction)} performed successfully`,
     duration: 10,
   });
 }