From a2cf4cd2bb801d0a561bf3cfab4161de6dd69c96 Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Wed, 13 Mar 2024 17:38:21 +0100
Subject: [PATCH] SONAR-21303 Showcase the Checkbox component from Echoes in a
 few places

---
 .../config/jest/SetupTestEnvironment.ts       | 22 ++++++++++++++++++
 .../src/components/input/Checkbox.tsx         | 13 +++++++++++
 server/sonar-web/package.json                 |  2 +-
 .../notifications/NotificationsList.tsx       | 11 +++++----
 .../issues/components/BulkChangeModal.tsx     | 23 ++++++++-----------
 .../js/apps/issues/components/IssuesApp.tsx   | 14 +++++------
 .../js/apps/projectsManagement/ProjectRow.tsx | 15 ++++++++----
 .../apps/web-api-v2/components/ApiSidebar.tsx | 10 ++++----
 .../components/issue/components/IssueView.tsx |  6 +++--
 server/sonar-web/yarn.lock                    | 10 ++++----
 10 files changed, 83 insertions(+), 43 deletions(-)

diff --git a/server/sonar-web/config/jest/SetupTestEnvironment.ts b/server/sonar-web/config/jest/SetupTestEnvironment.ts
index 2b376af2c1a..a5d27ff84f8 100644
--- a/server/sonar-web/config/jest/SetupTestEnvironment.ts
+++ b/server/sonar-web/config/jest/SetupTestEnvironment.ts
@@ -51,6 +51,28 @@ const MockIntersectionObserverEntries = [{ isIntersecting: true }];
   return MockObserver;
 });
 
+// ResizeObserver
+
+const MockResizeObserverEntries = [
+  {
+    contentRect: {
+      width: 100,
+      height: 200,
+    },
+  },
+];
+
+const MockResizeObserver = {
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+};
+
+global.ResizeObserver = jest.fn().mockImplementation((callback) => {
+  callback(MockResizeObserverEntries, MockResizeObserver);
+  return MockResizeObserver;
+});
+
 // Copied from pollyfill.io
 // To be remove when upgrading jsdom https://github.com/jsdom/jsdom/releases/tag/22.1.0
 // jest-environment-jsdom to v30
diff --git a/server/sonar-web/design-system/src/components/input/Checkbox.tsx b/server/sonar-web/design-system/src/components/input/Checkbox.tsx
index 72b4ba80da9..bb61804928b 100644
--- a/server/sonar-web/design-system/src/components/input/Checkbox.tsx
+++ b/server/sonar-web/design-system/src/components/input/Checkbox.tsx
@@ -41,6 +41,19 @@ interface Props {
   title?: string;
 }
 
