1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-15 17:50:48 +02:00

feat: view diff in edit segment CR (#8874)

This commit is contained in:
Mateusz Kwasniewski 2024-11-28 09:29:19 +01:00 committed by GitHub
parent aeada68632
commit 0d72cfbba8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 8 deletions

View File

@ -1,5 +1,5 @@
import type React from 'react'; import type React from 'react';
import type { VFC, FC, ReactNode } from 'react'; import type { FC, ReactNode } from 'react';
import { Box, styled, Typography } from '@mui/material'; import { Box, styled, Typography } from '@mui/material';
import type { import type {
ChangeRequestState, ChangeRequestState,
@ -52,12 +52,15 @@ const SegmentContainer = styled(Box, {
borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`, borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`,
})); }));
export const SegmentChangeDetails: VFC<{ export const SegmentChangeDetails: FC<{
actions?: ReactNode; actions?: ReactNode;
change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment; change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment;
changeRequestState: ChangeRequestState; changeRequestState: ChangeRequestState;
}> = ({ actions, change, changeRequestState }) => { }> = ({ actions, change, changeRequestState }) => {
const { segment: currentSegment } = useSegment(change.payload.id); const { segment: currentSegment } = useSegment(change.payload.id);
const snapshotSegment = change.payload.snapshot;
const referenceSegment =
changeRequestState === 'Applied' ? snapshotSegment : currentSegment;
return ( return (
<SegmentContainer conflict={change.conflict}> <SegmentContainer conflict={change.conflict}>
@ -97,7 +100,7 @@ export const SegmentChangeDetails: VFC<{
<SegmentTooltipLink change={change}> <SegmentTooltipLink change={change}>
<SegmentDiff <SegmentDiff
change={change} change={change}
currentSegment={currentSegment} currentSegment={referenceSegment}
/> />
</SegmentTooltipLink> </SegmentTooltipLink>
</ChangeItemInfo> </ChangeItemInfo>

View File

@ -35,7 +35,7 @@ export const SegmentDiff: FC<{
<EventDiff <EventDiff
entry={{ entry={{
preData: omit(currentSegment, ['createdAt', 'createdBy']), preData: omit(currentSegment, ['createdAt', 'createdBy']),
data: changeRequestSegment, data: omit(changeRequestSegment, ['snapshot']),
}} }}
/> />
</StyledCodeSection> </StyledCodeSection>
@ -56,9 +56,15 @@ const StyledContainer: FC<{ children?: React.ReactNode }> = styled('div')(
}), }),
); );
const ViewDiff = styled('span')(({ theme }) => ({
color: theme.palette.primary.main,
marginLeft: theme.spacing(1),
}));
const Truncated = styled('div')(() => ({ const Truncated = styled('div')(() => ({
...textTruncated, ...textTruncated,
maxWidth: 500, maxWidth: 500,
display: 'flex',
})); }));
export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({ export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
@ -67,6 +73,10 @@ export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
}) => ( }) => (
<StyledContainer> <StyledContainer>
<Truncated> <Truncated>
<NameWithChangeInfo
previousName={change.name}
newName={change.payload.name}
/>
<TooltipLink <TooltipLink
tooltip={children} tooltip={children}
tooltipProps={{ tooltipProps={{
@ -74,10 +84,7 @@ export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
maxHeight: 600, maxHeight: 600,
}} }}
> >
<NameWithChangeInfo <ViewDiff>View Diff</ViewDiff>
previousName={change.name}
newName={change.payload.name}
/>
</TooltipLink> </TooltipLink>
</Truncated> </Truncated>
</StyledContainer> </StyledContainer>

View File

@ -196,6 +196,7 @@ export interface IChangeRequestDeleteSegment {
payload: { payload: {
id: number; id: number;
name: string; name: string;
snapshot?: ISegment;
}; };
} }