ui: connect search in new holdingpen

* ref: cern-sis/issues-inspire#480
karolina-siemieniuk-morawska · Aug 26, 2024 · 485def2 · 485def2
1 parent 054ea64
commit 485def2
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 37 deletions.
diff --git a/ui/src/actions/holdingpen.ts b/ui/src/actions/holdingpen.ts
@@ -215,7 +215,7 @@ export function fetchSearchResults(): (
     const currentQuery = getState()?.holdingpen?.get('query')?.toJS() || {};
     const resolveQuery = `${BACKOFFICE_SEARCH_API}/?${
       Object.entries(currentQuery)
-        .filter(([_, value]) => value != null)
+        .filter(([_, value]) => value != null && value !== '')
         .map(([key, value]: [string, any]) => `${key}=${value}`)
         .join('&') || ''
     }`;

diff --git a/ui/src/holdingpen-new/__tests__/__snapshots__/index.test.tsx.snap b/ui/src/holdingpen-new/__tests__/__snapshots__/index.test.tsx.snap
@@ -135,7 +135,7 @@ exports[`Holdingpen renders initial state 1`] = `
                     <span
                       class="ant-select-selection-item"
                     >
-                      new authors
+                      all collections
                     </span>
                   </div>
                   <span
@@ -167,8 +167,8 @@ exports[`Holdingpen renders initial state 1`] = `
                 </div>
               </span>
               <input
-                class="ant-input ant-input-disabled"
-                disabled=""
+                class="ant-input"
+                placeholder="Search Holdingpen"
                 type="text"
                 value=""
               />
@@ -177,7 +177,6 @@ exports[`Holdingpen renders initial state 1`] = `
               >
                 <button
                   class="ant-btn ant-btn-primary ant-input-search-button"
-                  disabled=""
                   type="button"
                 >
                   <span

diff --git a/ui/src/holdingpen-new/components/Breadcrumbs/Breadcrumbs.tsx b/ui/src/holdingpen-new/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Breadcrumb, Input } from 'antd';
 import { HomeOutlined } from '@ant-design/icons';
-import { push } from 'connected-react-router';
+import { Map } from 'immutable';
 import { Action, ActionCreator } from 'redux';
-import { connect } from 'react-redux';
+import { connect, RootStateOrAny } from 'react-redux';
 
 import './Breadcrumbs.less';
-import { HOLDINGPEN_NEW, HOLDINGPEN_SEARCH_NEW } from '../../../common/routes';
+import { HOLDINGPEN_NEW } from '../../../common/routes';
+import { handleSearch } from '../../utils/utils';
 
 interface BreadcrumbItemProps {
   dispatch: ActionCreator<Action>;
+  query: Map<string, any>;
   title1: string;
   href1: string;
   title2?: string;
@@ -19,14 +21,21 @@ interface BreadcrumbItemProps {
 
 const Breadcrumbs: React.FC<BreadcrumbItemProps> = ({
   dispatch,
+  query,
   title1,
   href1,
   title2,
   href2,
   dashboardPage = false,
 }) => {
+  const [inputValue, setInputValue] = useState(query?.get('search'));
+
   const { Search } = Input;
 
+  useEffect(() => {
+    setInputValue(query?.get('search'));
+  }, [query]);
+
   return (
     <div className="flex items-center justify-between">
       <Breadcrumb separator="|" className="mv4">
@@ -53,21 +62,31 @@ const Breadcrumbs: React.FC<BreadcrumbItemProps> = ({
         <Search
           enterButton
           placeholder="Search Holdingpen"
-          onPressEnter={() => {
-            dispatch(push(HOLDINGPEN_SEARCH_NEW));
+          onPressEnter={(event: React.KeyboardEvent<HTMLInputElement>) => {
+            handleSearch(
+              dispatch,
+              query?.get('workflow_type'),
+              event?.currentTarget?.value
+            );
           }}
-          onSearch={() => {
-            dispatch(push(HOLDINGPEN_SEARCH_NEW));
+          onSearch={(value: string) => {
+            handleSearch(dispatch, query?.get('workflow_type'), value);
           }}
+          onChange={(event) => setInputValue(event?.target?.value)}
+          value={inputValue}
           className="search-bar-small"
         />
       )}
     </div>
   );
 };
 
+const stateToProps = (state: RootStateOrAny) => ({
+  query: state.holdingpen.get('query'),
+});
+
 const dispatchToProps = (dispatch: ActionCreator<Action>) => ({
   dispatch,
 });
 
-export default connect(null, dispatchToProps)(Breadcrumbs);
+export default connect(stateToProps, dispatchToProps)(Breadcrumbs);
diff --git a/ui/src/holdingpen-new/containers/DashboardPageContainer/DashboardPageContainer.tsx b/ui/src/holdingpen-new/containers/DashboardPageContainer/DashboardPageContainer.tsx
@@ -3,7 +3,6 @@ import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { Card, Input, Select, Tabs } from 'antd';
 import { Link } from 'react-router-dom';
-import { push } from 'connected-react-router';
 import { Action, ActionCreator } from 'redux';
 import { connect, RootStateOrAny } from 'react-redux';
 import { List, Map } from 'immutable';
@@ -18,12 +17,13 @@ import {
 } from '../../../actions/holdingpen';
 import EmptyOrChildren from '../../../common/components/EmptyOrChildren';
 import LoadingOrChildren from '../../../common/components/LoadingOrChildren';
-import { COLLECTIONS, getIcon } from '../../utils/utils';
+import { COLLECTIONS, getIcon, handleSearch } from '../../utils/utils';
 
 interface DashboardPageContainerProps {
   dispatch: ActionCreator<Action>;
   facets: Map<string, any>;
   loading: boolean;
+  query: Map<string, any>;
 }
 
 const TEXT_CENTER: Record<string | number, string & {}> = {
@@ -34,23 +34,9 @@ const { Option } = Select;
 
 const { Search } = Input;
 
-const selectBefore = (
-  <Select
-    defaultValue={Object.values(COLLECTIONS)[0]}
-    className="select-before"
-  >
-    {Object.values(COLLECTIONS)?.map((item: any) => {
-      return (
-        <Option value={item} key={item}>
-          {item}
-        </Option>
-      );
-    })}
-  </Select>
-);
-
 const DashboardPageContainer: React.FC<DashboardPageContainerProps> = ({
   dispatch,
+  query,
   facets,
   loading,
 }) => {
@@ -65,6 +51,32 @@ const DashboardPageContainer: React.FC<DashboardPageContainerProps> = ({
   ]);
   const workflowTypes = (aggregations as Map<string, any>)?.get('buckets');
 
+  const selectBefore = (
+    <Select
+      defaultValue={Object.values(COLLECTIONS)[0]}
+      value={COLLECTIONS[query?.get('workflow_type')]}
+      className="select-before"
+      onChange={(value: string) =>
+        dispatch(
+          searchQueryUpdate({
+            page: 1,
+            workflow_type: Object.keys(COLLECTIONS).find(
+              (key) => COLLECTIONS[key] === value
+            ),
+          })
+        )
+      }
+    >
+      {Object.values(COLLECTIONS).map((item: any) => {
+        return (
+          <Option value={item} key={item}>
+            {item}
+          </Option>
+        );
+      })}
+    </Select>
+  );
+
   const tabItems = [
     {
       label: <h3>Collections</h3>,
@@ -166,12 +178,16 @@ const DashboardPageContainer: React.FC<DashboardPageContainerProps> = ({
           <Search
             addonBefore={selectBefore}
             enterButton
-            disabled
-            onPressEnter={() => {
-              dispatch(push(HOLDINGPEN_SEARCH_NEW));
+            placeholder="Search Holdingpen"
+            onPressEnter={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              handleSearch(
+                dispatch,
+                query?.get('workflow_type'),
+                event?.currentTarget?.value
+              );
             }}
-            onSearch={() => {
-              dispatch(push(HOLDINGPEN_SEARCH_NEW));
+            onSearch={(value: string) => {
+              handleSearch(dispatch, query?.get('workflow_type'), value);
             }}
           />
         </div>
@@ -189,6 +205,7 @@ const DashboardPageContainer: React.FC<DashboardPageContainerProps> = ({
 const stateToProps = (state: RootStateOrAny) => ({
   facets: state.holdingpen.get('facets'),
   loading: state.holdingpen.get('loading'),
+  query: state.holdingpen.get('query'),
 });
 
 export default connect(stateToProps)(DashboardPageContainer);
diff --git a/ui/src/holdingpen-new/utils/utils.tsx b/ui/src/holdingpen-new/utils/utils.tsx
@@ -5,11 +5,19 @@ import {
   HourglassOutlined,
   LoadingOutlined,
 } from '@ant-design/icons';
+import { push } from 'connected-react-router';
+import { Action, ActionCreator } from 'redux';
 
 import storage from '../../common/storage';
-import { BACKOFFICE_LOGIN, HOLDINGPEN_LOGIN_NEW } from '../../common/routes';
+import {
+  BACKOFFICE_LOGIN,
+  HOLDINGPEN_LOGIN_NEW,
+  HOLDINGPEN_SEARCH_NEW,
+} from '../../common/routes';
+import { searchQueryUpdate } from '../../actions/holdingpen';
 
 export const COLLECTIONS: Record<string, string> = {
+  ALL: 'all collections',
   AUTHOR_CREATE: 'new authors',
   AUTHOR_UPDATE: 'author updates',
   HEP_CREATE: 'new literature submissions',
@@ -70,3 +78,18 @@ export const resolveDecision = (decision: string | number) => {
   };
   return decisions[decision] || null;
 };
+
+export const handleSearch = (
+  dispatch: ActionCreator<Action>,
+  type: string,
+  searchValue: string
+) => {
+  const query = {
+    page: 1,
+    search: searchValue,
+    ...(type !== 'ALL' ? { workflow_type: type } : {}),
+  };
+
+  dispatch(searchQueryUpdate(query));
+  dispatch(push(HOLDINGPEN_SEARCH_NEW));
+};