diff --git a/frontend/src/component/segments/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable.tsx index debee806a1..db1404b334 100644 --- a/frontend/src/component/segments/SegmentTable.tsx +++ b/frontend/src/component/segments/SegmentTable.tsx @@ -17,6 +17,7 @@ import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; import { useMemo, useState } from 'react'; import { SegmentEmpty } from 'component/segments/SegmentEmpty'; import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; +import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; import { DonutLarge } from '@mui/icons-material'; import { SegmentActionCell } from 'component/segments/SegmentActionCell/SegmentActionCell'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; @@ -25,9 +26,12 @@ import theme from 'themes/theme'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Search } from 'component/common/Search/Search'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; +import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; export const SegmentTable = () => { const { segments, loading } = useSegments(); + const { uiConfig } = useUiConfig(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const [initialState] = useState({ sortBy: [{ id: 'createdAt' }], @@ -42,6 +46,7 @@ export const SegmentTable = () => { description: 'Segment descripton', createdAt: new Date().toISOString(), createdBy: 'user', + projectId: 'Project', }) ); }, [segments]); @@ -79,6 +84,10 @@ export const SegmentTable = () => { condition: isSmallScreen, columns: ['createdAt', 'createdBy'], }, + { + condition: !Boolean(uiConfig.flags.projectScopedSegments), + columns: ['project'], + }, ], setHiddenColumns, COLUMNS @@ -172,6 +181,21 @@ const COLUMNS = [ ), }, + { + Header: 'Project', + accessor: 'project', + Cell: ({ value }: { value: string }) => ( + } + elseShow={Global} + /> + ), + sortType: 'alphanumeric', + maxWidth: 150, + filterName: 'project', + searchable: true, + }, { Header: 'Created at', accessor: 'createdAt',