Allow hiding environments from the feature overview screen fix (#2831)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx

@@ -56,7 +56,12 @@ const FeatureOverview = () => {
                             setHiddenEnvironments={setHiddenEnvironments}
                         />
                     }
-                    elseShow={<FeatureOverviewEnvSwitches />}
+                    elseShow={
+                        <FeatureOverviewEnvSwitches
+                            hiddenEnvironments={hiddenEnvironments}
+                            setHiddenEnvironments={setHiddenEnvironments}
+                        />
+                    }
                 />
             </div>
             <StyledMainContent>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx

@@ -11,17 +11,24 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
 import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
-import { UpdateEnabledMessage } from '../../../../../changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
+import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { styled } from '@mui/material';
+import { FeatureOverviewSidePanelEnvironmentHider } from '../../FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider';
 
 interface IFeatureOverviewEnvSwitchProps {
     env: IFeatureEnvironment;
     callback?: () => void;
     text?: string;
     showInfoBox: () => void;
+    hiddenEnvironments: Set<String>;
+    setHiddenEnvironments: (environment: string) => void;
 }
 
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+}));
+
 const StyledLabel = styled('label')({
     display: 'inline-flex',
     alignItems: 'center',
@@ -33,6 +40,8 @@ const FeatureOverviewEnvSwitch = ({
     callback,
     text,
     showInfoBox,
+    hiddenEnvironments,
+    setHiddenEnvironments,
 }: IFeatureOverviewEnvSwitchProps) => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
@@ -114,7 +123,7 @@ const FeatureOverviewEnvSwitch = ({
     );
 
     return (
-        <div>
+        <StyledContainer>
             <StyledLabel>
                 <PermissionSwitch
                     permission={UPDATE_FEATURE_ENVIRONMENT}
@@ -125,6 +134,11 @@ const FeatureOverviewEnvSwitch = ({
                 />
                 {content}
             </StyledLabel>
+            <FeatureOverviewSidePanelEnvironmentHider
+                environment={env}
+                hiddenEnvironments={hiddenEnvironments}
+                setHiddenEnvironments={setHiddenEnvironments}
+            />
             <ChangeRequestDialogue
                 isOpen={changeRequestDialogDetails.isOpen}
                 onClose={onChangeRequestToggleClose}
@@ -138,7 +152,7 @@ const FeatureOverviewEnvSwitch = ({
                     />
                 }
             />
-        </div>
+        </StyledContainer>
     );
 };
 

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx

@@ -6,6 +6,7 @@ import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverview
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import { styled } from '@mui/material';
+import { IFeatureToggle } from '../../../../../interfaces/featureToggle';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
@@ -41,7 +42,15 @@ const StyledHeader = styled('h3')(({ theme }) => ({
     },
 }));
 
-const FeatureOverviewEnvSwitches = () => {
+interface IFeatureOverviewEnvSwitchesProps {
+    hiddenEnvironments: Set<String>;
+    setHiddenEnvironments: (environment: string) => void;
+}
+
+const FeatureOverviewEnvSwitches = ({
+    hiddenEnvironments,
+    setHiddenEnvironments,
+}: IFeatureOverviewEnvSwitchesProps) => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
     const { feature } = useFeature(projectId, featureId);
@@ -60,6 +69,8 @@ const FeatureOverviewEnvSwitches = () => {
                 <FeatureOverviewEnvSwitch
                     key={env.name}
                     env={env}
+                    hiddenEnvironments={hiddenEnvironments}
+                    setHiddenEnvironments={setHiddenEnvironments}
                     showInfoBox={() => {
                         setEnvironmentName(env.name);
                         setShowInfoBox(true);

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx

@@ -6,7 +6,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 const Visible = styled(Visibility)(({ theme }) => ({
     cursor: 'pointer',
     marginLeft: 'auto',
-    color: theme.palette.grey[700],
+    marginTop: theme.spacing(0.5),
+    color: theme.palette.neutral.main,
     '&:hover': {
         opacity: 1,
     },
@@ -16,7 +17,7 @@ const Visible = styled(Visibility)(({ theme }) => ({
 const VisibleOff = styled(VisibilityOff)(({ theme }) => ({
     cursor: 'pointer',
     marginLeft: 'auto',
-    color: theme.palette.grey[700],
+    color: theme.palette.neutral.main,
 }));
 
 interface IFeatureOverviewSidePanelEnvironmentHiderProps {

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx

@@ -30,12 +30,6 @@ const StyledLabel = styled('label')(() => ({
     cursor: 'pointer',
 }));
 
-const HideButton = styled(RemoveRedEye)(({ theme }) => ({
-    cursor: 'pointer',
-    marginLeft: 'auto',
-    color: theme.palette.grey[700],
-}));
-
 interface IFeatureOverviewSidePanelEnvironmentSwitchProps {
     environment: IFeatureEnvironment;
     callback?: () => void;