From 5733f91347ce7b7a59fc1a6806e6c9bf9706bef7 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Fri, 8 Nov 2024 12:27:41 +0200
Subject: [PATCH] feat: archived toggles do not show switch (#8696)

Archived toggles will not show switch anymore, but a dash.

![Screenshot from 2024-11-08
11-41-17](https://github.com/user-attachments/assets/d43de8ff-13c3-4f70-8f8f-b7e5bbc4d0bc)
---
 .../FeatureToggleCell/FeatureToggleCell.tsx              | 9 +++++++++
 .../ProjectFeatureToggles.tsx                            | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx
index 5c7da94e41..983ed00d85 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx
@@ -22,6 +22,12 @@ const StyledSwitchContainer = styled('div', {
     }),
 }));
 
+const StyledDiv = styled('div')(({ theme }) => ({
+    flexGrow: 0,
+    ...flexRow,
+    justifyContent: 'center',
+}));
+
 interface IFeatureToggleCellProps {
     projectId: string;
     environmentName: string;
@@ -90,3 +96,6 @@ export const PlaceholderFeatureToggleCell = () => (
         <div data-loading>toggle</div>
     </StyledSwitchContainer>
 );
+export const ArchivedFeatureToggleCell = () => (
+    <StyledDiv aria-hidden='true'>-</StyledDiv>
+);
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index 50bee4226d..14b74c6156 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -26,6 +26,7 @@ import { createColumnHelper, useReactTable } from '@tanstack/react-table';
 import { withTableState } from 'utils/withTableState';
 import type { FeatureSearchResponseSchema } from 'openapi';
 import {
+    ArchivedFeatureToggleCell,
     FeatureToggleCell,
     PlaceholderFeatureToggleCell,
 } from './FeatureToggleCell/FeatureToggleCell';
@@ -292,6 +293,7 @@ export const ProjectFeatureToggles = ({
 
                 return columnHelper.accessor(
                     (row) => ({
+                        archived: row.archivedAt !== null,
                         featureId: row.name,
                         environment: row.environments?.find(
                             (featureEnvironment) =>
@@ -317,10 +319,13 @@ export const ProjectFeatureToggles = ({
                                 featureId,
                                 environment,
                                 someEnabledEnvironmentHasVariants,
+                                archived,
                             } = getValue();
 
                             return isPlaceholder ? (
                                 <PlaceholderFeatureToggleCell />
+                            ) : archived ? (
+                                <ArchivedFeatureToggleCell />
                             ) : (
                                 <FeatureToggleCell
                                     value={environment?.enabled || false}