paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

chore: reworking all the types for the different field extensions

Browse Source 
Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam
2022-02-23 08:32:28 +01:00
parent 61d091e705
commit 4bf93e6c29
12 changed files with 82 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx
+2 -2
View File
@@ -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<string>) => (
}: FieldExtensionComponentProps<string>) => (
<TextValuePicker schema={{ title, description }} {...props} />
);
plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx
+1 -35
View File
@@ -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('<EntityPicker />', () => {
});
});
});
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);
});
});
});
plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx
+22 -15
View File
@@ -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<string, EntityPickerUiOptions>,
) => {
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<string>) => {
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 => (
<TextField
{...params}
plugins/scaffolder/src/components/fields/EntityPicker/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { EntityPicker } from './EntityPicker';
export type { EntityPickerUiOptions } from './EntityPicker';
plugins/scaffolder/src/components/fields/EntityTagsPicker/EntityTagsPicker.tsx
+9 -7
View File
@@ -22,22 +22,24 @@ import { useApi } from '@backstage/core-plugin-api';
import { catalogApiRef } from '@backstage/plugin-catalog-react';
import { FormControl, TextField } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';
import { FieldProps } from '@rjsf/core';
import { FieldExtensionComponentProps } from '../../../extensions';
export interface EntityTagsPickerUiOptions {
kinds?: string[];
}
/**
* EntityTagsPicker
* @public
*/
export const EntityTagsPicker = ({
formData,
onChange,
uiSchema,
}: FieldProps<string[]>) => {
export const EntityTagsPicker = (
props: FieldExtensionComponentProps<string[], EntityTagsPickerUiOptions>,
) => {
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'] };
plugins/scaffolder/src/components/fields/EntityTagsPicker/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { EntityTagsPicker } from './EntityTagsPicker';
export type { EntityTagsPickerUiOptions } from './EntityTagsPicker';
plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx
+22 -12
View File
@@ -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<string>) => {
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<string, OwnedEntityPickerUiOptions>,
) => {
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
plugins/scaffolder/src/components/fields/OwnedEntityPicker/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { OwnedEntityPicker } from './OwnedEntityPicker';
export type { OwnedEntityPickerUiOptions } from './OwnedEntityPicker';
plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx
+15 -7
View File
@@ -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<string, OwnerPickerUiOptions>,
) => {
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<string>) => {
const ownerUiSchema = {
...uiSchema,
'ui:options': {
@@ -35,7 +43,7 @@ export const OwnerPicker = ({
return (
<EntityPicker
{...props}
{...restProps}
schema={{ title, description }}
uiSchema={ownerUiSchema}
/>
plugins/scaffolder/src/components/fields/OwnerPicker/index.ts
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
export { OwnerPicker } from './OwnerPicker';
export type { OwnerPickerUiOptions } from './OwnerPicker';
plugins/scaffolder/src/components/fields/TextValuePicker/TextValuePicker.tsx
+2 -2
View File
@@ -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<string>) => (
}: FieldExtensionComponentProps<string>) => (
<TextField
id={idSchema?.$id}
label={title}
plugins/scaffolder/src/components/fields/index.ts
+5 -7
View File
@@ -13,10 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './EntityNamePicker';
export * from './EntityPicker';
export * from './OwnerPicker';
export * from './RepoUrlPicker';
export * from './TextValuePicker';
export * from './OwnedEntityPicker';
export * from './EntityTagsPicker';
export type { EntityPickerUiOptions } from './EntityPicker';
export type { OwnerPickerUiOptions } from './OwnerPicker';
export type { RepoUrlPickerUiOptions } from './RepoUrlPicker';
export type { OwnedEntityPickerUiOptions } from './OwnedEntityPicker';
export type { EntityTagsPickerUiOptions } from './EntityTagsPicker';