SONAR-19345 Adapt issues education tabs to the new design system (#8349)

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() {
       <p>{translate('coding_rules.context.others.description.first')}</p>
       <p>{translate('coding_rules.context.others.description.second')}</p>
       <p>
-        <span className="display-block big-spacer-left">
-          <CheckIcon className="spacer-right" fill="green" />
+        <span className="sw-flex sw-items-center sw-ml-4">
+          <CheckIcon className="sw-mr-2" fill="iconSuccess" />
           {translate('coding_rules.context.others.description.do')}
         </span>
-        <span className="display-block big-spacer-left">
-          <ClearIcon className="spacer-right" fill="red" />
+        <span className="sw-flex sw-items-center sw-ml-4">
+          <CloseIcon className="sw-mr-2" fill="iconError" />
           {translate('coding_rules.context.others.description.dont')}
         </span>
       </p>
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<Props, State> {
       return (
         <StyledHtmlFormatter
           className={className}
-          ref={(node) => {
+          ref={(node: HTMLDivElement) => {
             applyCodeDifferences(node);
           }}
         >
@@ -130,17 +128,24 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
             {translate('coding_rules.description_context.title')}
           </h2>
           {defaultContext && (
-            <Alert variant="info" display="inline" className="big-spacer-bottom">
+            <FlagMessage
+              variant="info"
+              className="sw-mb-4"
+              ariaLabel={translateWithParameters(
+                'coding_rules.description_context.default_information',
+                defaultContext.displayName
+              )}
+            >
               {translateWithParameters(
                 'coding_rules.description_context.default_information',
                 defaultContext.displayName
               )}
-            </Alert>
+            </FlagMessage>
           )}
-          <div className="big-spacer-bottom">
-            <ButtonToggle
+          <div className="sw-mb-4">
+            <ToggleButton
               label={translate('coding_rules.description_context.title')}
-              onCheck={this.handleToggleContext}
+              onChange={this.handleToggleContext}
               options={options}
               value={selectedContext.displayName}
             />
@@ -168,7 +173,7 @@ export default class RuleDescription extends React.PureComponent<Props, State> {
     return (
       <StyledHtmlFormatter
         className={className}
-        ref={(node) => {
+        ref={(node: HTMLDivElement) => {
           applyCodeDifferences(node);
         }}
         // eslint-disable-next-line react/no-danger