Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-23 13:46:45 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
- Change "Project ID" to Project name column in search
- Remove certain columns that are not present in new design
This commit is contained in:
Tymoteusz Czech 2025-04-08 14:57:50 +02:00 committed by GitHub
parent 45a0ddd2a5
commit 28a69afe63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 72 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
View File

@ -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,30 +149,40 @@ export const FeatureToggleListTable: VFC = () => {
width: '50%',
},
}),
columnHelper.accessor((row) => row.segments?.join('\n') || '', {
header: 'Segments',
cell: ({ getValue, row }) => (
<FeatureSegmentCell value={getValue()} row={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 }) => (
<FeatureSegmentCell
value={getValue()}
row={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 }) => <DateCell value={getValue()} />,
@ -179,24 +191,43 @@ export const FeatureToggleListTable: VFC = () => {
},
}),
columnHelper.accessor('project', {
header: 'Project ID',
cell: ({ getValue }) => (
<LinkCell
title={getValue()}
to={`/projects/${getValue()}`}
/>
),
meta: {
width: '1%',
},
}),
columnHelper.accessor('stale', {
header: 'State',
cell: ({ getValue }) => <FeatureStaleCell value={getValue()} />,
header: flagsReleaseManagementUIEnabled
? 'Project'
: 'Project ID',
cell: ({ getValue }) => {
const value = getValue();
const project = projects.find(
(project) => project.id === value,
);
return (
<LinkCell
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%',
},
}),
]
: ([] as never[])),
],
[tableState.favoritesFirst],
);