feat: archived row styling (#8608)

1. Added badge
2. Added archived row styling. Button not clickable and gray


![image](https://github.com/user-attachments/assets/a15a3b1d-4caa-448b-a9ed-b60de4115cb7)

frontend/src/component/common/Table/cells/FeatureOverviewCell/DependentFeaturesPreview.test.tsx

@@ -17,6 +17,7 @@ test('Preview parent feature', async () => {
             feature='featureA'
             project='default'
             type='release'
+            archivedAt={null}
             searchQuery=''
             dependencyType='child'
             onTypeClick={() => {}}
@@ -44,6 +45,7 @@ test('Preview child features', async () => {
             feature='featureA'
             project='default'
             type='release'
+            archivedAt={null}
             searchQuery=''
             dependencyType='parent'
             onTypeClick={() => {}}

frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.test.tsx

@@ -22,6 +22,7 @@ test('Display full overview information', () => {
                     type: 'release',
                     dependencyType: 'child',
                     project: 'my_project',
+                    archivedAt: null,
                 },
             }}
         />,
@@ -54,6 +55,7 @@ test('Display minimal overview information', () => {
                     type: '',
                     dependencyType: null,
                     project: 'my_project',
+                    archivedAt: null,
                 },
             }}
         />,
@@ -65,3 +67,26 @@ test('Display minimal overview information', () => {
         '/projects/my_project/features/my_feature',
     );
 });
+
+test('show archived information', () => {
+    const FeatureOverviewCell = makeFeatureOverviewCell(noOp, noOp);
+
+    render(
+        <FeatureOverviewCell
+            row={{
+                original: {
+                    name: 'archived_feature',
+                    tags: [],
+                    description: '',
+                    type: '',
+                    dependencyType: null,
+                    project: 'my_project',
+                    archivedAt: '2024-11-09',
+                },
+            }}
+        />,
+    );
+
+    expect(screen.getByText('archived_feature')).toBeInTheDocument();
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+});

frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx

@@ -22,6 +22,7 @@ interface IFeatureNameCellProps {
             | 'tags'
             | 'type'
             | 'dependencyType'
+            | 'archivedAt'
         >;
     };
 }
@@ -138,6 +139,22 @@ const FeatureName: FC<{
     );
 };
 
+const ArchivedFeatureName: FC<{
+    feature: string;
+    searchQuery: string;
+}> = ({ feature, searchQuery }) => {
+    return (
+        <Box
+            sx={(theme) => ({
+                fontWeight: theme.typography.fontWeightBold,
+                color: theme.palette.neutral.main,
+            })}
+        >
+            <Highlighter search={searchQuery}>{feature}</Highlighter>
+        </Box>
+    );
+};
+
 const RestTags: FC<{ tags: string[]; onClick: (tag: string) => void }> = ({
     tags,
     onClick,
@@ -236,6 +253,7 @@ const DependencyPreview: FC<{ feature: string; project: string }> = ({
 export const PrimaryFeatureInfo: FC<{
     project: string;
     feature: string;
+    archivedAt: string | null;
     searchQuery: string;
     type: string;
     dependencyType: string;
@@ -244,6 +262,7 @@ export const PrimaryFeatureInfo: FC<{
 }> = ({
     project,
     feature,
+    archivedAt,
     type,
     searchQuery,
     dependencyType,
@@ -275,11 +294,19 @@ export const PrimaryFeatureInfo: FC<{
     return (
         <FeatureNameAndType data-loading>
             <TypeIcon />
-            <FeatureName
-                project={project}
-                feature={feature}
-                searchQuery={searchQuery}
-            />
+            {archivedAt ? (
+                <ArchivedFeatureName
+                    feature={feature}
+                    searchQuery={searchQuery}
+                />
+            ) : (
+                <FeatureName
+                    project={project}
+                    feature={feature}
+                    searchQuery={searchQuery}
+                />
+            )}
+
             <ConditionallyRender
                 condition={Boolean(dependencyType)}
                 show={
@@ -305,6 +332,11 @@ export const PrimaryFeatureInfo: FC<{
                     </HtmlTooltip>
                 }
             />
+            {archivedAt && (
+                <HtmlTooltip arrow title={archivedAt} describeChild>
+                    <Badge color='neutral'>Archived</Badge>
+                </HtmlTooltip>
+            )}
         </FeatureNameAndType>
     );
 };
@@ -343,6 +375,7 @@ export const FeatureOverviewCell =
                 <PrimaryFeatureInfo
                     project={row.original.project || ''}
                     feature={row.original.name}
+                    archivedAt={row.original.archivedAt}
                     searchQuery={searchQuery}
                     type={row.original.type || ''}
                     dependencyType={row.original.dependencyType || ''}

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -389,6 +389,7 @@ export const ProjectFeatureToggles = ({
                     project: 'project',
                     segments: [],
                     stale: false,
+                    archivedAt: null,
                     environments: [
                         {
                             name: 'development',

frontend/src/openapi/models/featureSearchResponseSchema.ts

@@ -19,7 +19,7 @@ export interface FeatureSearchResponseSchema {
      * The date the feature was archived
      * @nullable
      */
-    archivedAt?: string | null;
+    archivedAt: string | null;
     /**
      * The date the feature was created
      * @nullable

src/lib/openapi/spec/feature-search-response-schema.ts

@@ -25,6 +25,7 @@ export const featureSearchResponseSchema = {
         'createdBy',
         'environments',
         'segments',
+        'archivedAt',
     ],
     description: 'A feature flag definition',
     properties: {