From b2aa3ea049ce41d202d3cb78c9febd1fc357b5e2 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Sun, 27 Aug 2023 20:35:27 +0300
Subject: [PATCH] feat: change request ui updates (#4574)

---
 .../Changes/Change/StrategyChange.tsx         |  3 ++-
 .../NameWithChangeInfo.test.tsx               | 22 ++++---------------
 .../NameWithChangeInfo/NameWithChangeInfo.tsx | 12 +---------
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
index 7afc902c4d..750d77888c 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -25,7 +25,8 @@ export const ChangeItemWrapper = styled(Box)({
 
 const ChangeItemCreateEditWrapper = styled(Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'auto 40px',
+    gridTemplateColumns: 'auto auto',
+    justifyContent: 'space-between',
     gap: theme.spacing(1),
     alignItems: 'center',
     marginBottom: theme.spacing(2),
diff --git a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx
index 72e5d0e9ee..077454ed0b 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.test.tsx
@@ -17,7 +17,7 @@ test.each(['', undefined])(
         ).toBeNull();
 
         // expect ins element with new strategy name
-        await screen.findByText(newName, { selector: 'ins' });
+        await screen.findByText(newName, { selector: 'p' });
     }
 );
 
@@ -30,9 +30,7 @@ test.each(['', undefined])(
         );
 
         // expect no ins elements
-        expect(
-            screen.queryByText(newName || '', { selector: 'ins' })
-        ).toBeNull();
+        expect(screen.queryByText(newName || '', { selector: 'p' })).toBeNull();
 
         // expect del element with old strategy name
         await screen.findByText(previousName, { selector: 'del' });
@@ -50,25 +48,13 @@ test('Should render the old name as deleted and the new name as inserted if the
     await screen.findByText(previousName, { selector: 'del' });
 
     // expect ins element with new strategy name
-    await screen.findByText(newName, { selector: 'ins' });
-});
-
-test('Should render the name in a span if it has not changed', async () => {
-    const name = 'name';
-    render(<NameWithChangeInfo newName={name} previousName={name} />);
-
-    // expect no del or ins elements
-    expect(screen.queryByText(name, { selector: 'ins' })).toBeNull();
-    expect(screen.queryByText(name, { selector: 'del' })).toBeNull();
-
-    // expect span element with the strategy name
-    await screen.findByText(name, { selector: 'span' });
+    await screen.findByText(newName, { selector: 'p' });
 });
 
 test('Should render nothing if there was no name and there is still no name', async () => {
     render(<NameWithChangeInfo newName={undefined} previousName={undefined} />);
 
-    expect(screen.queryByText('', { selector: 'ins' })).toBeNull();
+    expect(screen.queryByText('', { selector: 'p' })).toBeNull();
     expect(screen.queryByText('', { selector: 'del' })).toBeNull();
     expect(screen.queryByText('', { selector: 'span' })).toBeNull();
 });
diff --git a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx
index 65ce62722d..364add1e56 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/NameWithChangeInfo/NameWithChangeInfo.tsx
@@ -14,10 +14,6 @@ export const NameWithChangeInfo: FC<{
 }> = ({ newName, previousName }) => {
     const titleHasChanged = Boolean(previousName && previousName !== newName);
 
-    const titleHasChangedOrBeenAdded = Boolean(
-        titleHasChanged || (!previousName && newName)
-    );
-
     return (
         <>
             <ConditionallyRender
@@ -34,13 +30,7 @@ export const NameWithChangeInfo: FC<{
                 condition={Boolean(newName)}
                 show={
                     <Truncated>
-                        <Typography
-                            component={
-                                titleHasChangedOrBeenAdded ? 'ins' : 'span'
-                            }
-                        >
-                            {newName}
-                        </Typography>
+                        <Typography>{newName}</Typography>
                     </Truncated>
                 }
             />