feat: Last seen per environment health (#4539)

Closes # [1-1277]
(https://linear.app/unleash/issue/1-1277/update-health-page-with-the-new-designlogic-for-last-seen)

![Screenshot 2023-08-21 at 14 50
20](https://github.com/Unleash/unleash/assets/104830839/bbe7a80b-1dcd-4dd0-9446-42486963b4f1)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

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<IReportTableRow[]>(
         () =>
@@ -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 ? (
+                        <FeatureEnvironmentSeenCell feature={feature} />
+                    ) : (
+                        <FeatureSeenCell value={value} />
+                    );
+                },
+                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) => {
         </PageContent>
     );
 };
-
-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,
-    },
-];