diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportExpiredCell/formatExpiredAt.ts b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportExpiredCell/formatExpiredAt.ts
index c0a3a83cc44c..fbbfc59c5f1d 100644
--- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportExpiredCell/formatExpiredAt.ts
+++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportExpiredCell/formatExpiredAt.ts
@@ -11,7 +11,7 @@ export const formatExpiredAt = (
const { type, createdAt } = feature;
const featureType = featureTypes.find(
- (featureType) => featureType.name === type,
+ (featureType) => featureType.id === type,
);
if (
diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportStatusCell/formatStatus.ts b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportStatusCell/formatStatus.ts
index 2d7a2999a358..821fb0fd35ca 100644
--- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportStatusCell/formatStatus.ts
+++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportStatusCell/formatStatus.ts
@@ -13,7 +13,7 @@ export const formatStatus = (
const { type, createdAt } = feature;
const featureType = featureTypes.find(
- (featureType) => featureType.name === type,
+ (featureType) => featureType.id === type,
);
const date = parseISO(createdAt);
const now = new Date();
diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
index 43daaf87c460..9b289b969ae0 100644
--- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
+++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
@@ -1,35 +1,35 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
import {
IEnvironments,
IFeatureToggleListItem,
-} from 'interfaces/featureToggle';
-import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
-import { PageContent } from 'component/common/PageContent/PageContent';
-import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { sortTypes } from 'utils/sortTypes';
+} from "interfaces/featureToggle";
+import { TablePlaceholder, VirtualizedTable } from "component/common/Table";
+import { PageContent } from "component/common/PageContent/PageContent";
+import { SearchHighlightProvider } from "component/common/Table/SearchHighlightContext/SearchHighlightContext";
+import { PageHeader } from "component/common/PageHeader/PageHeader";
+import { sortTypes } from "utils/sortTypes";
import {
useFlexLayout,
useGlobalFilter,
useSortBy,
useTable,
-} from 'react-table';
-import { useMediaQuery, useTheme } from '@mui/material';
-import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell';
-import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell';
-import { FeatureNameCell } from 'component/common/Table/cells/FeatureNameCell/FeatureNameCell';
-import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
-import { FeatureStaleCell } from 'component/feature/FeatureToggleList/FeatureStaleCell/FeatureStaleCell';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Search } from 'component/common/Search/Search';
-import { ReportExpiredCell } from './ReportExpiredCell/ReportExpiredCell';
-import { ReportStatusCell } from './ReportStatusCell/ReportStatusCell';
-import { formatStatus, ReportingStatus } from './ReportStatusCell/formatStatus';
-import { formatExpiredAt } from './ReportExpiredCell/formatExpiredAt';
-import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
-import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
+} from "react-table";
+import { useMediaQuery, useTheme } from "@mui/material";
+import { FeatureSeenCell } from "component/common/Table/cells/FeatureSeenCell/FeatureSeenCell";
+import { FeatureTypeCell } from "component/common/Table/cells/FeatureTypeCell/FeatureTypeCell";
+import { FeatureNameCell } from "component/common/Table/cells/FeatureNameCell/FeatureNameCell";
+import { DateCell } from "component/common/Table/cells/DateCell/DateCell";
+import { FeatureStaleCell } from "component/feature/FeatureToggleList/FeatureStaleCell/FeatureStaleCell";
+import { ConditionallyRender } from "component/common/ConditionallyRender/ConditionallyRender";
+import { Search } from "component/common/Search/Search";
+import { ReportExpiredCell } from "./ReportExpiredCell/ReportExpiredCell";
+import { ReportStatusCell } from "./ReportStatusCell/ReportStatusCell";
+import { formatStatus, ReportingStatus } from "./ReportStatusCell/formatStatus";
+import { formatExpiredAt } from "./ReportExpiredCell/formatExpiredAt";
+import { useConditionallyHiddenColumns } from "hooks/useConditionallyHiddenColumns";
+import useUiConfig from "hooks/api/getters/useUiConfig/useUiConfig";
+import { FeatureEnvironmentSeenCell } from "component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell";
+import useFeatureTypes from "hooks/api/getters/useFeatureTypes/useFeatureTypes";
interface IReportTableProps {
projectId: string;
@@ -50,12 +50,12 @@ export interface IReportTableRow {
export const ReportTable = ({ projectId, features }: IReportTableProps) => {
const theme = useTheme();
- const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
- const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
- const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
+ const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
+ const isMediumScreen = useMediaQuery(theme.breakpoints.down("lg"));
const { uiConfig } = useUiConfig();
const showEnvironmentLastSeen = Boolean(
- uiConfig.flags.lastSeenByEnvironment,
+ uiConfig.flags.lastSeenByEnvironment
);
const { featureTypes } = useFeatureTypes();
@@ -72,22 +72,22 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
createdAt: report.createdAt,
expiredAt: formatExpiredAt(report, featureTypes),
})),
- [projectId, features],
+ [projectId, features, featureTypes]
);
const initialState = useMemo(
() => ({
hiddenColumns: [],
- sortBy: [{ id: 'createdAt' }],
+ sortBy: [{ id: "createdAt" }],
}),
- [],
+ []
);
const COLUMNS = useMemo(
() => [
{
- Header: 'Seen',
- accessor: 'lastSeenAt',
+ Header: "Seen",
+ accessor: "lastSeenAt",
Cell: ({ value, row: { original: feature } }: any) => {
return showEnvironmentLastSeen ? (
@@ -95,57 +95,57 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
);
},
- align: 'center',
+ align: "center",
maxWidth: 80,
},
{
- Header: 'Type',
- accessor: 'type',
- align: 'center',
+ Header: "Type",
+ accessor: "type",
+ align: "center",
Cell: FeatureTypeCell,
disableGlobalFilter: true,
maxWidth: 85,
},
{
- Header: 'Name',
- accessor: 'name',
- sortType: 'alphanumeric',
+ Header: "Name",
+ accessor: "name",
+ sortType: "alphanumeric",
Cell: FeatureNameCell,
minWidth: 120,
},
{
- Header: 'Created',
- accessor: 'createdAt',
- sortType: 'date',
+ Header: "Created",
+ accessor: "createdAt",
+ sortType: "date",
Cell: DateCell,
disableGlobalFilter: true,
maxWidth: 150,
},
{
- Header: 'Expired',
- accessor: 'expiredAt',
+ Header: "Expired",
+ accessor: "expiredAt",
Cell: ReportExpiredCell,
disableGlobalFilter: true,
maxWidth: 150,
},
{
- Header: 'Status',
- id: 'status',
- accessor: 'status',
+ Header: "Status",
+ id: "status",
+ accessor: "status",
Cell: ReportStatusCell,
disableGlobalFilter: true,
width: 180,
},
{
- Header: 'State',
- accessor: 'stale',
- sortType: 'boolean',
+ Header: "State",
+ accessor: "stale",
+ sortType: "boolean",
Cell: FeatureStaleCell,
disableGlobalFilter: true,
maxWidth: 120,
},
],
- [showEnvironmentLastSeen],
+ [showEnvironmentLastSeen]
);
const {
@@ -168,26 +168,26 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
},
useGlobalFilter,
useFlexLayout,
- useSortBy,
+ useSortBy
);
useConditionallyHiddenColumns(
[
{
condition: isExtraSmallScreen,
- columns: ['stale'],
+ columns: ["stale"],
},
{
condition: isSmallScreen,
- columns: ['expiredAt', 'lastSeenAt'],
+ columns: ["expiredAt", "lastSeenAt"],
},
{
condition: isMediumScreen,
- columns: ['createdAt'],
+ columns: ["createdAt"],
},
],
setHiddenColumns,
- COLUMNS,
+ COLUMNS
);
const title =