diff --git a/frontend/src/component/common/Table/cells/FeatureTagCell/FeatureTagCell.tsx b/frontend/src/component/common/Table/cells/FeatureTagCell/FeatureTagCell.tsx index 5f637fbd9a..dd28ddda98 100644 --- a/frontend/src/component/common/Table/cells/FeatureTagCell/FeatureTagCell.tsx +++ b/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 = ({ row, value }) => { +export const FeatureTagCell: VFC = ({ row }) => { const { searchQuery } = useSearchHighlightContext(); if (!row.original.tags || row.original.tags.length === 0) return ; + const value = + row.original.tags + ?.map(({ type, value }) => `${type}:${value}`) + .join('\n') || ''; + return ( 0 && - value.toLowerCase().includes(searchQuery.toLowerCase()) + value?.toLowerCase().includes(searchQuery.toLowerCase()) } tooltip={ <> diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index 186f882aab..97d16177b7 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -197,9 +197,7 @@ const FeatureToggleListTableComponent: VFC = () => { .join('\n') || '', { header: 'Tags', - cell: ({ getValue, row }) => ( - - ), + cell: FeatureTagCell, enableSorting: false, }, ), diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx index b754acf12f..2e226bd588 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx +++ b/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', diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts index 83e8b49913..4e5f2e4863 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts +++ b/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), ]); };