SONAR-21303 Showcase the Checkbox component from Echoes in a few places

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

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,

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",

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>

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">

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">

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>}

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"

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>

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"