From 82dddb2eef122199e6588ceb5e5a17ef0dc415be Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 13 May 2025 09:37:22 +0200
Subject: [PATCH] feat: update flags overview status column (#9961)

Improved spacing in the flag overview columns.
---
 .../FeatureEnvironmentSeenCell.tsx            | 46 ++++++++-----------
 .../FeatureToggleListTable.tsx                | 24 ++++++----
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
index 92d2322c6c..2093158dce 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
@@ -1,4 +1,4 @@
-import React, { type VFC } from 'react';
+import React, { type FC } from 'react';
 import { FeatureEnvironmentSeen } from 'component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen';
 import type { FeatureSearchEnvironmentSchema } from 'openapi';
 import { FeatureLifecycle } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle';
@@ -11,7 +11,7 @@ interface IFeatureSeenCellProps {
     };
 }
 
-export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
+export const FeatureEnvironmentSeenCell: FC<IFeatureSeenCellProps> = ({
     feature,
     ...rest
 }) => {
@@ -41,36 +41,30 @@ interface IFeatureLifecycleProps {
     expanded?: boolean;
 }
 
-export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({
+export const FeatureLifecycleCell: FC<IFeatureLifecycleProps> = ({
     feature,
     onComplete,
     onUncomplete,
     onArchive,
     expanded,
     ...rest
-}) => {
-    const environments = feature.environments
-        ? Object.values(feature.environments)
-        : [];
-
-    return (
-        <Box
-            sx={(theme) => ({
-                display: 'flex',
-                justifyContent: 'center',
-                padding: theme.spacing(0, expanded ? 1 : 0),
-            })}
-        >
-            <FeatureLifecycle
-                onArchive={onArchive}
-                onComplete={onComplete}
-                onUncomplete={onUncomplete}
-                feature={feature}
-                expanded={expanded}
-            />
-        </Box>
-    );
-};
+}) => (
+    <Box
+        sx={(theme) => ({
+            display: 'flex',
+            justifyContent: expanded ? 'flex-start' : 'center',
+            padding: theme.spacing(0, expanded ? 2 : 0),
+        })}
+    >
+        <FeatureLifecycle
+            onArchive={onArchive}
+            onComplete={onComplete}
+            onUncomplete={onUncomplete}
+            feature={feature}
+            expanded={expanded}
+        />
+    </Box>
+);
 
 export const MemoizedFeatureEnvironmentSeenCell = React.memo(
     FeatureEnvironmentSeenCell,
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 95bb6e114d..12f1558c59 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -19,6 +19,7 @@ import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/Fa
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import { ExportDialog } from './ExportDialog';
 import { useUiFlag } from 'hooks/useUiFlag';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { focusable } from 'themes/themeStyles';
 import {
     FeatureEnvironmentSeenCell,
@@ -68,6 +69,7 @@ const columnHelper = createColumnHelper<FeatureSearchResponseSchema>();
 
 export const FeatureToggleListTable: FC = () => {
     const theme = useTheme();
+    const { isOss } = useUiConfig();
     const { trackEvent } = usePlausibleTracker();
     const { environments } = useEnvironments();
     const enabledEnvironments = environments
@@ -185,15 +187,19 @@ export const FeatureToggleListTable: FC = () => {
                           size: 50,
                           meta: { width: '1%' },
                       }),
-                      columnHelper.accessor('environments', {
-                          id: 'status',
-                          header: 'Status',
-                          cell: ({ row: { original } }) => (
-                              <StatusCell {...original} />
-                          ),
-                          enableSorting: false,
-                          size: 350,
-                      }),
+                      ...(!isOss()
+                          ? [
+                                columnHelper.accessor('environments', {
+                                    id: 'status',
+                                    header: 'Status',
+                                    cell: ({ row: { original } }) => (
+                                        <StatusCell {...original} />
+                                    ),
+                                    enableSorting: false,
+                                    size: 350,
+                                }),
+                            ]
+                          : []),
                       columnHelper.accessor('project', {
                           header: 'Project',
                           cell: ({ getValue }) => {