Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(frontend) Support LIST, STRUCT type in RuntimeConfig parameters #7991

Merged
merged 20 commits into from
Jul 8, 2022
Merged

feat(frontend) Support LIST, STRUCT type in RuntimeConfig parameters #7991

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f6a4169
Convert string-type user input to real-type pararmeter. (Currently su…
jlyaoyuli Jun 21, 2022
643b23e
Delete unnecessary console.log
jlyaoyuli Jun 21, 2022
e5d0d68
Change incorrect type.
jlyaoyuli Jun 22, 2022
a5a8fc0
Format.
jlyaoyuli Jun 22, 2022
5e91dff
Move inputConverter out from function component.
jlyaoyuli Jun 22, 2022
2faedf8
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jun 22, 2022
ca71e50
Change inputConverter from if-else to switch.
jlyaoyuli Jun 22, 2022
b53aa87
1. Change paramTypeIdx to ParameterTypeEnum.
jlyaoyuli Jun 23, 2022
de688f5
Format
jlyaoyuli Jun 23, 2022
91a8f77
Support LIST and STRUCT type.
jlyaoyuli Jul 1, 2022
4a4225e
1. Fixed default value bugs.
jlyaoyuli Jul 6, 2022
d7628d8
Added type into param.
jlyaoyuli Jul 6, 2022
91fc887
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jul 6, 2022
29b452e
Added comment.
jlyaoyuli Jul 6, 2022
aeec427
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jul 6, 2022
65a8c80
Added unit test for invalid JSON form input.
jlyaoyuli Jul 6, 2022
1375a73
Removed incorrect merge conflicts.
jlyaoyuli Jul 6, 2022
3edc791
Support double type.
jlyaoyuli Jul 7, 2022
d8412a8
Clean unnecessary expect() in the unit tests.
jlyaoyuli Jul 8, 2022
f61293e
Added additional tests to check for the existence of display value 4.56
jlyaoyuli Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 64 additions & 13 deletions frontend/src/components/NewRunParametersV2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const strParam = screen.getByLabelText('strParam - STRING');
fireEvent.change(strParam, { target: { value: 'new string' } });
Expand All @@ -155,7 +155,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const boolParam = screen.getByDisplayValue('true');
fireEvent.change(boolParam, { target: { value: 'false' } });
Expand All @@ -178,7 +178,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const boolParam = screen.getByLabelText('boolParam - BOOLEAN');
fireEvent.change(boolParam, { target: { value: 'true' } });
Expand All @@ -201,7 +201,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const boolParam = screen.getByLabelText('boolParam - BOOLEAN');
fireEvent.change(boolParam, { target: { value: 'True' } });
Expand All @@ -225,7 +225,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const intParam = screen.getByDisplayValue('123');
fireEvent.change(intParam, { target: { value: '456' } });
Expand All @@ -248,7 +248,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const intParam = screen.getByLabelText('intParam - NUMBER_INTEGER');
fireEvent.change(intParam, { target: { value: '789' } });
Expand All @@ -271,7 +271,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const intParam = screen.getByLabelText('intParam - NUMBER_INTEGER');
fireEvent.change(intParam, { target: { value: '7.89' } });
Expand All @@ -281,6 +281,53 @@ describe('NewRunParametersV2', () => {
});
});

it('test convertInput function for double type with default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
doubleParam: {
parameterType: ParameterType_ParameterTypeEnum.NUMBER_DOUBLE,
defaultValue: 1.23,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const doubleParam = screen.getByDisplayValue('1.23');
fireEvent.change(doubleParam, { target: { value: '4.56' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
doubleParam: 4.56,
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For new tests: Please also check for the existence of display value 4.56. Just like we mentioned in https://github.com/kubeflow/pipelines/pull/7991/files#r916159217

});

it('test convertInput function for double type without default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
doubleParam: {
parameterType: ParameterType_ParameterTypeEnum.NUMBER_DOUBLE,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const doubleParam = screen.getByLabelText('doubleParam - NUMBER_DOUBLE');
fireEvent.change(doubleParam, { target: { value: '7.89' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
doubleParam: 7.89,
});
});

it('test convertInput function for LIST type with default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
Expand All @@ -295,14 +342,15 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const listParam = screen.getByDisplayValue('[1,2,3]');
fireEvent.change(listParam, { target: { value: '[4,5,6]' } });
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we check the screen now has [4,5,6]?

screen.getByDisplayValue('[4,5,6]');

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for all cases below.

expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: [4, 5, 6],
});
expect(screen.getByDisplayValue('[4,5,6]'));
});

it('test convertInput function for LIST type without default value', () => {
Expand All @@ -318,14 +366,15 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const listParam = screen.getByLabelText('listParam - LIST');
fireEvent.change(listParam, { target: { value: '[4,5,6]' } });
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: [4, 5, 6],
});
expect(screen.getByDisplayValue('[4,5,6]'));
});

