diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts
index 409618e1a5..6cfb5de0cd 100644
--- a/frontend/src/component/menu/routes.ts
+++ b/frontend/src/component/menu/routes.ts
@@ -34,7 +34,7 @@ import { CreateSegment } from 'component/segments/CreateSegment/CreateSegment';
import { EditSegment } from 'component/segments/EditSegment/EditSegment';
import { INavigationMenuItem, IRoute } from 'interfaces/route';
import { EnvironmentTable } from 'component/environments/EnvironmentTable/EnvironmentTable';
-import { SegmentTable } from 'component/segments/SegmentTable';
+import { SegmentTable } from '../segments/SegmentTable/SegmentTable';
import { FeaturesArchiveTable } from '../archive/FeaturesArchiveTable';
import { LazyPlayground } from 'component/playground/Playground/LazyPlayground';
import { Profile } from 'component/user/Profile/Profile';
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx
index 90c9449f62..235f78be0a 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx
@@ -4,7 +4,7 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { usePageTitle } from 'hooks/usePageTitle';
import { useProjectNameOrId } from 'hooks/api/getters/useProject/useProject';
-import { SegmentTable } from 'component/segments/SegmentTable';
+import { SegmentTable } from 'component/segments/SegmentTable/SegmentTable';
import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
import { Route, Routes, useNavigate } from 'react-router-dom';
import { CreateSegment } from 'component/segments/CreateSegment/CreateSegment';
diff --git a/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx
new file mode 100644
index 0000000000..30dd6fc0fa
--- /dev/null
+++ b/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx
@@ -0,0 +1,44 @@
+import { render } from '../../../utils/testRenderer';
+import { screen } from '@testing-library/react';
+import React from 'react';
+import { SegmentTable } from './SegmentTable';
+import { testServerRoute, testServerSetup } from '../../../utils/testServer';
+import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
+
+const server = testServerSetup();
+
+const setupRoutes = () => {
+ testServerRoute(server, 'api/admin/segments', {
+ segments: [
+ {
+ id: 2,
+ name: 'test2',
+ description: '',
+ usedInProjects: 3,
+ usedInFeatures: 2,
+ constraints: [],
+ createdBy: 'admin',
+ createdAt: '2023-05-24T06:23:07.797Z',
+ },
+ ],
+ });
+ testServerRoute(server, '/api/admin/ui-config', {
+ flags: {
+ SE: true,
+ segmentContextFieldUsage: true,
+ },
+ });
+};
+
+test('should show the count of projects and features used in', async () => {
+ setupRoutes();
+
+ render(
+
+
+
+ );
+
+ await screen.findByText('2 feature toggles');
+ await screen.findByText('3 projects');
+});
diff --git a/frontend/src/component/segments/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx
similarity index 96%
rename from frontend/src/component/segments/SegmentTable.tsx
rename to frontend/src/component/segments/SegmentTable/SegmentTable.tsx
index 24ee0ef9ba..1bedb3d998 100644
--- a/frontend/src/component/segments/SegmentTable.tsx
+++ b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx
@@ -11,13 +11,7 @@ import {
import { useTable, useGlobalFilter, useSortBy } from 'react-table';
import { CreateSegmentButton } from 'component/segments/CreateSegmentButton/CreateSegmentButton';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import {
- Box,
- Checkbox,
- styled,
- Typography,
- useMediaQuery,
-} from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
import { sortTypes } from 'utils/sortTypes';
import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
import { useMemo, useState } from 'react';
@@ -34,8 +28,7 @@ import { Search } from 'component/common/Search/Search';
import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
-import { RowSelectCell } from '../project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell';
-import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
export const SegmentTable = () => {
const projectId = useOptionalPathParam('projectId');
@@ -212,7 +205,7 @@ const getColumns = (segmentContextFieldUsage?: boolean) => [
{
Header: 'Used in',
width: '60%',
- Cell: ({ value, row: { original } }: any) => (
+ Cell: ({ row: { original } }: any) => (