]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-19583 Display a green check if number of days new code definition value is...
authorPhilippe Perrin <philippe.perrin@sonarsource.com>
Thu, 29 Jun 2023 13:33:54 +0000 (15:33 +0200)
committersonartech <sonartech@sonarsource.com>
Fri, 30 Jun 2023 20:03:14 +0000 (20:03 +0000)
server/sonar-web/src/main/js/apps/projectBaseline/components/BranchBaselineSettingModal.tsx
server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineApp.tsx
server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineSelector.tsx
server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/ProjectBaselineApp-it.tsx
server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/utils-test.ts
server/sonar-web/src/main/js/apps/projectBaseline/utils.ts
server/sonar-web/src/main/js/apps/settings/components/NewCodePeriod.tsx
server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx

index 063a19f06399f3d0fc94c8f2a6ca063bd7982532..e80de3b008c65ef3a4aed742b9e2a265a7418690 100644 (file)
@@ -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 { noop } from 'lodash';
 import * as React from 'react';
 import { setNewCodePeriod } from '../../../api/newCodePeriod';
 import Modal from '../../../components/controls/Modal';
@@ -30,7 +31,6 @@ import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getNumberOfDaysDefaultValue } from '../../../helpers/new-code-definition';
 import { Branch, BranchWithNewCodePeriod } from '../../../types/branch-like';
 import { NewCodeDefinition, NewCodeDefinitionType } from '../../../types/new-code-definition';
-import { ParsedAnalysis } from '../../../types/project-activity';
 import { getSettingValue, validateSetting } from '../utils';
 import BaselineSettingAnalysis from './BaselineSettingAnalysis';
 import BaselineSettingReferenceBranch from './BaselineSettingReferenceBranch';
