From: Jeremy Davis Date: Mon, 5 Jun 2023 13:17:34 +0000 (+0200) Subject: SONAR-19472 Apply new design to code page header X-Git-Tag: 10.1.0.73491~115 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=2aaaff3deb00d311cf6fa1c871e7ea11c4871070;p=sonarqube.git SONAR-19472 Apply new design to code page header --- 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/Breadcrumbs.tsx b/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.tsx deleted file mode 100644 index b9ce55d2938..00000000000 --- a/server/sonar-web/src/main/js/apps/code/components/Breadcrumbs.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2023 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import * as React from 'react'; -import { BranchLike } from '../../../types/branch-like'; -import { Breadcrumb, ComponentMeasure } from '../../../types/types'; -import ComponentName from './ComponentName'; - -interface Props { - branchLike?: BranchLike; - breadcrumbs: Breadcrumb[]; - rootComponent: ComponentMeasure; -} - -export default function Breadcrumbs({ branchLike, breadcrumbs, rootComponent }: Props) { - return ( - - ); -} 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 ( + + + {!canBrowseAllChildProjects && isPortfolio && ( - - - {translate('code_viewer.not_all_measures_are_shown')} - - - + + {translate('code_viewer.not_all_measures_are_shown')} + + + + )} - - - - {hasComponents && ( ); } - -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/CodeBreadcrumbs.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeBreadcrumbs.tsx new file mode 100644 index 00000000000..55c2f8e18b6 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/code/components/CodeBreadcrumbs.tsx @@ -0,0 +1,50 @@ +/* + * SonarQube + * Copyright (C) 2009-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * 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'; +import ComponentName from './ComponentName'; + +interface Props { + branchLike?: BranchLike; + breadcrumbs: Breadcrumb[]; + className?: string; + rootComponent: ComponentMeasure; +} + +export default function CodeBreadcrumbs(props: Props) { + const { branchLike, breadcrumbs, className, rootComponent } = props; + + return ( + + {breadcrumbs.map((component, index) => ( + + ))} + + ); +} 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({ {component.branch ? ( - + {component.branch} ) : ( @@ -99,11 +99,7 @@ export default function ComponentName({ ); } return ( - + {renderNameWithIcon(branchLike, component, previous, rootComponent, unclickable, canBrowse)} ); @@ -132,22 +128,17 @@ function renderNameWithIcon( ? component.branch : undefined; return ( - - + {name} - + ); } else if (canBrowse) { const query = { id: rootComponent.key, ...getBranchLikeQuery(branchLike) }; @@ -155,41 +146,32 @@ function renderNameWithIcon( Object.assign(query, { selected: component.key }); } return ( - - + + {name} - + ); } return ( - - {' '} + + {name} ); } 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 ? ( - {prefix} + {prefix} {component.name.slice(prefix.length)} ) : ( 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 { }; render() { - const { component, newCodeSelected } = this.props; + const { className, component, newCodeSelected } = this.props; const { loading, query } = this.state; const isViewLike = isView(component.qualifier); return ( - ); }