fix build

frontend/src/component/admin/groups/GroupsList/GroupsList.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState, VFC } from 'react';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { IGroup } from 'interfaces/group';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Search } from 'component/common/Search/Search';
-import { Button, Grid, useMediaQuery } from '@mui/material';
+import { Grid, useMediaQuery } from '@mui/material';
 import theme from 'themes/theme';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { TablePlaceholder } from 'component/common/Table';

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx

@@ -7,7 +7,7 @@ import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResul
 import { useStyles } from './FeatureDetails.styles';
 import { CloseOutlined } from '@mui/icons-material';
 import React from 'react';
-import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     checkForEmptyValues,
     hasCustomStrategies,
@@ -31,13 +31,18 @@ export const FeatureDetails = ({
         ? `This feature toggle is True in ${input?.environment} because `
         : `This feature toggle is False in ${input?.environment} because `;
 
-    const reason = feature.isEnabled
-        ? 'at least one strategy is True'
-        : !feature.isEnabledInCurrentEnvironment
-        ? 'the environment is disabled'
-        : hasOnlyCustomStrategies(feature)
-        ? 'no strategies could be fully evaluated'
-        : 'all strategies are either False or could not be fully evaluated';
+    const reason = (() => {
+        if (feature.isEnabled)
+            return 'at least one strategy is True';
+
+        if (!feature.isEnabledInCurrentEnvironment)
+            return 'the environment is disabled';
+
+        if (hasOnlyCustomStrategies(feature))
+            return  'no strategies could be fully evaluated'
+
+        return 'all strategies are either False or could not be fully evaluated';
+    })()
 
     const color = feature.isEnabled
         ? theme.palette.success.main

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/helpers.ts

@@ -1,4 +1,4 @@
-import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+import { PlaygroundFeatureSchema } from 'hooks/api/actions/usePlayground/playground.model';
 
 export const DEFAULT_STRATEGIES = [
     'default',

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordion.styles.ts

@@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({
         fill: '#fff',
     },
     accordion: {
-        border: `1px solid ${theme.palette.grey[400]}`,
+        border: `1px solid ${theme.palette.dividerAlternative}`,
         borderRadius: theme.spacing(1),
         backgroundColor: '#fff',
         boxShadow: 'none',

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx

@@ -32,7 +32,7 @@ export const PlaygroundParameterItem = ({
             )}
         >
             <Typography variant="subtitle1" color={theme.palette[color].main}>
-                {input}
+                {`${input}`}
             </Typography>
             <div className={styles.column}>
                 <ConditionallyRender

frontend/src/hooks/useHiddenColumns.ts

@@ -9,7 +9,7 @@ const useHiddenColumns = (
     useEffect(() => {
         const hidden = condition ? hiddenColumns : [];
         setHiddenColumns(hidden);
-    }, [setHiddenColumns, condition]);
+    }, [setHiddenColumns, hiddenColumns, condition]);
 };
 
 export default useHiddenColumns;