diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx index 7d78bb5956..2cd3ed4733 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx @@ -56,7 +56,12 @@ const FeatureOverview = () => { setHiddenEnvironments={setHiddenEnvironments} /> } - elseShow={} + elseShow={ + + } /> diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx index 0dbb8e2c54..8ffa0c3417 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx +++ b/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; + 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 ( -
+ {content} + } /> -
+ ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx index e59a375b5b..7fddf21da8 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx +++ b/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; + 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 = () => { { setEnvironmentName(env.name); setShowInfoBox(true); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx index fa8548226c..6ce35fac1d 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx +++ b/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 { diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx index a062086ef2..fa16962322 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx +++ b/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;