From 40dd07d5a859caf890b23d0cf47b5ec3f0bb7e04 Mon Sep 17 00:00:00 2001
From: karolina-siemieniuk-morawska
 <55505399+karolina-siemieniuk-morawska@users.noreply.github.com>
Date: Mon, 26 Aug 2024 16:22:41 +0200
Subject: [PATCH] ui: connect search in new holdingpen

* ref: cern-sis/issues-inspire#480
---
 ui/src/actions/holdingpen.ts                  |   2 +-
 .../__snapshots__/index.test.tsx.snap         |   7 +-
 .../components/Breadcrumbs/Breadcrumbs.tsx    |  37 ++-
 .../components/SearchFilters.tsx              |   7 +-
 .../DashboardPageContainer.tsx                | 296 ++++++++++--------
 .../utils/__tests__/utils.test.tsx            |  10 +-
 ui/src/holdingpen-new/utils/utils.tsx         |  47 ++-
 7 files changed, 252 insertions(+), 154 deletions(-)

diff --git a/ui/src/actions/holdingpen.ts b/ui/src/actions/holdingpen.ts
index fb57547bb..ae5b67ec6 100644
--- 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
index ccee76371..1390c0493 100644
--- 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
index 0424adc64..76a4668ac 100644
--- 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,12 +62,18 @@ 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"
         />
       )}
@@ -66,8 +81,12 @@ const Breadcrumbs: React.FC<BreadcrumbItemProps> = ({
   );
 };
 
+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/components/SearchFilters.tsx b/ui/src/holdingpen-new/components/SearchFilters.tsx
index 1d76a16d2..60ce7cdac 100644
--- a/ui/src/holdingpen-new/components/SearchFilters.tsx
+++ b/ui/src/holdingpen-new/components/SearchFilters.tsx
@@ -137,7 +137,12 @@ const SearchFilters: React.FC<SearchFiltersProps> = ({
                 selectedKey={selectedFilters.workflow_type}
                 onSelect={(key) => updateFilters('workflow_type', key)}
                 renderLabel={(key) => (
-                  <span className="ttc">{COLLECTIONS[key]}</span>
+                  <span className="ttc">
+                    {
+                      COLLECTIONS.find((collection) => collection.value === key)
+                        ?.key
+                    }
+                  </span>
                 )}
               />
 
diff --git a/ui/src/holdingpen-new/containers/DashboardPageContainer/DashboardPageContainer.tsx b/ui/src/holdingpen-new/containers/DashboardPageContainer/DashboardPageContainer.tsx
index fc17acc6b..1a7c06999 100644
--- a/ui/src/holdingpen-new/containers/DashboardPageContainer/DashboardPageContainer.tsx
+++ b/ui/src/holdingpen-new/containers/DashboardPageContainer/DashboardPageContainer.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useMemo } 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,141 +16,192 @@ 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 & {}> = {
-  textAlign: 'center',
-};
-
 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 TEXT_CENTER: Record<string | number, string & {}> = {
+  textAlign: 'center',
+};
 
 const DashboardPageContainer: React.FC<DashboardPageContainerProps> = ({
   dispatch,
+  query,
   facets,
   loading,
 }) => {
   useEffect(() => {
     dispatch(searchQueryReset());
     dispatch(fetchSearchResults());
-  }, []);
+  }, [dispatch]);
+
+  const workflowTypes: List<Map<string, any>> = useMemo(() => {
+    return facets?.getIn([
+      '_filter_workflow_type',
+      'workflow_type',
+      'buckets',
+    ]) as List<Map<string, any>>;
+  }, [facets]);
+
+  const handleSelectChange = useCallback(
+    (value: string) => {
+      const selectedCollection = COLLECTIONS.find(
+        (collection) => collection?.value === value
+      );
+      if (selectedCollection) {
+        dispatch(
+          searchQueryUpdate({
+            page: 1,
+            workflow_type: selectedCollection?.value,
+          })
+        );
+      } else {
+        dispatch(searchQueryReset());
+      }
+    },
+    [dispatch]
+  );
 
-  const aggregations = facets?.getIn([
-    '_filter_workflow_type',
-    'workflow_type',
-  ]);
-  const workflowTypes = (aggregations as Map<string, any>)?.get('buckets');
+  const renderSelectBefore = useMemo(
+    () => (
+      <Select
+        defaultValue={COLLECTIONS[0]?.key}
+        value={
+          COLLECTIONS.find(
+            (collection) => collection?.key === query?.get('workflow_type')
+          )?.key
+        }
+        className="select-before"
+        onChange={handleSelectChange}
+      >
+        {COLLECTIONS.map((item) => (
+          <Option value={item?.value || ''} key={item?.key}>
+            {item?.key}
+          </Option>
+        ))}
+      </Select>
+    ),
+    [query, handleSelectChange]
+  );
 
