From 319b9ad6352943fcf6265a589d7dba6ce659fa0a Mon Sep 17 00:00:00 2001 From: Ambroise C Date: Fri, 26 May 2023 10:54:39 +0200 Subject: [PATCH] SONAR-19345 Adapt issues education tabs to the new design system (#8349) --- .../src/components/icons/index.ts | 2 ++ .../coding-rules/__tests__/CodingRules-it.ts | 12 ++++----- .../js/apps/issues/__tests__/IssuesApp-it.tsx | 14 +++++------ .../components/rules/OtherContextOption.tsx | 12 ++++----- .../js/components/rules/RuleDescription.tsx | 25 +++++++++++-------- 5 files changed, 35 insertions(+), 30 deletions(-) diff --git a/server/sonar-web/design-system/src/components/icons/index.ts b/server/sonar-web/design-system/src/components/icons/index.ts index b811ad0071d..d81089a367a 100644 --- a/server/sonar-web/design-system/src/components/icons/index.ts +++ b/server/sonar-web/design-system/src/components/icons/index.ts @@ -21,10 +21,12 @@ export { BranchIcon } from './BranchIcon'; export { BugIcon } from './BugIcon'; export { CalendarIcon } from './CalendarIcon'; +export { CheckIcon } from './CheckIcon'; export { ChevronDownIcon } from './ChevronDownIcon'; export { ChevronLeftIcon } from './ChevronLeftIcon'; export { ChevronRightIcon } from './ChevronRightIcon'; export { ClockIcon } from './ClockIcon'; +export { CloseIcon } from './CloseIcon'; export { CodeSmellIcon } from './CodeSmellIcon'; export { CommentIcon } from './CommentIcon'; export { CopyIcon } from './CopyIcon'; diff --git a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts index 5556b269f63..75ce058a6f9 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts +++ b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts @@ -163,21 +163,21 @@ it('should show rule advanced section with context', async () => { name: 'coding_rules.description_section.title.how_to_fix', }) ); - expect(screen.getByRole('button', { name: 'Spring' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Spring boot' })).toBeInTheDocument(); + expect(screen.getByRole('radio', { name: 'Spring' })).toBeInTheDocument(); + expect(screen.getByRole('radio', { name: 'Spring boot' })).toBeInTheDocument(); expect( - screen.getByRole('button', { name: 'coding_rules.description_context.other' }) + screen.getByRole('radio', { name: 'coding_rules.description_context.other' }) ).toBeInTheDocument(); expect(screen.getByText('coding_rules.description_context.sub_title.Spring')).toBeInTheDocument(); expect(screen.getByText('This is how to fix for spring')).toBeInTheDocument(); - await user.click(screen.getByRole('button', { name: 'Spring boot' })); + await user.click(screen.getByRole('radio', { name: 'Spring boot' })); expect( screen.getByText('coding_rules.description_context.sub_title.Spring boot') ).toBeInTheDocument(); expect(screen.getByText('This is how to fix for spring boot')).toBeInTheDocument(); - await user.click(screen.getByRole('button', { name: 'coding_rules.description_context.other' })); + await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context.other' })); expect( screen.queryByText( 'coding_rules.description_context.sub_title.coding_rules.description_context.other' @@ -187,7 +187,7 @@ it('should show rule advanced section with context', async () => { expect(screen.getByText('coding_rules.context.others.description.first')).toBeInTheDocument(); const productBoardLink = screen.getByRole('link', { - name: 'opens_in_new_window coding_rules.context.others.feedback_description.link', + name: 'coding_rules.context.others.feedback_description.link', }); expect(productBoardLink).toBeInTheDocument(); expect(productBoardLink).toHaveAttribute('target', '_blank'); diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx index f501e8d97f1..34de8e4547d 100644 --- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx +++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx @@ -136,21 +136,21 @@ describe('issues app', () => { ); // Is the context selector present with the expected values and default selection? - expect(screen.getByRole('button', { name: 'Context 2' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Context 3' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Spring' })).toBeInTheDocument(); + expect(screen.getByRole('radio', { name: 'Context 2' })).toBeInTheDocument(); + expect(screen.getByRole('radio', { name: 'Context 3' })).toBeInTheDocument(); + expect(screen.getByRole('radio', { name: 'Spring' })).toBeInTheDocument(); expect( - screen.getByRole('button', { name: 'coding_rules.description_context.other' }) + screen.getByRole('radio', { name: 'coding_rules.description_context.other' }) ).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Spring' })).toHaveClass('selected'); + expect(screen.getByRole('radio', { name: 'Spring', current: true })).toBeInTheDocument(); // Select context 2 and check tab content - await user.click(screen.getByRole('button', { name: 'Context 2' })); + await user.click(screen.getByRole('radio', { name: 'Context 2' })); expect(screen.getByText('Context 2 content')).toBeInTheDocument(); // Select the "other" context and check tab content await user.click( - screen.getByRole('button', { name: 'coding_rules.description_context.other' }) + screen.getByRole('radio', { name: 'coding_rules.description_context.other' }) ); expect(screen.getByText('coding_rules.context.others.title')).toBeInTheDocument(); expect(screen.getByText('coding_rules.context.others.description.first')).toBeInTheDocument(); diff --git a/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx b/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx index 0134e2892f8..3f17a2a7510 100644 --- a/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx +++ b/server/sonar-web/src/main/js/components/rules/OtherContextOption.tsx @@ -17,11 +17,9 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { CheckIcon, CloseIcon, Link } from 'design-system'; import * as React from 'react'; import { translate } from '../../helpers/l10n'; -import Link from '../common/Link'; -import CheckIcon from '../icons/CheckIcon'; -import ClearIcon from '../icons/ClearIcon'; export default function OtherContextOption() { return ( @@ -30,12 +28,12 @@ export default function OtherContextOption() {

{translate('coding_rules.context.others.description.first')}

{translate('coding_rules.context.others.description.second')}

- - + + {translate('coding_rules.context.others.description.do')} - - + + {translate('coding_rules.context.others.description.dont')}

diff --git a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx index 4d979bd2bbc..582a7251403 100644 --- a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx +++ b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx @@ -18,14 +18,12 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { HtmlFormatter, themeBorder, themeColor } from 'design-system'; +import { FlagMessage, HtmlFormatter, themeBorder, themeColor, ToggleButton } from 'design-system'; import * as React from 'react'; import { RuleDescriptionSection } from '../../apps/coding-rules/rule'; import applyCodeDifferences from '../../helpers/code-difference'; import { translate, translateWithParameters } from '../../helpers/l10n'; import { sanitizeString } from '../../helpers/sanitize'; -import ButtonToggle from '../controls/ButtonToggle'; -import { Alert } from '../ui/Alert'; import OtherContextOption from './OtherContextOption'; const OTHERS_KEY = 'others'; @@ -122,7 +120,7 @@ export default class RuleDescription extends React.PureComponent { return ( { + ref={(node: HTMLDivElement) => { applyCodeDifferences(node); }} > @@ -130,17 +128,24 @@ export default class RuleDescription extends React.PureComponent { {translate('coding_rules.description_context.title')} {defaultContext && ( - + {translateWithParameters( 'coding_rules.description_context.default_information', defaultContext.displayName )} - + )} -
- + @@ -168,7 +173,7 @@ export default class RuleDescription extends React.PureComponent { return ( { + ref={(node: HTMLDivElement) => { applyCodeDifferences(node); }} // eslint-disable-next-line react/no-danger -- 2.39.5