From 4bf93e6c29d348b932273c61024437decd7275c5 Mon Sep 17 00:00:00 2001 From: blam Date: Wed, 23 Feb 2022 08:32:28 +0100 Subject: [PATCH] chore: reworking all the types for the different field extensions Signed-off-by: blam --- .../EntityNamePicker/EntityNamePicker.tsx | 4 +- .../fields/EntityPicker/EntityPicker.test.tsx | 36 +----------------- .../fields/EntityPicker/EntityPicker.tsx | 37 +++++++++++-------- .../components/fields/EntityPicker/index.ts | 1 + .../EntityTagsPicker/EntityTagsPicker.tsx | 16 ++++---- .../fields/EntityTagsPicker/index.ts | 1 + .../OwnedEntityPicker/OwnedEntityPicker.tsx | 34 +++++++++++------ .../fields/OwnedEntityPicker/index.ts | 1 + .../fields/OwnerPicker/OwnerPicker.tsx | 22 +++++++---- .../components/fields/OwnerPicker/index.ts | 1 + .../TextValuePicker/TextValuePicker.tsx | 4 +- .../scaffolder/src/components/fields/index.ts | 12 +++--- 12 files changed, 82 insertions(+), 87 deletions(-) diff --git a/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx b/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx index 8e7c0b0bea..f64c91b77f 100644 --- a/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx +++ b/plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx @@ -14,12 +14,12 @@ * limitations under the License. */ import React from 'react'; -import { FieldProps } from '@rjsf/core'; import { TextValuePicker } from '../TextValuePicker'; +import { FieldExtensionComponentProps } from '../../../extensions'; export const EntityNamePicker = ({ schema: { title = 'Name', description = 'Unique name of the component' }, ...props -}: FieldProps) => ( +}: FieldExtensionComponentProps) => ( ); diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx index 82f12ac0a3..48e642cb44 100644 --- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx @@ -20,7 +20,7 @@ import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { FieldProps } from '@rjsf/core'; import userEvent from '@testing-library/user-event'; import React from 'react'; -import { EntityPicker, allowArbitraryValues } from './EntityPicker'; +import { EntityPicker } from './EntityPicker'; const makeEntity = (kind: string, namespace: string, name: string): Entity => ({ apiVersion: 'backstage.io/v1beta1', @@ -136,37 +136,3 @@ describe('', () => { }); }); }); - -describe('allowArbitraryValues', () => { - describe('without ui:options', () => { - it('defaults to true', () => { - const uiSchema = {}; - const result = allowArbitraryValues(uiSchema); - expect(result).toBe(true); - }); - }); - - describe('without ui:options.allowArbitraryValues', () => { - it('defaults to true', () => { - const uiSchema = { 'ui:options': {} }; - const result = allowArbitraryValues(uiSchema); - expect(result).toBe(true); - }); - }); - - describe('with ui:options.allowArbitraryValues set to true', () => { - it('is true', () => { - const uiSchema = { 'ui:options': { allowArbitraryValues: true } }; - const result = allowArbitraryValues(uiSchema); - expect(result).toBe(true); - }); - }); - - describe('with ui:options.allowArbitraryValues set to false', () => { - it('is false', () => { - const uiSchema = { 'ui:options': { allowArbitraryValues: false } }; - const result = allowArbitraryValues(uiSchema); - expect(result).toBe(false); - }); - }); -}); diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx index 959e7883c0..3786d8d4a2 100644 --- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx +++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx @@ -21,24 +21,31 @@ import { import { TextField } from '@material-ui/core'; import FormControl from '@material-ui/core/FormControl'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import { FieldProps, UiSchema } from '@rjsf/core'; import React, { useCallback, useEffect } from 'react'; import useAsync from 'react-use/lib/useAsync'; +import { FieldExtensionComponentProps } from '../../../extensions'; -export const allowArbitraryValues = (uiSchema: UiSchema): boolean => - (uiSchema['ui:options']?.allowArbitraryValues as boolean) ?? true; +export interface EntityPickerUiOptions { + allowedKinds?: string[]; + defaultKind?: string; + allowArbitraryValues?: boolean; +} + +export const EntityPicker = ( + props: FieldExtensionComponentProps, +) => { + const { + onChange, + schema: { title = 'Entity', description = 'An entity from the catalog' }, + required, + uiSchema, + rawErrors, + formData, + idSchema, + } = props; + const allowedKinds = uiSchema['ui:options']?.allowedKinds ?? []; + const defaultKind = uiSchema['ui:options']?.defaultKind; -export const EntityPicker = ({ - onChange, - schema: { title = 'Entity', description = 'An entity from the catalog' }, - required, - uiSchema, - rawErrors, - formData, - idSchema, -}: FieldProps) => { - const allowedKinds = uiSchema['ui:options']?.allowedKinds as string[]; - const defaultKind = uiSchema['ui:options']?.defaultKind as string | undefined; const catalogApi = useApi(catalogApiRef); const { value: entities, loading } = useAsync(() => @@ -78,7 +85,7 @@ export const EntityPicker = ({ onChange={onSelect} options={entityRefs || []} autoSelect - freeSolo={allowArbitraryValues(uiSchema)} + freeSolo={uiSchema['ui:options']?.allowArbitraryValues} renderInput={params => ( ) => { +export const EntityTagsPicker = ( + props: FieldExtensionComponentProps, +) => { + const { formData, onChange, uiSchema } = props; const catalogApi = useApi(catalogApiRef); const [inputValue, setInputValue] = useState(''); const [inputError, setInputError] = useState(false); const tagValidator = makeValidator().isValidTag; - const kinds = uiSchema['ui:options']?.kinds as string[]; + const kinds = uiSchema['ui:options']?.kinds; const { loading, value: existingTags } = useAsync(async () => { const tagsRequest: GetEntitiesRequest = { fields: ['metadata.tags'] }; diff --git a/plugins/scaffolder/src/components/fields/EntityTagsPicker/index.ts b/plugins/scaffolder/src/components/fields/EntityTagsPicker/index.ts index 09f4d5c519..3ba36a2409 100644 --- a/plugins/scaffolder/src/components/fields/EntityTagsPicker/index.ts +++ b/plugins/scaffolder/src/components/fields/EntityTagsPicker/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { EntityTagsPicker } from './EntityTagsPicker'; +export type { EntityTagsPickerUiOptions } from './EntityTagsPicker'; diff --git a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx index 3c2fc2b495..71083b596e 100644 --- a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx +++ b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx @@ -20,20 +20,30 @@ import { import { TextField } from '@material-ui/core'; import FormControl from '@material-ui/core/FormControl'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import { FieldProps } from '@rjsf/core'; import React from 'react'; -export const OwnedEntityPicker = ({ - onChange, - schema: { title = 'Entity', description = 'An entity from the catalog' }, - required, - uiSchema, - rawErrors, - formData, - idSchema, -}: FieldProps) => { - const allowedKinds = uiSchema['ui:options']?.allowedKinds as string[]; - const defaultKind = uiSchema['ui:options']?.defaultKind as string | undefined; +import { FieldExtensionComponentProps } from '../../../extensions'; + +export interface OwnedEntityPickerUiOptions { + allowedKinds?: string[]; + defaultKind?: string; +} + +export const OwnedEntityPicker = ( + props: FieldExtensionComponentProps, +) => { + const { + onChange, + schema: { title = 'Entity', description = 'An entity from the catalog' }, + required, + uiSchema, + rawErrors, + formData, + idSchema, + } = props; + + const allowedKinds = uiSchema['ui:options']?.allowedKinds; + const defaultKind = uiSchema['ui:options']?.defaultKind; const { ownedEntities, loading } = useOwnedEntities(allowedKinds); const entityRefs = ownedEntities?.items diff --git a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/index.ts b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/index.ts index 7cf5add6eb..125f6fdef0 100644 --- a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/index.ts +++ b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { OwnedEntityPicker } from './OwnedEntityPicker'; +export type { OwnedEntityPickerUiOptions } from './OwnedEntityPicker'; diff --git a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx index dd02622ae9..cde1eba132 100644 --- a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx +++ b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx @@ -13,15 +13,23 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { FieldProps } from '@rjsf/core'; import React from 'react'; import { EntityPicker } from '../EntityPicker'; +import { FieldExtensionComponentProps } from '../../../extensions'; + +export interface OwnerPickerUiOptions { + allowedKinds?: string[]; +} + +export const OwnerPicker = ( + props: FieldExtensionComponentProps, +) => { + const { + schema: { title = 'Owner', description = 'The owner of the component' }, + uiSchema, + ...restProps + } = props; -export const OwnerPicker = ({ - schema: { title = 'Owner', description = 'The owner of the component' }, - uiSchema, - ...props -}: FieldProps) => { const ownerUiSchema = { ...uiSchema, 'ui:options': { @@ -35,7 +43,7 @@ export const OwnerPicker = ({ return ( diff --git a/plugins/scaffolder/src/components/fields/OwnerPicker/index.ts b/plugins/scaffolder/src/components/fields/OwnerPicker/index.ts index 801ed59c93..b8cb97eb97 100644 --- a/plugins/scaffolder/src/components/fields/OwnerPicker/index.ts +++ b/plugins/scaffolder/src/components/fields/OwnerPicker/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { OwnerPicker } from './OwnerPicker'; +export type { OwnerPickerUiOptions } from './OwnerPicker'; diff --git a/plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx b/plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx index 7bed7eedb9..fe81649132 100644 --- a/plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx +++ b/plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ import { TextField } from '@material-ui/core'; -import { FieldProps } from '@rjsf/core'; import React from 'react'; +import { FieldExtensionComponentProps } from '../../../extensions'; export const TextValuePicker = ({ onChange, @@ -26,7 +26,7 @@ export const TextValuePicker = ({ uiSchema: { 'ui:autofocus': autoFocus }, idSchema, placeholder, -}: FieldProps) => ( +}: FieldExtensionComponentProps) => (