Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-08 01:15:49 +02:00
Code Issues Projects Releases Wiki Activity

fix: prevent search reset on project overview (#1045)

Browse Source 
* fix: prevent search reset on project overview

* fix: use global filter for search in project
This commit is contained in:
Tymoteusz Czech 2022-05-31 10:31:52 +02:00 committed by GitHub
parent 36196ad6d5
commit 670bb33fad
1 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -1,7 +1,7 @@
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { Add } from '@mui/icons-material'; import { Add } from '@mui/icons-material';
import { useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { useFilters, useSortBy, useTable } from 'react-table'; import { useGlobalFilter, useSortBy, useTable } from 'react-table';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { PageContent } from 'component/common/PageContent/PageContent'; import { PageContent } from 'component/common/PageContent/PageContent';
@ -181,14 +181,12 @@ export const ProjectFeatureToggles = ({
Cell: FeatureSeenCell, Cell: FeatureSeenCell,
sortType: 'date', sortType: 'date',
align: 'center', align: 'center',
disableGlobalFilter: true,
}, },
{ {
Header: 'Type', Header: 'Type',
accessor: 'type', accessor: 'type',
Cell: FeatureTypeCell, Cell: FeatureTypeCell,
align: 'center', align: 'center',
disableGlobalFilter: true,
}, },
{ {
Header: 'Feature toggle name', Header: 'Feature toggle name',
@ -203,14 +201,14 @@ export const ProjectFeatureToggles = ({
minWidth: 100, minWidth: 100,
maxWidth: 200, maxWidth: 200,
sortType: 'alphanumeric', sortType: 'alphanumeric',
disableGlobalFilter: false,
}, },
{ {
Header: 'Created', Header: 'Created',
accessor: 'createdAt', accessor: 'createdAt',
Cell: DateCell, Cell: DateCell,
sortType: 'date', sortType: 'date',
align: 'center', minWidth: 120,
disableGlobalFilter: true,
}, },
...environments.map(name => ({ ...environments.map(name => ({
Header: loading ? () => '' : name, Header: loading ? () => '' : name,
@ -218,7 +216,6 @@ export const ProjectFeatureToggles = ({
minWidth: 90, minWidth: 90,
accessor: `environments.${name}`, accessor: `environments.${name}`,
align: 'center', align: 'center',
disableGlobalFilter: true,
Cell: ({ Cell: ({
value, value,
row: { original: feature }, row: { original: feature },
@ -248,7 +245,6 @@ export const ProjectFeatureToggles = ({
<ActionsCell projectId={projectId} {...props} /> <ActionsCell projectId={projectId} {...props} />
), ),
disableSortBy: true, disableSortBy: true,
disableGlobalFilter: true,
}, },
], ],
[projectId, environments, onToggle, loading] [projectId, environments, onToggle, loading]
@ -294,9 +290,7 @@ export const ProjectFeatureToggles = ({
}, },
], ],
hiddenColumns, hiddenColumns,
filters: [ globalFilter: searchParams.get('search') || '',
{ id: 'name', value: searchParams.get('search') || '' },
],
}; };
}, },
[environments] // eslint-disable-line react-hooks/exhaustive-deps [environments] // eslint-disable-line react-hooks/exhaustive-deps
@ -306,11 +300,11 @@ export const ProjectFeatureToggles = ({
allColumns, allColumns,
headerGroups, headerGroups,
rows, rows,
state: { filters, sortBy, hiddenColumns }, state: { globalFilter, sortBy, hiddenColumns },
getTableBodyProps, getTableBodyProps,
getTableProps, getTableProps,
prepareRow, prepareRow,
setFilter, setGlobalFilter,
setHiddenColumns, setHiddenColumns,
} = useTable( } = useTable(
{ {
@ -321,18 +315,14 @@ export const ProjectFeatureToggles = ({
autoResetGlobalFilter: false, autoResetGlobalFilter: false,
disableSortRemove: true, disableSortRemove: true,
autoResetSortBy: false, autoResetSortBy: false,
defaultColumn: {
disableGlobalFilter: true,
},
}, },
useFilters, useGlobalFilter,
useSortBy useSortBy
); );
const filter = useMemo(
() =>
filters?.find(filterRow => filterRow?.id === 'name')?.value ||
initialState.filters[0].value,
[filters, initialState]
);
useEffect(() => { useEffect(() => {
if (loading) { if (loading) {
return; return;
@ -342,8 +332,8 @@ export const ProjectFeatureToggles = ({
if (sortBy[0].desc) { if (sortBy[0].desc) {
tableState.order = 'desc'; tableState.order = 'desc';
} }
if (filter) { if (globalFilter) {
tableState.search = filter; tableState.search = globalFilter;
} }
tableState.columns = allColumns tableState.columns = allColumns
.map(({ id }) => id) .map(({ id }) => id)
@ -356,7 +346,8 @@ export const ProjectFeatureToggles = ({
setSearchParams(tableState, { setSearchParams(tableState, {
replace: true, replace: true,
}); });
}, [loading, sortBy, hiddenColumns, filter, setSearchParams, allColumns]); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [loading, sortBy, hiddenColumns, globalFilter, setSearchParams]);
const onCustomizeColumns = useCallback( const onCustomizeColumns = useCallback(
visibleColumns => { visibleColumns => {
@ -383,8 +374,8 @@ export const ProjectFeatureToggles = ({
actions={ actions={
<> <>
<TableSearch <TableSearch
initialValue={filter} initialValue={globalFilter}
onChange={value => setFilter('name', value)} onChange={value => setGlobalFilter(value)}
/> />
<ColumnsMenu <ColumnsMenu
allColumns={allColumns} allColumns={allColumns}
@ -418,7 +409,7 @@ export const ProjectFeatureToggles = ({
/> />
} }
> >
<SearchHighlightProvider value={filter}> <SearchHighlightProvider value={globalFilter}>
<Table {...getTableProps()}> <Table {...getTableProps()}>
<SortableTableHeader <SortableTableHeader
// @ts-expect-error -- verify after `react-table` v8 // @ts-expect-error -- verify after `react-table` v8
@ -445,11 +436,11 @@ export const ProjectFeatureToggles = ({
condition={rows.length === 0} condition={rows.length === 0}
show={ show={
<ConditionallyRender <ConditionallyRender
condition={filter?.length > 0} condition={globalFilter?.length > 0}
show={ show={
<TablePlaceholder> <TablePlaceholder>
No features found matching &ldquo; No features found matching &ldquo;
{filter} {globalFilter}
&rdquo; &rdquo;
</TablePlaceholder> </TablePlaceholder>
} }