From 2aaaff3deb00d311cf6fa1c871e7ea11c4871070 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Mon, 5 Jun 2023 15:17:34 +0200
Subject: [PATCH] SONAR-19472 Apply new design to code page header

---
 .../main/js/apps/code/__tests__/Code-it.ts    |  4 +-
 .../sonar-web/src/main/js/apps/code/code.css  |  5 --
 .../apps/code/components/CodeAppRenderer.tsx  | 48 +++++++--------
 .../{Breadcrumbs.tsx => CodeBreadcrumbs.tsx}  | 27 +++++----
 .../js/apps/code/components/ComponentName.tsx | 58 +++++++------------
 .../main/js/apps/code/components/Search.tsx   | 26 +++++----
 6 files changed, 73 insertions(+), 95 deletions(-)
 rename server/sonar-web/src/main/js/apps/code/components/{Breadcrumbs.tsx => CodeBreadcrumbs.tsx} (71%)

diff --git a/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts b/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts
index 2cd68c56004..bb2b888e1aa 100644
--- a/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts
+++ b/server/sonar-web/src/main/js/apps/code/__tests__/Code-it.ts
@@ -381,8 +381,8 @@ function getPageObject(user: UserEvent) {
     sourceCode: byText('function Test() {}'),
     notAccessToAllChildrenTxt: byText('code_viewer.not_all_measures_are_shown'),
     showingOutOfTxt: (x: number, y: number) => byText(`x_of_y_shown.${x}.${y}`),
-    newCodeBtn: byRole('button', { name: 'projects.view.new_code' }),
-    overallCodeBtn: byRole('button', { name: 'projects.view.overall_code' }),
+    newCodeBtn: byRole('radio', { name: 'projects.view.new_code' }),
+    overallCodeBtn: byRole('radio', { name: 'projects.view.overall_code' }),
     measureRow: (name: string | RegExp) => byRole('row', { name, exact: false }),
     measureValueCell: (row: HTMLElement, name: string, value: string) => {
       const i = Array.from(screen.getAllByRole('columnheader')).findIndex((c) =>
diff --git a/server/sonar-web/src/main/js/apps/code/code.css b/server/sonar-web/src/main/js/apps/code/code.css
index 8c9864aaf96..056e0e56fd1 100644
--- a/server/sonar-web/src/main/js/apps/code/code.css
+++ b/server/sonar-web/src/main/js/apps/code/code.css
@@ -115,11 +115,6 @@
   }
 }
 
-.code-search {
-  margin-bottom: 10px;
-  display: flex;
-}
-
 .code-components-header {
   position: sticky;
   top: 105px;
diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx
index 919958d1653..f440a027ece 100644
--- a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx
@@ -17,9 +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 styled from '@emotion/styled';
 import classNames from 'classnames';
-import { LargeCenteredLayout } from 'design-system';
+import { FlagMessage, HelperHintIcon, LargeCenteredLayout } from 'design-system';
 import { intersection } from 'lodash';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
@@ -28,14 +27,13 @@ import HelpTooltip from '../../../components/controls/HelpTooltip';
 import ListFooter from '../../../components/controls/ListFooter';
 import Suggestions from '../../../components/embed-docs-modal/Suggestions';
 import { Location } from '../../../components/hoc/withRouter';
-import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
 import { BranchLike } from '../../../types/branch-like';
 import { isApplication, isPortfolioLike } from '../../../types/component';
 import { Breadcrumb, Component, ComponentMeasure, Dict, Issue, Metric } from '../../../types/types';
 import '../code.css';
 import { getCodeMetrics } from '../utils';
-import Breadcrumbs from './Breadcrumbs';
+import CodeBreadcrumbs from './CodeBreadcrumbs';
 import Components from './Components';
 import Search from './Search';
 import SearchResults from './SearchResults';
@@ -114,27 +112,31 @@ export default function CodeAppRenderer(props: Props) {
 
   return (
     <LargeCenteredLayout className="sw-py-8 sw-body-md">
+      <Suggestions suggestions="code" />
+      <Helmet defer={false} title={sourceViewer !== undefined ? sourceViewer.name : defaultTitle} />
+
       <A11ySkipTarget anchor="code_main" />
 
       {!canBrowseAllChildProjects && isPortfolio && (
-        <StyledAlert variant="warning" className="it__portfolio_warning">
-          <AlertContent>
-            {translate('code_viewer.not_all_measures_are_shown')}
-            <HelpTooltip
-              className="spacer-left"
-              overlay={translate('code_viewer.not_all_measures_are_shown.help')}
-            />
-          </AlertContent>
-        </StyledAlert>
+        <FlagMessage
+          ariaLabel={translate('code_viewer.not_all_measures_are_shown')}
+          variant="warning"
+          className="it__portfolio_warning sw-mb-4"
+        >
+          {translate('code_viewer.not_all_measures_are_shown')}
+          <HelpTooltip
+            className="sw-ml-2"
+            overlay={translate('code_viewer.not_all_measures_are_shown.help')}
+          >
+            <HelperHintIcon />
+          </HelpTooltip>
+        </FlagMessage>
       )}
 
-      <Suggestions suggestions="code" />
-
-      <Helmet defer={false} title={sourceViewer !== undefined ? sourceViewer.name : defaultTitle} />
-
       {hasComponents && (
         <Search
           branchLike={branchLike}
+          className="sw-mb-4"
           component={component}
           newCodeSelected={newCodeSelected}
           onNewCodeToggle={props.handleSelectNewCode}
@@ -156,7 +158,7 @@ export default function CodeAppRenderer(props: Props) {
         )}
 
         {showBreadcrumbs && (
-          <Breadcrumbs
+          <CodeBreadcrumbs
             branchLike={branchLike}
             breadcrumbs={breadcrumbs}
             rootComponent={component}
@@ -219,13 +221,3 @@ export default function CodeAppRenderer(props: Props) {
     </LargeCenteredLayout>
   );
 }
-
-const StyledAlert = styled(Alert)`
-  display: inline-flex;
-  margin-bottom: 15px;
-`;
-
-const AlertContent = styled.div`
-  display: flex;
-  align-items: center;
-`;
diff --git a/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeBreadcrumbs.tsx
similarity index 71%
rename from server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.tsx
rename to server/sonar-web/src/main/js/apps/code/components/CodeBreadcrumbs.tsx
index b9ce55d2938..55c2f8e18b6 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/CodeBreadcrumbs.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Breadcrumbs } from 'design-system';
 import * as React from 'react';
 import { BranchLike } from '../../../types/branch-like';
 import { Breadcrumb, ComponentMeasure } from '../../../types/types';
@@ -25,23 +26,25 @@ import ComponentName from './ComponentName';
 interface Props {
   branchLike?: BranchLike;
   breadcrumbs: Breadcrumb[];
+  className?: string;
   rootComponent: ComponentMeasure;
 }
 
-export default function Breadcrumbs({ branchLike, breadcrumbs, rootComponent }: Props) {
+export default function CodeBreadcrumbs(props: Props) {
+  const { branchLike, breadcrumbs, className, rootComponent } = props;
+
   return (
-    <ul className="code-breadcrumbs">
+    <Breadcrumbs className={className}>
       {breadcrumbs.map((component, index) => (
-        <li key={component.key}>
-          <ComponentName
-            branchLike={branchLike}
-            canBrowse={index < breadcrumbs.length - 1}
-            component={component}
-            rootComponent={rootComponent}
-            unclickable
-          />
-        </li>
+        <ComponentName
+          branchLike={branchLike}
+          canBrowse={index < breadcrumbs.length - 1}
+          component={component}
+          key={component.key}
+          rootComponent={rootComponent}
+          unclickable
+        />
       ))}
-    </ul>
+    </Breadcrumbs>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx b/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx
index da5c4be7738..dbe0000d59d 100644
--- a/server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/ComponentName.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 { HoverLink, LightLabel, QualifierIcon } from 'design-system';
 import * as React from 'react';
-import { colors } from '../../../app/theme';
-import Link from '../../../components/common/Link';
 import BranchIcon from '../../../components/icons/BranchIcon';
-import QualifierIcon from '../../../components/icons/QualifierIcon';
 import { getBranchLikeQuery } from '../../../helpers/branch-like';
 import { translate } from '../../../helpers/l10n';
 import { CodeScope, getComponentOverviewUrl, queryToSearch } from '../../../helpers/urls';
@@ -36,7 +34,9 @@ import { ComponentMeasure } from '../../../types/types';
 import { mostCommonPrefix } from '../utils';
 
 export function getTooltip(component: ComponentMeasure) {
-  const isFile = component.qualifier === 'FIL' || component.qualifier === 'UTS';
+  const isFile =
+    component.qualifier === ComponentQualifier.File ||
+    component.qualifier === ComponentQualifier.TestFile;
 
   if (isFile && component.path) {
     return component.path + '\n\n' + component.key;
@@ -89,7 +89,7 @@ export default function ComponentName({
         </span>
         {component.branch ? (
           <span className="text-ellipsis spacer-left">
-            <BranchIcon className="little-spacer-right" />
+            <BranchIcon className="sw-mr-1" />
             <span className="note">{component.branch}</span>
           </span>
         ) : (
@@ -99,11 +99,7 @@ export default function ComponentName({
     );
   }
   return (
-    <span
-      className="max-width-100 text-ellipsis"
-      title={getTooltip(component)}
-      aria-label={ariaLabel}
-    >
+    <span title={getTooltip(component)} aria-label={ariaLabel}>
       {renderNameWithIcon(branchLike, component, previous, rootComponent, unclickable, canBrowse)}
     </span>
   );
@@ -132,22 +128,17 @@ function renderNameWithIcon(
       ? component.branch
       : undefined;
     return (
-      <Link
-        className="display-inline-flex-center link-no-underline"
+      <HoverLink
         to={getComponentOverviewUrl(
-          component.refKey || component.key,
+          component.refKey ?? component.key,
           component.qualifier,
           { branch },
           codeType
         )}
       >
-        <QualifierIcon
-          className="little-spacer-right"
-          qualifier={component.qualifier}
-          fill={colors.primary}
-        />
+        <QualifierIcon className="sw-mr-1" qualifier={component.qualifier} />
         <span>{name}</span>
-      </Link>
+      </HoverLink>
     );
   } else if (canBrowse) {
     const query = { id: rootComponent.key, ...getBranchLikeQuery(branchLike) };
@@ -155,41 +146,32 @@ function renderNameWithIcon(
       Object.assign(query, { selected: component.key });
     }
     return (
-      <Link
-        className="display-inline-flex-center link-no-underline"
-        to={{ pathname: '/code', search: queryToSearch(query) }}
-      >
-        <QualifierIcon
-          className="little-spacer-right"
-          qualifier={component.qualifier}
-          fill={colors.primary}
-        />
+      <HoverLink to={{ pathname: '/code', search: queryToSearch(query) }}>
+        <QualifierIcon className="sw-mr-1" qualifier={component.qualifier} />
         <span>{name}</span>
-      </Link>
+      </HoverLink>
     );
   }
   return (
-    <span>
-      <QualifierIcon
-        qualifier={component.qualifier}
-        fill={
-          component.qualifier === ComponentQualifier.Directory ? colors.orange : colors.neutral800
-        }
-      />{' '}
+    <span className="sw-flex sw-items-center">
+      <QualifierIcon className="sw-mr-1" qualifier={component.qualifier} />
       {name}
     </span>
   );
 }
 
 function renderName(component: ComponentMeasure, previous: ComponentMeasure | undefined) {
-  const areBothDirs = component.qualifier === 'DIR' && previous && previous.qualifier === 'DIR';
+  const areBothDirs =
+    component.qualifier === ComponentQualifier.Directory &&
+    previous &&
+    previous.qualifier === ComponentQualifier.Directory;
   const prefix =
     areBothDirs && previous !== undefined
       ? mostCommonPrefix([component.name + '/', previous.name + '/'])
       : '';
   return prefix ? (
     <span>
-      <span style={{ color: colors.secondFontColor }}>{prefix}</span>
+      <LightLabel>{prefix}</LightLabel>
       <span>{component.name.slice(prefix.length)}</span>
     </span>
   ) : (
diff --git a/server/sonar-web/src/main/js/apps/code/components/Search.tsx b/server/sonar-web/src/main/js/apps/code/components/Search.tsx
index 089de348926..69980d82774 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/Search.tsx
@@ -17,11 +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 classNames from 'classnames';
+import { InputSearch, ToggleButton } from 'design-system';
 import { isEmpty, omit } from 'lodash';
 import * as React from 'react';
 import { getTree } from '../../../api/components';
-import ButtonToggle from '../../../components/controls/ButtonToggle';
-import SearchBox from '../../../components/controls/SearchBox';
 import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { getBranchLikeQuery } from '../../../helpers/branch-like';
@@ -33,6 +33,7 @@ import { ComponentMeasure } from '../../../types/types';
 
 interface Props {
   branchLike?: BranchLike;
+  className?: string;
   component: ComponentMeasure;
   location: Location;
   newCodeSelected: boolean;
@@ -138,15 +139,15 @@ class Search extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { component, newCodeSelected } = this.props;
+    const { className, component, newCodeSelected } = this.props;
     const { loading, query } = this.state;
     const isViewLike = isView(component.qualifier);
 
     return (
-      <div className="code-search" id="code-search">
+      <div className={classNames('sw-flex sw-items-center', className)} id="code-search">
         {isViewLike && (
-          <span className="big-spacer-right">
-            <ButtonToggle
+          <div className="sw-mr-4">
+            <ToggleButton
               disabled={!isEmpty(query)}
               options={[
                 {
@@ -159,20 +160,25 @@ class Search extends React.PureComponent<Props, State> {
                 },
               ]}
               value={newCodeSelected}
-              onCheck={this.props.onNewCodeToggle}
+              onChange={this.props.onNewCodeToggle}
             />
-          </span>
+          </div>
         )}
-        <SearchBox
+        <InputSearch
+          clearIconAriaLabel={translate('clear')}
+          searchInputAriaLabel={translate(
+            isViewLike ? 'code.search_placeholder.portfolio' : 'code.search_placeholder'
+          )}
           minLength={3}
           onChange={this.handleQueryChange}
           onKeyDown={this.handleKeyDown}
           placeholder={translate(
             isViewLike ? 'code.search_placeholder.portfolio' : 'code.search_placeholder'
           )}
+          size="large"
           value={this.state.query}
         />
-        <DeferredSpinner className="spacer-left" loading={loading} />
+        <DeferredSpinner className="sw-ml-2" loading={loading} />
       </div>
     );
   }
-- 
2.39.5