1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-10 01:16:39 +02:00

Archive table updates (#1097)

* minor archive table updates

* archived date cell

* archive import paths
This commit is contained in:
Tymoteusz Czech 2022-06-15 15:16:42 +02:00 committed by GitHub
parent 522f4aed41
commit 37fa469faf
10 changed files with 85 additions and 69 deletions

View File

@ -173,6 +173,7 @@ const COLUMNS = [
align: 'center', align: 'center',
Cell: FeatureSeenCell, Cell: FeatureSeenCell,
disableGlobalFilter: true, disableGlobalFilter: true,
minWidth: 85,
}, },
{ {
Header: 'Type', Header: 'Type',
@ -180,6 +181,7 @@ const COLUMNS = [
align: 'center', align: 'center',
Cell: FeatureTypeCell, Cell: FeatureTypeCell,
disableGlobalFilter: true, disableGlobalFilter: true,
minWidth: 85,
}, },
{ {
Header: 'Name', Header: 'Name',
@ -194,18 +196,21 @@ const COLUMNS = [
sortType: 'date', sortType: 'date',
Cell: DateCell, Cell: DateCell,
disableGlobalFilter: true, disableGlobalFilter: true,
minWidth: 150,
}, },
{ {
Header: 'Expired', Header: 'Expired',
accessor: 'expiredAt', accessor: 'expiredAt',
Cell: ReportExpiredCell, Cell: ReportExpiredCell,
disableGlobalFilter: true, disableGlobalFilter: true,
minWidth: 150,
}, },
{ {
Header: 'Status', Header: 'Status',
accessor: 'status', id: 'status',
Cell: ReportStatusCell, Cell: ReportStatusCell,
disableGlobalFilter: true, disableGlobalFilter: true,
minWidth: 200,
}, },
{ {
Header: 'State', Header: 'State',
@ -213,5 +218,6 @@ const COLUMNS = [
sortType: 'boolean', sortType: 'boolean',
Cell: FeatureStaleCell, Cell: FeatureStaleCell,
disableGlobalFilter: true, disableGlobalFilter: true,
minWidth: 120,
}, },
]; ];

View File

@ -56,24 +56,21 @@ export const ApiTokenTable = () => {
setHiddenColumns(hiddenColumns); setHiddenColumns(hiddenColumns);
}, [setHiddenColumns, hiddenColumns]); }, [setHiddenColumns, hiddenColumns]);
const headerSearch = (
<Search initialValue={globalFilter} onChange={setGlobalFilter} />
);
const headerActions = (
<>
{headerSearch}
<PageHeader.Divider />
<CreateApiTokenButton />
</>
);
return ( return (
<PageContent <PageContent
header={ header={
<PageHeader <PageHeader
title={`API access (${rows.length})`} title={`API access (${rows.length})`}
actions={headerActions} actions={
<>
<Search
initialValue={globalFilter}
onChange={setGlobalFilter}
/>
<PageHeader.Divider />
<CreateApiTokenButton />
</>
}
/> />
} }
> >

View File

@ -17,13 +17,13 @@ import { HighlightCell } from 'component/common/Table/cells/HighlightCell/Highli
import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Search } from 'component/common/Search/Search'; import { Search } from 'component/common/Search/Search';
import { FeatureTypeCell } from '../../common/Table/cells/FeatureTypeCell/FeatureTypeCell'; import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell';
import { FeatureSeenCell } from '../../common/Table/cells/FeatureSeenCell/FeatureSeenCell'; import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell';
import { LinkCell } from '../../common/Table/cells/LinkCell/LinkCell'; import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
import { FeatureStaleCell } from '../../feature/FeatureToggleList/FeatureStaleCell/FeatureStaleCell'; import { FeatureStaleCell } from 'component/feature/FeatureToggleList/FeatureStaleCell/FeatureStaleCell';
import { ReviveArchivedFeatureCell } from 'component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell'; import { ReviveArchivedFeatureCell } from 'component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell';
import { useStyles } from '../../feature/FeatureToggleList/styles'; import { useStyles } from 'component/feature/FeatureToggleList/styles';
import { featuresPlaceholder } from '../../feature/FeatureToggleList/FeatureToggleListTable'; import { featuresPlaceholder } from 'component/feature/FeatureToggleList/FeatureToggleListTable';
import theme from 'themes/theme'; import theme from 'themes/theme';
import { FeatureSchema } from 'openapi'; import { FeatureSchema } from 'openapi';
import { useFeatureArchiveApi } from 'hooks/api/actions/useFeatureArchiveApi/useReviveFeatureApi'; import { useFeatureArchiveApi } from 'hooks/api/actions/useFeatureArchiveApi/useReviveFeatureApi';
@ -152,7 +152,7 @@ export const ArchiveTable = ({
] ]
: []), : []),
{ {
Header: 'Status', Header: 'State',
accessor: 'stale', accessor: 'stale',
Cell: FeatureStaleCell, Cell: FeatureStaleCell,
sortType: 'boolean', sortType: 'boolean',
@ -166,7 +166,6 @@ export const ArchiveTable = ({
align: 'center', align: 'center',
maxWidth: 85, maxWidth: 85,
canSort: false, canSort: false,
disableGlobalFilter: true,
Cell: ({ row: { original } }: any) => ( Cell: ({ row: { original } }: any) => (
<ReviveArchivedFeatureCell <ReviveArchivedFeatureCell
project={original.project} project={original.project}
@ -339,21 +338,23 @@ export const ArchiveTable = ({
</Table> </Table>
</SearchHighlightProvider> </SearchHighlightProvider>
<ConditionallyRender <ConditionallyRender
condition={rows.length === 0 && searchValue?.length > 0} condition={rows.length === 0}
show={ show={() => (
<TablePlaceholder> <ConditionallyRender
No feature toggles found matching &ldquo; condition={searchValue?.length > 0}
{searchValue}&rdquo; show={
</TablePlaceholder> <TablePlaceholder>
} No feature toggles found matching &ldquo;
/> {searchValue}&rdquo;
<ConditionallyRender </TablePlaceholder>
condition={rows.length === 0 && searchValue?.length === 0} }
show={ elseShow={
<TablePlaceholder> <TablePlaceholder>
None of the feature toggles where archived yet. None of the feature toggles were archived yet.
</TablePlaceholder> </TablePlaceholder>
} }
/>
)}
/> />
</PageContent> </PageContent>
); );

View File

@ -1,6 +1,6 @@
import { VFC } from 'react'; import { VFC } from 'react';
import TimeAgo from 'react-timeago'; import TimeAgo from 'react-timeago';
import { Tooltip, Typography } from '@mui/material'; import { Tooltip, Typography, useTheme } from '@mui/material';
import { formatDateYMD } from 'utils/formatDate'; import { formatDateYMD } from 'utils/formatDate';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { useLocationSettings } from 'hooks/useLocationSettings'; import { useLocationSettings } from 'hooks/useLocationSettings';
@ -13,24 +13,37 @@ export const FeatureArchivedCell: VFC<IFeatureArchivedCellProps> = ({
value: archivedAt, value: archivedAt,
}) => { }) => {
const { locationSettings } = useLocationSettings(); const { locationSettings } = useLocationSettings();
const theme = useTheme();
if (!archivedAt) return <TextCell />; if (!archivedAt)
return (
<TextCell>
<Typography
variant="body2"
color={theme.palette.text.secondary}
>
not available
</Typography>
</TextCell>
);
return ( return (
<TextCell> <TextCell>
{archivedAt && ( <Tooltip
<Tooltip title={`Archived on: ${formatDateYMD(
title={`Archived on: ${formatDateYMD( archivedAt,
archivedAt, locationSettings.locale
locationSettings.locale )}`}
)}`} arrow
arrow >
> <Typography noWrap variant="body2" data-loading>
<Typography noWrap variant="body2" data-loading> <TimeAgo
<TimeAgo date={new Date(archivedAt)} /> date={new Date(archivedAt)}
</Typography> title=""
</Tooltip> live={false}
)} />
</Typography>
</Tooltip>
</TextCell> </TextCell>
); );
}; };

View File

@ -19,7 +19,7 @@ export const ReviveArchivedFeatureCell: VFC<IReviveArchivedFeatureCell> = ({
onClick={onRevive} onClick={onRevive}
projectId={project} projectId={project}
permission={UPDATE_FEATURE} permission={UPDATE_FEATURE}
tooltipProps={{ title: 'Revive feature' }} tooltipProps={{ title: 'Revive feature toggle' }}
> >
<Undo /> <Undo />
</PermissionIconButton> </PermissionIconButton>

View File

@ -1,17 +1,18 @@
import { useFeaturesArchive } from '../../hooks/api/getters/useFeaturesArchive/useFeaturesArchive'; import { useFeaturesArchive } from 'hooks/api/getters/useFeaturesArchive/useFeaturesArchive';
import { ArchiveTable } from './ArchiveTable/ArchiveTable'; import { ArchiveTable } from './ArchiveTable/ArchiveTable';
import { SortingRule } from 'react-table'; import { SortingRule } from 'react-table';
import { usePageTitle } from 'hooks/usePageTitle'; import { usePageTitle } from 'hooks/usePageTitle';
import { createLocalStorage } from 'utils/createLocalStorage'; import { createLocalStorage } from 'utils/createLocalStorage';
const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true }; const defaultSort: SortingRule<string> = { id: 'createdAt' };
const { value, setValue } = createLocalStorage( const { value, setValue } = createLocalStorage(
'FeaturesArchiveTable:v1', 'FeaturesArchiveTable:v1',
defaultSort defaultSort
); );
export const FeaturesArchiveTable = () => { export const FeaturesArchiveTable = () => {
usePageTitle('Archived'); usePageTitle('Archive');
const { const {
archivedFeatures = [], archivedFeatures = [],
loading, loading,
@ -20,7 +21,7 @@ export const FeaturesArchiveTable = () => {
return ( return (
<ArchiveTable <ArchiveTable
title="Archived" title="Archive"
archivedFeatures={archivedFeatures} archivedFeatures={archivedFeatures}
loading={loading} loading={loading}
storedParams={value} storedParams={value}

View File

@ -1,9 +1,9 @@
import { ArchiveTable } from './ArchiveTable/ArchiveTable'; import { ArchiveTable } from './ArchiveTable/ArchiveTable';
import { SortingRule } from 'react-table'; import { SortingRule } from 'react-table';
import { useProjectFeaturesArchive } from '../../hooks/api/getters/useProjectFeaturesArchive/useProjectFeaturesArchive'; import { useProjectFeaturesArchive } from 'hooks/api/getters/useProjectFeaturesArchive/useProjectFeaturesArchive';
import { createLocalStorage } from 'utils/createLocalStorage'; import { createLocalStorage } from 'utils/createLocalStorage';
const defaultSort: SortingRule<string> = { id: 'archivedAt', desc: true }; const defaultSort: SortingRule<string> = { id: 'archivedAt' };
interface IProjectFeaturesTable { interface IProjectFeaturesTable {
projectId: string; projectId: string;

View File

@ -68,17 +68,15 @@ export const FeatureStaleDialog = ({
open={isOpen} open={isOpen}
secondaryButtonText={'Cancel'} secondaryButtonText={'Cancel'}
primaryButtonText={`Flip to ${toggleActionText}`} primaryButtonText={`Flip to ${toggleActionText}`}
title={`Set feature status to ${toggleActionText}`} title={`Set feature state to ${toggleActionText}`}
onClick={onSubmit} onClick={onSubmit}
onClose={onClose} onClose={onClose}
> >
<> <ConditionallyRender
<ConditionallyRender condition={isStale}
condition={isStale} show={toggleToActiveContent}
show={toggleToActiveContent} elseShow={toggleToStaleContent}
elseShow={toggleToStaleContent} />
/>
</>
</Dialogue> </Dialogue>
); );
}; };

View File

@ -196,7 +196,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
!projectExists() !projectExists()
} }
onClick={reviveFeature} onClick={reviveFeature}
tooltipProps={{ title: 'Revive feature' }} tooltipProps={{ title: 'Revive feature toggle' }}
> >
<Undo /> <Undo />
</PermissionIconButton> </PermissionIconButton>

View File

@ -144,7 +144,7 @@ export const FeatureView = () => {
permission={UPDATE_FEATURE} permission={UPDATE_FEATURE}
projectId={projectId} projectId={projectId}
tooltipProps={{ tooltipProps={{
title: 'Toggle stale status', title: 'Toggle stale state',
}} }}
data-loading data-loading
> >