From b1a7fcdccc111af237b2e0ce206df150a12ed3c4 Mon Sep 17 00:00:00 2001 From: David Cho-Lerat Date: Wed, 31 Jan 2024 14:49:53 +0100 Subject: [PATCH] SONAR-20954 Improve project new code settings style --- .../ProjectNewCodeDefinitionApp.tsx | 22 +++++++--- .../ProjectNewCodeDefinitionSelector.tsx | 40 +++++++++++-------- .../ProjectNewCodeDefinitionApp-it.tsx | 5 --- .../GlobalNewCodeDefinitionDescription.tsx | 18 +++++++-- .../resources/org/sonar/l10n/core.properties | 1 - 5 files changed, 55 insertions(+), 31 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx index 700a997d771..7f5dbca55af 100644 --- a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx @@ -17,6 +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 { HeadingDark, LargeCenteredLayout, PageContentFontWrapper, Spinner } from 'design-system'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Helmet } from 'react-helmet-async'; @@ -61,6 +62,7 @@ function ProjectNewCodeDefinitionApp(props: Readonly(undefined); const [specificAnalysis, setSpecificAnalysis] = useState(undefined); + const [selectedNewCodeDefinitionType, setSelectedNewCodeDefinitionType] = useState(DEFAULT_NEW_CODE_DEFINITION_TYPE); @@ -68,6 +70,7 @@ function ProjectNewCodeDefinitionApp(props: Readonly { return sortBranches(branchLikes.filter(isBranch)); }, [branchLikes]); + const isFormTouched = useMemo(() => { if (isSpecificNewCodeDefinition === undefined) { return false; } + if (isSpecificNewCodeDefinition !== !projectNewCodeDefinition?.inherited) { return true; } @@ -97,10 +102,13 @@ function ProjectNewCodeDefinitionApp(props: Readonly + + + {!isLoading && (
- {branchSupportEnabled && ( - - {translate('project_baseline.default_setting')} - - )} - {globalNewCodeDefinition && isSpecificNewCodeDefinition !== undefined && ( {translate('project_baseline.configure_branches')} + void; onSelectDays: (value: string) => void; onSelectReferenceBranch: (value: string) => void; onSelectSetting: (value: NewCodeDefinitionType) => void; onSubmit: (e: React.SyntheticEvent) => void; onToggleSpecificSetting: (selection: boolean) => void; + overrideGlobalNewCodeDefinition: boolean; + previousNonCompliantValue?: string; + projectNcdUpdatedAt?: number; referenceBranch?: string; saving: boolean; selectedNewCodeDefinitionType?: NewCodeDefinitionType; - overrideGlobalNewCodeDefinition: boolean; } function branchToOption(b: Branch) { @@ -66,17 +67,17 @@ export default function ProjectNewCodeDefinitionSelector( const { analysis, branch, - branchList, branchesEnabled, + branchList, component, - newCodeDefinitionType, - newCodeDefinitionValue, - previousNonCompliantValue, - projectNcdUpdatedAt, days, globalNewCodeDefinition, isChanged, + newCodeDefinitionType, + newCodeDefinitionValue, overrideGlobalNewCodeDefinition, + previousNonCompliantValue, + projectNcdUpdatedAt, referenceBranch, saving, selectedNewCodeDefinitionType, @@ -105,7 +106,7 @@ export default function ProjectNewCodeDefinitionSelector( {translate('project_baseline.global_setting')} -
+
@@ -128,26 +129,28 @@ export default function ProjectNewCodeDefinitionSelector( selectedNewCodeDefinitionType === NewCodeDefinitionType.PreviousVersion } /> + + {branchesEnabled && ( )} + {!branchesEnabled && newCodeDefinitionType === NewCodeDefinitionType.SpecificAnalysis && ( )}
+
{isChanged && ( {translate('baseline.next_analysis_notice')} )} +
{translate('save')} + {translate('cancel')} +
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/__tests__/ProjectNewCodeDefinitionApp-it.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/__tests__/ProjectNewCodeDefinitionApp-it.tsx index 67ca5267991..f15b977a390 100644 --- a/server/sonar-web/src/main/js/apps/projectNewCode/components/__tests__/ProjectNewCodeDefinitionApp-it.tsx +++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/__tests__/ProjectNewCodeDefinitionApp-it.tsx @@ -66,8 +66,6 @@ it('renders correctly without branch support feature', async () => { // User is not admin expect(ui.generalSettingsLink.query()).not.toBeInTheDocument(); - // Specific branch setting is not rendered without feature branch - expect(ui.branchListHeading.query()).not.toBeInTheDocument(); expect(ui.referenceBranchRadio.query()).not.toBeInTheDocument(); }); @@ -85,8 +83,6 @@ it('renders correctly with branch support feature', async () => { // User is admin expect(ui.generalSettingsLink.get()).toBeInTheDocument(); - // Specific branch setting is rendered with feature support branch - expect(ui.branchListHeading.get()).toBeInTheDocument(); expect(ui.referenceBranchRadio.get()).toBeInTheDocument(); }); @@ -381,7 +377,6 @@ function getPageObjects() { const ui = { pageHeading: byRole('heading', { name: 'project_baseline.page' }), branchTableHeading: byText('branch_list.branch'), - branchListHeading: byRole('heading', { name: 'project_baseline.default_setting' }), generalSettingsLink: byRole('link', { name: 'project_baseline.page.description2.link' }), generalSettingRadio: byRole('radio', { name: 'project_baseline.global_setting' }), specificSettingRadio: byRole('radio', { name: 'project_baseline.specific_setting' }), diff --git a/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx b/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx index 1dca66f95d1..fcf2ab84676 100644 --- a/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx +++ b/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx @@ -17,6 +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 { TextSubdued } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../helpers/l10n'; import { NewCodeDefinition, NewCodeDefinitionType } from '../../types/new-code-definition'; @@ -29,11 +31,13 @@ export default function GlobalNewCodeDefinitionDescription({ globalNcd }: Readon let setting: string; let description: string; let useCase: string; + if (globalNcd.type === NewCodeDefinitionType.NumberOfDays) { setting = `${translate('new_code_definition.number_days')} (${translateWithParameters( 'duration.days', globalNcd.value ?? '?', )})`; + description = translate('new_code_definition.number_days.description'); useCase = translate('new_code_definition.number_days.usecase'); } else { @@ -44,9 +48,17 @@ export default function GlobalNewCodeDefinitionDescription({ globalNcd }: Readon return (
- {setting} - {description} - {useCase} + + {setting} + + + + {description} + + + + {useCase} +
); } 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 3f1fccb3184..ec24a2706a4 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -669,7 +669,6 @@ project_baseline.page.description=The new code definition sets which part of you project_baseline.page.description2=You can adjust this setting globally in {link}. project_baseline.page.description2.link=General Settings project_baseline.page.question=Choose the baseline for new code for this project -project_baseline.default_setting=Project setting project_baseline.global_setting=Use the global setting project_baseline.specific_setting=Define a specific setting for this project project_baseline.configure_branches=Set a specific setting for a branch -- 2.39.5