From dd1246d67c0b907bf84dae1ea891d37c58e71288 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Mon, 13 Jun 2022 15:22:27 +0200 Subject: [PATCH] Fix/archive table (#1086) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: upgrade search to use the new search component (#1073) * feat: upgrade project list search to use the new search field * cleanup unused imports * feat: add upgraded search to projects and applications, polish search UX * refactor: TableSearch to new Search common component Co-authored-by: Fredrik Strand Oseberg * fix: resolve issues with project edit/delete button conditions (#1084) * fix: fix UPDATE_PROJECT permission checks for editors * fix: disable delete button for the default project * fix: warn about access on edit project page * fix: hide broken project edit/delete buttons for OSS * refactor: avoid project card clicks when closing modals * refactor: improve default project deletion message * refactor: improve project access error text * Update src/component/project/ProjectCard/ProjectCard.tsx Co-authored-by: Thomas Heartman * refactor: fix string quotes * refactor: improve disabled menu item contrast * refactor: remove Enterprise routes for OSS Co-authored-by: Thomas Heartman * fix: archive table small adjustments * refactor archive table params Co-authored-by: Nuno Góis Co-authored-by: Fredrik Strand Oseberg Co-authored-by: olav Co-authored-by: Thomas Heartman --- .../archive/ArchiveTable/ArchiveTable.tsx | 21 +++++++------------ .../FeatureArchivedCell.tsx | 8 +++---- .../ReviveArchivedFeatureCell.tsx | 9 ++------ .../archive/FeaturesArchiveTable.tsx | 13 ++++-------- .../archive/ProjectFeaturesArchiveTable.tsx | 4 ---- 5 files changed, 17 insertions(+), 38 deletions(-) rename frontend/src/component/{common/Table/cells => archive/ArchiveTable}/FeatureArchivedCell/FeatureArchivedCell.tsx (79%) diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx index 4d85be411d..1db49013a8 100644 --- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx +++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx @@ -25,14 +25,15 @@ import { ReviveArchivedFeatureCell } from 'component/archive/ArchiveTable/Revive import { useStyles } from '../../feature/FeatureToggleList/styles'; import { featuresPlaceholder } from '../../feature/FeatureToggleList/FeatureToggleListTable'; import theme from 'themes/theme'; -import { FeatureSchema } from '../../../openapi'; +import { FeatureSchema } from 'openapi'; import { useFeatureArchiveApi } from 'hooks/api/actions/useFeatureArchiveApi/useReviveFeatureApi'; import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { useSearch } from 'hooks/useSearch'; -import { FeatureArchivedCell } from '../../common/Table/cells/FeatureArchivedCell/FeatureArchivedCell'; +import { FeatureArchivedCell } from './FeatureArchivedCell/FeatureArchivedCell'; import { useVirtualizedRange } from 'hooks/useVirtualizedRange'; -import { URLSearchParamsInit } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; +import { useWindowVirtualizer } from '@tanstack/react-virtual'; export interface IFeaturesArchiveTableProps { archivedFeatures: FeatureSchema[]; @@ -45,13 +46,6 @@ export interface IFeaturesArchiveTableProps { | SortingRule | ((prev: SortingRule) => SortingRule) ) => SortingRule; - searchParams: URLSearchParams; - setSearchParams: ( - nextInit: URLSearchParamsInit, - navigateOptions?: - | { replace?: boolean | undefined; state?: any } - | undefined - ) => void; } export const ArchiveTable = ({ @@ -60,8 +54,6 @@ export const ArchiveTable = ({ refetch, storedParams, setStoredParams, - searchParams, - setSearchParams, title, }: IFeaturesArchiveTableProps) => { const rowHeight = theme.shape.tableRowHeight; @@ -70,6 +62,7 @@ export const ArchiveTable = ({ const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg')); const { setToastData, setToastApiError } = useToast(); + const [searchParams, setSearchParams] = useSearchParams(); const { reviveFeature } = useFeatureArchiveApi(); const [searchValue, setSearchValue] = useState( @@ -108,7 +101,7 @@ export const ArchiveTable = ({ Cell: FeatureTypeCell, }, { - Header: 'Feature toggle Name', + Header: 'Feature toggle name', accessor: 'name', searchable: true, minWidth: 100, @@ -249,7 +242,7 @@ export const ArchiveTable = ({ replace: true, }); setStoredParams({ id: sortBy[0].id, desc: sortBy[0].desc || false }); - }, [loading, sortBy, searchValue, setSearchParams, setStoredParams]); + }, [loading, sortBy, searchValue]); const [firstRenderedIndex, lastRenderedIndex] = useVirtualizedRange(rowHeight); diff --git a/frontend/src/component/common/Table/cells/FeatureArchivedCell/FeatureArchivedCell.tsx b/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx similarity index 79% rename from frontend/src/component/common/Table/cells/FeatureArchivedCell/FeatureArchivedCell.tsx rename to frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx index 3afbd92403..75c94812f0 100644 --- a/frontend/src/component/common/Table/cells/FeatureArchivedCell/FeatureArchivedCell.tsx +++ b/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx @@ -1,9 +1,9 @@ -import React, { VFC } from 'react'; +import { VFC } from 'react'; import TimeAgo from 'react-timeago'; import { Tooltip, Typography } from '@mui/material'; -import { formatDateYMD } from '../../../../../utils/formatDate'; -import { TextCell } from '../TextCell/TextCell'; -import { useLocationSettings } from '../../../../../hooks/useLocationSettings'; +import { formatDateYMD } from 'utils/formatDate'; +import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; +import { useLocationSettings } from 'hooks/useLocationSettings'; interface IFeatureArchivedCellProps { value?: string | Date | null; diff --git a/frontend/src/component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell.tsx b/frontend/src/component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell.tsx index aa22d9a8f2..995810c38c 100644 --- a/frontend/src/component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell.tsx +++ b/frontend/src/component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell.tsx @@ -1,4 +1,4 @@ -import { SyntheticEvent, VFC } from 'react'; +import { VFC } from 'react'; import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell'; import { Undo } from '@mui/icons-material'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; @@ -13,15 +13,10 @@ export const ReviveArchivedFeatureCell: VFC = ({ onRevive, project, }) => { - const handleClick = (e: SyntheticEvent) => { - e.preventDefault(); - onRevive(); - }; - return ( = { id: 'createdAt', desc: true }; +const { value, setValue } = createLocalStorage( + 'FeaturesArchiveTable:v1', + defaultSort +); export const FeaturesArchiveTable = () => { usePageTitle('Archived'); @@ -15,19 +18,11 @@ export const FeaturesArchiveTable = () => { refetchArchived, } = useFeaturesArchive(); - const [searchParams, setSearchParams] = useSearchParams(); - const { value, setValue } = createLocalStorage( - 'FeaturesArchiveTable:v1', - defaultSort - ); - return (