diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx index 75df6cb1dd..abddbd1e50 100644 --- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx +++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx @@ -1,5 +1,8 @@ import { useMemo } from 'react'; -import { IFeatureToggleListItem } from 'interfaces/featureToggle'; +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'; @@ -24,6 +27,8 @@ 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'; interface IReportTableProps { projectId: string; @@ -37,6 +42,7 @@ export interface IReportTableRow { stale?: boolean; status: ReportingStatus; lastSeenAt?: string; + environments?: IEnvironments[]; createdAt: string; expiredAt?: string; } @@ -46,6 +52,10 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => { 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 + ); const data: IReportTableRow[] = useMemo( () => @@ -54,6 +64,7 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => { name: report.name, type: report.type, stale: report.stale, + environments: report.environments, status: formatStatus(report), lastSeenAt: report.lastSeenAt, createdAt: report.createdAt, @@ -70,6 +81,71 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => { [] ); + const COLUMNS = useMemo( + () => [ + { + Header: 'Seen', + accessor: 'lastSeenAt', + Cell: ({ value, row: { original: feature } }: any) => { + return showEnvironmentLastSeen ? ( + + ) : ( + + ); + }, + align: 'center', + maxWidth: 80, + }, + { + Header: 'Type', + accessor: 'type', + align: 'center', + Cell: FeatureTypeCell, + disableGlobalFilter: true, + maxWidth: 85, + }, + { + Header: 'Name', + accessor: 'name', + sortType: 'alphanumeric', + Cell: FeatureNameCell, + minWidth: 120, + }, + { + Header: 'Created', + accessor: 'createdAt', + sortType: 'date', + Cell: DateCell, + disableGlobalFilter: true, + maxWidth: 150, + }, + { + Header: 'Expired', + accessor: 'expiredAt', + Cell: ReportExpiredCell, + disableGlobalFilter: true, + maxWidth: 150, + }, + { + Header: 'Status', + id: 'status', + accessor: 'status', + Cell: ReportStatusCell, + disableGlobalFilter: true, + width: 180, + }, + { + Header: 'State', + accessor: 'stale', + sortType: 'boolean', + Cell: FeatureStaleCell, + disableGlobalFilter: true, + maxWidth: 120, + }, + ], + [showEnvironmentLastSeen] + ); + const { headerGroups, rows, @@ -162,61 +238,3 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => { ); }; - -const COLUMNS = [ - { - Header: 'Seen', - accessor: 'lastSeenAt', - sortType: 'date', - align: 'center', - Cell: FeatureSeenCell, - disableGlobalFilter: true, - maxWidth: 85, - }, - { - Header: 'Type', - accessor: 'type', - align: 'center', - Cell: FeatureTypeCell, - disableGlobalFilter: true, - maxWidth: 85, - }, - { - Header: 'Name', - accessor: 'name', - sortType: 'alphanumeric', - Cell: FeatureNameCell, - minWidth: 120, - }, - { - Header: 'Created', - accessor: 'createdAt', - sortType: 'date', - Cell: DateCell, - disableGlobalFilter: true, - maxWidth: 150, - }, - { - Header: 'Expired', - accessor: 'expiredAt', - Cell: ReportExpiredCell, - disableGlobalFilter: true, - maxWidth: 150, - }, - { - Header: 'Status', - id: 'status', - accessor: 'status', - Cell: ReportStatusCell, - disableGlobalFilter: true, - width: 180, - }, - { - Header: 'State', - accessor: 'stale', - sortType: 'boolean', - Cell: FeatureStaleCell, - disableGlobalFilter: true, - maxWidth: 120, - }, -];