From 42b2f6542199be17ce410003ac2d0255c47bca1b Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Thu, 9 Feb 2023 20:37:29 -0500 Subject: [PATCH] First try, need to figure out how to pass entity ref as form data. Signed-off-by: Aramis Sennyey --- .../src/components/EntityRefLink/humanize.ts | 9 ++++ .../fields/EntityPicker/EntityPicker.tsx | 45 +++++++++++-------- .../OwnedEntityPicker/OwnedEntityPicker.tsx | 15 +++---- 3 files changed, 42 insertions(+), 27 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityRefLink/humanize.ts b/plugins/catalog-react/src/components/EntityRefLink/humanize.ts index bfc8e2af84..9abf0d7978 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/humanize.ts +++ b/plugins/catalog-react/src/components/EntityRefLink/humanize.ts @@ -18,6 +18,7 @@ import { Entity, CompoundEntityRef, DEFAULT_NAMESPACE, + UserEntity, } from '@backstage/catalog-model'; /** @@ -36,11 +37,19 @@ export function humanizeEntityRef( let kind; let namespace; let name; + console.log(entityRef); if ('metadata' in entityRef) { kind = entityRef.kind; namespace = entityRef.metadata.namespace; name = entityRef.metadata.name; + + // Escapes when we know more about an entity. + if (entityRef.metadata.title) { + return entityRef.metadata.title; + } else if ((entityRef as UserEntity).spec?.profile?.displayName) { + return (entityRef as UserEntity).spec?.profile?.displayName; + } } else { kind = entityRef.kind; namespace = entityRef.namespace; diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx index 48e60b60ad..0dc3e39fc4 100644 --- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx +++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ import { type EntityFilterQuery } from '@backstage/catalog-client'; +import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import { useApi } from '@backstage/core-plugin-api'; import { catalogApiRef, @@ -22,7 +23,7 @@ import { import { TextField } from '@material-ui/core'; import FormControl from '@material-ui/core/FormControl'; import Autocomplete from '@material-ui/lab/Autocomplete'; -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { EntityPickerProps } from './schema'; @@ -45,6 +46,7 @@ export const EntityPicker = (props: EntityPickerProps) => { idSchema, } = props; const allowedKinds = uiSchema['ui:options']?.allowedKinds; + console.log(formData); const catalogFilter: EntityFilterQuery | undefined = uiSchema['ui:options']?.catalogFilter || @@ -54,29 +56,31 @@ export const EntityPicker = (props: EntityPickerProps) => { const defaultNamespace = uiSchema['ui:options']?.defaultNamespace; const catalogApi = useApi(catalogApiRef); + const [value, setValue] = useState(formData); - const { value: entities, loading } = useAsync(() => - catalogApi.getEntities( + const { value: entities, loading } = useAsync(async () => { + const { items } = await catalogApi.getEntities( catalogFilter ? { filter: catalogFilter } : undefined, - ), - ); - - const entityRefs = entities?.items.map(e => - humanizeEntityRef(e, { defaultKind, defaultNamespace }), - ); + ); + return items; + }); const onSelect = useCallback( - (_: any, value: string | null) => { - onChange(value ?? undefined); + (_: any, ref: string | Entity | null) => { + let entityRef: string = typeof ref === 'string' ? ref : ''; + if (typeof ref !== 'string') + entityRef = ref ? stringifyEntityRef(ref as Entity) : ''; + setValue(entityRef); + onChange(entityRef); }, - [onChange], + [onChange, setValue], ); useEffect(() => { - if (entityRefs?.length === 1) { - onChange(entityRefs[0]); + if (entities?.length === 1) { + onChange(stringifyEntityRef(entities[0])); } - }, [entityRefs, onChange]); + }, [entities, onChange]); return ( { error={rawErrors?.length > 0 && !formData} > e.metadata.name === formData)} loading={loading} onChange={onSelect} - options={entityRefs || []} + options={entities || []} + getOptionLabel={option => + typeof option === 'string' + ? option + : humanizeEntityRef(option, { defaultKind, defaultNamespace })! + } autoSelect freeSolo={uiSchema['ui:options']?.allowArbitraryValues ?? true} renderInput={params => ( diff --git a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx index 01a174a6a3..6d80972f1b 100644 --- a/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx +++ b/plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { GetEntitiesResponse } from '@backstage/catalog-client'; -import { RELATION_OWNED_BY } from '@backstage/catalog-model'; +import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model'; import { identityApiRef, useApi } from '@backstage/core-plugin-api'; import { catalogApiRef, @@ -54,12 +54,9 @@ export const OwnedEntityPicker = (props: OwnedEntityPickerProps) => { uiSchema['ui:options']?.allowArbitraryValues ?? true; const { ownedEntities, loading } = useOwnedEntities(allowedKinds); - const entityRefs = ownedEntities?.items - .map(e => humanizeEntityRef(e, { defaultKind, defaultNamespace })) - .filter(n => n); - - const onSelect = (_: any, value: string | null) => { - onChange(value || ''); + const entities = ownedEntities?.items.filter(n => n); + const onSelect = (_: any, value: Entity | null) => { + onChange(value?.metadata.name || ''); }; return ( @@ -70,10 +67,10 @@ export const OwnedEntityPicker = (props: OwnedEntityPickerProps) => { > (