First try, need to figure out how to pass entity ref as form data.

Signed-off-by: Aramis Sennyey <sennyeya@amazon.com>

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;

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 (
     <FormControl
@@ -85,12 +89,17 @@ export const EntityPicker = (props: EntityPickerProps) => {
       error={rawErrors?.length > 0 && !formData}
     >
       <Autocomplete
-        disabled={entityRefs?.length === 1}
+        disabled={entities?.length === 1}
         id={idSchema?.$id}
-        value={(formData as string) || ''}
+        value={entities?.find(e => 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 => (

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) => {
     >
       <Autocomplete
         id={idSchema?.$id}
-        value={(formData as string) || ''}
+        // value={(formData as string) || ''}
         loading={loading}
         onChange={onSelect}
-        options={entityRefs || []}
+        options={entities || []}
         autoSelect
         freeSolo={allowArbitraryValues}
         renderInput={params => (