1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-04 01:18:20 +02:00

hide discard button (#2506)

This commit is contained in:
Mateusz Kwasniewski 2022-11-23 12:16:20 +01:00 committed by GitHub
parent f87feb9b84
commit 98a9a770d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 76 additions and 31 deletions

View File

@ -8,6 +8,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
import type { IChangeRequest } from '../changeRequest.types'; import type { IChangeRequest } from '../changeRequest.types';
import { import {
Discard,
StrategyAddedChange, StrategyAddedChange,
StrategyDeletedChange, StrategyDeletedChange,
StrategyEditedChange, StrategyEditedChange,
@ -18,6 +19,7 @@ import {
} from 'utils/strategyNames'; } from 'utils/strategyNames';
import { hasNameField } from '../changeRequest.types'; import { hasNameField } from '../changeRequest.types';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useChangeRequestOpen } from '../../../hooks/api/getters/useChangeRequestOpen/useChangeRequestOpen';
interface IChangeRequestProps { interface IChangeRequestProps {
changeRequest: IChangeRequest; changeRequest: IChangeRequest;
@ -91,6 +93,10 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
} }
}; };
const showDiscard =
!['Cancelled', 'Applied'].includes(changeRequest.state) &&
changeRequest.features.flatMap(feature => feature.changes).length > 1;
return ( return (
<Box> <Box>
{changeRequest.features?.map(featureToggleChange => ( {changeRequest.features?.map(featureToggleChange => (
@ -131,12 +137,34 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
{change.action === 'updateEnabled' && ( {change.action === 'updateEnabled' && (
<ToggleStatusChange <ToggleStatusChange
enabled={change.payload.enabled} enabled={change.payload.enabled}
onDiscard={onDiscard(change.id)} discard={
<ConditionallyRender
condition={showDiscard}
show={
<Discard
onDiscard={onDiscard(
change.id
)}
/>
}
/>
}
/> />
)} )}
{change.action === 'addStrategy' && ( {change.action === 'addStrategy' && (
<StrategyAddedChange <StrategyAddedChange
onDiscard={onDiscard(change.id)} discard={
<ConditionallyRender
condition={showDiscard}
show={
<Discard
onDiscard={onDiscard(
change.id
)}
/>
}
/>
}
> >
<GetFeatureStrategyIcon <GetFeatureStrategyIcon
strategyName={change.payload.name} strategyName={change.payload.name}
@ -149,7 +177,18 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
)} )}
{change.action === 'deleteStrategy' && ( {change.action === 'deleteStrategy' && (
<StrategyDeletedChange <StrategyDeletedChange
onDiscard={onDiscard(change.id)} discard={
<ConditionallyRender
condition={showDiscard}
show={
<Discard
onDiscard={onDiscard(
change.id
)}
/>
}
/>
}
> >
{hasNameField(change.payload) && ( {hasNameField(change.payload) && (
<> <>
@ -167,7 +206,18 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
)} )}
{change.action === 'updateStrategy' && ( {change.action === 'updateStrategy' && (
<StrategyEditedChange <StrategyEditedChange
onDiscard={onDiscard(change.id)} discard={
<ConditionallyRender
condition={showDiscard}
show={
<Discard
onDiscard={onDiscard(
change.id
)}
/>
}
/>
}
> >
<GetFeatureStrategyIcon <GetFeatureStrategyIcon
strategyName={change.payload.name} strategyName={change.payload.name}

View File

@ -1,5 +1,5 @@
import { Box, Link, styled, Typography } from '@mui/material'; import { Box, Link, styled, Typography } from '@mui/material';
import { FC } from 'react'; import { FC, ReactNode } from 'react';
interface IStrategyChangeProps { interface IStrategyChangeProps {
onDiscard: () => void; onDiscard: () => void;
@ -16,15 +16,15 @@ const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({
gap: theme.spacing(1), gap: theme.spacing(1),
})); }));
const Discard: FC<IStrategyChangeProps> = ({ onDiscard }) => ( export const Discard: FC<IStrategyChangeProps> = ({ onDiscard }) => (
<Box> <Box>
<Link onClick={onDiscard}>Discard</Link> <Link onClick={onDiscard}>Discard</Link>
</Box> </Box>
); );
export const StrategyAddedChange: FC<IStrategyChangeProps> = ({ export const StrategyAddedChange: FC<{ discard?: ReactNode }> = ({
children, children,
onDiscard, discard,
}) => { }) => {
return ( return (
<ChangeItemWrapper> <ChangeItemWrapper>
@ -36,14 +36,14 @@ export const StrategyAddedChange: FC<IStrategyChangeProps> = ({
</Typography> </Typography>
{children} {children}
</ChangeItemInfo> </ChangeItemInfo>
<Discard onDiscard={onDiscard} /> {discard}
</ChangeItemWrapper> </ChangeItemWrapper>
); );
}; };
export const StrategyEditedChange: FC<IStrategyChangeProps> = ({ export const StrategyEditedChange: FC<{ discard?: ReactNode }> = ({
children, children,
onDiscard, discard,
}) => { }) => {
return ( return (
<ChangeItemWrapper> <ChangeItemWrapper>
@ -51,13 +51,13 @@ export const StrategyEditedChange: FC<IStrategyChangeProps> = ({
<Typography>Editing strategy:</Typography> <Typography>Editing strategy:</Typography>
{children} {children}
</ChangeItemInfo> </ChangeItemInfo>
<Discard onDiscard={onDiscard} /> {discard}
</ChangeItemWrapper> </ChangeItemWrapper>
); );
}; };
export const StrategyDeletedChange: FC<IStrategyChangeProps> = ({ export const StrategyDeletedChange: FC<{ discard?: ReactNode }> = ({
onDiscard, discard,
children, children,
}) => { }) => {
return ( return (
@ -68,7 +68,7 @@ export const StrategyDeletedChange: FC<IStrategyChangeProps> = ({
</Typography> </Typography>
{children} {children}
</ChangeItemInfo> </ChangeItemInfo>
<Discard onDiscard={onDiscard} /> {discard}
</ChangeItemWrapper> </ChangeItemWrapper>
); );
}; };

View File

@ -1,17 +1,16 @@
import { VFC } from 'react'; import { ReactNode, VFC } from 'react';
import { Link, Box } from '@mui/material'; import { Box } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Badge } from 'component/common/Badge/Badge'; import { Badge } from 'component/common/Badge/Badge';
import { ChangeItemWrapper } from './StrategyChange'; import { ChangeItemWrapper } from './StrategyChange';
interface IPlaygroundResultsTable { interface IToggleStatusChange {
enabled: boolean; enabled: boolean;
onDiscard?: () => void; discard?: ReactNode;
} }
export const ToggleStatusChange: VFC<IPlaygroundResultsTable> = ({ export const ToggleStatusChange: VFC<IToggleStatusChange> = ({
enabled, enabled,
onDiscard, discard,
}) => { }) => {
return ( return (
<ChangeItemWrapper> <ChangeItemWrapper>
@ -21,14 +20,7 @@ export const ToggleStatusChange: VFC<IPlaygroundResultsTable> = ({
{enabled ? ' Enabled' : 'Disabled'} {enabled ? ' Enabled' : 'Disabled'}
</Badge> </Badge>
</Box> </Box>
<ConditionallyRender {discard}
condition={Boolean(onDiscard)}
show={
<Box>
<Link onClick={onDiscard}>Discard</Link>
</Box>
}
/>
</ChangeItemWrapper> </ChangeItemWrapper>
); );
}; };

View File

@ -133,7 +133,10 @@ export const ChangeRequestOverview: FC = () => {
<StyledPaper elevation={0}> <StyledPaper elevation={0}>
<StyledInnerContainer> <StyledInnerContainer>
Changes Changes
<ChangeRequest changeRequest={changeRequest} /> <ChangeRequest
changeRequest={changeRequest}
onRefetch={refetchChangeRequest}
/>
{changeRequest.comments?.map(comment => ( {changeRequest.comments?.map(comment => (
<ChangeRequestComment <ChangeRequestComment
key={comment.id} key={comment.id}