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:
parent
522f4aed41
commit
37fa469faf
@ -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,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -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 />
|
||||||
|
</>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
@ -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 “
|
condition={searchValue?.length > 0}
|
||||||
{searchValue}”
|
show={
|
||||||
</TablePlaceholder>
|
<TablePlaceholder>
|
||||||
}
|
No feature toggles found matching “
|
||||||
/>
|
{searchValue}”
|
||||||
<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>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
|
@ -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}
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user