Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: improve UI, simplify code (#2505)

Browse Source 
https://linear.app/unleash/issue/2-446/ui-simplify-design-with-some-improvements
This commit is contained in:
Nuno Góis 2022-11-23 07:17:03 +00:00 committed by GitHub
parent 543f07104c
commit 9bf3e09d5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx
View File

@ -1,13 +1,11 @@
import { Add, CloudCircle } from '@mui/icons-material';
import { Divider, styled } from '@mui/material';
import { CloudCircle } from '@mui/icons-material';
import { styled } from '@mui/material';
import { IFeatureEnvironment, IFeatureVariant } from 'interfaces/featureToggle';
import { EnvironmentVariantsTable } from './EnvironmentVariantsTable/EnvironmentVariantsTable';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import { useMemo } from 'react';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { UPDATE_FEATURE_ENVIRONMENT_VARIANTS } from 'component/providers/AccessProvider/permissions';
const StyledCard = styled('div')(({ theme }) => ({
padding: theme.spacing(3),
@ -45,10 +43,6 @@ const StyledName = styled('span', {
marginLeft: theme.spacing(1.25),
}));
const StyledDivider = styled(Divider)(({ theme }) => ({
margin: theme.spacing(3, 0),
}));
const StyledDescription = styled('p')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
color: theme.palette.text.secondary,
@ -60,10 +54,8 @@ const StyledGeneralSelect = styled(GeneralSelect)(({ theme }) => ({
}));
interface IEnvironmentVariantsCardProps {
projectId: string;
environment: IFeatureEnvironment;
searchValue: string;
onAddVariant: () => void;
onEditVariant: (variant: IFeatureVariant) => void;
onDeleteVariant: (variant: IFeatureVariant) => void;
onUpdateStickiness: (variant: IFeatureVariant[]) => void;
@ -71,10 +63,8 @@ interface IEnvironmentVariantsCardProps {
}
export const EnvironmentVariantsCard = ({
projectId,
environment,
searchValue,
onAddVariant,
onEditVariant,
onDeleteVariant,
onUpdateStickiness,
@ -131,21 +121,10 @@ export const EnvironmentVariantsCard = ({
onEditVariant={onEditVariant}
onDeleteVariant={onDeleteVariant}
/>
<PermissionButton
permission={UPDATE_FEATURE_ENVIRONMENT_VARIANTS}
projectId={projectId}
environmentId={environment.name}
onClick={onAddVariant}
variant="text"
startIcon={<Add />}
>
add variant
</PermissionButton>
<ConditionallyRender
condition={variants.length > 1}
show={
<>
<StyledDivider />
<p>Stickiness</p>
<StyledDescription>
By overriding the stickiness you can

6
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCopyFrom/EnvironmentVariantsCopyFrom.tsx
View File

@ -34,9 +34,13 @@ export const EnvironmentVariantsCopyFrom = ({
useState<null | HTMLElement>(null);
const copyFromOpen = Boolean(copyFromAnchorEl);
const variants = environment.variants ?? [];
return (
<ConditionallyRender
condition={otherEnvsWithVariants.length > 0}
condition={
otherEnvsWithVariants.length > 0 && variants.length === 0
}
show={
<>
<PermissionButton

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

@ -232,10 +232,8 @@ export const FeatureEnvironmentVariants = () => {
return (
<EnvironmentVariantsCard
key={environment.name}
projectId={projectId}
environment={environment}
searchValue={searchValue}
onAddVariant={() => addVariant(environment)}
onEditVariant={(variant: IFeatureVariant) =>
editVariant(environment, variant)
}
@ -246,36 +244,25 @@ export const FeatureEnvironmentVariants = () => {
onUpdateStickiness(environment, variants)
}
>
<ConditionallyRender
condition={environment.variants?.length === 0}
show={
<StyledButtonContainer>
<PermissionButton
onClick={() => addVariant(environment)}
variant="outlined"
permission={
UPDATE_FEATURE_ENVIRONMENT_VARIANTS
}
projectId={projectId}
environmentId={environment.name}
>
Add variant
</PermissionButton>
<EnvironmentVariantsCopyFrom
environment={environment}
permission={
UPDATE_FEATURE_ENVIRONMENT_VARIANTS
}
projectId={projectId}
environmentId={environment.name}
onCopyVariantsFrom={onCopyVariantsFrom}
otherEnvsWithVariants={
otherEnvsWithVariants
}
/>
</StyledButtonContainer>
}
/>
<StyledButtonContainer>
<EnvironmentVariantsCopyFrom
environment={environment}
permission={UPDATE_FEATURE_ENVIRONMENT_VARIANTS}
projectId={projectId}
environmentId={environment.name}
onCopyVariantsFrom={onCopyVariantsFrom}
otherEnvsWithVariants={otherEnvsWithVariants}
/>
<PermissionButton
onClick={() => addVariant(environment)}
variant="outlined"
permission={UPDATE_FEATURE_ENVIRONMENT_VARIANTS}
projectId={projectId}
environmentId={environment.name}
>
Add variant
</PermissionButton>
</StyledButtonContainer>
</EnvironmentVariantsCard>
);
})}