ui: connect search in new holdingpen

* ref: cern-sis/issues-inspire#480
karolina-siemieniuk-morawska · Aug 28, 2024 · 40dd07d · 40dd07d
1 parent 20b4325
commit 40dd07d
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 154 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/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>
                 )}
               />