From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Wed, 10 Apr 2024 16:37:54 +0000 (+0200)
Subject: SONAR-21973 Showcase new icons from Echoes in a few places
X-Git-Tag: 10.6.0.92116~216
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=8d81569939c5abb53a0ee945b5a86450b438ba98;p=sonarqube.git

SONAR-21973 Showcase new icons from Echoes in a few places
---

diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx
index 23821db1ad7..4147c6cc45f 100644
--- a/server/sonar-web/design-system/src/components/Text.tsx
+++ b/server/sonar-web/design-system/src/components/Text.tsx
@@ -106,7 +106,7 @@ export const StyledText = styled.span`
   }
 `;
 
-const StyledMutedText = styled(StyledText)`
+export const StyledMutedText = styled(StyledText)`
   ${tw`sw-font-regular`};
   color: ${themeColor('dropdownMenuSubTitle')};
 `;
diff --git a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx
index 51dd597b733..bf1323bd209 100644
--- a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx
+++ b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx
@@ -18,12 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { LinkStandalone } from '@sonarsource/echoes-react';
+import { IconCheck, LinkStandalone } from '@sonarsource/echoes-react';
 import {
   ButtonPrimary,
   Card,
   CardSeparator,
-  CheckIcon,
   ClipboardButton,
   InputField,
   ListItem,
@@ -100,7 +99,7 @@ export function SonarLintConnection({ currentUser }: Readonly<Props>) {
           </p>
           <p className="sw-mb-10">{translate('sonarlint-connection.request.description2')}</p>
 
-          <ButtonPrimary icon={<CheckIcon fill="currentColor" />} onClick={authorize}>
+          <ButtonPrimary icon={<IconCheck className="sw-mr-1" />} onClick={authorize}>
             {translate('sonarlint-connection.request.action')}
           </ButtonPrimary>
         </>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx
index 19371524f0d..52a703f4ef4 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.tsx
@@ -17,7 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { ProjectIcon, Spinner } from 'design-system';
+
+import { IconProject, Spinner } from '@sonarsource/echoes-react';
 import { omit } from 'lodash';
 import * as React from 'react';
 import { getTree, searchProjects } from '../../../api/components';
@@ -124,7 +125,7 @@ export function ProjectFacet(props: Readonly<Props>) {
 
   const renderSearchResult = (project: Pick<SearchedProject, 'name'>, term: string) => (
     <>
-      <ProjectIcon className="sw-mr-1" />
+      <IconProject className="sw-mr-1" />
 
       {highlightTerm(project.name, term)}
     </>
@@ -169,9 +170,9 @@ function ProjectItem({
 
   return (
     <div className="sw-flex sw-items-center">
-      <ProjectIcon className="sw-mr-1" />
+      <IconProject className="sw-mr-1" />
 
-      <Spinner loading={projectName === undefined && isLoading} />
+      <Spinner isLoading={projectName === undefined && isLoading} />
 
       <span className="sw-min-w-0 sw-truncate" title={label}>
         {label}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx
index 43a45b0f0bb..3a830ac4842 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ScopeFacet.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 { FacetBox, FacetItem, FileIcon, TestFileIcon } from 'design-system';
+
+import { IconFile, IconFileCode } from '@sonarsource/echoes-react';
+import { FacetBox, FacetItem } from 'design-system';
 import { without } from 'lodash';
 import * as React from 'react';
 import { SOURCE_SCOPES } from '../../../helpers/constants';
@@ -68,7 +70,12 @@ export function ScopeFacet(props: ScopeFacetProps) {
               <FacetItem
                 active={active}
                 className="it__search-navigator-facet"
-                icon={{ MAIN: <FileIcon />, TEST: <TestFileIcon /> }[scope]}
+                icon={
+                  {
+                    MAIN: <IconFile className="sw-mr-1" />,
+                    TEST: <IconFileCode className="sw-mr-1" />,
+                  }[scope]
+                }
                 key={scope}
                 name={translate('issue.scope', scope)}
                 onClick={(itemValue: string, multiple: boolean) => {
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx
index 7d8ad9e2c67..7b886923d85 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.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 { BugIcon, CodeSmellIcon, FacetBox, FacetItem, VulnerabilityIcon } from 'design-system';
+
+import { IconBug, IconCodeSmell, IconVulnerability } from '@sonarsource/echoes-react';
+import { FacetBox, FacetItem } from 'design-system';
 import { orderBy, without } from 'lodash';
 import * as React from 'react';
 import { ISSUE_TYPES } from '../../../helpers/constants';
@@ -48,10 +50,12 @@ export class TypeFacet extends React.PureComponent<Props> {
 
   handleItemClick = (itemValue: string, multiple: boolean) => {
     const { types } = this.props;
+
     if (multiple) {
       const newValue = orderBy(
         types.includes(itemValue) ? without(types, itemValue) : [...types, itemValue],
       );
+
       this.props.onChange({ [this.property]: newValue });
     } else {
       this.props.onChange({
@@ -89,9 +93,9 @@ export class TypeFacet extends React.PureComponent<Props> {
         className="it__search-navigator-facet"
         icon={
           {
-            BUG: <BugIcon />,
-            CODE_SMELL: <CodeSmellIcon />,
-            VULNERABILITY: <VulnerabilityIcon />,
+            BUG: <IconBug className="sw-mr-1" />,
+            CODE_SMELL: <IconCodeSmell className="sw-mr-1" />,
+            VULNERABILITY: <IconVulnerability className="sw-mr-1" />,
           }[type]
         }
         key={type}
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.tsx
index acd2b984c92..f7bd9e28061 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTabs.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 { BranchIcon, PullRequestIcon, ToggleButton, getTabId, getTabPanelId } from 'design-system';
+
+import { IconGitBranch, IconPullrequest } from '@sonarsource/echoes-react';
+import { ToggleButton, getTabId, getTabPanelId } from 'design-system';
 import * as React from 'react';
 import { useState } from 'react';
 import {
@@ -52,7 +54,7 @@ const TABS = [
     value: Tabs.Branch,
     label: (
       <>
-        <BranchIcon />
+        <IconGitBranch />
         <span className="sw-ml-2">{translate('project_branch_pull_request.tabs.branches')}</span>
       </>
     ),
@@ -62,7 +64,7 @@ const TABS = [
     value: Tabs.PullRequest,
     label: (
       <>
-        <PullRequestIcon />
+        <IconPullrequest />
         <span className="sw-ml-2">
           {translate('project_branch_pull_request.tabs.pull_requests')}
         </span>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx
index f89889c50c6..3c08f66745f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.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 { IconChevronDown } from '@sonarsource/echoes-react';
 import {
   ButtonSecondary,
-  ChevronDownIcon,
   Dropdown,
   ItemDivider,
   ItemLink,
@@ -46,11 +47,11 @@ interface State {
 }
 
 const almSettingsValidators = {
-  [AlmKeys.Azure]: (settings: AlmSettingsInstance) => !!settings.url,
-  [AlmKeys.BitbucketServer]: (_: AlmSettingsInstance) => true,
+  [AlmKeys.Azure]: (settings: AlmSettingsInstance) => Boolean(settings.url),
   [AlmKeys.BitbucketCloud]: (_: AlmSettingsInstance) => true,
+  [AlmKeys.BitbucketServer]: (_: AlmSettingsInstance) => true,
   [AlmKeys.GitHub]: (_: AlmSettingsInstance) => true,
-  [AlmKeys.GitLab]: (settings: AlmSettingsInstance) => !!settings.url,
+  [AlmKeys.GitLab]: (settings: AlmSettingsInstance) => Boolean(settings.url),
 };
 
 export class ProjectCreationMenu extends React.PureComponent<Props, State> {
@@ -84,6 +85,7 @@ export class ProjectCreationMenu extends React.PureComponent<Props, State> {
 
     const boundAlms = IMPORT_COMPATIBLE_ALMS.filter((key) => {
       const currentAlmSettings = almSettings.filter((s) => s.alm === key);
+
       return (
         currentAlmSettings.length > 0 &&
         key === currentAlmSettings[0].alm &&
@@ -111,9 +113,6 @@ export class ProjectCreationMenu extends React.PureComponent<Props, State> {
     return (
       <Dropdown
         id="project-creation-menu"
-        size="auto"
-        placement={PopupPlacement.BottomRight}
-        zLevel={PopupZLevel.Global}
         overlay={
           <>
             {[...boundAlms, 'manual'].map((alm) => (
@@ -122,6 +121,7 @@ export class ProjectCreationMenu extends React.PureComponent<Props, State> {
             {boundAlms.length < IMPORT_COMPATIBLE_ALMS.length && (
               <>
                 <ItemDivider />
+
                 <ItemLink to={{ pathname: '/projects/create' }}>
                   {boundAlms.length === 0
                     ? translate('my_account.add_project.more')
@@ -131,10 +131,14 @@ export class ProjectCreationMenu extends React.PureComponent<Props, State> {
             )}
           </>
         }
+        placement={PopupPlacement.BottomRight}
+        size="auto"
+        zLevel={PopupZLevel.Global}
       >
         <ButtonSecondary>
           {translate('projects.add')}
-          <ChevronDownIcon className="sw-ml-1" />
+
+          <IconChevronDown className="sw-ml-1" />
         </ButtonSecondary>
       </Dropdown>
     );
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
index c550b088efc..ff344952398 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
@@ -17,13 +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 {
-  Dropdown,
-  InteractiveIcon,
-  MenuHelpIcon,
-  PopupPlacement,
-  PopupZLevel,
-} from 'design-system';
+
+import { IconQuestionMark } from '@sonarsource/echoes-react';
+import { Dropdown, InteractiveIcon, PopupPlacement, PopupZLevel } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import Tooltip from '../controls/Tooltip';
@@ -42,11 +38,9 @@ export default function EmbedDocsPopupHelper() {
         {({ onToggleClick, open }) => (
           <Tooltip mouseLeaveDelay={0.2} overlay={!open ? translate('help') : undefined}>
             <InteractiveIcon
-              Icon={MenuHelpIcon}
+              Icon={IconQuestionMark}
               aria-expanded={open}
-              iconProps={{
-                'data-guiding-id': 'issue-5',
-              }}
+              data-guiding-id="issue-5"
               aria-controls="help-menu-dropdown"
               aria-haspopup
               aria-label={translate('help')}
diff --git a/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx
index 5cea6b31037..118109911fe 100644
--- a/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx
@@ -17,21 +17,31 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { BranchIcon, IconProps, MainBranchIcon, PullRequestIcon, ThemeColors } from 'design-system';
+
+import { IconBranch, IconGitBranch, IconProps, IconPullrequest } from '@sonarsource/echoes-react';
+import { StyledMutedText } from 'design-system';
 import * as React from 'react';
 import { isMainBranch, isPullRequest } from '../../helpers/branch-like';
 import { BranchLike } from '../../types/branch-like';
 
-export interface BranchLikeIconProps extends Omit<IconProps, 'fill'> {
+export interface BranchLikeIconProps extends IconProps {
   branchLike: BranchLike;
-  fill?: ThemeColors;
 }
 
 export default function BranchLikeIcon({ branchLike, ...props }: Readonly<BranchLikeIconProps>) {
+  let Icon;
+
   if (isPullRequest(branchLike)) {
-    return <PullRequestIcon fill="pageContentLight" {...props} />;
+    Icon = IconPullrequest;
   } else if (isMainBranch(branchLike)) {
-    return <MainBranchIcon fill="pageContentLight" {...props} />;
+    Icon = IconBranch;
+  } else {
+    Icon = IconGitBranch;
   }
-  return <BranchIcon fill="pageContentLight" {...props} />;
+
+  return (
+    <StyledMutedText>
+      <Icon {...props} />
+    </StyledMutedText>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap
index 561ef92174d..3ad53391a36 100644
--- a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render branch icon correctly 1`] = `"<div><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="rgb(106,117,144)" style="display: inline-block; user-select: none; vertical-align: middle; overflow: visible;"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div>"`;
+exports[`should render branch icon correctly 1`] = `"<div><span class="css-nk2far-StyledText-StyledMutedText en0eo9411"><span aria-hidden="true" class="css-lr6nas" role="img">&amp;</span></span></div>"`;
 
-exports[`should render pull request icon correctly 1`] = `"<div><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-git-pull-request" viewBox="0 0 16 16" width="16" height="16" fill="rgb(106,117,144)" style="display: inline-block; user-select: none; vertical-align: middle; overflow: visible;"><path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path></svg></div>"`;
+exports[`should render pull request icon correctly 1`] = `"<div><span class="css-nk2far-StyledText-StyledMutedText en0eo9411"><span aria-hidden="true" class="css-lr6nas" role="img">)</span></span></div>"`;