@@ -49,6 +49,7 @@ interface State {
   analysis: string;
   analysisDate?: Date;
   days: string;
+  isChanged: boolean;
   referenceBranch: string;
   saving: boolean;
   selected?: NewCodeDefinitionType;
@@ -69,6 +70,7 @@ export default class BranchBaselineSettingModal extends React.PureComponent<Prop
       days:
         this.getValueFromProps(NewCodeDefinitionType.NumberOfDays) ||
         getNumberOfDaysDefaultValue(generalSetting, inheritedSetting),
+      isChanged: false,
       referenceBranch:
         this.getValueFromProps(NewCodeDefinitionType.ReferenceBranch) || defaultBranch,
       saving: false,
@@ -117,6 +119,7 @@ export default class BranchBaselineSettingModal extends React.PureComponent<Prop
           if (this.mounted) {
             this.setState({
               saving: false,
+              isChanged: false,
             });
             this.props.onClose(branch.name, {
               type,
@@ -138,28 +141,25 @@ export default class BranchBaselineSettingModal extends React.PureComponent<Prop
 
   requestClose = () => this.props.onClose();
 
-  handleSelectAnalysis = (analysis: ParsedAnalysis) =>
-    this.setState({ analysis: analysis.key, analysisDate: analysis.date });
+  handleSelectDays = (days: string) => this.setState({ days, isChanged: true });
 
-  handleSelectDays = (days: string) => this.setState({ days });
+  handleSelectReferenceBranch = (referenceBranch: string) =>
+    this.setState({ referenceBranch, isChanged: true });
 
-  handleSelectReferenceBranch = (referenceBranch: string) => this.setState({ referenceBranch });
-
-  handleSelectSetting = (selected: NewCodeDefinitionType) => this.setState({ selected });
+  handleSelectSetting = (selected: NewCodeDefinitionType) => {
+    this.setState((currentState) => ({ selected, isChanged: selected !== currentState.selected }));
+  };
 
   render() {
     const { branch, branchList } = this.props;
-    const { analysis, days, referenceBranch, saving, selected } = this.state;
+    const { analysis, days, isChanged, referenceBranch, saving, selected } = this.state;
 
     const header = translateWithParameters('baseline.new_code_period_for_branch_x', branch.name);
 
     const currentSetting = branch.newCodePeriod?.type;
     const currentSettingValue = branch.newCodePeriod?.value;
 
-    const { isChanged, isValid } = validateSetting({
-      analysis,
-      currentSetting,
-      currentSettingValue,
+    const isValid = validateSetting({
       days,
       referenceBranch,
       selected,
@@ -203,7 +203,7 @@ export default class BranchBaselineSettingModal extends React.PureComponent<Prop
               />
               {currentSetting === NewCodeDefinitionType.SpecificAnalysis && (
                 <BaselineSettingAnalysis
-                  onSelect={() => {}}
+                  onSelect={noop}
                   selected={selected === NewCodeDefinitionType.SpecificAnalysis}
                 />
               )}
@@ -213,7 +213,7 @@ export default class BranchBaselineSettingModal extends React.PureComponent<Prop
                 analysis={analysis}
                 branch={branch.name}
                 component={this.props.component}
-                onSelectAnalysis={this.handleSelectAnalysis}
+                onSelectAnalysis={noop}
               />
             )}
           </div>
index 5d185dd51ca91bf4079466d7690bd26d546492a9..f28d2d251bd80b7b897d3e892a2626b140d53bf1 100644 (file)
@@ -40,7 +40,6 @@ import { AppState } from '../../../types/appstate';
 import { Branch, BranchLike } from '../../../types/branch-like';
 import { Feature } from '../../../types/features';
 import { NewCodeDefinition, NewCodeDefinitionType } from '../../../types/new-code-definition';
-import { ParsedAnalysis } from '../../../types/project-activity';
 import { Component } from '../../../types/types';
 import '../styles.css';
 import { getSettingValue } from '../utils';
@@ -62,6 +61,7 @@ interface State {
   currentSettingValue?: string;
   days: string;
   generalSetting?: NewCodeDefinition;
+  isChanged: boolean;
   loading: boolean;
   overrideGeneralSetting?: boolean;
   referenceBranch?: string;
@@ -75,6 +75,7 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
   state: State = {
     branchList: [],
     days: getNumberOfDaysDefaultValue(),
+    isChanged: false,
     loading: true,
     saving: false,
   };
@@ -113,6 +114,7 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
       currentSetting,
       currentSettingValue,
       generalSetting,
+      isChanged: false,
       selected: currentSetting || generalSetting.type,
       overrideGeneralSetting: Boolean(currentSetting),
       days:
@@ -175,6 +177,7 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
         this.setState({
           saving: false,
           currentSetting: undefined,
+          isChanged: false,
           selected: undefined,
           success: true,
         });
@@ -186,12 +189,10 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
     );
   };
 
-  handleSelectAnalysis = (analysis: ParsedAnalysis) => this.setState({ analysis: analysis.key });
-
-  handleSelectDays = (days: string) => this.setState({ days });
+  handleSelectDays = (days: string) => this.setState({ days, isChanged: true });
 
   handleSelectReferenceBranch = (referenceBranch: string) => {
-    this.setState({ referenceBranch });
+    this.setState({ referenceBranch, isChanged: true });
   };
 
   handleCancel = () =>
@@ -203,23 +204,31 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
       }) => this.getUpdatedState({ generalSetting, currentSetting, currentSettingValue })
     );
 
-  handleSelectSetting = (selected?: NewCodeDefinitionType) => this.setState({ selected });
+  handleSelectSetting = (selected?: NewCodeDefinitionType) => {
+    this.setState((currentState) => ({
+      selected,
+      isChanged: selected !== currentState.selected,
+    }));
+  };
 
   handleToggleSpecificSetting = (overrideGeneralSetting: boolean) =>
-    this.setState({ overrideGeneralSetting });
+    this.setState((currentState) => ({
+      overrideGeneralSetting,
+      isChanged: currentState.overrideGeneralSetting !== overrideGeneralSetting,
+    }));
 
   handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const { component } = this.props;
-    const { analysis, days, selected: type, referenceBranch, overrideGeneralSetting } = this.state;
+    const { days, selected: type, referenceBranch, overrideGeneralSetting } = this.state;
 
     if (!overrideGeneralSetting) {
       this.resetSetting();
       return;
     }
 
-    const value = getSettingValue({ type, analysis, days, referenceBranch });
+    const value = getSettingValue({ type, days, referenceBranch });
 
     if (type) {
       this.setState({ saving: true });
@@ -233,6 +242,7 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
             saving: false,
             currentSetting: type,
             currentSettingValue: value || undefined,
+            isChanged: false,
             success: true,
           });
           this.resetSuccess();
@@ -252,6 +262,7 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
       currentSetting,
       days,
       generalSetting,
+      isChanged,
       loading,
       currentSettingValue,
       overrideGeneralSetting,
@@ -286,8 +297,8 @@ class ProjectBaselineApp extends React.PureComponent<Props, State> {
                   currentSettingValue={currentSettingValue}
                   days={days}
                   generalSetting={generalSetting}
+                  isChanged={isChanged}
                   onCancel={this.handleCancel}
-                  onSelectAnalysis={this.handleSelectAnalysis}
                   onSelectDays={this.handleSelectDays}
                   onSelectReferenceBranch={this.handleSelectReferenceBranch}
                   onSelectSetting={this.handleSelectSetting}
index 39f6c7184212199d26fa2f243bbe3f52587fced2..e16920aae9c18e3ef77446f60ee8863f3bd5f284 100644 (file)
@@ -19,6 +19,7 @@
  */
 import classNames from 'classnames';
 import { RadioButton } from 'design-system';
+import { noop } from 'lodash';
 import * as React from 'react';
 import Tooltip from '../../../components/controls/Tooltip';
 import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
@@ -32,7 +33,6 @@ import { translate } from '../../../helpers/l10n';
 import { isNewCodeDefinitionCompliant } from '../../../helpers/new-code-definition';
 import { Branch } from '../../../types/branch-like';
 import { NewCodeDefinition, NewCodeDefinitionType } from '../../../types/new-code-definition';
-import { ParsedAnalysis } from '../../../types/project-activity';
 import { validateSetting } from '../utils';
 import BaselineSettingAnalysis from './BaselineSettingAnalysis';
 import BaselineSettingReferenceBranch from './BaselineSettingReferenceBranch';
@@ -49,8 +49,8 @@ export interface ProjectBaselineSelectorProps {
   currentSettingValue?: string;
   days: string;
   generalSetting: NewCodeDefinition;
+  isChanged: boolean;
   onCancel: () => void;
-  onSelectAnalysis: (analysis: ParsedAnalysis) => void;
   onSelectDays: (value: string) => void;
   onSelectReferenceBranch: (value: string) => void;
   onSelectSetting: (value?: NewCodeDefinitionType) => void;
@@ -78,6 +78,7 @@ export default function ProjectBaselineSelector(props: ProjectBaselineSelectorPr
     currentSettingValue,
     days,
     generalSetting,
+    isChanged,
     overrideGeneralSetting,
     referenceBranch,
     saving,
@@ -86,10 +87,7 @@ export default function ProjectBaselineSelector(props: ProjectBaselineSelectorPr
 
   const isGlobalNcdCompliant = isNewCodeDefinitionCompliant(generalSetting);
 
-  const { isChanged, isValid } = validateSetting({
-    analysis,
-    currentSetting,
-    currentSettingValue,
+  const isValid = validateSetting({
     days,
     overrideGeneralSetting,
     referenceBranch,
@@ -172,7 +170,7 @@ export default function ProjectBaselineSelector(props: ProjectBaselineSelectorPr
           )}
           {!branchesEnabled && currentSetting === NewCodeDefinitionType.SpecificAnalysis && (
             <BaselineSettingAnalysis
-              onSelect={() => {}}
+              onSelect={noop}
               selected={
                 overrideGeneralSetting && selected === NewCodeDefinitionType.SpecificAnalysis
               }
@@ -186,7 +184,7 @@ export default function ProjectBaselineSelector(props: ProjectBaselineSelectorPr
               analysis={analysis || ''}
               branch={branch.name}
               component={component}
-              onSelectAnalysis={props.onSelectAnalysis}
+              onSelectAnalysis={noop}
             />
           )}
       </div>
index edcad7d025bf0ac857bece638ecbd049e6106672..d1fc4e010ebb2cfc09a3f398995d577c83fd62ec 100644 (file)
@@ -276,9 +276,7 @@ it('can set a reference branch setting for branch', async () => {
 
   await ui.setBranchReferenceToBranchSetting('main', 'feature');
 
-  expect(
-    within(byRole('table').get()).getByText('baseline.reference_branch: feature')
-  ).toBeInTheDocument();
+  expect(byRole('table').byText('baseline.reference_branch: feature').get()).toBeInTheDocument();
 });
 
 function renderProjectBaselineApp(context: RenderContext = {}) {
index 1f50739f93c1bee5856f173a41cfd70ce7a71040..b0bd20f5c17582168361eff50614e3f1fbea3beb 100644 (file)
@@ -54,93 +54,63 @@ describe('getSettingValue', () => {
 
 describe('validateSettings', () => {
   it('should validate at branch level', () => {
-    expect(validateSetting({ days: '' })).toEqual({ isChanged: false, isValid: false });
+    expect(validateSetting({ days: '' })).toEqual(false);
     expect(
       validateSetting({
-        currentSetting: NewCodeDefinitionType.PreviousVersion,
         days: '12',
         selected: NewCodeDefinitionType.NumberOfDays,
       })
-    ).toEqual({ isChanged: true, isValid: true });
+    ).toEqual(true);
     expect(
       validateSetting({
-        currentSetting: NewCodeDefinitionType.PreviousVersion,
         days: 'nope',
         selected: NewCodeDefinitionType.NumberOfDays,
       })
-    ).toEqual({ isChanged: true, isValid: false });
+    ).toEqual(false);
     expect(
       validateSetting({
-        currentSetting: NewCodeDefinitionType.NumberOfDays,
-        currentSettingValue: '15',
-        days: '15',
-        selected: NewCodeDefinitionType.NumberOfDays,
-      })
-    ).toEqual({ isChanged: false, isValid: true });
-    expect(
-      validateSetting({
-        currentSetting: NewCodeDefinitionType.NumberOfDays,
-        currentSettingValue: '15',
-        days: '13',
-        selected: NewCodeDefinitionType.NumberOfDays,
-      })
-    ).toEqual({ isChanged: true, isValid: true });
-    expect(
-      validateSetting({
-        analysis: 'analysis1',
-        currentSetting: NewCodeDefinitionType.SpecificAnalysis,
-        currentSettingValue: 'analysis1',
         days: '',
         selected: NewCodeDefinitionType.SpecificAnalysis,
       })
-    ).toEqual({ isChanged: false, isValid: false });
+    ).toEqual(false);
     expect(
       validateSetting({
-        analysis: 'analysis2',
-        currentSetting: NewCodeDefinitionType.SpecificAnalysis,
-        currentSettingValue: 'analysis1',
-        days: '',
-        selected: NewCodeDefinitionType.SpecificAnalysis,
-      })
-    ).toEqual({ isChanged: true, isValid: false });
-    expect(
-      validateSetting({
-        currentSetting: NewCodeDefinitionType.ReferenceBranch,
-        currentSettingValue: 'master',
         days: '',
         referenceBranch: 'master',
         selected: NewCodeDefinitionType.ReferenceBranch,
       })
-    ).toEqual({ isChanged: false, isValid: true });
+    ).toEqual(true);
     expect(
       validateSetting({
-        currentSetting: NewCodeDefinitionType.ReferenceBranch,
-        currentSettingValue: 'master',
         days: '',
         referenceBranch: '',
         selected: NewCodeDefinitionType.ReferenceBranch,
       })
-    ).toEqual({ isChanged: true, isValid: false });
+    ).toEqual(false);
   });
 
   it('should validate at project level', () => {
-    expect(validateSetting({ days: '', overrideGeneralSetting: false })).toEqual({
-      isChanged: false,
-      isValid: true,
-    });
-    expect(validateSetting({ days: '', overrideGeneralSetting: true })).toEqual({
-      isChanged: true,
-      isValid: false,
-    });
+    expect(validateSetting({ days: '', overrideGeneralSetting: false })).toEqual(true);
+    expect(
+      validateSetting({
+        selected: NewCodeDefinitionType.PreviousVersion,
+        days: '',
+        overrideGeneralSetting: true,
+      })
+    ).toEqual(true);
     expect(
       validateSetting({
-        currentSetting: NewCodeDefinitionType.PreviousVersion,
+        selected: NewCodeDefinitionType.NumberOfDays,
         days: '',
-        overrideGeneralSetting: false,
+        overrideGeneralSetting: true,
+      })
+    ).toEqual(false);
+    expect(
+      validateSetting({
+        selected: NewCodeDefinitionType.NumberOfDays,
+        days: '12',
+        overrideGeneralSetting: true,
       })
-    ).toEqual({
-      isChanged: true,
-      isValid: true,
-    });
+    ).toEqual(true);
   });
 });
index 6a1076de85bcb200954ca71a34462025c1b63f78..45c5c8efd943ab92889e5432fc07662768883d1c 100644 (file)
@@ -44,46 +44,20 @@ export function getSettingValue({
 }
 
 export function validateSetting(state: {
-  analysis?: string;
-  currentSetting?: NewCodeDefinitionType;
-  currentSettingValue?: string;
   days: string;
   overrideGeneralSetting?: boolean;
   referenceBranch?: string;
   selected?: NewCodeDefinitionType;
 }) {
-  const {
-    analysis = '',
-    currentSetting,
-    currentSettingValue,
-    days,
-    overrideGeneralSetting,
-    referenceBranch = '',
-    selected,
-  } = state;
-
-  let isChanged;
-  if (!currentSetting && overrideGeneralSetting !== undefined) {
-    isChanged = overrideGeneralSetting;
-  } else {
-    isChanged =
-      overrideGeneralSetting === false ||
-      selected !== currentSetting ||
-      (selected === NewCodeDefinitionType.NumberOfDays && days !== currentSettingValue) ||
-      (selected === NewCodeDefinitionType.SpecificAnalysis && analysis !== currentSettingValue) ||
-      (selected === NewCodeDefinitionType.ReferenceBranch &&
-        referenceBranch !== currentSettingValue);
-  }
+  const { days, overrideGeneralSetting, referenceBranch = '', selected } = state;
 
-  const isValid =
+  return (
     overrideGeneralSetting === false ||
     (!!selected &&
       isNewCodeDefinitionCompliant({
         type: selected,
         value: days,
       }) &&
-      (selected !== NewCodeDefinitionType.SpecificAnalysis || analysis.length > 0) &&
-      (selected !== NewCodeDefinitionType.ReferenceBranch || referenceBranch.length > 0));
-
-  return { isChanged, isValid };
+      (selected !== NewCodeDefinitionType.ReferenceBranch || referenceBranch.length > 0))
+  );
 }
index 7dd692db76f7eedc5970e5d2f685b4076cbe23c7..b6495cbc1f7d8809ec74423d2585efce3fc7ba34 100644 (file)
@@ -39,6 +39,7 @@ interface State {
   days: string;
   loading: boolean;
   currentSettingValue?: string;
+  isChanged: boolean;
   saving: boolean;
   selected?: NewCodeDefinitionType;
   success: boolean;
@@ -49,6 +50,7 @@ export default class NewCodePeriod extends React.PureComponent<{}, State> {
   state: State = {
     loading: true,
     days: getNumberOfDaysDefaultValue(),
+    isChanged: false,
     saving: false,
     success: false,
   };
@@ -79,15 +81,20 @@ export default class NewCodePeriod extends React.PureComponent<{}, State> {
   }
 
   onSelectDays = (days: string) => {
-    this.setState({ days, success: false });
+    this.setState({ days, success: false, isChanged: true });
   };
 
   onSelectSetting = (selected: NewCodeDefinitionType) => {
-    this.setState({ selected, success: false });
+    this.setState((currentState) => ({
+      selected,
+      success: false,
+      isChanged: selected !== currentState.selected,
+    }));
   };
 
   onCancel = () => {
     this.setState(({ currentSetting, currentSettingValue, days }) => ({
+      isChanged: false,
       selected: currentSetting,
       days:
         currentSetting === NewCodeDefinitionType.NumberOfDays ? String(currentSettingValue) : days,
@@ -113,6 +120,7 @@ export default class NewCodePeriod extends React.PureComponent<{}, State> {
             saving: false,
             currentSetting: type,
             currentSettingValue: value || undefined,
+            isChanged: false,
             success: true,
           });
         }
@@ -128,12 +136,16 @@ export default class NewCodePeriod extends React.PureComponent<{}, State> {
   };
 
   render() {
-    const { currentSetting, days, loading, currentSettingValue, saving, selected, success } =
-      this.state;
-
-    const isChanged =
-      selected !== currentSetting ||
-      (selected === NewCodeDefinitionType.NumberOfDays && String(days) !== currentSettingValue);
+    const {
+      currentSetting,
+      days,
+      loading,
+      isChanged,
+      currentSettingValue,
+      saving,
+      selected,
+      success,
+    } = this.state;
 
     const isValid =
       selected !== NewCodeDefinitionType.NumberOfDays ||
index 4a12a6a042a55f536fccb7d6457966dc2ba624fb..2f4660713f6f0410687f7f36de219d818d76324c 100644 (file)
@@ -49,24 +49,18 @@ export default function NewCodeDefinitionSelector(props: Props) {
   const [globalNcd, setGlobalNcd] = React.useState<NewCodeDefinition | null>(null);
   const [selectedNcdType, setSelectedNcdType] = React.useState<NewCodeDefinitionType | null>(null);
   const [days, setDays] = React.useState<string>('');
+  const [isChanged, setIsChanged] = React.useState<boolean>(false);
 
   const isGlobalNcdCompliant = React.useMemo(
     () => Boolean(globalNcd && isNewCodeDefinitionCompliant(globalNcd)),
     [globalNcd]
   );
 
-  const initialNumberOfDays = React.useMemo(() => {
+  React.useEffect(() => {
     const numberOfDays = getNumberOfDaysDefaultValue(globalNcd);
     setDays(numberOfDays);
-
-    return numberOfDays;
   }, [globalNcd]);
 
-  const isChanged = React.useMemo(
-    () => selectedNcdType === NewCodeDefinitionType.NumberOfDays && days !== initialNumberOfDays,
-    [selectedNcdType, days, initialNumberOfDays]
-  );
-
   const isCompliant = React.useMemo(
     () =>
       !!selectedNcdType &&
@@ -77,6 +71,16 @@ export default function NewCodeDefinitionSelector(props: Props) {
     [selectedNcdType, days]
   );
 
+  const handleNcdChanged = React.useCallback(
+    (newNcdType: NewCodeDefinitionType) => {
+      if (newNcdType && newNcdType !== selectedNcdType) {
+        setSelectedNcdType(newNcdType);
+        setIsChanged(true);
+      }
+    },
+    [selectedNcdType]
+  );
+
   React.useEffect(() => {
     function fetchGlobalNcd() {
       getNewCodePeriod().then(setGlobalNcd, noop);
@@ -105,7 +109,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
           checked={selectedNcdType === NewCodeDefinitionType.Inherited}
           className="big-spacer-bottom"
           disabled={!isGlobalNcdCompliant}
-          onCheck={() => setSelectedNcdType(NewCodeDefinitionType.Inherited)}
+          onCheck={() => handleNcdChanged(NewCodeDefinitionType.Inherited)}
           value="general"
         >
           <Tooltip
@@ -133,7 +137,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
           aria-label={translate('new_code_definition.specific_setting')}
           checked={Boolean(selectedNcdType && selectedNcdType !== NewCodeDefinitionType.Inherited)}
           className="huge-spacer-top"
-          onCheck={() => setSelectedNcdType(NewCodeDefinitionType.PreviousVersion)}
+          onCheck={() => handleNcdChanged(NewCodeDefinitionType.PreviousVersion)}
           value="specific"
         >
           {translate('new_code_definition.specific_setting')}
@@ -146,7 +150,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
             disabled={Boolean(
               !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
             )}
-            onSelect={setSelectedNcdType}
+            onSelect={handleNcdChanged}
             selected={selectedNcdType === NewCodeDefinitionType.PreviousVersion}
           />
 
@@ -158,7 +162,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
             isChanged={isChanged}
             isValid={isCompliant}
             onChangeDays={setDays}
-            onSelect={setSelectedNcdType}
+            onSelect={handleNcdChanged}
             selected={selectedNcdType === NewCodeDefinitionType.NumberOfDays}
           />
 
@@ -167,7 +171,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
             disabled={Boolean(
               !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
             )}
-            onClick={() => setSelectedNcdType(NewCodeDefinitionType.ReferenceBranch)}
+            onClick={() => handleNcdChanged(NewCodeDefinitionType.ReferenceBranch)}
             selected={selectedNcdType === NewCodeDefinitionType.ReferenceBranch}
             title={translate('new_code_definition.reference_branch')}
           >