diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx new file mode 100644 index 0000000000..20c895ba9f --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx @@ -0,0 +1,14 @@ +import { styled, Typography } from '@mui/material'; + +export const Deleted = styled(Typography)(({ theme }) => ({ + color: theme.palette.error.main, + '::before': { content: '"- "' }, +})); + +export const Added = styled(Typography)(({ theme }) => ({ + '::before': { content: '"+ "' }, +})); + +export const Added = styled(Typography)(({ theme }) => ({ + '::before': { content: '"+ "' }, +})); diff --git a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.test.tsx similarity index 100% rename from frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx rename to frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.test.tsx diff --git a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx similarity index 100% rename from frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx rename to frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx index d5cc72eea3..689a24dac2 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx @@ -40,12 +40,12 @@ const ChangeItemCreateEditDeleteWrapper = styled(Box)(({ theme }) => ({ const ChangeItemInfo: FC<{ children?: React.ReactNode }> = styled(Box)( ({ theme }) => ({ - display: 'grid', - gridTemplateColumns: '150px auto', - gridAutoFlow: 'column', + display: 'flex', + flexFlow: 'row', alignItems: 'center', - flexGrow: 1, + flex: 'auto', gap: theme.spacing(1), + '::before': { content: '"Change: "', fontWeight: 'bold' }, }), ); @@ -102,16 +102,16 @@ const EditHeader: FC<{ }> = ({ wasDisabled = false, willBeDisabled = false }) => { if (wasDisabled && willBeDisabled) { return ( - Editing strategy: + Editing strategy ); } if (!wasDisabled && willBeDisabled) { - return Editing strategy:; + return Editing strategy; } if (wasDisabled && !willBeDisabled) { - return Editing strategy:; + return Editing strategy; } return Editing strategy:; @@ -146,16 +146,12 @@ const DeleteStrategy: FC<{ ({ color: theme.palette.error.main, + '::before': { content: '"- "' }, })} > - - Deleting strategy: + Deleting strategy - - - + {actions} @@ -213,12 +209,7 @@ const UpdateStrategy: FC<{ name={change.payload.name} title={change.payload.title} previousTitle={previousTitle} - > - - + /> {actions} @@ -289,15 +280,14 @@ const AddStrategy: FC<{ ? 'action.disabled' : 'success.dark' } + sx={{ '::before': { content: '"+ "' } }} > - + Adding strategy: + Adding strategy - - + />
( + item?: T, +): T | undefined => { + if (!item || !item.segments) { + return item; + } + return { + ...item, + segments: [...item.segments].sort((a, b) => a - b), + }; +}; + +const omitIfDefined = (obj: any, keys: string[]) => + obj ? omit(obj, keys) : obj; + +export const StrategyDiff: FC<{ + change: + | IChangeRequestAddStrategy + | IChangeRequestUpdateStrategy + | IChangeRequestDeleteStrategy; + currentStrategy?: IFeatureStrategy; +}> = ({ change, currentStrategy }) => { + const changeRequestStrategy = + change.action === 'deleteStrategy' ? undefined : change.payload; + + const sortedCurrentStrategy = sortSegments(currentStrategy); + const sortedChangeRequestStrategy = sortSegments(changeRequestStrategy); + + return ( + + ); +}; diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyName.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyName.tsx new file mode 100644 index 0000000000..f3eac16140 --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyName.tsx @@ -0,0 +1,29 @@ +import type { FC } from 'react'; +import { formatStrategyName } from 'utils/strategyNames'; +import { Typography, styled } from '@mui/material'; +import { textTruncated } from 'themes/themeStyles'; +import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx'; + +interface IStrategyTooltipLinkProps { + name: string; + title?: string; + previousTitle?: string; +} + +const Truncated = styled('div')(() => ({ + ...textTruncated, + maxWidth: 500, +})); + +export const StrategyTooltipLink: FC = ({ + name, + title, + previousTitle, +}) => { + return ( + + {formatStrategyName(name)} + + + ); +}; diff --git a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx index 50670c1333..b4b46a58c6 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx @@ -9,7 +9,7 @@ import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; import { styled } from '@mui/material'; import { textTruncated } from 'themes/themeStyles'; import type { ISegment } from 'interfaces/segment'; -import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx'; +import { NameWithChangeInfo } from './Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx'; import { EventDiff } from 'component/events/EventDiff/EventDiff.tsx'; import { useUiFlag } from 'hooks/useUiFlag.ts'; diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx index f3d5b4248f..3477f720e1 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx @@ -1,33 +1,17 @@ +// deprecated. Remove with flag crDiffView import type { IChangeRequestAddStrategy, IChangeRequestDeleteStrategy, IChangeRequestUpdateStrategy, } from 'component/changeRequest/changeRequest.types'; -import type React from 'react'; -import { Fragment, type FC } from 'react'; -import { - formatStrategyName, - GetFeatureStrategyIcon, -} from 'utils/strategyNames'; +import type { FC } from 'react'; +import { formatStrategyName } from 'utils/strategyNames'; import { EventDiff } from 'component/events/EventDiff/EventDiff'; import omit from 'lodash.omit'; -import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; import { Typography, styled } from '@mui/material'; import type { IFeatureStrategy } from 'interfaces/strategy'; import { textTruncated } from 'themes/themeStyles'; -import { NameWithChangeInfo } from '../NameWithChangeInfo/NameWithChangeInfo.tsx'; -import { useUiFlag } from 'hooks/useUiFlag.ts'; - -const StyledCodeSection = styled('div')(({ theme }) => ({ - overflowX: 'auto', - '& code': { - wordWrap: 'break-word', - whiteSpace: 'pre-wrap', - fontFamily: 'monospace', - lineHeight: 1.5, - fontSize: theme.fontSizes.smallBody, - }, -})); +import { NameWithChangeInfo } from '../Changes/Change/NameWithChangeInfo/NameWithChangeInfo.tsx'; const sortSegments = ( item?: T, @@ -51,28 +35,19 @@ export const StrategyDiff: FC<{ | IChangeRequestDeleteStrategy; currentStrategy?: IFeatureStrategy; }> = ({ change, currentStrategy }) => { - const useNewDiff = useUiFlag('improvedJsonDiff'); const changeRequestStrategy = change.action === 'deleteStrategy' ? undefined : change.payload; const sortedCurrentStrategy = sortSegments(currentStrategy); const sortedChangeRequestStrategy = sortSegments(changeRequestStrategy); - const Wrapper = useNewDiff ? Fragment : StyledCodeSection; - const omissionFunction = useNewDiff ? omitIfDefined : omit; return ( - - - + ); }; @@ -80,24 +55,8 @@ interface IStrategyTooltipLinkProps { name: string; title?: string; previousTitle?: string; - children?: React.ReactNode; } -const StyledContainer: FC<{ children?: React.ReactNode }> = styled('div')( - ({ theme }) => ({ - display: 'grid', - gridAutoFlow: 'column', - gridTemplateColumns: 'auto 1fr', - gap: theme.spacing(1), - alignItems: 'center', - }), -); - -const ViewDiff = styled('span')(({ theme }) => ({ - color: theme.palette.primary.main, - marginLeft: theme.spacing(1), -})); - const Truncated = styled('div')(() => ({ ...textTruncated, maxWidth: 500, @@ -107,29 +66,11 @@ export const StrategyTooltipLink: FC = ({ name, title, previousTitle, - children, }) => { return ( - - - - - {formatStrategyName(name)} - - - View Diff - - - - + + {formatStrategyName(name)} + + ); };