it('test convertInput function for LIST type with invalid input (invalid JSON form)', () => {
Expand All @@ -341,7 +390,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const listParam = screen.getByLabelText('listParam - LIST');
fireEvent.change(listParam, { target: { value: '[4,5,6' } });
Expand All @@ -365,14 +414,15 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const structParam = screen.getByDisplayValue('{"A":1,"B":2}');
fireEvent.change(structParam, { target: { value: '{"C":3,"D":4}' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: { C: 3, D: 4 },
});
expect(screen.getByDisplayValue('{"C":3,"D":4}'));
});

it('test convertInput function for STRUCT type without default value', () => {
Expand All @@ -388,14 +438,15 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const structParam = screen.getByLabelText('structParam - STRUCT');
fireEvent.change(structParam, { target: { value: '{"A":1,"B":2}' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: { A: 1, B: 2 },
});
expect(screen.getByDisplayValue('{"A":1,"B":2}'));
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
});

it('test convertInput function for STRUCT type with invalid input (invalid JSON form)', () => {
Expand All @@ -411,7 +462,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const structParam = screen.getByLabelText('structParam - STRUCT');
fireEvent.change(structParam, { target: { value: '"A":1,"B":2' } });
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/components/NewRunParametersV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,11 @@ function convertInput(paramStr: string, paramType: ParameterType_ParameterTypeEn
return Number(paramStr);
}
return null;
case ParameterType_ParameterTypeEnum.NUMBER_DOUBLE:
if (!Number.isNaN(Number(paramStr))) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIT: Is it necessary to use Number()? Can we simplify it by using !Number.isNaN(paramStr)?

Copy link
Contributor Author

@jlyaoyuli jlyaoyuli Jul 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think so. The input of isNaN() should be number.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about !isNaN(paramStr)? If we can use the standard library to do conversion for us, it is preferred: https://www.w3schools.com/jsref/jsref_isnan.asp

return Number(paramStr);
}
return null;
case ParameterType_ParameterTypeEnum.LIST:
case ParameterType_ParameterTypeEnum.STRUCT:
try {
Expand Down Expand Up @@ -104,6 +109,7 @@ function NewRunParametersV2(props: NewRunParametersProps) {
break;
case ParameterType_ParameterTypeEnum.BOOLEAN:
case ParameterType_ParameterTypeEnum.NUMBER_INTEGER:
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
case ParameterType_ParameterTypeEnum.NUMBER_DOUBLE:
defaultValStr = props.specParameters[key].defaultValue.toString();
break;
default:
Expand Down Expand Up @@ -234,6 +240,7 @@ class ParamEditor extends React.Component<ParamEditorProps, ParamEditorState> {
case ParameterType_ParameterTypeEnum.STRING:
case ParameterType_ParameterTypeEnum.BOOLEAN:
case ParameterType_ParameterTypeEnum.NUMBER_INTEGER:
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
case ParameterType_ParameterTypeEnum.NUMBER_DOUBLE:
isJson = false;
break;
default:
Expand Down Expand Up @@ -273,7 +280,6 @@ class ParamEditor extends React.Component<ParamEditorProps, ParamEditorState> {
}

// TODO(zijianjoy): JSON format needs to be struct or list type.
// const displayValue = JSON.parse(param.value?.string_value || '');
if (this.state.isEditorOpen) {
onChange(JSON.stringify(displayValue) || '');
} else {
Expand Down