diff --git a/frontend/src/components/NewRunParametersV2.test.tsx b/frontend/src/components/NewRunParametersV2.test.tsx index a5348a2a933..056b3957c88 100644 --- a/frontend/src/components/NewRunParametersV2.test.tsx +++ b/frontend/src/components/NewRunParametersV2.test.tsx @@ -877,4 +877,57 @@ describe('NewRunParametersV2', () => { expect(container.querySelector('input').type).toEqual('checkbox'); }); + + // Test for fix: Default parameters not displayed in Compare Runs + // https://github.com/kubeflow/pipelines/issues/12536 + it('calls handleParameterChange with default values on mount', () => { + const handleParameterChangeSpy = jest.fn(); + const props = { + titleMessage: 'default Title', + pipelineRoot: 'default pipelineRoot', + specParameters: { + strParam: { + parameterType: ParameterType_ParameterTypeEnum.STRING, + defaultValue: 'default string', + }, + intParam: { + parameterType: ParameterType_ParameterTypeEnum.NUMBER_INTEGER, + defaultValue: 42, + }, + boolParam: { + parameterType: ParameterType_ParameterTypeEnum.BOOLEAN, + defaultValue: true, + }, + listParam: { + parameterType: ParameterType_ParameterTypeEnum.LIST, + defaultValue: [1, 2, 3], + }, + structParam: { + parameterType: ParameterType_ParameterTypeEnum.STRUCT, + defaultValue: { key: 'value' }, + }, + }, + clonedRuntimeConfig: {}, + handlePipelineRootChange: jest.fn(), + handleParameterChange: handleParameterChangeSpy, + }; + render(); + + // Verify that handleParameterChange was called on mount with all default values + expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1); + expect(handleParameterChangeSpy).toHaveBeenCalledWith({ + strParam: 'default string', + intParam: 42, + boolParam: true, + listParam: [1, 2, 3], + structParam: { key: 'value' }, + }); + + // Verify that the default values are displayed in the UI + screen.getByDisplayValue('default string'); + screen.getByDisplayValue('42'); + screen.getByDisplayValue('true'); + screen.getByDisplayValue('[1,2,3]'); + screen.getByDisplayValue('{"key":"value"}'); + }); }); diff --git a/frontend/src/components/NewRunParametersV2.tsx b/frontend/src/components/NewRunParametersV2.tsx index 00a2ae47525..7d4184b202e 100644 --- a/frontend/src/components/NewRunParametersV2.tsx +++ b/frontend/src/components/NewRunParametersV2.tsx @@ -207,6 +207,7 @@ function NewRunParametersV2(props: NewRunParametersProps) { } // TODO(jlyaoyuli): If we have parameters from run, put original default value next to the paramKey const runtimeParametersWithDefault: RuntimeParameters = {}; + const runtimeParametersInRealType: RuntimeParameters = {}; let allParamtersWithDefault = true; let errMsg: string[] = []; Object.keys(specParameters).forEach(key => { @@ -218,6 +219,11 @@ function NewRunParametersV2(props: NewRunParametersProps) { key, specParameters[key].defaultValue, ); + // Convert to real type for handleParameterChange + runtimeParametersInRealType[key] = convertInput( + runtimeParametersWithDefault[key], + specParameters[key].parameterType, + ); } else { allParamtersWithDefault = false; errMsg[key] = 'Missing parameter.'; @@ -228,6 +234,11 @@ function NewRunParametersV2(props: NewRunParametersProps) { if (setIsValidInput) { setIsValidInput(allParamtersWithDefault); } + // Propagate default parameter values to parent component so they are included in runtime_config + // This ensures default parameters are visible in Compare Runs feature + if (handleParameterChange) { + handleParameterChange(runtimeParametersInRealType); + } }, [clonedRuntimeConfig, specParameters, handleParameterChange, setIsValidInput]); useEffect(() => {