diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index 02494a66ab..40fe440625 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/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(); -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,30 +149,40 @@ export const FeatureToggleListTable: VFC = () => { width: '50%', }, }), - columnHelper.accessor((row) => row.segments?.join('\n') || '', { - header: 'Segments', - cell: ({ getValue, row }) => ( - - ), - enableSorting: false, - meta: { - width: '1%', - }, - }), - columnHelper.accessor( - (row) => - row.tags - ?.map(({ type, value }) => `${type}:${value}`) - .join('\n') || '', - { - header: 'Tags', - cell: FeatureTagCell, - enableSorting: false, - meta: { - width: '1%', - }, - }, - ), + ...(!flagsReleaseManagementUIEnabled + ? [ + columnHelper.accessor( + (row) => row.segments?.join('\n') || '', + { + header: 'Segments', + cell: ({ getValue, row }) => ( + + ), + enableSorting: false, + meta: { + width: '1%', + }, + }, + ), + columnHelper.accessor( + (row) => + row.tags + ?.map(({ type, value }) => `${type}:${value}`) + .join('\n') || '', + { + header: 'Tags', + cell: FeatureTagCell, + enableSorting: false, + meta: { + width: '1%', + }, + }, + ), + ] + : ([] as never[])), columnHelper.accessor('createdAt', { header: 'Created', cell: ({ getValue }) => , @@ -179,24 +191,43 @@ export const FeatureToggleListTable: VFC = () => { }, }), columnHelper.accessor('project', { - header: 'Project ID', - cell: ({ getValue }) => ( - - ), - meta: { - width: '1%', - }, - }), - columnHelper.accessor('stale', { - header: 'State', - cell: ({ getValue }) => , + header: flagsReleaseManagementUIEnabled + ? 'Project' + : 'Project ID', + cell: ({ getValue }) => { + const value = getValue(); + const project = projects.find( + (project) => project.id === value, + ); + + return ( + + ); + }, meta: { width: '1%', }, }), + ...(!flagsReleaseManagementUIEnabled + ? [ + columnHelper.accessor('stale', { + header: 'State', + cell: ({ getValue }) => ( + + ), + meta: { + width: '1%', + }, + }), + ] + : ([] as never[])), ], [tableState.favoritesFirst], );