diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx index 94db377e26..7dd8c792d7 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx @@ -17,7 +17,6 @@ import React from 'react'; import { fireEvent, render, waitFor, screen } from '@testing-library/react'; import { EntitySearchBar } from './EntitySearchBar'; -import { DefaultEntityFilters } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; import { MockEntityListContextProvider } from '../../testUtils/providers'; @@ -25,12 +24,15 @@ describe('EntitySearchBar', () => { it('should display search value and execute set callback', async () => { const updateFilters = jest.fn(); - const filters: DefaultEntityFilters = { - text: new EntityTextFilter('hello'), - }; - render( - + , ); diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx index 91e411c562..a56119ac70 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx @@ -24,8 +24,8 @@ import { } from '@material-ui/core'; import Clear from '@material-ui/icons/Clear'; import Search from '@material-ui/icons/Search'; -import React, { useState } from 'react'; -import useDebounce from 'react-use/esm/useDebounce'; +import React, { useEffect, useMemo, useState } from 'react'; +import useDebounce from 'react-use/lib/useDebounce'; import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; @@ -52,8 +52,17 @@ const useStyles = makeStyles( export const EntitySearchBar = () => { const classes = useStyles(); - const { filters, updateFilters } = useEntityList(); - const [search, setSearch] = useState(filters.text?.value ?? ''); + const { + updateFilters, + queryParameters: { text: textParameter }, + } = useEntityList(); + + const queryParamTextFilter = useMemo( + () => [textParameter].flat()[0], + [textParameter], + ); + + const [search, setSearch] = useState(queryParamTextFilter ?? ''); useDebounce( () => { @@ -65,6 +74,12 @@ export const EntitySearchBar = () => { [search, updateFilters], ); + useEffect(() => { + if (queryParamTextFilter) { + setSearch(queryParamTextFilter); + } + }, [queryParamTextFilter]); + return ( diff --git a/plugins/catalog-react/src/filters.ts b/plugins/catalog-react/src/filters.ts index dda13338a7..08be27a561 100644 --- a/plugins/catalog-react/src/filters.ts +++ b/plugins/catalog-react/src/filters.ts @@ -116,6 +116,10 @@ export class EntityTextFilter implements EntityFilter { }; } + toQueryValue() { + return this.value; + } + private toUpperArray( value: Array, ): Array {