From 2e1ea8f9122beb2c66bdf5e120bb1bed8be63742 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Fri, 7 Jul 2023 16:20:16 +0200 Subject: [PATCH] SONAR-19709 Migrating empty project page to MIUI and some UX fixes --- .../design-system/src/components/index.ts | 1 + .../visual-components/FishVisual.tsx | 95 +++++++++++++++++++ .../components/visual-components/index.ts} | 8 +- .../components/nav/component/Breadcrumb.tsx | 2 +- .../js/apps/issues/components/NoIssues.tsx | 8 +- .../js/apps/issues/components/NoMyIssues.tsx | 8 +- .../components/EmptyFavoriteSearch.tsx | 50 +++++----- .../projects/components/EmptyInstance.tsx | 28 +++--- .../components/NoFavoriteProjects.tsx | 18 ++-- .../apps/projects/components/PageHeader.tsx | 4 +- .../apps/projects/components/ProjectsList.tsx | 2 +- .../__tests__/EmptyInstance-test.tsx | 46 --------- .../__snapshots__/EmptyInstance-test.tsx.snap | 37 -------- .../NoFavoriteProjects-test.tsx.snap | 19 ++-- .../components/project-card/ProjectCard.css | 53 ----------- .../components/project-card/ProjectCard.tsx | 88 ++++++++--------- .../project-card/ProjectCardLanguages.tsx | 27 +++++- .../project-card/ProjectCardMeasure.tsx | 5 +- .../project-card/ProjectCardMeasures.tsx | 55 +++++------ .../project-card/ProjectCardQualityGate.tsx | 48 ---------- .../__tests__/ProjectCard-test.tsx | 2 +- .../__tests__/ProjectCardLanguages-test.tsx | 17 +++- .../__tests__/ProjectCardQualityGate-test.tsx | 32 ------- .../main/js/components/common/EmptySearch.tsx | 11 ++- .../common/__tests__/EmptySearch-test.tsx | 26 ----- .../__snapshots__/EmptySearch-test.tsx.snap | 17 ---- 26 files changed, 282 insertions(+), 425 deletions(-) create mode 100644 server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx rename server/sonar-web/{src/main/js/components/common/EmptySearch.css => design-system/src/components/visual-components/index.ts} (84%) delete mode 100644 server/sonar-web/src/main/js/apps/projects/components/__tests__/EmptyInstance-test.tsx delete mode 100644 server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/EmptyInstance-test.tsx.snap delete mode 100644 server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.css delete mode 100644 server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardQualityGate.tsx delete mode 100644 server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardQualityGate-test.tsx delete mode 100644 server/sonar-web/src/main/js/components/common/__tests__/EmptySearch-test.tsx delete mode 100644 server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/EmptySearch-test.tsx.snap diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts index 8e6df86ef8c..ed1ce6e9656 100644 --- a/server/sonar-web/design-system/src/components/index.ts +++ b/server/sonar-web/design-system/src/components/index.ts @@ -92,3 +92,4 @@ export * from './layouts'; export * from './modal/Modal'; export * from './popups'; export * from './subnavigation'; +export * from './visual-components'; diff --git a/server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx b/server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx new file mode 100644 index 00000000000..bf2cd41eae3 --- /dev/null +++ b/server/sonar-web/design-system/src/components/visual-components/FishVisual.tsx @@ -0,0 +1,95 @@ +/* + * 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 { useTheme } from '@emotion/react'; +import { themeColor } from '../../helpers/theme'; + +interface Props { + className?: string; +} + +export function FishVisual({ className }: Props) { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.css b/server/sonar-web/design-system/src/components/visual-components/index.ts similarity index 84% rename from server/sonar-web/src/main/js/components/common/EmptySearch.css rename to server/sonar-web/design-system/src/components/visual-components/index.ts index 7f33ae6b200..23b530ae4cf 100644 --- a/server/sonar-web/src/main/js/components/common/EmptySearch.css +++ b/server/sonar-web/design-system/src/components/visual-components/index.ts @@ -17,10 +17,4 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -.empty-search { - padding: 60px 0; - border: 1px solid var(--barBorderColor); - border-radius: 2px; - color: var(--secondFontColor); - text-align: center; -} +export * from './FishVisual'; diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx index 6f6ea8fd4d3..0829d098c34 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/Breadcrumb.tsx @@ -39,7 +39,7 @@ export function Breadcrumb(props: BreadcrumbProps) { const isLast = !isNotLast; return ( -
+
{isLast && isLoggedIn(currentUser) && ( -

{translate('issues.no_issues')}

+
+ + {translate('issues.no_issues')} +
); } diff --git a/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx b/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx index d1341982ddd..6155b2f7767 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx @@ -17,14 +17,16 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Highlight } from 'design-system'; import * as React from 'react'; -import '../../../components/common/EmptySearch.css'; import { translate } from '../../../helpers/l10n'; export default function NoMyIssues() { return ( -
-

{translate('issues.no_my_issues')}

+
+ + {translate('issues.no_my_issues')} +
); } diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx b/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx index c1df63c93ad..e443f68d051 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx @@ -17,10 +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 { Card, Note, StandoutLink } from 'design-system'; +import { FishVisual, Highlight, StandoutLink } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import '../../../components/common/EmptySearch.css'; import { translate } from '../../../helpers/l10n'; import { queryToSearch } from '../../../helpers/urls'; import { Dict } from '../../../types/types'; @@ -28,28 +27,29 @@ import { Query } from '../query'; export default function EmptyFavoriteSearch({ query }: { query: Query }) { return ( - - -

{translate('no_results_search.favorites')}

-
- ), - }} - > - {translate('all')} - - ), - }} - /> -
- - +
+ + + {translate('no_results_search.favorites')} + +
+ ), + }} + > + {translate('all')} + + ), + }} + /> +
+
); } diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx index 24101e74049..7bc1048e11e 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx @@ -17,8 +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 { ButtonPrimary, FishVisual, Highlight } from 'design-system'; import * as React from 'react'; -import { Button } from '../../../components/controls/buttons'; import { Router, withRouter } from '../../../components/hoc/withRouter'; import { translate } from '../../../helpers/l10n'; import { hasGlobalPermission } from '../../../helpers/users'; @@ -36,26 +36,26 @@ export function EmptyInstance(props: EmptyInstanceProps) { isLoggedIn(currentUser) && hasGlobalPermission(currentUser, Permissions.ProjectCreation); return ( -
-

+
+ + {showNewProjectButton ? translate('projects.no_projects.empty_instance.new_project') : translate('projects.no_projects.empty_instance')} -

+ {showNewProjectButton && (
-

+

{translate('projects.no_projects.empty_instance.how_to_add_projects')}

-

- -

+ { + router.push('/projects/create'); + }} + > + {translate('my_account.create_new.TRK')} +
)}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx index 301ca47b11d..f9425f4d69a 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx @@ -17,21 +17,25 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Highlight, StandoutLink } from 'design-system'; import * as React from 'react'; -import Link from '../../../components/common/Link'; import { translate } from '../../../helpers/l10n'; export default function NoFavoriteProjects() { return ( -
-

{translate('projects.no_favorite_projects')}

+
+ + {translate('projects.no_favorite_projects')} +
-

{translate('projects.no_favorite_projects.engagement')}

-

- +

+ {translate('projects.no_favorite_projects.engagement')} +

+

+ {translate('projects.explore_projects')} - +

diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx index c0d51e91458..ef20517ee6f 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx @@ -79,10 +79,10 @@ export default function PageHeader(props: Props) {
{total != null && ( <> - + {total} - {translate('projects_')} + {translate('projects_')} )} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx index 5315df32ebc..47e82159c5b 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx @@ -31,7 +31,7 @@ import EmptyInstance from './EmptyInstance'; import NoFavoriteProjects from './NoFavoriteProjects'; import ProjectCard from './project-card/ProjectCard'; -const PROJECT_CARD_HEIGHT = 185; +const PROJECT_CARD_HEIGHT = 181; const PROJECT_CARD_MARGIN = 20; interface Props { diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/EmptyInstance-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/EmptyInstance-test.tsx deleted file mode 100644 index c8edfdf8c7e..00000000000 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/EmptyInstance-test.tsx +++ /dev/null @@ -1,46 +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 { shallow } from 'enzyme'; -import * as React from 'react'; -import { mockRouter } from '../../../../helpers/testMocks'; -import { EmptyInstance } from '../EmptyInstance'; - -it('renders correctly for SQ', () => { - expect( - shallow( - - ) - ).toMatchSnapshot(); - expect( - shallow( - - ) - ).toMatchSnapshot(); -}); diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/EmptyInstance-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/EmptyInstance-test.tsx.snap deleted file mode 100644 index 247739f3cec..00000000000 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/EmptyInstance-test.tsx.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly for SQ 1`] = ` -
-

- projects.no_projects.empty_instance -

-
-`; - -exports[`renders correctly for SQ 2`] = ` -
-

- projects.no_projects.empty_instance.new_project -

-
-

- projects.no_projects.empty_instance.how_to_add_projects -

-

- -

-
-
-`; diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/NoFavoriteProjects-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/NoFavoriteProjects-test.tsx.snap index f52b6888166..d3db14c4601 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/NoFavoriteProjects-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/NoFavoriteProjects-test.tsx.snap @@ -2,26 +2,29 @@ exports[`renders 1`] = `
-

+ projects.no_favorite_projects -

+

projects.no_favorite_projects.engagement

- projects.explore_projects - +

diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.css b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.css deleted file mode 100644 index cdd873db80a..00000000000 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.css +++ /dev/null @@ -1,53 +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. - */ -.project-card-main { - flex: 1 1 auto; - overflow: hidden; -} - -.project-card-meta { - flex: 0 0 170px; - overflow: hidden; - background-color: rgba(230, 230, 230, 0.25); - height: 100%; - box-sizing: border-box; -} - -.project-card-meta .tags-list span { - display: inline; -} - -.project-card-measure-value-line { - height: calc(3 * var(--gridSize)); -} - -@media (max-width: 1320px) { - .project-card-measure-secondary-info { - display: none; - } -} - -.project-card-leak { - background-color: var(--leakPrimaryColor); -} - -.project-card-disabled *:not(g):not(path) { - color: var(--disableGrayText); -} diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx index 1c2d9d0f4ab..519288d19a5 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx @@ -22,10 +22,13 @@ import classNames from 'classnames'; import { Badge, Card, + LightLabel, + LightPrimary, Note, QualityGateIndicator, SeparatorCircleIcon, StandoutLink, + SubnavigationFlowSeparator, Tags, themeBorder, themeColor, @@ -45,7 +48,6 @@ import { MetricKey, MetricType } from '../../../../types/metrics'; import { Status } from '../../../../types/types'; import { CurrentUser, isLoggedIn } from '../../../../types/users'; import { Project } from '../../types'; -import './ProjectCard.css'; import ProjectCardLanguages from './ProjectCardLanguages'; import ProjectCardMeasures from './ProjectCardMeasures'; @@ -75,12 +77,12 @@ function renderFirstLine( const formatted = formatMeasure(measures[MetricKey.alert_status], MetricType.Level); const qualityGateLabel = translateWithParameters('overview.quality_gate_x', formatted); return ( -
+ <>
{isFavorite !== undefined && ( } > - - {translate('qualifier.APP')} + + {translate('qualifier.APP')} )} {visibility === Visibility.Private && ( - - {translate('visibility', visibility)} + + + {translate('visibility', visibility)} + )}
{analysisDate && ( -
- - - - {formatted} - - -
+ + + + {formatted} + + )}
-
+ {analysisDate && ( {(formattedAnalysisDate) => ( @@ -158,15 +159,12 @@ function renderFirstLine( <>
- + {' '} + /> {translate('metric.new_lines.name')}
@@ -176,23 +174,17 @@ function renderFirstLine( <>
- + {' '} + /> {translate('metric.ncloc.name')}
- + @@ -200,11 +192,17 @@ function renderFirstLine( {tags.length > 0 && ( <> - + )} -
-
+ + ); } @@ -226,8 +224,8 @@ function renderSecondLine( } return ( -
- +
+ {isNewCode && analysisDate ? translate('projects.no_new_code_period', qualifier) : translate('projects.not_analyzed', qualifier)} @@ -236,7 +234,7 @@ function renderSecondLine( !analysisDate && isLoggedIn(currentUser) && !needIssueSync && ( - + {translate('projects.configure_analysis')} )} @@ -260,20 +258,16 @@ export default function ProjectCard(props: Props) { data-key={project.key} > {renderFirstLine(project, props.handleFavorite, isNewCode)} - + {renderSecondLine(currentUser, project, isNewCode)} ); } -const Separator = styled.hr` - border-top: ${themeBorder('default', 'projectCardBorder')}; -`; - const ProjectCardWrapper = styled(Card)` background-color: ${themeColor('projectCardBackground')}; border: ${themeBorder('default', 'projectCardBorder')}; - &.project-card-disabled { + &.project-card-disabled *:not(g):not(path) { color: ${themeColor('projectCardDisabled')} !important; } `; diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx index f926b69e314..116312690bc 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx @@ -20,6 +20,7 @@ import { sortBy } from 'lodash'; import * as React from 'react'; import withLanguagesContext from '../../../../app/components/languages/withLanguagesContext'; +import Tooltip from '../../../../components/controls/Tooltip'; import { translate } from '../../../../helpers/l10n'; import { Languages } from '../../../../types/languages'; @@ -29,6 +30,8 @@ interface Props { languages: Languages; } +const MAX_DISPLAYED_LANGUAGES = 2; + export function ProjectCardLanguages({ className, distribution, languages }: Props) { if (distribution === undefined) { return null; @@ -39,12 +42,28 @@ export function ProjectCardLanguages({ className, distribution, languages }: Pro getLanguageName(languages, l[0]) ); - const languagesText = finalLanguages.join(', '); + const languagesText = + finalLanguages.slice(0, MAX_DISPLAYED_LANGUAGES).join(', ') + + (finalLanguages.length > MAX_DISPLAYED_LANGUAGES ? ', ...' : ''); + + const tooltip = + finalLanguages.length > MAX_DISPLAYED_LANGUAGES ? ( + + {finalLanguages.map((language) => ( + + {language} +
+ + ))} + + ) : null; return ( - - {languagesText} - + + + {languagesText} + + ); } diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx index da5e97b7ea1..acbeb9d2f26 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx @@ -34,10 +34,7 @@ export default function ProjectCardMeasure( return (
{children}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx index 4f39b8250c6..88209252a47 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx @@ -23,6 +23,7 @@ import { MetricsLabel, MetricsRatingBadge, Note, + PageContentFontWrapper, } from 'design-system'; import * as React from 'react'; import Measure from '../../../../components/measure/Measure'; @@ -48,18 +49,13 @@ function renderCoverage(props: ProjectCardMeasuresProps) { return (
- {measures[coverageMetric] && ( - - - - )} - - - + {measures[coverageMetric] && } +
); @@ -82,18 +78,13 @@ function renderDuplication(props: ProjectCardMeasuresProps) { label={translate('metric.duplicated_lines_density.short_name')} >
- {measures[duplicationMetric] != null && ( - - - - )} - - - + {measures[duplicationMetric] != null && } +
); @@ -142,10 +133,12 @@ function renderRatings(props: ProjectCardMeasuresProps) { return ( - - - - + ); }); @@ -158,7 +151,7 @@ export default function ProjectCardMeasures(props: ProjectCardMeasuresProps) { if (!isNewCode && !ncloc) { return ( - + {componentQualifier === ComponentQualifier.Application ? translate('portfolio.app.empty') : translate('overview.project.main_branch_empty')} @@ -173,11 +166,11 @@ export default function ProjectCardMeasures(props: ProjectCardMeasuresProps) { ].filter(isDefined); return ( -
+ {measureList.map((measure, i) => ( // eslint-disable-next-line react/no-array-index-key {measure} ))} -
+ ); } diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardQualityGate.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardQualityGate.tsx deleted file mode 100644 index f1e41e4ce5e..00000000000 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardQualityGate.tsx +++ /dev/null @@ -1,48 +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 HelpTooltip from '../../../../components/controls/HelpTooltip'; -import Level from '../../../../components/ui/Level'; -import { translate } from '../../../../helpers/l10n'; -import { formatMeasure } from '../../../../helpers/measures'; - -interface Props { - status?: string; -} - -export default function ProjectCardQualityGate({ status }: Props) { - if (!status) { - return null; - } - - const title = `${translate('quality_gates.status')}: ${formatMeasure(status, 'LEVEL')}`; - - return ( -
- - {status === 'WARN' && ( - - )} -
- ); -} diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx index b15294a06f9..77d82ca6162 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx @@ -46,7 +46,7 @@ const PROJECT: Project = { const USER_LOGGED_OUT = mockCurrentUser(); const USER_LOGGED_IN = mockLoggedInUser(); -it('should display correclty when project need issue synch and not setup', () => { +it('should display correclty when project need issue sync and not setup', () => { renderProjectCard({ ...PROJECT, needIssueSync: true }); expect(screen.getByLabelText('overview.quality_gate_x.OK')).toBeInTheDocument(); expect(screen.getByText('overview.project.main_branch_empty')).toBeInTheDocument(); diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardLanguages-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardLanguages-test.tsx index 46ce75dda2c..94852659cfe 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardLanguages-test.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardLanguages-test.tsx @@ -27,21 +27,30 @@ const languages = { js: { key: 'js', name: 'JavaScript' }, }; -it('renders', () => { +it('should render normally', () => { renderProjectCardLanguages('java=137;js=15'); expect(screen.getByText('Java, JavaScript')).toBeInTheDocument(); }); -it('sorts languages', () => { +it('shoould sorts languages', () => { renderProjectCardLanguages('java=13;js=152'); expect(screen.getByText('JavaScript, Java')).toBeInTheDocument(); }); -it('handles unknown languages', () => { +it('should handle unknown languages', () => { renderProjectCardLanguages('java=13;cpp=18'); expect(screen.getByText('cpp, Java')).toBeInTheDocument(); }); +it('should handle more then 3 languages', async () => { + renderProjectCardLanguages('java=137;js=18;cpp=10;c=8;php=4'); + await expect(screen.getByText('Java, JavaScript, ...')).toHaveATooltipWithContent( + 'JavaJavaScriptcppcphp' + ); +}); + function renderProjectCardLanguages(distribution?: string) { - renderComponent(); + return renderComponent( + + ); } diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardQualityGate-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardQualityGate-test.tsx deleted file mode 100644 index cabbf9c512d..00000000000 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCardQualityGate-test.tsx +++ /dev/null @@ -1,32 +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 { screen } from '@testing-library/react'; -import * as React from 'react'; -import { renderComponent } from '../../../../../helpers/testReactTestingUtils'; -import ProjectCardQualityGate from '../ProjectCardQualityGate'; - -it('renders', () => { - renderProjectCardQualityGate('ERROR'); - expect(screen.getByTitle('quality_gates.status: ERROR')).toBeInTheDocument(); -}); - -function renderProjectCardQualityGate(status?: string) { - renderComponent(); -} diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.tsx b/server/sonar-web/src/main/js/components/common/EmptySearch.tsx index fab9cb26525..0300e9845f5 100644 --- a/server/sonar-web/src/main/js/components/common/EmptySearch.tsx +++ b/server/sonar-web/src/main/js/components/common/EmptySearch.tsx @@ -17,15 +17,18 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { FishVisual, Highlight } from 'design-system'; import * as React from 'react'; import { translate } from '../../helpers/l10n'; -import './EmptySearch.css'; export default function EmptySearch() { return ( -
-

{translate('no_results_search')}

-

{translate('no_results_search.2')}

+
+ + + {translate('no_results_search')} + +

{translate('no_results_search.2')}

); } diff --git a/server/sonar-web/src/main/js/components/common/__tests__/EmptySearch-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/EmptySearch-test.tsx deleted file mode 100644 index fc1fc7efc65..00000000000 --- a/server/sonar-web/src/main/js/components/common/__tests__/EmptySearch-test.tsx +++ /dev/null @@ -1,26 +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 { shallow } from 'enzyme'; -import * as React from 'react'; -import EmptySearch from '../EmptySearch'; - -it('renders', () => { - expect(shallow()).toMatchSnapshot(); -}); diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/EmptySearch-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/EmptySearch-test.tsx.snap deleted file mode 100644 index 8e313d7b4b8..00000000000 --- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/EmptySearch-test.tsx.snap +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders 1`] = ` -
-

- no_results_search -

-

- no_results_search.2 -

-
-`; -- 2.39.5