From a827904491975f559a9122503a13be039f242017 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Fri, 19 Apr 2024 13:53:35 +0200 Subject: SONAR-22012 Improve CaYC messages on Custom QGs and Sonar way --- .../quality-gates/components/CaycBadgeTooltip.tsx | 35 ------------------ .../components/CaycCompliantBanner.tsx | 10 +++-- .../apps/quality-gates/components/Conditions.tsx | 22 +++++++++++ .../quality-gates/components/DetailsHeader.tsx | 43 ---------------------- .../main/js/apps/quality-gates/components/List.tsx | 22 +++++------ .../quality-gates/components/QGRecommendedIcon.tsx | 29 +++++++++++++++ .../components/__tests__/QualityGate-it.tsx | 4 -- 7 files changed, 67 insertions(+), 98 deletions(-) delete mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/CaycBadgeTooltip.tsx create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/QGRecommendedIcon.tsx (limited to 'server') diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycBadgeTooltip.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycBadgeTooltip.tsx deleted file mode 100644 index cedae01a995..00000000000 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycBadgeTooltip.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 DocumentationLink from '../../../components/common/DocumentationLink'; -import { translate } from '../../../helpers/l10n'; - -export default function CaycBadgeTooltip() { - return ( -
-

- {translate('quality_gates.cayc.tooltip.message')} -

- - {translate('quality_gates.cayc.badge.tooltip.learn_more')} - -
- ); -} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx index 362134665e0..c86aa008d71 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx @@ -28,13 +28,17 @@ import { FormattedMessage } from 'react-intl'; import DocumentationLink from '../../../components/common/DocumentationLink'; import { translate } from '../../../helpers/l10n'; import { OPTIMIZED_CAYC_CONDITIONS } from '../utils'; +import QGRecommendedIcon from './QGRecommendedIcon'; export default function CaycCompliantBanner() { return ( - - {translate('quality_gates.cayc.banner.title')} - +
+ + + {translate('quality_gates.cayc.banner.title')} + +
)
+ {qualityGate.isBuiltIn && ( +
+ + + + {translate('clean_as_you_code')} + + ), + }} + /> + +
+ )} + {isCompliantCustomQualityGate && !isOptimizing && } {isCompliantCustomQualityGate && isOptimizing && canEdit && ( diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx index da700a2d02c..c55952d85d1 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx @@ -22,23 +22,18 @@ import { Badge, ButtonSecondary, DangerButtonPrimary, - FlagWarningIcon, ItemButton, ItemDangerButton, ItemDivider, - LightLabel, SubTitle, } from 'design-system'; import { countBy } from 'lodash'; import * as React from 'react'; -import { FormattedMessage } from 'react-intl'; -import DocumentationLink from '../../../components/common/DocumentationLink'; import Tooltip from '../../../components/controls/Tooltip'; import { translate } from '../../../helpers/l10n'; import { useSetQualityGateAsDefaultMutation } from '../../../queries/quality-gates'; import { CaycStatus, QualityGate } from '../../../types/types'; import BuiltInQualityGateBadge from './BuiltInQualityGateBadge'; -import CaycBadgeTooltip from './CaycBadgeTooltip'; import CopyQualityGateForm from './CopyQualityGateForm'; import DeleteQualityGateForm from './DeleteQualityGateForm'; import RenameQualityGateForm from './RenameQualityGateForm'; @@ -47,8 +42,6 @@ interface Props { qualityGate: QualityGate; } -const TOOLTIP_MOUSE_LEAVE_DELAY = 0.3; - export default function DetailsHeader({ qualityGate }: Readonly) { const [isRenameFormOpen, setIsRenameFormOpen] = React.useState(false); const [isCopyFormOpen, setIsCopyFormOpen] = React.useState(false); @@ -60,7 +53,6 @@ export default function DetailsHeader({ qualityGate }: Readonly) { actions.delete, actions.setAsDefault, ])['true']; - const canEdit = Boolean(actions?.manageConditions); const { mutateAsync: setQualityGateAsDefault } = useSetQualityGateAsDefaultMutation(); const handleSetAsDefaultClick = () => { @@ -75,46 +67,11 @@ export default function DetailsHeader({ qualityGate }: Readonly) {
{qualityGate.name} - {qualityGate.caycStatus === CaycStatus.NonCompliant && canEdit && ( - } mouseLeaveDelay={TOOLTIP_MOUSE_LEAVE_DELAY}> - } /> - - )}
{qualityGate.isDefault && {translate('default')}} {qualityGate.isBuiltIn && }
- {qualityGate.isBuiltIn && ( - <> - - - {translate('clean_as_you_code')} - - ), - }} - /> - - - - {translate('learn_more')} - - ), - }} - /> - - - )}
{actionsCount === 1 && ( <> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx index 39a90cffd66..4f268fdfd92 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx @@ -17,13 +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 { - Badge, - BareButton, - FlagWarningIcon, - SubnavigationGroup, - SubnavigationItem, -} from 'design-system'; +import { Badge, BareButton, SubnavigationGroup, SubnavigationItem } from 'design-system'; import * as React from 'react'; import { useNavigate } from 'react-router-dom'; import Tooltip from '../../../components/controls/Tooltip'; @@ -32,6 +26,7 @@ import { translate } from '../../../helpers/l10n'; import { getQualityGateUrl } from '../../../helpers/urls'; import { CaycStatus, QualityGate } from '../../../types/types'; import BuiltInQualityGateBadge from './BuiltInQualityGateBadge'; +import QGRecommendedIcon from './QGRecommendedIcon'; interface Props { qualityGates: QualityGate[]; @@ -80,12 +75,13 @@ export default function List({ qualityGates, currentQualityGate }: Props) {
)}
- {qualityGate.caycStatus === CaycStatus.NonCompliant && - qualityGate.actions?.manageConditions && ( - - - - )} + {qualityGate.caycStatus !== CaycStatus.NonCompliant && ( + + + + + + )} ); })} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QGRecommendedIcon.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QGRecommendedIcon.tsx new file mode 100644 index 00000000000..4eea2d42b2f --- /dev/null +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QGRecommendedIcon.tsx @@ -0,0 +1,29 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 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 styled from '@emotion/styled'; +import { IconRecommended } from '@sonarsource/echoes-react'; +import { themeColor } from 'design-system'; + +const QGRecommendedIcon = styled(IconRecommended)` + color: ${themeColor('primary')}; +`; + +export default QGRecommendedIcon; diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx index a1fac39603b..70486601dc6 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx @@ -82,7 +82,6 @@ it('should render the built-in quality gate properly', async () => { await user.click(builtInQualityGate); expect(await screen.findByText(/quality_gates.is_built_in.cayc.description/)).toBeInTheDocument(); - expect(await screen.findByText(/quality_gates.is_built_in.description/)).toBeInTheDocument(); }); it('should be able to create a quality gate then delete it', async () => { @@ -424,7 +423,6 @@ it('should not warn user when quality gate is not CaYC compliant and user has no await user.click(nonCompliantQualityGate); expect(screen.queryByRole('alert')).not.toBeInTheDocument(); - expect(screen.queryByText('quality_gates.cayc.tooltip.message')).not.toBeInTheDocument(); }); it('should not show optimize banner when quality gate is compliant but non-CaYC and user has no permission to edit it', async () => { @@ -438,7 +436,6 @@ it('should not show optimize banner when quality gate is compliant but non-CaYC await user.click(nonCompliantQualityGate); expect(screen.queryByRole('alert')).not.toBeInTheDocument(); - expect(screen.queryByText('quality_gates.cayc.tooltip.message')).not.toBeInTheDocument(); }); it('should warn user when quality gate is not CaYC compliant and user has permission to edit it', async () => { @@ -449,7 +446,6 @@ it('should warn user when quality gate is not CaYC compliant and user has permis const nonCompliantQualityGate = await screen.findByRole('button', { name: /Non Cayc QG/ }); await user.click(nonCompliantQualityGate); - // expect(screen.getByTestId('conditions')).toMatchSnapshot(); expect(await screen.findByText(/quality_gates.cayc_missing.banner.title/)).toBeInTheDocument(); expect(screen.getAllByText('quality_gates.cayc.tooltip.message').length).toBeGreaterThan(0); -- cgit v1.2.3