feat: adjust columns for a search page refactor (#9709)

- Change "Project ID" to Project name column in search
- Remove certain columns that are not present in new design

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, type VFC } from 'react';
+import { useCallback, useEffect, useMemo, useState, type FC } from 'react';
 import { Box, Link, useMediaQuery, useTheme } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { createColumnHelper, useReactTable } from '@tanstack/react-table';
@@ -18,6 +18,7 @@ import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/
 import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import { ExportDialog } from './ExportDialog';
+import { useUiFlag } from 'hooks/useUiFlag';
 import { focusable } from 'themes/themeStyles';
 import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
 import useToast from 'hooks/useToast';
@@ -29,8 +30,8 @@ import { FeatureToggleListActions } from './FeatureToggleListActions/FeatureTogg
 import useLoading from 'hooks/useLoading';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useGlobalFeatureSearch } from './useGlobalFeatureSearch';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { LifecycleFilters } from './FeatureToggleFilters/LifecycleFilters';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { ExportFlags } from './ExportFlags';
 
 export const featuresPlaceholder = Array(15).fill({
@@ -43,7 +44,7 @@ export const featuresPlaceholder = Array(15).fill({
 
 const columnHelper = createColumnHelper<FeatureSearchResponseSchema>();
 
-export const FeatureToggleListTable: VFC = () => {
+export const FeatureToggleListTable: FC = () => {
     const theme = useTheme();
     const { trackEvent } = usePlausibleTracker();
     const { environments } = useEnvironments();
@@ -69,6 +70,7 @@ export const FeatureToggleListTable: VFC = () => {
         setTableState,
         filterState,
     } = useGlobalFeatureSearch();
+    const { projects } = useProjects();
     const bodyLoadingRef = useLoading(loading);
     const { favorite, unfavorite } = useFavoriteFeaturesApi();
     const onFavorite = useCallback(
@@ -147,16 +149,24 @@ export const FeatureToggleListTable: VFC = () => {
                     width: '50%',
                 },
             }),
-            columnHelper.accessor((row) => row.segments?.join('\n') || '', {
+            ...(!flagsReleaseManagementUIEnabled
+                ? [
+                      columnHelper.accessor(
+                          (row) => row.segments?.join('\n') || '',
+                          {
                               header: 'Segments',
                               cell: ({ getValue, row }) => (
-                    <FeatureSegmentCell value={getValue()} row={row} />
+                                  <FeatureSegmentCell
+                                      value={getValue()}
+                                      row={row}
+                                  />
                               ),
                               enableSorting: false,
                               meta: {
                                   width: '1%',
                               },
-            }),
+                          },
+                      ),
                       columnHelper.accessor(
                           (row) =>
                               row.tags
@@ -171,6 +181,8 @@ export const FeatureToggleListTable: VFC = () => {
                               },
                           },
                       ),
+                  ]
+                : ([] as never[])),
             columnHelper.accessor('createdAt', {
                 header: 'Created',
                 cell: ({ getValue }) => <DateCell value={getValue()} />,
@@ -179,24 +191,43 @@ export const FeatureToggleListTable: VFC = () => {
                 },
             }),
             columnHelper.accessor('project', {
-                header: 'Project ID',
+                header: flagsReleaseManagementUIEnabled
-                cell: ({ getValue }) => (
+                    ? 'Project'
+                    : 'Project ID',
+                cell: ({ getValue }) => {
+                    const value = getValue();
+                    const project = projects.find(
+                        (project) => project.id === value,
+                    );
+
+                    return (
                         <LinkCell
-                        title={getValue()}
+                            title={
+                                flagsReleaseManagementUIEnabled
+                                    ? project?.name || value
+                                    : value
+                            }
                             to={`/projects/${getValue()}`}
                         />
+                    );
+                },
+                meta: {
+                    width: '1%',
+                },
+            }),
+            ...(!flagsReleaseManagementUIEnabled
+                ? [
+                      columnHelper.accessor('stale', {
+                          header: 'State',
+                          cell: ({ getValue }) => (
+                              <FeatureStaleCell value={getValue()} />
                           ),
                           meta: {
                               width: '1%',
                           },
                       }),
-            columnHelper.accessor('stale', {
+                  ]
-                header: 'State',
+                : ([] as never[])),
-                cell: ({ getValue }) => <FeatureStaleCell value={getValue()} />,
-                meta: {
-                    width: '1%',
-                },
-            }),
         ],
         [tableState.favoritesFirst],
     );