1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-18 00:19:49 +01: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',
Cell: FeatureSeenCell,
disableGlobalFilter: true,
minWidth: 85,
},
{
Header: 'Type',
@ -180,6 +181,7 @@ const COLUMNS = [
align: 'center',
Cell: FeatureTypeCell,
disableGlobalFilter: true,
minWidth: 85,
},
{
Header: 'Name',
@ -194,18 +196,21 @@ const COLUMNS = [
sortType: 'date',
Cell: DateCell,
disableGlobalFilter: true,
minWidth: 150,
},
{
Header: 'Expired',
accessor: 'expiredAt',
Cell: ReportExpiredCell,
disableGlobalFilter: true,
minWidth: 150,
},
{
Header: 'Status',
accessor: 'status',
id: 'status',
Cell: ReportStatusCell,
disableGlobalFilter: true,
minWidth: 200,
},
{
Header: 'State',
@ -213,5 +218,6 @@ const COLUMNS = [
sortType: 'boolean',
Cell: FeatureStaleCell,
disableGlobalFilter: true,
minWidth: 120,
},
];

View File

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

View File

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

View File

@ -19,7 +19,7 @@ export const ReviveArchivedFeatureCell: VFC<IReviveArchivedFeatureCell> = ({
onClick={onRevive}
projectId={project}
permission={UPDATE_FEATURE}
tooltipProps={{ title: 'Revive feature' }}
tooltipProps={{ title: 'Revive feature toggle' }}
>
<Undo />
</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 { SortingRule } from 'react-table';
import { usePageTitle } from 'hooks/usePageTitle';
import { createLocalStorage } from 'utils/createLocalStorage';
const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true };
const defaultSort: SortingRule<string> = { id: 'createdAt' };
const { value, setValue } = createLocalStorage(
'FeaturesArchiveTable:v1',
defaultSort
);
export const FeaturesArchiveTable = () => {
usePageTitle('Archived');
usePageTitle('Archive');
const {
archivedFeatures = [],
loading,
@ -20,7 +21,7 @@ export const FeaturesArchiveTable = () => {
return (
<ArchiveTable
title="Archived"
title="Archive"
archivedFeatures={archivedFeatures}
loading={loading}
storedParams={value}

View File

@ -1,9 +1,9 @@
import { ArchiveTable } from './ArchiveTable/ArchiveTable';
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';
const defaultSort: SortingRule<string> = { id: 'archivedAt', desc: true };
const defaultSort: SortingRule<string> = { id: 'archivedAt' };
interface IProjectFeaturesTable {
projectId: string;

View File

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

View File

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

View File

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