From 3acff3e6d96da100b033c41e4ca1f1f35015550d Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Mon, 21 Aug 2023 15:49:33 +0300
Subject: [PATCH] Feat: last seen toggle list (#4541)

Closes #
[1-1279](https://linear.app/unleash/issue/1-1279/update-the-feature-toggle-page-with-the-new-design)

![Screenshot 2023-08-21 at 15 39
54](https://github.com/Unleash/unleash/assets/104830839/bddf85b8-efd5-4bb3-8422-8682ceb96514)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../FeatureToggleListTable.tsx                  | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index a77ab7a2f2..77f00e37e5 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -37,6 +37,7 @@ import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironmen
 import { ExportDialog } from './ExportDialog';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { focusable } from 'themes/themeStyles';
+import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
 
 export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
     name: 'Name of the feature',
@@ -69,6 +70,9 @@ export const FeatureToggleListTable: VFC = () => {
     const { features = [], loading, refetchFeatures } = useFeatures();
     const [searchParams, setSearchParams] = useSearchParams();
     const { uiConfig } = useUiConfig();
+    const showEnvironmentLastSeen = Boolean(
+        uiConfig.flags.lastSeenByEnvironment
+    );
     const [initialState] = useState(() => ({
         sortBy: [
             {
@@ -125,10 +129,15 @@ export const FeatureToggleListTable: VFC = () => {
             {
                 Header: 'Seen',
                 accessor: 'lastSeenAt',
-                Cell: FeatureSeenCell,
-                sortType: 'date',
+                Cell: ({ value, row: { original: feature } }: any) => {
+                    return showEnvironmentLastSeen ? (
+                        <FeatureEnvironmentSeenCell feature={feature} />
+                    ) : (
+                        <FeatureSeenCell value={value} />
+                    );
+                },
                 align: 'center',
-                maxWidth: 85,
+                maxWidth: 80,
             },
             {
                 Header: 'Type',
@@ -190,7 +199,7 @@ export const FeatureToggleListTable: VFC = () => {
                 searchable: true,
             },
         ],
-        [isFavoritesPinned]
+        [isFavoritesPinned, showEnvironmentLastSeen]
     );
 
     const {