diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx index 59561aca1f7..ce26cadf293 100644 --- a/web-console/src/components/auto-form/auto-form.tsx +++ b/web-console/src/components/auto-form/auto-form.tsx @@ -50,6 +50,7 @@ export interface Field { placeholder?: Functor; min?: number; zeroMeansUndefined?: boolean; + height?: string; disabled?: Functor; defined?: Functor; required?: Functor; @@ -272,6 +273,7 @@ export class AutoForm> extends React.PureComponent value={deepGet(model as any, field.name)} onChange={(v: any) => this.fieldChange(field, v)} placeholder={AutoForm.evaluateFunctor(field.placeholder, model, '')} + height={field.height} /> ); } diff --git a/web-console/src/components/form-json-selector/__snapshots__/form-json-selector.spec.tsx.snap b/web-console/src/components/form-json-selector/__snapshots__/form-json-selector.spec.tsx.snap new file mode 100644 index 00000000000..d2ec2162028 --- /dev/null +++ b/web-console/src/components/form-json-selector/__snapshots__/form-json-selector.spec.tsx.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormJsonSelector matches snapshot form json 1`] = ` + + + + + + +`; + +exports[`FormJsonSelector matches snapshot form tab 1`] = ` + + + + + + +`; diff --git a/web-console/src/components/form-json-selector/form-json-selector.spec.tsx b/web-console/src/components/form-json-selector/form-json-selector.spec.tsx new file mode 100644 index 00000000000..ae7c3a9ee56 --- /dev/null +++ b/web-console/src/components/form-json-selector/form-json-selector.spec.tsx @@ -0,0 +1,36 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { shallow } from 'enzyme'; +import React from 'react'; + +import { FormJsonSelector } from './form-json-selector'; + +describe('FormJsonSelector', () => { + it('matches snapshot form tab', () => { + const formJsonSelector = shallow( {}} />); + + expect(formJsonSelector).toMatchSnapshot(); + }); + + it('matches snapshot form json', () => { + const formJsonSelector = shallow( {}} />); + + expect(formJsonSelector).toMatchSnapshot(); + }); +}); diff --git a/web-console/src/components/form-json-selector/form-json-selector.tsx b/web-console/src/components/form-json-selector/form-json-selector.tsx new file mode 100644 index 00000000000..49998260d2c --- /dev/null +++ b/web-console/src/components/form-json-selector/form-json-selector.tsx @@ -0,0 +1,40 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Button, ButtonGroup, FormGroup } from '@blueprintjs/core'; +import React from 'react'; + +export type FormJsonTabs = 'form' | 'json'; + +export interface FormJsonSelectorProps { + tab: FormJsonTabs; + onChange: (tab: FormJsonTabs) => void; +} + +export const FormJsonSelector = React.memo(function FormJsonSelector(props: FormJsonSelectorProps) { + const { tab, onChange } = props; + + return ( + + +