ui: connect action buttons

* ref: cern-sis/issues-inspire#493
karolina-siemieniuk-morawska · Aug 13, 2024 · d11c040 · d11c040
1 parent ab046be
commit d11c040
Show file tree

Hide file tree

Showing 22 changed files with 475 additions and 479 deletions.
diff --git a/ui/.eslintrc b/ui/.eslintrc
@@ -55,6 +55,7 @@
     "react/destructuring-assignment": "off",
     "react/prefer-stateless-function": "off",
     "react-hooks/rules-of-hooks": "error",
+    "react/jsx-no-target-blank": "off",
     "react/jsx-filename-extension": [
       2,
       { "extensions": [".js", ".jsx", ".ts", ".tsx"] }

diff --git a/ui/src/actions/actionTypes.ts b/ui/src/actions/actionTypes.ts
@@ -144,3 +144,9 @@ export const HOLDINGPEN_SEARCH_QUERY_RESET = 'HOLDINGPEN_SEARCH_QUERY_RESET';
 export const HOLDINGPEN_AUTHOR_REQUEST = 'HOLDINGPEN_AUTHOR_REQUEST';
 export const HOLDINGPEN_AUTHOR_ERROR = 'HOLDINGPEN_AUTHOR_ERROR';
 export const HOLDINGPEN_AUTHOR_SUCCESS = 'HOLDINGPEN_AUTHOR_SUCCESS';
+export const HOLDINGPEN_RESOLVE_ACTION_REQUEST =
+  'HOLDINGPEN_RESOLVE_ACTION_REQUEST';
+export const HOLDINGPEN_RESOLVE_ACTION_SUCCESS =
+  'HOLDINGPEN_RESOLVE_ACTION_SUCCESS';
+export const HOLDINGPEN_RESOLVE_ACTION_ERROR =
+  'HOLDINGPEN_RESOLVE_ACTION_ERROR';
diff --git a/ui/src/actions/holdingpen.ts b/ui/src/actions/holdingpen.ts
@@ -17,6 +17,9 @@ import {
   HOLDINGPEN_AUTHOR_REQUEST,
   HOLDINGPEN_AUTHOR_SUCCESS,
   HOLDINGPEN_SEARCH_QUERY_RESET,
+  HOLDINGPEN_RESOLVE_ACTION_REQUEST,
+  HOLDINGPEN_RESOLVE_ACTION_SUCCESS,
+  HOLDINGPEN_RESOLVE_ACTION_ERROR,
 } from './actionTypes';
 import {
   BACKOFFICE_API,
@@ -27,7 +30,11 @@ import {
 } from '../common/routes';
 import { Credentials } from '../types';
 import storage from '../common/storage';
-import { notifyLoginError } from '../holdingpen-new/notifications';
+import {
+  notifyLoginError,
+  notifyActionError,
+  notifyActionSuccess,
+} from '../holdingpen-new/notifications';
 import { refreshToken } from '../holdingpen-new/utils/utils';
 
 const httpClient = axios.create();
@@ -70,6 +77,7 @@ httpClient.interceptors.response.use(
   }
 );
 
+// LOGIN ACTIONS
 export function holdingpenLoginSuccess() {
   return {
     type: HOLDINGPEN_LOGIN_SUCCESS,
@@ -89,59 +97,6 @@ function holdingpenLogoutSuccess() {
   };
 }
 
-function searching() {
-  return {
-    type: HOLDINGPEN_SEARCH_REQUEST,
-  };
-}
-
-function searchSuccess(data: any) {
-  return {
-    type: HOLDINGPEN_SEARCH_SUCCESS,
-    payload: { data },
-  };
-}
-
-function searchError(errorPayload: { error: Error }) {
-  return {
-    type: HOLDINGPEN_SEARCH_ERROR,
-    payload: { ...errorPayload },
-  };
-}
-
-function fetchingAuthor() {
-  return {
-    type: HOLDINGPEN_AUTHOR_REQUEST,
-  };
-}
-
-function fetchAuthorSuccess(data: any) {
-  return {
-    type: HOLDINGPEN_AUTHOR_SUCCESS,
-    payload: { data },
-  };
-}
-
-function fetchAuthorError(errorPayload: { error: Error }) {
-  return {
-    type: HOLDINGPEN_AUTHOR_ERROR,
-    payload: { ...errorPayload },
-  };
-}
-
-function updateQuery(data: any) {
-  return {
-    type: HOLDINGPEN_SEARCH_QUERY_UPDATE,
-    payload: data,
-  };
-}
-
-function resetQuery() {
-  return {
-    type: HOLDINGPEN_SEARCH_QUERY_RESET,
-  };
-}
-
 export function holdingpenLogin(
   credentials: Credentials
 ): (dispatch: ActionCreator<Action>) => Promise<void> {
@@ -192,6 +147,57 @@ export function holdingpenLogout(): (
   };
 }
 
+// SEARCH ACTIONS
+function searching() {
+  return {
+    type: HOLDINGPEN_SEARCH_REQUEST,
+  };
+}
+
+function searchSuccess(data: any) {
+  return {
+    type: HOLDINGPEN_SEARCH_SUCCESS,
+    payload: { data },
+  };
+}
+
+function searchError(errorPayload: { error: Error }) {
+  return {
+    type: HOLDINGPEN_SEARCH_ERROR,
+    payload: { ...errorPayload },
+  };
+}
+
+function updateQuery(data: any) {
+  return {
+    type: HOLDINGPEN_SEARCH_QUERY_UPDATE,
+    payload: data,
+  };
+}
+
+function resetQuery() {
+  return {
+    type: HOLDINGPEN_SEARCH_QUERY_RESET,
+  };
+}
+
+type QueryParams = { page: number; size: number; [key: string]: any };
+export function searchQueryUpdate(
+  query: QueryParams
+): (dispatch: ActionCreator<Action>) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(updateQuery(query));
+  };
+}
+
+export function searchQueryReset(): (
+  dispatch: ActionCreator<Action>
+) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(resetQuery());
+  };
+}
+
 export function fetchSearchResults(): (
   dispatch: ActionCreator<Action>,
   getState: () => RootStateOrAny
@@ -200,7 +206,6 @@ export function fetchSearchResults(): (
     dispatch(searching());
 
     const currentQuery = getState()?.holdingpen?.get('query')?.toJS() || {};
-
     const resolveQuery = `${BACKOFFICE_SEARCH_API}/?${
       Object.entries(currentQuery)
         ?.map(([key, value]: [string, any]) => `${key}=${value}`)
@@ -217,6 +222,27 @@ export function fetchSearchResults(): (
   };
 }
 
+// AUTHOR ACTIONS
+function fetchingAuthor() {
+  return {
+    type: HOLDINGPEN_AUTHOR_REQUEST,
+  };
+}
+
+function fetchAuthorSuccess(data: any) {
+  return {
+    type: HOLDINGPEN_AUTHOR_SUCCESS,
+    payload: { data },
+  };
+}
+
+function fetchAuthorError(errorPayload: { error: Error }) {
+  return {
+    type: HOLDINGPEN_AUTHOR_ERROR,
+    payload: { ...errorPayload },
+  };
+}
+
 export function fetchAuthor(
   id: string
 ): (dispatch: ActionCreator<Action>) => Promise<void> {
@@ -234,19 +260,53 @@ export function fetchAuthor(
   };
 }
 
-type QueryParams = { page: number; size: number; [key: string]: any };
-export function searchQueryUpdate(
-  query: QueryParams
-): (dispatch: ActionCreator<Action>) => Promise<void> {
-  return async (dispatch) => {
-    dispatch(updateQuery(query));
+// DECISSION ACTIONS
+function resolvingAction(type: string) {
+  return {
+    type: HOLDINGPEN_RESOLVE_ACTION_REQUEST,
+    payload: { type },
   };
 }
 
-export function searchQueryReset(): (
-  dispatch: ActionCreator<Action>
-) => Promise<void> {
+function resolveActionSuccess() {
+  return {
+    type: HOLDINGPEN_RESOLVE_ACTION_SUCCESS,
+  };
+}
+
+function resolveActionError(errorPayload: { error: Error }) {
+  return {
+    type: HOLDINGPEN_RESOLVE_ACTION_ERROR,
+    payload: { ...errorPayload },
+  };
+}
+
+export function resolveAction(
+  id: string,
+  action: string,
+  payload: any
+): (dispatch: ActionCreator<Action>) => Promise<void> {
   return async (dispatch) => {
-    dispatch(resetQuery());
+    dispatch(resolvingAction(action));
+    try {
+      await httpClient.post(
+        `${BACKOFFICE_API}/authors/${id}/${action}/`,
+        payload
+      );
+
+      dispatch(resolveActionSuccess());
+      notifyActionSuccess(action);
+      setTimeout(() => {
+        window?.location?.reload();
+      }, 3000);
+    } catch (err) {
+      const { error } = httpErrorToActionPayload(err);
+      notifyActionError(
+        (typeof error?.error === 'string'
+          ? error?.error
+          : error?.error?.detail) || 'An error occurred'
+      );
+      dispatch(resolveActionError(error));
+    }
   };
 }
diff --git a/ui/src/authors/components/AssignNoProfileAction.tsx b/ui/src/authors/components/AssignNoProfileAction.tsx
@@ -12,7 +12,6 @@ export const CLAIMING_DISABLED_INFO = (
     <a
       href="https://help.inspirehep.net/knowledge-base/contact-us"
       target="_blank"
-      rel="noreferrer"
     >
       contact us
     </a>

diff --git a/ui/src/authors/components/EditAuthorRecordAction.tsx b/ui/src/authors/components/EditAuthorRecordAction.tsx
@@ -17,7 +17,6 @@ const CAN_NOT_EDIT_AUTHOR_MESSAGE = (
     <a
       href="https://help.inspirehep.net/knowledge-base/contact-us"
       target="_blank"
-      rel="noreferrer"
     >
       contact us
     </a>

diff --git a/ui/src/authors/components/__tests__/__snapshots__/AssignNoProfileAction.test.jsx.snap b/ui/src/authors/components/__tests__/__snapshots__/AssignNoProfileAction.test.jsx.snap
@@ -12,7 +12,6 @@ exports[`AssignNoProfileAction renders 1`] = `
              
             <a
               href="https://help.inspirehep.net/knowledge-base/contact-us"
-              rel="noreferrer"
               target="_blank"
             >
               contact us

diff --git a/ui/src/common/components/UserFeedback/UserFeedback.jsx b/ui/src/common/components/UserFeedback/UserFeedback.jsx
@@ -122,7 +122,6 @@ class UserFeedback extends Component {
                     <a
                       href="https://help.inspirehep.net/knowledge-base/contact-us"
                       target="_blank"
-                      rel="noreferrer"
                     >
                       contact us
                     </a>

diff --git a/ui/src/common/components/UserFeedback/__tests__/__snapshots__/UserFeedback.test.jsx.snap b/ui/src/common/components/UserFeedback/__tests__/__snapshots__/UserFeedback.test.jsx.snap
@@ -172,7 +172,6 @@ exports[`UserFeedback renders when tracker is blocked 1`] = `
               or
               <a
                 href="https://help.inspirehep.net/knowledge-base/contact-us"
-                rel="noreferrer"
                 target="_blank"
               >
                 contact us

diff --git a/ui/src/common/layouts/Header/HeaderMenu.tsx b/ui/src/common/layouts/Header/HeaderMenu.tsx
@@ -206,7 +206,11 @@ const HeaderMenu = ({
     loggedInToHoldingpen && {
       key: 'logout-holdingpen',
       label: [
-        <LinkLikeButton color="white" onClick={() => onLogout()}>
+        <LinkLikeButton
+          color="white"
+          onClick={() => onLogout()}
+          key="logout-holdingpen"
+        >
           Logout Holdingpen
         </LinkLikeButton>,
       ],

diff --git a/ui/src/common/layouts/Header/__tests__/__snapshots__/HeaderMenu.test.jsx.snap b/ui/src/common/layouts/Header/__tests__/__snapshots__/HeaderMenu.test.jsx.snap
@@ -129,7 +129,6 @@ exports[`HeaderMenu renders when logged in 1`] = `
                      
                     <a
                       href="https://help.inspirehep.net/knowledge-base/contact-us"
-                      rel="noreferrer"
                       target="_blank"
                     >
                       contact us

diff --git a/ui/src/holdingpen-new/components/AuthorResultItem.tsx b/ui/src/holdingpen-new/components/AuthorResultItem.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import {
   CheckOutlined,
+  LoadingOutlined,
   StopOutlined,
   WarningOutlined,
 } from '@ant-design/icons';
@@ -34,7 +35,7 @@ const renderWorkflowStatus = (status: string) => {
     },
     approval: {
       icon: <StopOutlined className="mr2" />,
-      text: 'Halted',
+      text: 'Waiting for approval',
       description: 'This workflow has been halted until decision is made.',
     },
     error: {
@@ -43,6 +44,12 @@ const renderWorkflowStatus = (status: string) => {
       description:
         'This record is in error state. View record details for more information.',
     },
+    running: {
+      icon: <LoadingOutlined className="mr2" />,
+      text: 'Running',
+      description:
+        'This workflow is currently running. Please wait for it to complete.',
+    },
   };
 
   const statusInfo = statuses[status];