-
-
Notifications
You must be signed in to change notification settings - Fork 743
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: show and hide environments (#9323)
- Button to show and hide environments - Refactored hook storing state of hidden environments - Changed the way flag is triggered for feature overview - Visual updates for new page look --------- Co-authored-by: Thomas Heartman <[email protected]>
- Loading branch information
1 parent
c16f720
commit 2a6487e
Showing
12 changed files
with
394 additions
and
223 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
...eOverview/FeatureOverviewMetaData/EnvironmentVisibilityMenu/EnvironmentVisibilityMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { Button, Checkbox, Menu, MenuItem, styled } from '@mui/material'; | ||
| import { useState, type FC } from 'react'; | ||
|
|
||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import ExpandLessIcon from '@mui/icons-material/ExpandLess'; | ||
|
|
||
| type EnvironmentVisibilityMenuProps = { | ||
| environments: Array<{ name: string }>; | ||
| hiddenEnvironments: string[]; | ||
| onChange: (name: string) => void; | ||
| }; | ||
|
|
||
| const buttonId = 'environment-visibility-button'; | ||
| const menuId = 'environment-visibility-menu'; | ||
|
|
||
| const StyledContainer = styled('div')(({ theme }) => ({ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| paddingTop: theme.spacing(4), | ||
| })); | ||
|
|
||
| export const EnvironmentVisibilityMenu: FC<EnvironmentVisibilityMenuProps> = ({ | ||
| environments, | ||
| hiddenEnvironments, | ||
| onChange, | ||
| }) => { | ||
| const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); | ||
| const isOpen = Boolean(anchorEl); | ||
| const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => { | ||
| setAnchorEl(event.currentTarget); | ||
| }; | ||
| const handleClose = () => { | ||
| setAnchorEl(null); | ||
| }; | ||
|
|
||
| return ( | ||
| <StyledContainer> | ||
| <Button | ||
| onClick={handleOpen} | ||
| endIcon={isOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />} | ||
| variant='outlined' | ||
| id={buttonId} | ||
| aria-controls={isOpen ? menuId : undefined} | ||
| aria-haspopup='true' | ||
| aria-expanded={isOpen ? 'true' : undefined} | ||
| data-loading | ||
| > | ||
| Hide/show environments | ||
| </Button> | ||
| <Menu | ||
| id={menuId} | ||
| anchorEl={anchorEl} | ||
| open={isOpen} | ||
| onClose={handleClose} | ||
| MenuListProps={{ 'aria-labelledby': buttonId }} | ||
| > | ||
| {environments.map(({ name }) => ( | ||
| <MenuItem key={name} onClick={() => onChange(name)}> | ||
| <Checkbox | ||
| onChange={() => onChange(name)} | ||
| checked={!hiddenEnvironments?.includes(name)} | ||
| /> | ||
| {name} | ||
| </MenuItem> | ||
| ))} | ||
| </Menu> | ||
| </StyledContainer> | ||
| ); | ||
| }; |
39 changes: 39 additions & 0 deletions
39
...rview/FeatureOverviewMetaData/EnvironmentVisibilityMenu/hooks/useEnvironmentVisibility.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { useLocalStorageState } from 'hooks/useLocalStorageState'; | ||
| import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; | ||
| import { createLocalStorage } from 'utils/createLocalStorage'; | ||
|
|
||
| // Reading legacy value will be safely refactored out in a next version - related to `flagOverviewRedesign` flag | ||
| const { value: legacyStoreValue } = createLocalStorage<{ | ||
| hiddenEnvironments?: Array<string>; | ||
| }>('global:v1', {}); | ||
|
|
||
| export const useEnvironmentVisibility = () => { | ||
| const [value, setValue] = useLocalStorageState<Array<string>>( | ||
| 'environment-visibiilty', | ||
| legacyStoreValue?.hiddenEnvironments || [], | ||
| ); | ||
| const { trackEvent } = usePlausibleTracker(); | ||
|
|
||
| const onEnvironmentVisibilityChange = (environment: string) => { | ||
| if (value.includes(environment)) { | ||
| setValue(value.filter((env) => env !== environment)); | ||
| trackEvent('hidden_environment', { | ||
| props: { | ||
| eventType: `environment unhidden`, | ||
| }, | ||
| }); | ||
| } else { | ||
| setValue([...value, environment]); | ||
| trackEvent('hidden_environment', { | ||
| props: { | ||
| eventType: `environment hidden`, | ||
| }, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| return { | ||
| hiddenEnvironments: value, | ||
| onEnvironmentVisibilityChange, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
frontend/src/component/feature/FeatureView/FeatureOverview/LegacyFeatureOverview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import FeatureOverviewEnvironments from './FeatureOverviewEnvironments/FeatureOverviewEnvironments'; | ||
| import { Route, Routes, useNavigate } from 'react-router-dom'; | ||
| import { SidebarModal } from 'component/common/SidebarModal/SidebarModal'; | ||
| import { | ||
| FeatureStrategyEdit, | ||
| formatFeaturePath, | ||
| } from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit'; | ||
| import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; | ||
| import { usePageTitle } from 'hooks/usePageTitle'; | ||
| import { useHiddenEnvironments } from 'hooks/useHiddenEnvironments'; | ||
| import { styled } from '@mui/material'; | ||
| import { FeatureStrategyCreate } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate'; | ||
| import { useEffect } from 'react'; | ||
| import { useLastViewedFlags } from 'hooks/useLastViewedFlags'; | ||
| import OldFeatureOverviewMetaData from './FeatureOverviewMetaData/OldFeatureOverviewMetaData'; | ||
| import { OldFeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/OldFeatureOverviewSidePanel'; | ||
|
|
||
| const StyledContainer = styled('div')(({ theme }) => ({ | ||
| display: 'flex', | ||
| width: '100%', | ||
| [theme.breakpoints.down(1000)]: { | ||
| flexDirection: 'column', | ||
| }, | ||
| })); | ||
|
|
||
| const StyledMainContent = styled('div')(({ theme }) => ({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| width: `calc(100% - (350px + 1rem))`, | ||
| [theme.breakpoints.down(1000)]: { | ||
| width: '100%', | ||
| }, | ||
| })); | ||
|
|
||
| const FeatureOverview = () => { | ||
| const navigate = useNavigate(); | ||
| const projectId = useRequiredPathParam('projectId'); | ||
| const featureId = useRequiredPathParam('featureId'); | ||
| const featurePath = formatFeaturePath(projectId, featureId); | ||
| const { hiddenEnvironments, setHiddenEnvironments } = | ||
| useHiddenEnvironments(); | ||
| const onSidebarClose = () => navigate(featurePath); | ||
| usePageTitle(featureId); | ||
| const { setLastViewed } = useLastViewedFlags(); | ||
| useEffect(() => { | ||
| setLastViewed({ featureId, projectId }); | ||
| }, [featureId]); | ||
|
|
||
| return ( | ||
| <StyledContainer> | ||
| <div> | ||
| <OldFeatureOverviewMetaData /> | ||
| <OldFeatureOverviewSidePanel | ||
| hiddenEnvironments={hiddenEnvironments} | ||
| setHiddenEnvironments={setHiddenEnvironments} | ||
| /> | ||
| </div> | ||
| <StyledMainContent> | ||
| <FeatureOverviewEnvironments /> | ||
| </StyledMainContent> | ||
| <Routes> | ||
| <Route | ||
| path='strategies/create' | ||
| element={ | ||
| <SidebarModal | ||
| label='Create feature strategy' | ||
| onClose={onSidebarClose} | ||
| open | ||
| > | ||
| <FeatureStrategyCreate /> | ||
| </SidebarModal> | ||
| } | ||
| /> | ||
| <Route | ||
| path='strategies/edit' | ||
| element={ | ||
| <SidebarModal | ||
| label='Edit feature strategy' | ||
| onClose={onSidebarClose} | ||
| open | ||
| > | ||
| <FeatureStrategyEdit /> | ||
| </SidebarModal> | ||
| } | ||
| /> | ||
| </Routes> | ||
| </StyledContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default FeatureOverview; |
Oops, something went wrong.