Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-24 01:18:01 +02:00
Code Issues Projects Releases Wiki Activity

fix: small fixes on variants push to env UI (#2991)

Browse Source 
https://linear.app/unleash/issue/2-652/slight-improvements-and-fixes-on-the-push-to-environment-feature

Includes:

- Hover effect on the items should cover the full width of the menu;
- Clicking anywhere on the item should toggle the check;
- Small refactoring


![image](https://user-images.githubusercontent.com/14320932/214592250-05ecc584-3b6b-49f4-93a5-4d3323cd9cde.png)
This commit is contained in:
Nuno Góis 2023-01-25 14:49:01 +00:00 committed by GitHub
parent 436849edf3
commit 7d814a623f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/PushVariantsButton/PushVariantsButton.tsx
View File

@ -2,7 +2,6 @@ import {
Button, Button,
Checkbox, Checkbox,
Divider, Divider,
FormControlLabel,
Menu, Menu,
MenuItem, MenuItem,
styled, styled,
@ -13,19 +12,22 @@ import { useState } from 'react';
import { useCheckProjectAccess } from 'hooks/useHasAccess'; import { useCheckProjectAccess } from 'hooks/useHasAccess';
const StyledMenu = styled(Menu)(({ theme }) => ({ const StyledMenu = styled(Menu)(({ theme }) => ({
'&>div>ul': { '& > div > ul': {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
padding: theme.spacing(2), '& > li': {
'&>li': { padding: theme.spacing(0, 1),
padding: theme.spacing(0),
}, },
}, },
})); }));
const StyledActions = styled('div')(({ theme }) => ({
margin: theme.spacing(1, 2),
}));
const StyledButton = styled(Button)(({ theme }) => ({ const StyledButton = styled(Button)(({ theme }) => ({
marginTop: theme.spacing(1), marginTop: theme.spacing(2),
})); }));
interface IPushVariantsButtonProps { interface IPushVariantsButtonProps {
@ -77,6 +79,16 @@ export const PushVariantsButton = ({
); );
}; };
const toggleSelectedEnvironment = (
environment: IFeatureEnvironmentWithCrEnabled
) => {
if (selectedEnvironments.includes(environment)) {
removeSelectedEnvironment(environment);
} else {
addSelectedEnvironment(environment);
}
};
const cleanupState = () => { const cleanupState = () => {
setSelectedEnvironments([]); setSelectedEnvironments([]);
setPushToAnchorEl(null); setPushToAnchorEl(null);
@ -115,47 +127,39 @@ export const PushVariantsButton = ({
{environments {environments
.filter(environment => environment.name !== current) .filter(environment => environment.name !== current)
.map(otherEnvironment => ( .map(otherEnvironment => (
<MenuItem key={otherEnvironment.name}> <MenuItem
<FormControlLabel key={otherEnvironment.name}
disabled={ disabled={
!hasAccessTo[ !hasAccessTo[otherEnvironment.name] ??
otherEnvironment.name false
] ?? false }
} onClick={() =>
control={ toggleSelectedEnvironment(
<Checkbox otherEnvironment
onChange={event => { )
if (event.target.checked) { }
addSelectedEnvironment( >
otherEnvironment <Checkbox
); checked={selectedEnvironments.includes(
} else { otherEnvironment
removeSelectedEnvironment( )}
otherEnvironment
);
}
}}
checked={selectedEnvironments.includes(
otherEnvironment
)}
value={otherEnvironment.name}
/>
}
label={otherEnvironment.name}
/> />
{otherEnvironment.name}
</MenuItem> </MenuItem>
))} ))}
<Divider /> <StyledActions>
<StyledButton <Divider />
variant="outlined" <StyledButton
onClick={() => { variant="outlined"
onSubmit(selectedEnvironments); onClick={() => {
cleanupState(); onSubmit(selectedEnvironments);
}} cleanupState();
disabled={selectedEnvironments.length === 0} }}
> disabled={selectedEnvironments.length === 0}
Push to selected ({selectedEnvironments.length}) >
</StyledButton> Push to selected ({selectedEnvironments.length})
</StyledButton>
</StyledActions>
</StyledMenu> </StyledMenu>
</> </>
} }