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

5 files changed, 38 insertions, 35 deletions

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"