feat: segment usage ui test (#3872)

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';

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';

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(
+        <UIProviderContainer>
+            <SegmentTable />
+        </UIProviderContainer>
+    );
+
+    await screen.findByText('2 feature toggles');
+    await screen.findByText('3 projects');
+});

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) => (
                       <TextCell
                           sx={{
                               color: