deprecate tooltip link, move pieces into separate files

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: '"+ "' },
+}));

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',
+        display: 'flex',
-        gridTemplateColumns: '150px auto',
+        flexFlow: 'row',
-        gridAutoFlow: 'column',
         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 (
-            <Typography color='action.disabled'>Editing strategy:</Typography>
+            <Typography color='action.disabled'>Editing strategy</Typography>
         );
     }
 
     if (!wasDisabled && willBeDisabled) {
-        return <Typography color='error.dark'>Editing strategy:</Typography>;
+        return <Typography color='error.dark'>Editing strategy</Typography>;
     }
 
     if (wasDisabled && !willBeDisabled) {
-        return <Typography color='success.dark'>Editing strategy:</Typography>;
+        return <Typography color='success.dark'>Editing strategy</Typography>;
     }
 
     return <Typography>Editing strategy:</Typography>;
@@ -146,16 +146,12 @@ const DeleteStrategy: FC<{
                     <Typography
                         sx={(theme) => ({
                             color: theme.palette.error.main,
+                            '::before': { content: '"- "' },
                         })}
                     >
-                        - Deleting strategy:
+                        Deleting strategy
                     </Typography>
-                    <StrategyTooltipLink name={name || ''} title={title}>
+                    <StrategyTooltipLink name={name || ''} title={title} />
-                        <StrategyDiff
-                            change={change}
-                            currentStrategy={referenceStrategy}
-                        />
-                    </StrategyTooltipLink>
                 </ChangeItemInfo>
                 {actions}
             </ChangeItemCreateEditDeleteWrapper>
@@ -213,12 +209,7 @@ const UpdateStrategy: FC<{
                         name={change.payload.name}
                         title={change.payload.title}
                         previousTitle={previousTitle}
-                    >
-                        <StrategyDiff
-                            change={change}
-                            currentStrategy={referenceStrategy}
                     />
-                    </StrategyTooltipLink>
                 </ChangeItemInfo>
                 {actions}
             </ChangeItemCreateEditDeleteWrapper>
@@ -289,15 +280,14 @@ const AddStrategy: FC<{
                             ? 'action.disabled'
                             : 'success.dark'
                     }
+                    sx={{ '::before': { content: '"+ "' } }}
                 >
-                    + Adding strategy:
+                    Adding strategy
                 </Typography>
                 <StrategyTooltipLink
                     name={change.payload.name}
                     title={change.payload.title}
-                >
+                />
-                    <StrategyDiff change={change} currentStrategy={undefined} />
-                </StrategyTooltipLink>
                 <div>
                     <DisabledEnabledState
                         disabled

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyDiff.tsx

@@ -0,0 +1,47 @@
+import type {
+    IChangeRequestAddStrategy,
+    IChangeRequestDeleteStrategy,
+    IChangeRequestUpdateStrategy,
+} from 'component/changeRequest/changeRequest.types';
+import type { FC } from 'react';
+import { EventDiff } from 'component/events/EventDiff/EventDiff';
+import omit from 'lodash.omit';
+import type { IFeatureStrategy } from 'interfaces/strategy';
+
+const sortSegments = <T extends { segments?: number[] }>(
+    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 (
+        <EventDiff
+            entry={{
+                preData: omitIfDefined(sortedCurrentStrategy, ['sortOrder']),
+                data: omitIfDefined(sortedChangeRequestStrategy, ['snapshot']),
+            }}
+        />
+    );
+};

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<IStrategyTooltipLinkProps> = ({
+    name,
+    title,
+    previousTitle,
+}) => {
+    return (
+        <Truncated>
+            <Typography component='span'>{formatStrategyName(name)}</Typography>
+            <NameWithChangeInfo newName={title} previousName={previousTitle} />
+        </Truncated>
+    );
+};

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';
 

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 type { FC } from 'react';
-import { Fragment, type FC } from 'react';
+import { formatStrategyName } from 'utils/strategyNames';
-import {
-    formatStrategyName,
-    GetFeatureStrategyIcon,
-} 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 { NameWithChangeInfo } from '../Changes/Change/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,
-    },
-}));
 
 const sortSegments = <T extends { segments?: number[] }>(
     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 (
-        <Wrapper>
         <EventDiff
             entry={{
-                    preData: omissionFunction(sortedCurrentStrategy, [
+                preData: omitIfDefined(sortedCurrentStrategy, ['sortOrder']),
-                        'sortOrder',
+                data: omitIfDefined(sortedChangeRequestStrategy, ['snapshot']),
-                    ]),
-                    data: omissionFunction(sortedChangeRequestStrategy, [
-                        'snapshot',
-                    ]),
             }}
         />
-        </Wrapper>
     );
 };
 
@@ -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<IStrategyTooltipLinkProps> = ({
     name,
     title,
     previousTitle,
-    children,
 }) => {
     return (
-        <StyledContainer>
-            <GetFeatureStrategyIcon strategyName={name} />
         <Truncated>
-                <Typography component='span'>
+            <Typography component='span'>{formatStrategyName(name)}</Typography>
-                    {formatStrategyName(name)}
+            <NameWithChangeInfo newName={title} previousName={previousTitle} />
-                </Typography>
-                <TooltipLink
-                    tooltip={children}
-                    tooltipProps={{
-                        maxWidth: 500,
-                        maxHeight: 600,
-                    }}
-                >
-                    <ViewDiff>View Diff</ViewDiff>
-                </TooltipLink>
-                <NameWithChangeInfo
-                    newName={title}
-                    previousName={previousTitle}
-                />
         </Truncated>
-        </StyledContainer>
     );
 };