feat: feature table tags (#5659)

- tags on project overview
- refactor of tags cell

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

@@ -1,5 +1,5 @@
 import { VFC } from 'react';
-import { FeatureSchema } from 'openapi';
+import { FeatureSchema, TagSchema } from 'openapi';
 import { styled, Typography } from '@mui/material';
 import { TextCell } from '../TextCell/TextCell';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
@@ -14,21 +14,25 @@ interface IFeatureTagCellProps {
     row: {
         original: FeatureSchema;
     };
-    value: string;
 }
 
-export const FeatureTagCell: VFC<IFeatureTagCellProps> = ({ row, value }) => {
+export const FeatureTagCell: VFC<IFeatureTagCellProps> = ({ row }) => {
     const { searchQuery } = useSearchHighlightContext();
 
     if (!row.original.tags || row.original.tags.length === 0)
         return <TextCell />;
 
+    const value =
+        row.original.tags
+            ?.map(({ type, value }) => `${type}:${value}`)
+            .join('\n') || '';
+
     return (
         <TextCell>
             <TooltipLink
                 highlighted={
                     searchQuery.length > 0 &&
-                    value.toLowerCase().includes(searchQuery.toLowerCase())
+                    value?.toLowerCase().includes(searchQuery.toLowerCase())
                 }
                 tooltip={
                     <>

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -197,9 +197,7 @@ const FeatureToggleListTableComponent: VFC = () => {
                         .join('\n') || '',
                 {
                     header: 'Tags',
-                    cell: ({ getValue, row }) => (
+                    cell: FeatureTagCell,
-                        <FeatureTagCell value={getValue()} row={row} />
-                    ),
                     enableSorting: false,
                 },
             ),

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

@@ -49,6 +49,7 @@ import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility';
 import { Placeholder } from './TablePlaceholder/TablePlaceholder';
 import { useRowActions } from './hooks/useRowActions';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
 
 interface IPaginatedProjectFeatureTogglesProps {
     environments: IProject['environments'];
@@ -208,6 +209,14 @@ export const PaginatedProjectFeatureToggles = ({
                     width: '50%',
                 },
             }),
+            columnHelper.accessor('tags', {
+                id: 'tags',
+                header: 'Tags',
+                cell: FeatureTagCell,
+                meta: {
+                    width: '1%',
+                },
+            }),
             columnHelper.accessor('createdAt', {
                 id: 'createdAt',
                 header: 'Created',
@@ -396,6 +405,11 @@ export const PaginatedProjectFeatureToggles = ({
                                         isVisible: columnVisibility.name,
                                         isStatic: true,
                                     },
+                                    {
+                                        header: 'Tags',
+                                        id: 'tags',
+                                        isVisible: columnVisibility.tags,
+                                    },
                                     {
                                         header: 'Created',
                                         id: 'createdAt',

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts

@@ -57,6 +57,7 @@ export const useDefaultColumnVisibility = (allColumnIds: string[]) => {
         'lastSeenAt',
         'createdAt',
         'type',
-        ...showEnvironments(3),
+        'tags',
+        ...showEnvironments(2),
     ]);
 };