From 2531819222999381455f63b314a6ed33fa1b458d Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 9 Aug 2023 14:47:02 +0200 Subject: [PATCH] fix: CR strategy name changes code (#4449) This change addresses two things that were done in https://github.com/Unleash/unleash/pull/4004 and that I believe to be bugs. 1. It shows the previous strategy name also if there was no previous title. So if there was no previous title, it'll show the strategy name with a strikethrough and then the new title (see the discussion section). 2. It changes a `span` component to a [`del` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del). I believe the span was erroneously changed from a `s` component (strikethrough component) in the linked PR (based on a comment on the PR). This caused the strikethrough to not be there anymore. However, the `del` component is semantically more correct and reintroduces the strikethrough, so it is a better change. 3. It uses [`ins` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) for names that have changed. Finally, it removes a redundant pair of curly braces. How it looks now: ![image](https://github.com/Unleash/unleash/assets/17786332/a9947619-056d-4cd8-8b44-8a562c83ba40) ## Discussion Regarding point 1: It might be that we don't want to show a strikethrough through the name of the strategy if there was no previous title. In that case, the changes related to the first point should be removed. If we do that, it looks like this: ![image](https://github.com/Unleash/unleash/assets/17786332/aeb6c86c-d283-4703-96e6-c4302d252417) It makes it harder (impossible, actually) to see when a custom title was added, but that might be what we want. But maybe the solution is to also use `ins` elements for new data. That way the difference is visible (and semantically correct): ![image](https://github.com/Unleash/unleash/assets/17786332/ef13a745-9f9c-4b1a-886f-a7917eb12190) --- .../StrategyTooltipLink.test.tsx | 72 +++++++++++++++++++ .../StrategyTooltipLink.tsx | 48 ++++++++----- 2 files changed, 104 insertions(+), 16 deletions(-) create mode 100644 frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx new file mode 100644 index 0000000000..1f6535cd44 --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx @@ -0,0 +1,72 @@ +import { screen } from '@testing-library/react'; +import { render } from 'utils/testRenderer'; +import React from 'react'; +import { StrategyName } from './StrategyTooltipLink'; + +test.each(['', undefined])( + 'Should render only the new title if the previous title was %s', + async previousTitle => { + const newTitle = 'new title'; + render( + + ); + + // expect no del elements + expect( + screen.queryByText(previousTitle || '', { selector: 'del' }) + ).toBeNull(); + + // expect ins element with new strategy name + await screen.findByText(newTitle, { selector: 'ins' }); + } +); + +test.each(['', undefined])( + 'Should render the old title as deleted and no new title if there was a previous title and the new one is %s', + async newTitle => { + const previousTitle = 'previous title'; + render( + + ); + + // expect no ins elements + expect( + screen.queryByText(newTitle || '', { selector: 'ins' }) + ).toBeNull(); + + // expect del element with old strategy name + await screen.findByText(previousTitle, { selector: 'del' }); + } +); + +test('Should render the old title as deleted and the new title as inserted if the previous title was different', async () => { + const newTitle = 'new title'; + const previousTitle = 'previous title'; + render(); + + // expect del element with old strategy name + await screen.findByText(previousTitle, { selector: 'del' }); + + // expect ins element with new strategy name + await screen.findByText(newTitle, { selector: 'ins' }); +}); + +test('Should render the title in a span if it has not changed', async () => { + const title = 'title'; + render(); + + // expect no del or ins elements + expect(screen.queryByText(title, { selector: 'ins' })).toBeNull(); + expect(screen.queryByText(title, { selector: 'del' })).toBeNull(); + + // expect span element with the strategy name + await screen.findByText(title, { selector: 'span' }); +}); + +test('Should render nothing if there was no title and there is still no title', async () => { + render(); + + expect(screen.queryByText('', { selector: 'ins' })).toBeNull(); + expect(screen.queryByText('', { selector: 'del' })).toBeNull(); + expect(screen.queryByText('', { selector: 'span' })).toBeNull(); +}); diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx index 10b68bfead..3b8cbf4eb0 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx @@ -50,30 +50,43 @@ export const StrategyDiff: FC<{ }; export const StrategyName: FC<{ - change: - | IChangeRequestAddStrategy - | IChangeRequestUpdateStrategy - | IChangeRequestDeleteStrategy; + newTitle: string | undefined; previousTitle: string | undefined; -}> = ({ change, previousTitle }) => { +}> = ({ newTitle, previousTitle }) => { + const titleHasChanged = Boolean( + previousTitle && previousTitle !== newTitle + ); + + const titleHasChangedOrBeenAdded = Boolean( + titleHasChanged || (!previousTitle && newTitle) + ); + return ( <> - - {previousTitle || - formatStrategyName(change.payload.name)} - {' '} + + {previousTitle} + + + } + /> + + + {newTitle} + } /> - - {change.payload.title} - ); }; @@ -118,7 +131,10 @@ export const StrategyTooltipLink: FC = ({ {formatStrategyName(change.payload.name)} - {} + );