-  const tabItems = [
-    {
-      label: <h3>Collections</h3>,
-      key: '1',
-      children: (
-        <>
-          <Link
-            to={HOLDINGPEN_SEARCH_NEW}
-            className="db w-100 tc f5 mt4"
-            onClick={() => {
-              dispatch(searchQueryReset());
-            }}
-            data-testid="view-all"
+  const renderWorkflowStatus = useCallback(
+    (type: Map<string, any>) =>
+      (type?.getIn(['status', 'buckets']) as List<any>)?.map((status) => (
+        <a
+          href={HOLDINGPEN_SEARCH_NEW}
+          key={status?.get('key')}
+          onClick={() =>
+            dispatch(
+              searchQueryUpdate({
+                page: 1,
+                size: 10,
+                workflow_type: type?.get('key'),
+                status: status?.get('key'),
+              })
+            )
+          }
+        >
+          <div
+            className={classNames(
+              'flex justify-between',
+              status?.get('key')?.toLowerCase()
+            )}
           >
-            View all
-          </Link>
-          <div className="cards-container mt4">
-            {workflowTypes?.map((type: Map<string, any>) => {
-              return (
-                <Card
-                  title={
-                    <div>
-                      <p>{COLLECTIONS[type?.get('key')]}</p>
-                      <p className={classNames('f2 mb0 black')}>
-                        {type?.get('doc_count')}
-                      </p>
-                      <Link
-                        to={HOLDINGPEN_SEARCH_NEW}
-                        className="normal f6"
-                        onClick={() => {
-                          dispatch(
-                            searchQueryUpdate({
-                              page: 1,
-                              size: 10,
-                              workflow_type: type?.get('key'),
-                            })
-                          );
-                        }}
-                      >
-                        View all
-                      </Link>
-                    </div>
-                  }
-                  headStyle={TEXT_CENTER}
-                  className={COLLECTIONS[type?.get('key')]
-                    .toLowerCase()
-                    .replace(/ /g, '-')}
-                  key={type?.get('key')}
-                >
-                  {(type?.getIn(['status', 'buckets']) as List<any>)?.map(
-                    (status: any) => (
-                      <a
-                        href={HOLDINGPEN_SEARCH_NEW}
-                        key={status?.get('key')}
-                        onClick={() => {
-                          dispatch(
-                            searchQueryUpdate({
-                              page: 1,
-                              size: 10,
-                              workflow_type: type?.get('key'),
-                              status: status?.get('key'),
-                            })
-                          );
-                        }}
-                      >
-                        <div
-                          className={classNames(
-                            'flex justify-between',
-                            status?.get('key')?.toLowerCase()
-                          )}
-                        >
-                          <p className="ttc">
-                            {getIcon(status?.get('key'))}
-                            {status?.get('key')}
-                          </p>
-                          <span className="b">{status?.get('doc_count')}</span>
-                        </div>
-                      </a>
-                    )
-                  )}
-                </Card>
-              );
-            })}
+            <p className="ttc">
+              {getIcon(status?.get('key'))}
+              {status?.get('key')}
+            </p>
+            <span className="b">{status?.get('doc_count')}</span>
           </div>
-        </>
-      ),
+        </a>
+      )),
+    [dispatch]
+  );
+
+  const renderWorkflowCards = useMemo(
+    () =>
+      workflowTypes?.map((type: Map<string, any>) => (
+        <Card
+          title={
+            <div>
+              <p>
+                {
+                  COLLECTIONS.find(
+                    (collection) => collection?.value === type?.get('key')
+                  )?.key
+                }
+              </p>
+              <p className={classNames('f2 mb0 black')}>
+                {type?.get('doc_count')}
+              </p>
+              <Link
+                to={HOLDINGPEN_SEARCH_NEW}
+                className="normal f6"
+                onClick={() =>
+                  dispatch(
+                    searchQueryUpdate({
+                      page: 1,
+                      size: 10,
+                      workflow_type: type?.get('key'),
+                    })
+                  )
+                }
+              >
+                View all
+              </Link>
+            </div>
+          }
+          headStyle={TEXT_CENTER}
+          className={COLLECTIONS.find(
+            (collection) => collection?.value === type?.get('key')
+          )
+            ?.key.toLowerCase()
+            .replace(/ /g, '-')}
+          key={type?.get('key')}
+        >
+          {renderWorkflowStatus(type)}
+        </Card>
+      )),
+    [workflowTypes, renderWorkflowStatus, dispatch]
+  );
+
+  const tabItems = useMemo(
+    () => [
+      {
+        label: <h3>Collections</h3>,
+        key: '1',
+        children: (
+          <>
+            <Link
+              to={HOLDINGPEN_SEARCH_NEW}
+              className="db w-100 tc f5 mt4"
+              onClick={() => dispatch(searchQueryReset())}
+              data-testid="view-all"
+            >
+              View all
+            </Link>
+            <div className="cards-container mt4">{renderWorkflowCards}</div>
+          </>
+        ),
+      },
+    ],
+    [renderWorkflowCards, dispatch]
+  );
+
+  const handleSearchEvent = useCallback(
+    (value: string) => {
+      handleSearch(dispatch, query?.get('workflow_type'), value);
     },
-  ];
+    [dispatch, query]
+  );
 
   return (
     <div
@@ -164,15 +213,13 @@ const DashboardPageContainer: React.FC<DashboardPageContainerProps> = ({
         <h2 className="f2 center">Search Holdingpen</h2>
         <div className="search-container">
           <Search
-            addonBefore={selectBefore}
+            addonBefore={renderSelectBefore}
             enterButton
-            disabled
-            onPressEnter={() => {
-              dispatch(push(HOLDINGPEN_SEARCH_NEW));
-            }}
-            onSearch={() => {
-              dispatch(push(HOLDINGPEN_SEARCH_NEW));
-            }}
+            placeholder="Search Holdingpen"
+            onPressEnter={(event) =>
+              handleSearchEvent(event?.currentTarget?.value)
+            }
+            onSearch={handleSearchEvent}
           />
         </div>
         <h2 className="f2 center mb4">Overview</h2>
@@ -186,9 +233,10 @@ const DashboardPageContainer: React.FC<DashboardPageContainerProps> = ({
   );
 };
 
-const stateToProps = (state: RootStateOrAny) => ({
+const mapStateToProps = (state: RootStateOrAny) => ({
   facets: state.holdingpen.get('facets'),
   loading: state.holdingpen.get('loading'),
+  query: state.holdingpen.get('query'),
 });
 
-export default connect(stateToProps)(DashboardPageContainer);
+export default connect(mapStateToProps)(DashboardPageContainer);
diff --git a/ui/src/holdingpen-new/utils/__tests__/utils.test.tsx b/ui/src/holdingpen-new/utils/__tests__/utils.test.tsx
index aa86723fd..e72471732 100644
--- a/ui/src/holdingpen-new/utils/__tests__/utils.test.tsx
+++ b/ui/src/holdingpen-new/utils/__tests__/utils.test.tsx
@@ -2,20 +2,12 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import { getIcon, refreshToken, COLLECTIONS } from '../utils';
+import { getIcon, refreshToken } from '../utils';
 import storage from '../../../common/storage';
 import { BACKOFFICE_LOGIN } from '../../../common/routes';
 
 jest.mock('../../../common/storage');
 
-describe('COLLECTIONS', () => {
-  it('should have the correct values', () => {
-    expect(COLLECTIONS.AUTHOR_CREATE).toBe('new authors');
-    expect(COLLECTIONS.AUTHOR_UPDATE).toBe('author updates');
-    expect(COLLECTIONS.HEP_CREATE).toBe('new literature submissions');
-  });
-});
-
 describe('getIcon', () => {
   it('should return HourglassOutlined for approval status', () => {
     const { container } = render(getIcon('approval') as React.ReactElement);
diff --git a/ui/src/holdingpen-new/utils/utils.tsx b/ui/src/holdingpen-new/utils/utils.tsx
index fb9423a79..e97b4cd9b 100644
--- a/ui/src/holdingpen-new/utils/utils.tsx
+++ b/ui/src/holdingpen-new/utils/utils.tsx
@@ -5,15 +5,35 @@ 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> = {
-  AUTHOR_CREATE: 'new authors',
-  AUTHOR_UPDATE: 'author updates',
-  HEP_CREATE: 'new literature submissions',
-};
+export const COLLECTIONS = [
+  {
+    key: 'all collections',
+    value: undefined,
+  },
+  {
+    key: 'new authors',
+    value: 'AUTHOR_CREATE',
+  },
+  {
+    key: 'author updates',
+    value: 'AUTHOR_UPDATE',
+  },
+  {
+    key: 'new literature submissions',
+    value: 'HEP_CREATE',
+  },
+];
 
 export const getIcon = (status: string) => {
   switch (status?.toLowerCase()) {
@@ -70,3 +90,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,
+    workflow_type: type,
+  };
+
+  dispatch(searchQueryUpdate(query));
+  dispatch(push(HOLDINGPEN_SEARCH_NEW));
+};