Archive table updates (#1097)

* minor archive table updates * archived date cell * archive import paths
2025-03-18 00:19:49 +01:00 · 2022-06-15 15:16:42 +02:00 · 2022-06-15 15:16:42 +02:00 · 37fa469faf
commit 37fa469faf
parent 522f4aed41
10 changed files with 85 additions and 69 deletions
--- a/frontend/src/component/Reporting/ReportTable/ReportTable.tsx
+++ b/frontend/src/component/Reporting/ReportTable/ReportTable.tsx
@ -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,
    },
 ];
--- a/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
@ -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 />
+                        </>
+                    }
                />
            }
        >
--- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
@ -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>
    );
--- a/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx
+++ b/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx
@ -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>
    );
 };
--- a/frontend/src/component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ReviveArchivedFeatureCell/ReviveArchivedFeatureCell.tsx
@ -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>
--- a/frontend/src/component/archive/FeaturesArchiveTable.tsx
+++ b/frontend/src/component/archive/FeaturesArchiveTable.tsx
@ -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}
--- a/frontend/src/component/archive/ProjectFeaturesArchiveTable.tsx
+++ b/frontend/src/component/archive/ProjectFeaturesArchiveTable.tsx
@ -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;
--- a/frontend/src/component/common/FeatureStaleDialog/FeatureStaleDialog.tsx
+++ b/frontend/src/component/common/FeatureStaleDialog/FeatureStaleDialog.tsx
@ -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>
    );
 };
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
@ -196,7 +196,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                                !projectExists()
                            }
                            onClick={reviveFeature}
-                            tooltipProps={{ title: 'Revive feature' }}
+                            tooltipProps={{ title: 'Revive feature toggle' }}
                        >
                            <Undo />
                        </PermissionIconButton>
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@ -144,7 +144,7 @@ export const FeatureView = () => {
                                    permission={UPDATE_FEATURE}
                                    projectId={projectId}
                                    tooltipProps={{
-                                        title: 'Toggle stale status',
+                                        title: 'Toggle stale state',
                                    }}
                                    data-loading
                                >