From: Mathieu Suen Date: Tue, 26 Jul 2022 12:02:08 +0000 (+0200) Subject: SONAR-16537 Change issue file header style X-Git-Tag: 9.6.0.59041~136 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=52b86027c2dcba6dcb773e24e12286177958b59a;p=sonarqube.git SONAR-16537 Change issue file header style --- diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx index 00a82856a42..08a9d12d6aa 100644 --- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx @@ -23,7 +23,6 @@ import Issue from '../../../components/issue/Issue'; import SecondaryIssue from '../../../components/issue/SecondaryIssue'; import getCoverageStatus from '../../../components/SourceViewer/helpers/getCoverageStatus'; import { locationsByLine } from '../../../components/SourceViewer/helpers/indexing'; -import SourceViewerHeaderSlim from '../../../components/SourceViewer/SourceViewerHeaderSlim'; import { getBranchLikeQuery } from '../../../helpers/branch-like'; import { BranchLike } from '../../../types/branch-like'; import { isFile } from '../../../types/component'; @@ -40,6 +39,7 @@ import { SourceLine, SourceViewerFile } from '../../../types/types'; +import IssueSourceViewerHeader from './IssueSourceViewerHeader'; import SnippetViewer from './SnippetViewer'; import { createSnippets, @@ -422,7 +422,7 @@ export default class ComponentSourceSnippetGroupViewer extends React.PureCompone return (
- + + + )}
); diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.css b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.css new file mode 100644 index 00000000000..4f70cddf426 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.css @@ -0,0 +1,26 @@ +/* + * SonarQube + * Copyright (C) 2009-2022 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. + */ +.source-viewer-header-slim { + padding: 4px 10px; + border: 1px solid var(--gray80); + background-color: var(--barBackgroundColor); + align-items: center; + min-height: 25px; +} diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx new file mode 100644 index 00000000000..69b4465cbe1 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx @@ -0,0 +1,125 @@ +/* + * SonarQube + * Copyright (C) 2009-2022 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 classNames from 'classnames'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { ButtonIcon } from '../../../components/controls/buttons'; +import { ClipboardIconButton } from '../../../components/controls/clipboard'; +import ExpandSnippetIcon from '../../../components/icons/ExpandSnippetIcon'; +import QualifierIcon from '../../../components/icons/QualifierIcon'; +import DeferredSpinner from '../../../components/ui/DeferredSpinner'; +import { getBranchLikeQuery } from '../../../helpers/branch-like'; +import { translate } from '../../../helpers/l10n'; +import { collapsedDirFromPath, fileFromPath } from '../../../helpers/path'; +import { getBranchLikeUrl, getComponentIssuesUrl, getPathUrlAsString } from '../../../helpers/urls'; +import { BranchLike } from '../../../types/branch-like'; +import { ComponentQualifier } from '../../../types/component'; +import { SourceViewerFile } from '../../../types/types'; +import './IssueSourceViewerHeader.css'; + +export interface Props { + branchLike: BranchLike | undefined; + expandable?: boolean; + displayProjectName?: boolean; + linkToProject?: boolean; + loading?: boolean; + onExpand?: () => void; + sourceViewerFile: SourceViewerFile; +} + +export default function IssueSourceViewerHeader(props: Props) { + const { + branchLike, + expandable, + displayProjectName = true, + linkToProject = true, + loading, + onExpand, + sourceViewerFile + } = props; + const { measures, path, project, projectName, q } = sourceViewerFile; + + const projectNameLabel = ( + <> + {projectName} + + ); + + const isProjectRoot = q === ComponentQualifier.Project; + + return ( +
+
+ {displayProjectName && ( +
+ {linkToProject ? ( + + {projectNameLabel} + + ) : ( + projectNameLabel + )} +
+ )} + + {!isProjectRoot && ( + <> +
+ {collapsedDirFromPath(path)} + {fileFromPath(path)} +
+ +
+ +
+ + )} +
+ + {!isProjectRoot && measures.issues !== undefined && ( +
+ + {translate('source_viewer.view_all_issues')} + +
+ )} + + {expandable && ( + +
+ + + +
+ + )} +
+ ); +} diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css index 3f49652df25..b3b151ce897 100644 --- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/SnippetViewer.css @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ .snippet { - margin: var(--gridSize); + margin: var(--gridSize) 0; border: 1px solid var(--gray80); overflow-x: auto; overflow-y: hidden; diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/IssueSourceViewerHeader-test.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/IssueSourceViewerHeader-test.tsx new file mode 100644 index 00000000000..06655111a37 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/IssueSourceViewerHeader-test.tsx @@ -0,0 +1,50 @@ +/* + * SonarQube + * Copyright (C) 2009-2022 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 { shallow } from 'enzyme'; +import * as React from 'react'; +import { mockMainBranch } from '../../../../helpers/mocks/branch-like'; +import { mockSourceViewerFile } from '../../../../helpers/mocks/sources'; +import { ComponentQualifier } from '../../../../types/component'; +import IssueSourceViewerHeader, { Props } from '../IssueSourceViewerHeader'; + +it('should render correctly', () => { + expect(shallowRender()).toMatchSnapshot(); + expect(shallowRender({ linkToProject: false })).toMatchSnapshot('no link to project'); + expect(shallowRender({ displayProjectName: false })).toMatchSnapshot('no project name'); + expect( + shallowRender({ + sourceViewerFile: mockSourceViewerFile('foo/bar.ts', 'my-project', { + q: ComponentQualifier.Project + }) + }) + ).toMatchSnapshot('project root'); +}); + +function shallowRender(props: Partial = {}) { + return shallow( + + ); +} diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap index 58f647c8012..9825cb22d5c 100644 --- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap @@ -4,7 +4,7 @@ exports[`should render correctly 1`] = `
- +
+ +
+ + + + foo/ + + + bar.ts + +
+
+ +
+
+
+ + source_viewer.view_all_issues + +
+ +
+ + + +
+ +
+`; + +exports[`should render correctly: no link to project 1`] = ` +
+
+
+ + + + MyProject + +
+
+ + + + foo/ + + + bar.ts + +
+
+ +
+
+
+ + source_viewer.view_all_issues + +
+ +
+ + + +
+ +
+`; + +exports[`should render correctly: no project name 1`] = ` +
+
+
+ + + + foo/ + + + bar.ts + +
+
+ +
+
+
+ + source_viewer.view_all_issues + +
+ +
+ + + +
+ +
+`; + +exports[`should render correctly: project root 1`] = ` +
+ + +
+ + + +
+ +
+`; diff --git a/server/sonar-web/src/main/js/apps/issues/styles.css b/server/sonar-web/src/main/js/apps/issues/styles.css index 0e5328c913b..44e4a054e81 100644 --- a/server/sonar-web/src/main/js/apps/issues/styles.css +++ b/server/sonar-web/src/main/js/apps/issues/styles.css @@ -137,10 +137,6 @@ color: white; } -.component-source-container { - border: 1px solid var(--gray80); -} - .component-source-container + .component-source-container { margin-top: var(--gridSize); } 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 3c43b8ce50b..7f24e85d95d 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewer.tsx @@ -60,7 +60,6 @@ import defaultLoadIssues from './helpers/loadIssues'; import SourceViewerCode from './SourceViewerCode'; import { SourceViewerContext } from './SourceViewerContext'; import SourceViewerHeader from './SourceViewerHeader'; -import SourceViewerHeaderSlim from './SourceViewerHeaderSlim'; import './styles.css'; export interface Props { @@ -92,7 +91,6 @@ export interface Props { selectedIssue?: string; showMeasures?: boolean; metricKey?: string; - slimHeader?: boolean; } interface State { @@ -605,10 +603,8 @@ export default class SourceViewer extends React.PureComponent { ); } - renderHeader(branchLike: BranchLike | undefined, sourceViewerFile: SourceViewerFile) { - return this.props.slimHeader ? ( - - ) : ( + renderHeader(sourceViewerFile: SourceViewerFile) { + return ( {({ openComponent }) => ( { return (
(this.node = node)}> - {this.renderHeader(this.props.branchLike, component)} + {this.renderHeader(component)} {sourceRemoved && ( {translate('code_viewer.no_source_code_displayed_due_to_source_removed')} diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.css b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.css deleted file mode 100644 index 813f73a0555..00000000000 --- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.css +++ /dev/null @@ -1,26 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2022 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. - */ -.source-viewer-header-slim { - padding: 4px 10px 4px; - border-bottom: 1px solid var(--gray80); - background-color: var(--barBackgroundColor); - align-items: center; - min-height: 25px; -} diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.tsx deleted file mode 100644 index b6a6ac4774f..00000000000 --- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeaderSlim.tsx +++ /dev/null @@ -1,125 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2022 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 classNames from 'classnames'; -import * as React from 'react'; -import { Link } from 'react-router-dom'; -import { ButtonIcon } from '../../components/controls/buttons'; -import { ClipboardIconButton } from '../../components/controls/clipboard'; -import ExpandSnippetIcon from '../../components/icons/ExpandSnippetIcon'; -import QualifierIcon from '../../components/icons/QualifierIcon'; -import DeferredSpinner from '../../components/ui/DeferredSpinner'; -import { getBranchLikeQuery } from '../../helpers/branch-like'; -import { translate } from '../../helpers/l10n'; -import { collapsedDirFromPath, fileFromPath } from '../../helpers/path'; -import { getBranchLikeUrl, getComponentIssuesUrl, getPathUrlAsString } from '../../helpers/urls'; -import { BranchLike } from '../../types/branch-like'; -import { ComponentQualifier } from '../../types/component'; -import { SourceViewerFile } from '../../types/types'; -import './SourceViewerHeaderSlim.css'; - -export interface Props { - branchLike: BranchLike | undefined; - expandable?: boolean; - displayProjectName?: boolean; - linkToProject?: boolean; - loading?: boolean; - onExpand?: () => void; - sourceViewerFile: SourceViewerFile; -} - -export default function SourceViewerHeaderSlim(props: Props) { - const { - branchLike, - expandable, - displayProjectName = true, - linkToProject = true, - loading, - onExpand, - sourceViewerFile - } = props; - const { measures, path, project, projectName, q } = sourceViewerFile; - - const projectNameLabel = ( - <> - {projectName} - - ); - - const isProjectRoot = q === ComponentQualifier.Project; - - return ( -
-
- {displayProjectName && ( -
- {linkToProject ? ( - - {projectNameLabel} - - ) : ( - projectNameLabel - )} -
- )} - - {!isProjectRoot && ( - <> -
- {collapsedDirFromPath(path)} - {fileFromPath(path)} -
- -
- -
- - )} -
- - {!isProjectRoot && measures.issues !== undefined && ( -
- - {translate('source_viewer.view_all_issues')} - -
- )} - - {expandable && ( - -
- - - -
- - )} -
- ); -} diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx index e8a35ab3ad9..0039a2b5d3d 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx @@ -397,7 +397,6 @@ function getSourceViewerUi(override?: Partial) { onLoaded={jest.fn()} onLocationSelect={jest.fn()} scroll={jest.fn()} - slimHeader={true} {...override} /> ); diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeaderSlim-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeaderSlim-test.tsx deleted file mode 100644 index e9b49afdd41..00000000000 --- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeaderSlim-test.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2022 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 { shallow } from 'enzyme'; -import * as React from 'react'; -import { mockMainBranch } from '../../../helpers/mocks/branch-like'; -import { mockSourceViewerFile } from '../../../helpers/mocks/sources'; -import { ComponentQualifier } from '../../../types/component'; -import SourceViewerHeaderSlim, { Props } from '../SourceViewerHeaderSlim'; - -it('should render correctly', () => { - expect(shallowRender()).toMatchSnapshot(); - expect(shallowRender({ linkToProject: false })).toMatchSnapshot('no link to project'); - expect(shallowRender({ displayProjectName: false })).toMatchSnapshot('no project name'); - expect( - shallowRender({ - sourceViewerFile: mockSourceViewerFile('foo/bar.ts', 'my-project', { - q: ComponentQualifier.Project - }) - }) - ).toMatchSnapshot('project root'); -}); - -function shallowRender(props: Partial = {}) { - return shallow( - - ); -} diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeaderSlim-test.tsx.snap b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeaderSlim-test.tsx.snap deleted file mode 100644 index 0b6e42a0fb3..00000000000 --- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeaderSlim-test.tsx.snap +++ /dev/null @@ -1,261 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should render correctly 1`] = ` -
-
- -
- - - - foo/ - - - bar.ts - -
-
- -
-
-
- - source_viewer.view_all_issues - -
- -
- - - -
- -
-`; - -exports[`should render correctly: no link to project 1`] = ` -
-
-
- - - - MyProject - -
-
- - - - foo/ - - - bar.ts - -
-
- -
-
-
- - source_viewer.view_all_issues - -
- -
- - - -
- -
-`; - -exports[`should render correctly: no project name 1`] = ` -
-
-
- - - - foo/ - - - bar.ts - -
-
- -
-
-
- - source_viewer.view_all_issues - -
- -
- - - -
- -
-`; - -exports[`should render correctly: project root 1`] = ` -
- - -
- - - -
- -
-`; diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 34094e1bfa8..0b0167d6bd3 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -826,6 +826,7 @@ issue.comment.posted_on=Comment posted on issue.comment.edit=Edit comment issue.comment.delete=Delete comment issue.comment.delete_confirm_message=Do you want to delete this comment? +issue.get_permalink=Get Permalink issue.manual_vulnerability=Manual issue.manual_vulnerability.description=This Vulnerability was created from a Security Hotspot and has its own issue workflow. issue.rule_details=Rule Details