SONAR-19391 Measures page's header for the source viewer should be moved to the new UI

diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
index 056cde51d595725d5065a269f4604b41fcf4e719..be9238b02228e7c3aef7dae58f0b9848a7489e30 100644 (file)
--- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
+++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
@@ -38,6 +38,7 @@ import { ChevronDownIcon, ChevronRightIcon } from './icons';
 const WIDTH_OF_BREADCRUMB_DROPDOWN = 32;
 
 interface Props {
+  actions?: React.ReactNode;
   ariaLabel?: string;
   breadcrumbLimit?: number;
   children: React.ReactNode;
@@ -55,6 +56,7 @@ export function Breadcrumbs(props: Props) {
     children,
     expandButtonLabel,
     innerRef,
+    actions,
     maxWidth = LAYOUT_VIEWPORT_MAX_WIDTH_LARGE,
   } = props;
   const [lengthOfChildren, setLengthOfChildren] = React.useState<number[]>([]);
@@ -160,6 +162,7 @@ export function Breadcrumbs(props: Props) {
         </Dropdown>
       )}
       <ul className="sw-truncate sw-leading-6 sw-flex">{[...breadcrumbsToShow].reverse()}</ul>
+      {actions && <div className="sw-ml-2">{actions}</div>}
     </BreadcrumbWrapper>
   );
 }

diff --git a/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx b/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx
index 645d1499ea696835d44d2d8f0c2ba263d44b9cfe..1f0121c3b18dcd05f07f4c788a33dbc90bad1b86 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx
@@ -53,7 +53,7 @@ it('should render correctly and forward click event', async () => {
 
   expect(container).toMatchSnapshot();
 
-  await user.click(screen.getByText('SonarQube_Web'));
+  await user.click(screen.getByRole('link', { name: 'SonarQube_Web' }));
   expect(onRectangleClick).toHaveBeenCalledTimes(1);
   expect(onRectangleClick).toHaveBeenCalledWith(items[1]);
 });

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx
index 5f241e9e2c409c6e44baf29e219d3510c64e3b5f..aca949a8c603f93ecd9c17cee0db54e3f5866dd6 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx
@@ -405,6 +405,7 @@ export default class MeasureContent extends React.PureComponent<Props, State> {
         {isFileComponent ? (
           <div className="measure-details-viewer">
             <SourceViewer
+              hideHeader={true}
               branchLike={branchLike}
               component={baseComponent.key}
               metricKey={this.state.metric?.key}

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
index 855983957b9e71f1b7411ee6198ea8bb09369507..ff9f686eafbd8e5a441e9303f4c1ee1a226dc90a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
@@ -129,6 +129,7 @@ export default class MeasureOverview extends React.PureComponent<Props, State> {
       return (
         <div className="measure-details-viewer">
           <SourceViewer
+            hideHeader={true}
             branchLike={branchLike}
             component={component.key}
             onIssueChange={this.props.onIssueChange}

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasuresBreadcrumbs.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasuresBreadcrumbs.tsx
index b5c578c07e877035c8ca0cac783c9876e4f228a9..7eca8c1f17260f832fc7e8a8b2783c41754771d4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasuresBreadcrumbs.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasuresBreadcrumbs.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 { Breadcrumbs, HoverLink } from 'design-system';
+import classNames from 'classnames';
+import { Breadcrumbs, ClipboardIconButton, HoverLink } from 'design-system';
 import * as React from 'react';
 import { getBreadcrumbs } from '../../../api/components';
 import { getBranchLikeQuery, isSameBranchLike } from '../../../helpers/branch-like';
@@ -25,7 +26,7 @@ import { KeyboardKeys } from '../../../helpers/keycodes';
 import { translate } from '../../../helpers/l10n';
 import { collapsePath, limitComponentName } from '../../../helpers/path';
 import { BranchLike } from '../../../types/branch-like';
-import { ComponentQualifier } from '../../../types/component';
+import { ComponentQualifier, isProject } from '../../../types/component';
 import { ComponentMeasure, ComponentMeasureIntern } from '../../../types/types';
 
 interface Props {
@@ -97,6 +98,7 @@ export default class MeasuresBreadcrumbs extends React.PureComponent<Props, Stat
 
   render() {
     const { breadcrumbs } = this.state;
+    const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
 
     if (breadcrumbs.length <= 0) {
       return null;
@@ -105,8 +107,12 @@ export default class MeasuresBreadcrumbs extends React.PureComponent<Props, Stat
     return (
       <Breadcrumbs
         ariaLabel={translate('breadcrumbs')}
-        className={this.props.className}
+        className={classNames(this.props.className)}
         maxWidth={500}
+        actions={
+          !isProject(lastBreadcrumb.qualifier) &&
+          lastBreadcrumb.path && <ClipboardIconButton copyValue={lastBreadcrumb.path} />
+        }
       >
         {breadcrumbs.map((component) => (
           <HoverLink

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx
index 3f813f76da8539b18819f428d4a391b71cd74dc8..caccba9fa303c8254f1293547620950d7e82b810 100644 (file)
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx
@@ -63,6 +63,7 @@ import loadIssues from './helpers/loadIssues';
 import './styles.css';
 
 export interface Props {
+  hideHeader?: boolean;
   aroundLine?: number;
   branchLike: BranchLike | undefined;
   component: string;
@@ -560,6 +561,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
 
   render() {
     const { component, loading, sources, notAccessible, sourceRemoved } = this.state;
+    const { hideHeader } = this.props;
 
     if (loading) {
       return null;
@@ -588,7 +590,7 @@ export default class SourceViewer extends React.PureComponent<Props, State> {
     return (
       <SourceViewerContext.Provider value={{ branchLike: this.props.branchLike, file: component }}>
         <div className="source-viewer">
-          {this.renderHeader(component)}
+          {!hideHeader && this.renderHeader(component)}
           {sourceRemoved && (
             <Alert className="spacer-top" variant="warning">
               {translate('code_viewer.no_source_code_displayed_due_to_source_removed')}