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:
parent
aeada68632
commit
0d72cfbba8
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -196,6 +196,7 @@ export interface IChangeRequestDeleteSegment {
|
|||||||
payload: {
|
payload: {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
|
snapshot?: ISegment;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user