+/** @deprecated Use Checkbox from Echoes instead.
+ *
+ * Some of the props have changed or been renamed:
+ * - ~`aria-disabled`~ is now inferred from `isDisabled`
+ * - `ariaLabel` is now mandatory in the absence of `label`
+ * - ~`children`~ has been removed
+ * - `disabled` is now `isDisabled`
+ * - `label` is no longer used in the aria-label but displayed next to the checkbox
+ * - `loading` is now `isLoading`
+ * - ~`onClick`~ has been removed
+ * - ~`right`~ has been removed
+ * - `thirdState` is now represented by the `indeterminate` value of the `checked` prop
+ */
 export function Checkbox({
   checked,
   disabled,
diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 648cb572bf0..50acc8d9188 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -13,7 +13,7 @@
     "@primer/octicons-react": "19.8.0",
     "@react-spring/rafz": "9.7.3",
     "@react-spring/web": "9.7.3",
-    "@sonarsource/echoes-react": "0.1.1",
+    "@sonarsource/echoes-react": "0.1.2",
     "@tanstack/react-query": "5.18.1",
     "axios": "1.6.7",
     "classnames": "2.5.1",
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/NotificationsList.tsx b/server/sonar-web/src/main/js/apps/account/notifications/NotificationsList.tsx
index c1748be30eb..946ac7030fd 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/NotificationsList.tsx
+++ b/server/sonar-web/src/main/js/apps/account/notifications/NotificationsList.tsx
@@ -18,7 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { CellComponent, Checkbox, TableRowInteractive } from 'design-system';
+import { Checkbox } from '@sonarsource/echoes-react';
+import { CellComponent, TableRowInteractive } from 'design-system';
 import * as React from 'react';
 import { hasMessage, translate, translateWithParameters } from '../../../helpers/l10n';
 import {
@@ -77,13 +78,13 @@ export default function NotificationsList({
         <CellComponent className="sw-py-0 sw-border-0" key={channel}>
           <div className="sw-justify-end sw-flex sw-items-center">
             <Checkbox
-              checked={isEnabled(type, channel)}
-              id={checkboxId(type, channel)}
-              label={translateWithParameters(
+              ariaLabel={translateWithParameters(
                 'notification.dispatcher.description_x',
                 getDispatcherLabel(type),
               )}
-              onCheck={(checked) => handleCheck(type, channel, checked)}
+              checked={isEnabled(type, channel)}
+              id={checkboxId(type, channel)}
+              onCheck={(checked) => handleCheck(type, channel, checked as boolean)}
             />
           </div>
         </CellComponent>
diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
index d7f47652421..e0cd92c98df 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
@@ -17,9 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
+import { Checkbox, Spinner } from '@sonarsource/echoes-react';
 import {
   ButtonPrimary,
-  Checkbox,
   FlagMessage,
   FormField,
   Highlight,
@@ -28,7 +29,6 @@ import {
   LightLabel,
   Modal,
   RadioButton,
-  Spinner,
 } from 'design-system';
 import { countBy, flattenDeep, pickBy, sortBy } from 'lodash';
 import * as React from 'react';
@@ -351,17 +351,12 @@ export class BulkChangeModal extends React.PureComponent<Props, State> {
   };
 
   renderNotificationsField = () => (
-    <div>
-      <Checkbox
-        checked={this.state.notifications !== undefined}
-        className="sw-my-2 sw-gap-1/2"
-        id="send-notifications"
-        onCheck={this.handleFieldCheck('notifications')}
-        right
-      >
-        {translate('issue.send_notifications')}
-      </Checkbox>
-    </div>
+    <Checkbox
+      checked={this.state.notifications !== undefined}
+      id="send-notifications"
+      label={translate('issue.send_notifications')}
+      onCheck={this.handleFieldCheck('notifications')}
+    />
   );
 
   renderForm = () => {
@@ -371,7 +366,7 @@ export class BulkChangeModal extends React.PureComponent<Props, State> {
     const limitReached = paging && paging.total > MAX_PAGE_SIZE;
 
     return (
-      <Spinner loading={loading}>
+      <Spinner isLoading={loading}>
         <form id="bulk-change-form" onSubmit={this.handleSubmit} className="sw-mr-4">
           {limitReached && (
             <FlagMessage className="sw-mb-4" variant="warning">
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index f9f16a25f18..0f8307aa4a8 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -17,16 +17,16 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
+import { Checkbox, Spinner } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
 import {
   ButtonSecondary,
-  Checkbox,
   FlagMessage,
   LAYOUT_FOOTER_HEIGHT,
   LargeCenteredLayout,
   PageContentFontWrapper,
-  Spinner,
   ToggleButton,
   themeBorder,
   themeColor,
@@ -955,12 +955,12 @@ export class App extends React.PureComponent<Props, State> {
     return (
       <div className="sw-float-left sw-flex sw-items-center">
         <Checkbox
-          checked={isChecked}
+          ariaLabel={translate('issues.select_all_issues')}
+          checked={thirdState ? 'indeterminate' : isChecked}
           className="sw-mr-2"
-          disabled={issues.length === 0}
           id="issues-selection"
+          isDisabled={issues.length === 0}
           onCheck={this.handleCheckAll}
-          thirdState={thirdState}
           title={translate('issues.select_all_issues')}
         />
 
@@ -1227,7 +1227,7 @@ export class App extends React.PureComponent<Props, State> {
           >
             {this.renderHeader({ openIssue, paging })}
 
-            <Spinner loading={loadingRule}>
+            <Spinner isLoading={loadingRule}>
               {openIssue && openRuleDetails ? (
                 <IssueTabViewer
                   activityTabContent={
@@ -1264,7 +1264,7 @@ export class App extends React.PureComponent<Props, State> {
                   <Spinner
                     ariaLabel={translate('issues.loading_issues')}
                     className="sw-mt-4"
-                    loading={loading}
+                    isLoading={loading}
                   >
                     {checkAll && paging && paging.total > MAX_PAGE_SIZE && (
                       <div className="sw-mt-3">
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
index 3c1e3d0fea2..4aff6bcc288 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
@@ -17,7 +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 { ActionCell, Badge, Checkbox, ContentCell, HoverLink, Note, TableRow } from 'design-system';
+
+import { Checkbox, LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react';
+import { ActionCell, Badge, ContentCell, Note, TableRow } from 'design-system';
 import * as React from 'react';
 import { Project } from '../../api/project-management';
 import PrivacyBadgeContainer from '../../components/common/PrivacyBadgeContainer';
@@ -37,7 +39,7 @@ interface Props {
   selected: boolean;
 }
 
-export default function ProjectRow(props: Props) {
+export default function ProjectRow(props: Readonly<Props>) {
   const { currentUser, project, selected } = props;
   const { data: githubProvisioningEnabled } = useGithubProvisioningEnabledQuery();
 
@@ -49,17 +51,20 @@ export default function ProjectRow(props: Props) {
     <TableRow data-project-key={project.key}>
       <ContentCell>
         <Checkbox
-          label={translateWithParameters('projects_management.select_project', project.name)}
+          ariaLabel={translateWithParameters('projects_management.select_project', project.name)}
           checked={selected}
           onCheck={handleProjectCheck}
         />
       </ContentCell>
       <ContentCell className="it__project-row-text-cell">
-        <HoverLink to={getComponentOverviewUrl(project.key, project.qualifier)}>
+        <LinkStandalone
+          highlight={LinkHighlight.CurrentColor}
+          to={getComponentOverviewUrl(project.key, project.qualifier)}
+        >
           <Tooltip overlay={project.name} placement="left">
             <span>{project.name}</span>
           </Tooltip>
-        </HoverLink>
+        </LinkStandalone>
         {project.qualifier === ComponentQualifier.Project &&
           githubProvisioningEnabled &&
           !project.managed && <Badge className="sw-ml-1">{translate('local')}</Badge>}
diff --git a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx
index 39f3f0bf5d2..dda53c78836 100644
--- a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { Checkbox } from '@sonarsource/echoes-react';
 import {
   Badge,
   BasicSeparator,
-  Checkbox,
   HelperHintIcon,
   InputSearch,
   SubnavigationAccordion,
@@ -104,9 +104,11 @@ export default function ApiSidebar({ apisList, docInfo }: Readonly<Props>) {
       />
 
       <div className="sw-mt-4 sw-flex sw-items-center">
-        <Checkbox checked={showInternal} onCheck={() => setShowInternal((prev) => !prev)}>
-          <span className="sw-ml-2">{translate('api_documentation.show_internal_v2')}</span>
-        </Checkbox>
+        <Checkbox
+          checked={showInternal}
+          label={translate('api_documentation.show_internal_v2')}
+          onCheck={() => setShowInternal((prev) => !prev)}
+        />
 
         <HelpTooltip
           className="sw-ml-2"
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
index 241e717a33c..553324baa11 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx
@@ -17,9 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import styled from '@emotion/styled';
+import { Checkbox } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
-import { BasicSeparator, Checkbox, themeBorder } from 'design-system';
+import { BasicSeparator, themeBorder } from 'design-system';
 import * as React from 'react';
 import { deleteIssueComment, editIssueComment } from '../../../api/issues';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -100,9 +102,9 @@ export default class IssueView extends React.PureComponent<Props> {
           {hasCheckbox && (
             <span className="sw-mt-1/2 sw-ml-1 sw-self-start">
               <Checkbox
+                ariaLabel={translateWithParameters('issues.action_select.label', issue.message)}
                 checked={checked ?? false}
                 onCheck={this.handleCheck}
-                label={translateWithParameters('issues.action_select.label', issue.message)}
                 title={translate('issues.action_select')}
               />
             </span>
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index d9169ab780e..e9f0af5c1b8 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -4533,9 +4533,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sonarsource/echoes-react@npm:0.1.1":
-  version: 0.1.1
-  resolution: "@sonarsource/echoes-react@npm:0.1.1"
+"@sonarsource/echoes-react@npm:0.1.2":
+  version: 0.1.2
+  resolution: "@sonarsource/echoes-react@npm:0.1.2"
   dependencies:
     "@primer/octicons-react": "npm:19.8.0"
     "@radix-ui/react-checkbox": "npm:1.0.4"
@@ -4547,7 +4547,7 @@ __metadata:
     react-dom: ^17.0.0 || ^18.0.0
     react-intl: ^6.0.0
     react-router-dom: ^6.0.0
-  checksum: 10/9d9901397aeef7faba3262281b919a186aeba5aaf3f27073a7895a0fe96fc2a2a5fb1ba9a4959401d11396e585075065cc4f18cff2ce8eabc48235032239d130
+  checksum: 10/fc25b30ed8ffa0186eb206ef2e71b444c334b4a350eb3e9e71874a064b9fe590b525ad2f1459d5d9de7882fb8be899a2a9e6154df758406900a5380f8e3810c2
   languageName: node
   linkType: hard
 
@@ -5749,7 +5749,7 @@ __metadata:
     "@primer/octicons-react": "npm:19.8.0"
     "@react-spring/rafz": "npm:9.7.3"
     "@react-spring/web": "npm:9.7.3"
-    "@sonarsource/echoes-react": "npm:0.1.1"
+    "@sonarsource/echoes-react": "npm:0.1.2"
     "@swc/core": "npm:1.4.0"
     "@swc/jest": "npm:0.2.36"
     "@tanstack/react-query": "npm:5.18.1"
-- 
2.39.5