npm - @backstage/plugin-scaffolder - Versions diffs - 1.36.3-next.0 → 1.37.0-next.2 - Mend

@backstage/plugin-scaffolder 1.36.3-next.0 → 1.37.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/dist/components/fields/EntityPicker/EntityPicker.esm.js CHANGED Viewed

@@ -3,17 +3,19 @@ import { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
 import { stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef, entityPresentationApiRef, EntityDisplayName } from '@backstage/plugin-catalog-react';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
-import { useCallback, useEffect } from 'react';
+import MuiTextField from '@material-ui/core/TextField';
+import MuiAutocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
+import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { VirtualizedListbox } from '../VirtualizedListbox.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
-import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
+import { useScaffolderTheme, ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
 export { EntityPickerSchema } from './schema.esm.js';
 const EntityPicker = (props) => {
+  const theme = useScaffolderTheme();
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
     onChange,
@@ -98,11 +100,125 @@ const EntityPicker = (props) => {
     [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues]
   );
   const selectedEntity = entities?.catalogEntities.find((e) => stringifyEntityRef(e) === formData) ?? (allowArbitraryValues && formData ? getLabel(formData) : "");
+  const buiOptions = useMemo(
+    () => (entities?.catalogEntities || []).map((entity) => {
+      const entityRef = stringifyEntityRef(entity);
+      const presentation = entities?.entityRefToPresentation.get(entityRef);
+      return {
+        value: entityRef,
+        label: presentation?.primaryTitle || entityRef
+      };
+    }),
+    [entities]
+  );
+  const [inputValue, setInputValue] = useState(formData || "");
+  useEffect(() => {
+    if (formData) {
+      const opt = buiOptions.find((o) => o.value === formData);
+      setInputValue(opt?.label || formData);
+    } else {
+      setInputValue("");
+    }
+  }, [formData, buiOptions]);
+  const selectedKey = formData && buiOptions.some((o) => o.value === formData) ? formData : null;
+  const lastCommittedRef = useRef(formData);
+  useEffect(() => {
+    lastCommittedRef.current = formData;
+  }, [formData]);
+  const handleSelectionChange = useCallback(
+    (key) => {
+      if (key !== null) {
+        const value = String(key);
+        lastCommittedRef.current = value;
+        onChange(value);
+      } else if (allowArbitraryValues && inputValue) {
+        let entityRef = inputValue;
+        try {
+          entityRef = stringifyEntityRef(
+            parseEntityRef(inputValue, { defaultKind, defaultNamespace })
+          );
+        } catch {
+        }
+        lastCommittedRef.current = entityRef;
+        onChange(entityRef);
+      } else {
+        lastCommittedRef.current = void 0;
+        onChange(void 0);
+      }
+    },
+    [onChange, allowArbitraryValues, inputValue, defaultKind, defaultNamespace]
+  );
+  const handleBlur = useCallback(() => {
+    if (allowArbitraryValues && inputValue) {
+      let entityRef = inputValue;
+      try {
+        entityRef = stringifyEntityRef(
+          parseEntityRef(inputValue, { defaultKind, defaultNamespace })
+        );
+      } catch {
+      }
+      if (lastCommittedRef.current !== entityRef) {
+        lastCommittedRef.current = entityRef;
+        onChange(entityRef);
+      }
+    }
+  }, [
+    allowArbitraryValues,
+    inputValue,
+    defaultKind,
+    defaultNamespace,
+    onChange
+  ]);
   useEffect(() => {
-    if (required && !allowArbitraryValues && entities?.catalogEntities.length === 1 && selectedEntity === "") {
-      onChange(stringifyEntityRef(entities.catalogEntities[0]));
+    if (theme === "bui") {
+      if (required && !allowArbitraryValues && entities?.catalogEntities.length === 1 && !formData) {
+        onChange(stringifyEntityRef(entities.catalogEntities[0]));
+      }
+    } else {
+      if (required && !allowArbitraryValues && entities?.catalogEntities.length === 1 && selectedEntity === "") {
+        onChange(stringifyEntityRef(entities.catalogEntities[0]));
+      }
     }
-  }, [entities, onChange, selectedEntity, required, allowArbitraryValues]);
+  }, [
+    entities,
+    onChange,
+    selectedEntity,
+    formData,
+    required,
+    allowArbitraryValues,
+    theme
+  ]);
+  if (theme === "bui") {
+    const isAutoSelected = required && !allowArbitraryValues && entities?.catalogEntities.length === 1;
+    return /* @__PURE__ */ jsx(
+      ScaffolderField,
+      {
+        rawErrors,
+        rawDescription: uiSchema["ui:description"] ?? description,
+        required,
+        disabled: isDisabled,
+        errors,
+        children: /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            id: idSchema?.$id,
+            label: title,
+            isRequired: required,
+            isDisabled: isDisabled || isAutoSelected,
+            selectedKey,
+            inputValue,
+            onInputChange: setInputValue,
+            onSelectionChange: handleSelectionChange,
+            onBlur: handleBlur,
+            isLoading: loading,
+            options: buiOptions,
+            allowsCustomValue: allowArbitraryValues,
+            isInvalid: rawErrors && rawErrors.length > 0
+          }
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     ScaffolderField,
     {
@@ -112,7 +228,7 @@ const EntityPicker = (props) => {
       disabled: isDisabled,
       errors,
       children: /* @__PURE__ */ jsx(
-        Autocomplete,
+        MuiAutocomplete,
         {
           disabled: isDisabled || required && !allowArbitraryValues && entities?.catalogEntities.length === 1,
           id: idSchema?.$id,
@@ -127,7 +243,7 @@ const EntityPicker = (props) => {
           autoSelect,
           freeSolo: allowArbitraryValues,
           renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
+            MuiTextField,
             {
               ...params,
               label: title,

package/dist/components/fields/EntityPicker/EntityPicker.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityPicker.esm.js","sources":["../../../../src/components/fields/EntityPicker/EntityPicker.tsx"],"sourcesContent":["/\n Copyright 2021 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\nimport {\n type EntityFilterQuery,\n CATALOG_FILTER_EXISTS,\n} from '@backstage/catalog-client';\nimport {\n Entity,\n parseEntityRef,\n stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n EntityDisplayName,\n EntityRefPresentationSnapshot,\n catalogApiRef,\n entityPresentationApiRef,\n} from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete, {\n AutocompleteChangeReason,\n createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport { useCallback, useEffect } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n EntityPickerFilterQueryValue,\n EntityPickerProps,\n EntityPickerUiOptions,\n EntityPickerFilterQuery,\n} from './schema';\nimport { VirtualizedListbox } from '../VirtualizedListbox';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';\n\nexport { EntityPickerSchema } from './schema';\n\n/\n The underlying component that is rendered in the form for the `EntityPicker`\n * field extension.\n \n @public\n /\nexport const EntityPicker = (props: EntityPickerProps) => {\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const {\n onChange,\n schema: {\n title = t('fields.entityPicker.title'),\n description = t('fields.entityPicker.description'),\n },\n required,\n uiSchema,\n rawErrors,\n formData,\n idSchema,\n errors,\n } = props;\n const catalogFilter = buildCatalogFilter(uiSchema);\n const defaultKind = uiSchema['ui:options']?.defaultKind;\n const defaultNamespace =\n uiSchema['ui:options']?.defaultNamespace \|\| undefined;\n const autoSelect = uiSchema?.['ui:options']?.autoSelect ?? true;\n const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n const catalogApi = useApi(catalogApiRef);\n const entityPresentationApi = useApi(entityPresentationApiRef);\n\n const { value: entities, loading } = useAsync(async () => {\n const fields = [\n 'kind',\n 'metadata.name',\n 'metadata.namespace',\n 'metadata.title',\n 'metadata.description',\n 'spec.profile.displayName',\n 'spec.type',\n ];\n const { items } = await catalogApi.getEntities(\n catalogFilter\n ? { filter: catalogFilter, fields }\n : { filter: undefined, fields },\n );\n\n const entityRefToPresentation = new Map<\n string,\n EntityRefPresentationSnapshot\n >(\n await Promise.all(\n items.map(async item => {\n const presentation = await entityPresentationApi.forEntity(item)\n .promise;\n return [stringifyEntityRef(item), presentation] as [\n string,\n EntityRefPresentationSnapshot,\n ];\n }),\n ),\n );\n\n return { catalogEntities: items, entityRefToPresentation };\n });\n\n const allowArbitraryValues =\n uiSchema['ui:options']?.allowArbitraryValues ?? true;\n\n const getLabel = useCallback(\n (freeSoloValue: string) => {\n try {\n // Will throw if defaultKind or defaultNamespace are not set\n const parsedRef = parseEntityRef(freeSoloValue, {\n defaultKind,\n defaultNamespace,\n });\n\n return stringifyEntityRef(parsedRef);\n } catch (err) {\n return freeSoloValue;\n }\n },\n [defaultKind, defaultNamespace],\n );\n\n const onSelect = useCallback(\n (_: any, ref: string \| Entity \| null, reason: AutocompleteChangeReason) => {\n // ref can either be a string from free solo entry or\n if (typeof ref !== 'string') {\n // if ref does not exist: pass 'undefined' to trigger validation for required value\n onChange(ref ? stringifyEntityRef(ref as Entity) : undefined);\n } else {\n if (reason === 'blur' \|\| reason === 'create-option') {\n // Add in default namespace, etc.\n let entityRef = ref;\n try {\n // Attempt to parse the entity ref into it's full form.\n entityRef = stringifyEntityRef(\n parseEntityRef(ref as string, {\n defaultKind,\n defaultNamespace,\n }),\n );\n } catch (err) {\n // If the passed in value isn't an entity ref, do nothing.\n }\n // We need to check against formData here as that's the previous value for this field.\n if (formData !== ref \|\| allowArbitraryValues) {\n onChange(entityRef);\n }\n }\n }\n },\n [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues],\n );\n\n // Since free solo can be enabled, attempt to parse as a full entity ref first, then fall\n // back to the given value.\n const selectedEntity =\n entities?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ??\n (allowArbitraryValues && formData ? getLabel(formData) : '');\n\n useEffect(() => {\n if (\n required &&\n !allowArbitraryValues &&\n entities?.catalogEntities.length === 1 &&\n selectedEntity === ''\n ) {\n onChange(stringifyEntityRef(entities.catalogEntities[0]));\n }\n }, [entities, onChange, selectedEntity, required, allowArbitraryValues]);\n\n return (\n <ScaffolderField\n rawErrors={rawErrors}\n rawDescription={uiSchema['ui:description'] ?? description}\n required={required}\n disabled={isDisabled}\n errors={errors}\n >\n <Autocomplete\n disabled={\n isDisabled \|\|\n (required &&\n !allowArbitraryValues &&\n entities?.catalogEntities.length === 1)\n }\n id={idSchema?.$id}\n value={selectedEntity}\n loading={loading}\n onChange={onSelect}\n options={entities?.catalogEntities \|\| []}\n getOptionLabel={option =>\n // option can be a string due to freeSolo.\n typeof option === 'string'\n ? option\n : entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n ?.entityRef!\n }\n autoSelect={autoSelect}\n freeSolo={allowArbitraryValues}\n renderInput={params => (\n <TextField\n {...params}\n label={title}\n margin=\"dense\"\n variant=\"outlined\"\n required={required}\n disabled={isDisabled}\n InputProps={params.InputProps}\n />\n )}\n renderOption={option => <EntityDisplayName entityRef={option} />}\n filterOptions={createFilterOptions<Entity>({\n stringify: option =>\n entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n ?.primaryTitle!,\n })}\n ListboxComponent={VirtualizedListbox}\n />\n </ScaffolderField>\n );\n};\n\n/\n Converts a especial `{exists: true}` value to the `CATALOG_FILTER_EXISTS` symbol.\n \n @param value - The value to convert.\n * @returns The converted value.\n /\nfunction convertOpsValues(\n value: Exclude<EntityPickerFilterQueryValue, Array<any>>,\n): string \| symbol {\n if (typeof value === 'object' && value.exists) {\n return CATALOG_FILTER_EXISTS;\n }\n return value?.toString();\n}\n\n/\n Converts schema filters to entity filter query, replacing `{exists:true}` values\n * with the constant `CATALOG_FILTER_EXISTS`.\n \n @param schemaFilters - An object containing schema filters with keys as filter names\n * and values as filter values.\n * @returns An object with the same keys as the input object, but with `{exists:true}` values\n * transformed to `CATALOG_FILTER_EXISTS` symbol.\n /\nfunction convertSchemaFiltersToQuery(\n schemaFilters: EntityPickerFilterQuery,\n): Exclude<EntityFilterQuery, Array<any>> {\n const query: EntityFilterQuery = {};\n\n for (const [key, value] of Object.entries(schemaFilters)) {\n if (Array.isArray(value)) {\n query[key] = value;\n } else {\n query[key] = convertOpsValues(value);\n }\n }\n\n return query;\n}\n\n/\n Builds an `EntityFilterQuery` based on the `uiSchema` passed in.\n * If `catalogFilter` is specified in the `uiSchema`, it is converted to a `EntityFilterQuery`.\n * If `allowedKinds` is specified in the `uiSchema` will support the legacy `allowedKinds` option.\n \n @param uiSchema The `uiSchema` of an `EntityPicker` component.\n * @returns An `EntityFilterQuery` based on the `uiSchema`, or `undefined` if `catalogFilter` is not specified in the `uiSchema`.\n */\nfunction buildCatalogFilter(\n uiSchema: EntityPickerProps['uiSchema'],\n): EntityFilterQuery \| undefined {\n const allowedKinds = uiSchema['ui:options']?.allowedKinds;\n\n const catalogFilter: EntityPickerUiOptions['catalogFilter'] \| undefined =\n uiSchema['ui:options']?.catalogFilter \|\|\n (allowedKinds && { kind: allowedKinds });\n\n if (!catalogFilter) {\n return undefined;\n }\n\n if (Array.isArray(catalogFilter)) {\n return catalogFilter.map(convertSchemaFiltersToQuery);\n }\n\n return convertSchemaFiltersToQuery(catalogFilter);\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"EntityPicker.esm.js","sources":["../../../../src/components/fields/EntityPicker/EntityPicker.tsx"],"sourcesContent":["/\n Copyright 2021 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\nimport {\n type EntityFilterQuery,\n CATALOG_FILTER_EXISTS,\n} from '@backstage/catalog-client';\nimport {\n Entity,\n parseEntityRef,\n stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n EntityDisplayName,\n EntityRefPresentationSnapshot,\n catalogApiRef,\n entityPresentationApiRef,\n} from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete, {\n AutocompleteChangeReason,\n createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport {\n type Key,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n EntityPickerFilterQueryValue,\n EntityPickerProps,\n EntityPickerUiOptions,\n EntityPickerFilterQuery,\n} from './schema';\nimport { VirtualizedListbox } from '../VirtualizedListbox';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport {\n ScaffolderField,\n useScaffolderTheme,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { Autocomplete as BuiAutocomplete } from '../Autocomplete';\n\nexport { EntityPickerSchema } from './schema';\n\n/\n The underlying component that is rendered in the form for the `EntityPicker`\n * field extension.\n \n @public\n /\nexport const EntityPicker = (props: EntityPickerProps) => {\n const theme = useScaffolderTheme();\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const {\n onChange,\n schema: {\n title = t('fields.entityPicker.title'),\n description = t('fields.entityPicker.description'),\n },\n required,\n uiSchema,\n rawErrors,\n formData,\n idSchema,\n errors,\n } = props;\n const catalogFilter = buildCatalogFilter(uiSchema);\n const defaultKind = uiSchema['ui:options']?.defaultKind;\n const defaultNamespace =\n uiSchema['ui:options']?.defaultNamespace \|\| undefined;\n const autoSelect = uiSchema?.['ui:options']?.autoSelect ?? true;\n const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n const catalogApi = useApi(catalogApiRef);\n const entityPresentationApi = useApi(entityPresentationApiRef);\n\n const { value: entities, loading } = useAsync(async () => {\n const fields = [\n 'kind',\n 'metadata.name',\n 'metadata.namespace',\n 'metadata.title',\n 'metadata.description',\n 'spec.profile.displayName',\n 'spec.type',\n ];\n const { items } = await catalogApi.getEntities(\n catalogFilter\n ? { filter: catalogFilter, fields }\n : { filter: undefined, fields },\n );\n\n const entityRefToPresentation = new Map<\n string,\n EntityRefPresentationSnapshot\n >(\n await Promise.all(\n items.map(async item => {\n const presentation = await entityPresentationApi.forEntity(item)\n .promise;\n return [stringifyEntityRef(item), presentation] as [\n string,\n EntityRefPresentationSnapshot,\n ];\n }),\n ),\n );\n\n return { catalogEntities: items, entityRefToPresentation };\n });\n\n const allowArbitraryValues =\n uiSchema['ui:options']?.allowArbitraryValues ?? true;\n\n const getLabel = useCallback(\n (freeSoloValue: string) => {\n try {\n // Will throw if defaultKind or defaultNamespace are not set\n const parsedRef = parseEntityRef(freeSoloValue, {\n defaultKind,\n defaultNamespace,\n });\n\n return stringifyEntityRef(parsedRef);\n } catch (err) {\n return freeSoloValue;\n }\n },\n [defaultKind, defaultNamespace],\n );\n\n const onSelect = useCallback(\n (_: any, ref: string \| Entity \| null, reason: AutocompleteChangeReason) => {\n // ref can either be a string from free solo entry or\n if (typeof ref !== 'string') {\n // if ref does not exist: pass 'undefined' to trigger validation for required value\n onChange(ref ? stringifyEntityRef(ref as Entity) : undefined);\n } else {\n if (reason === 'blur' \|\| reason === 'create-option') {\n // Add in default namespace, etc.\n let entityRef = ref;\n try {\n // Attempt to parse the entity ref into it's full form.\n entityRef = stringifyEntityRef(\n parseEntityRef(ref as string, {\n defaultKind,\n defaultNamespace,\n }),\n );\n } catch (err) {\n // If the passed in value isn't an entity ref, do nothing.\n }\n // We need to check against formData here as that's the previous value for this field.\n if (formData !== ref \|\| allowArbitraryValues) {\n onChange(entityRef);\n }\n }\n }\n },\n [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues],\n );\n\n // Since free solo can be enabled, attempt to parse as a full entity ref first, then\n // fall back to the given value.\n const selectedEntity =\n entities?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ??\n (allowArbitraryValues && formData ? getLabel(formData) : '');\n\n // BUI: options for autocomplete\n const buiOptions = useMemo(\n () =>\n (entities?.catalogEntities \|\| []).map(entity => {\n const entityRef = stringifyEntityRef(entity);\n const presentation = entities?.entityRefToPresentation.get(entityRef);\n return {\n value: entityRef,\n label: presentation?.primaryTitle \|\| entityRef,\n };\n }),\n [entities],\n );\n\n // BUI: controlled input value\n const [inputValue, setInputValue] = useState(formData \|\| '');\n\n useEffect(() => {\n if (formData) {\n const opt = buiOptions.find(o => o.value === formData);\n setInputValue(opt?.label \|\| formData);\n } else {\n setInputValue('');\n }\n }, [formData, buiOptions]);\n\n const selectedKey =\n formData && buiOptions.some(o => o.value === formData) ? formData : null;\n\n const lastCommittedRef = useRef(formData);\n\n useEffect(() => {\n lastCommittedRef.current = formData;\n }, [formData]);\n\n const handleSelectionChange = useCallback(\n (key: Key \| null) => {\n if (key !== null) {\n const value = String(key);\n lastCommittedRef.current = value;\n onChange(value);\n } else if (allowArbitraryValues && inputValue) {\n let entityRef = inputValue;\n try {\n entityRef = stringifyEntityRef(\n parseEntityRef(inputValue, { defaultKind, defaultNamespace }),\n );\n } catch {\n // If the input isn't a valid entity ref, use it as-is\n }\n lastCommittedRef.current = entityRef;\n onChange(entityRef);\n } else {\n lastCommittedRef.current = undefined;\n onChange(undefined);\n }\n },\n [onChange, allowArbitraryValues, inputValue, defaultKind, defaultNamespace],\n );\n\n const handleBlur = useCallback(() => {\n if (allowArbitraryValues && inputValue) {\n let entityRef = inputValue;\n try {\n entityRef = stringifyEntityRef(\n parseEntityRef(inputValue, { defaultKind, defaultNamespace }),\n );\n } catch {\n // If the input isn't a valid entity ref, use it as-is\n }\n if (lastCommittedRef.current !== entityRef) {\n lastCommittedRef.current = entityRef;\n onChange(entityRef);\n }\n }\n }, [\n allowArbitraryValues,\n inputValue,\n defaultKind,\n defaultNamespace,\n onChange,\n ]);\n\n // Auto-select when only one entity and required\n useEffect(() => {\n if (theme === 'bui') {\n if (\n required &&\n !allowArbitraryValues &&\n entities?.catalogEntities.length === 1 &&\n !formData\n ) {\n onChange(stringifyEntityRef(entities.catalogEntities[0]));\n }\n } else {\n if (\n required &&\n !allowArbitraryValues &&\n entities?.catalogEntities.length === 1 &&\n selectedEntity === ''\n ) {\n onChange(stringifyEntityRef(entities.catalogEntities[0]));\n }\n }\n }, [\n entities,\n onChange,\n selectedEntity,\n formData,\n required,\n allowArbitraryValues,\n theme,\n ]);\n\n if (theme === 'bui') {\n const isAutoSelected =\n required &&\n !allowArbitraryValues &&\n entities?.catalogEntities.length === 1;\n\n return (\n <ScaffolderField\n rawErrors={rawErrors}\n rawDescription={uiSchema['ui:description'] ?? description}\n required={required}\n disabled={isDisabled}\n errors={errors}\n >\n <BuiAutocomplete\n id={idSchema?.$id}\n label={title}\n isRequired={required}\n isDisabled={isDisabled \|\| isAutoSelected}\n selectedKey={selectedKey}\n inputValue={inputValue}\n onInputChange={setInputValue}\n onSelectionChange={handleSelectionChange}\n onBlur={handleBlur}\n isLoading={loading}\n options={buiOptions}\n allowsCustomValue={allowArbitraryValues}\n isInvalid={rawErrors && rawErrors.length > 0}\n />\n </ScaffolderField>\n );\n }\n\n return (\n <ScaffolderField\n rawErrors={rawErrors}\n rawDescription={uiSchema['ui:description'] ?? description}\n required={required}\n disabled={isDisabled}\n errors={errors}\n >\n <Autocomplete\n disabled={\n isDisabled \|\|\n (required &&\n !allowArbitraryValues &&\n entities?.catalogEntities.length === 1)\n }\n id={idSchema?.$id}\n value={selectedEntity}\n loading={loading}\n onChange={onSelect}\n options={entities?.catalogEntities \|\| []}\n getOptionLabel={option =>\n // option can be a string due to freeSolo.\n typeof option === 'string'\n ? option\n : entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n ?.entityRef!\n }\n autoSelect={autoSelect}\n freeSolo={allowArbitraryValues}\n renderInput={params => (\n <TextField\n {...params}\n label={title}\n margin=\"dense\"\n variant=\"outlined\"\n required={required}\n disabled={isDisabled}\n InputProps={params.InputProps}\n />\n )}\n renderOption={option => <EntityDisplayName entityRef={option} />}\n filterOptions={createFilterOptions<Entity>({\n stringify: option =>\n entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n ?.primaryTitle!,\n })}\n ListboxComponent={VirtualizedListbox}\n />\n </ScaffolderField>\n );\n};\n\n/\n Converts a especial `{exists: true}` value to the `CATALOG_FILTER_EXISTS` symbol.\n \n @param value - The value to convert.\n * @returns The converted value.\n /\nfunction convertOpsValues(\n value: Exclude<EntityPickerFilterQueryValue, Array<any>>,\n): string \| symbol {\n if (typeof value === 'object' && value.exists) {\n return CATALOG_FILTER_EXISTS;\n }\n return value?.toString();\n}\n\n/\n Converts schema filters to entity filter query, replacing `{exists:true}` values\n * with the constant `CATALOG_FILTER_EXISTS`.\n \n @param schemaFilters - An object containing schema filters with keys as filter names\n * and values as filter values.\n * @returns An object with the same keys as the input object, but with `{exists:true}` values\n * transformed to `CATALOG_FILTER_EXISTS` symbol.\n /\nfunction convertSchemaFiltersToQuery(\n schemaFilters: EntityPickerFilterQuery,\n): Exclude<EntityFilterQuery, Array<any>> {\n const query: EntityFilterQuery = {};\n\n for (const [key, value] of Object.entries(schemaFilters)) {\n if (Array.isArray(value)) {\n query[key] = value;\n } else {\n query[key] = convertOpsValues(value);\n }\n }\n\n return query;\n}\n\n/\n Builds an `EntityFilterQuery` based on the `uiSchema` passed in.\n * If `catalogFilter` is specified in the `uiSchema`, it is converted to a `EntityFilterQuery`.\n * If `allowedKinds` is specified in the `uiSchema` will support the legacy `allowedKinds` option.\n \n @param uiSchema The `uiSchema` of an `EntityPicker` component.\n * @returns An `EntityFilterQuery` based on the `uiSchema`, or `undefined` if `catalogFilter` is not specified in the `uiSchema`.\n */\nfunction buildCatalogFilter(\n uiSchema: EntityPickerProps['uiSchema'],\n): EntityFilterQuery \| undefined {\n const allowedKinds = uiSchema['ui:options']?.allowedKinds;\n\n const catalogFilter: EntityPickerUiOptions['catalogFilter'] \| undefined =\n uiSchema['ui:options']?.catalogFilter \|\|\n (allowedKinds && { kind: allowedKinds });\n\n if (!catalogFilter) {\n return undefined;\n }\n\n if (Array.isArray(catalogFilter)) {\n return catalogFilter.map(convertSchemaFiltersToQuery);\n }\n\n return convertSchemaFiltersToQuery(catalogFilter);\n}\n"],"names":["BuiAutocomplete","Autocomplete","TextField"],"mappings":"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"}

package/dist/components/fields/EntityTagsPicker/EntityTagsPicker.esm.js CHANGED Viewed

@@ -1,18 +1,21 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import useEffectOnce from 'react-use/esm/useEffectOnce';
 import { makeValidator } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import MuiTextField from '@material-ui/core/TextField';
+import MuiAutocomplete from '@material-ui/lab/Autocomplete';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
-import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
+import { useScaffolderTheme, ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
+import { chipStyle, chipRemoveStyle } from '../buiChipStyles.esm.js';
 export { EntityTagsPickerSchema } from './schema.esm.js';
 const EntityTagsPicker = (props) => {
+  const theme = useScaffolderTheme();
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
     formData,
@@ -67,7 +70,103 @@ const EntityTagsPicker = (props) => {
       onChange(values || []);
     }
   };
+  const buiTagOptions = useMemo(() => {
+    if (!existingTags) return [];
+    return Object.keys(existingTags).sort(
+      (a, b) => showCounts ? existingTags[b] - existingTags[a] : a.localeCompare(b)
+    );
+  }, [existingTags, showCounts]);
+  const selectedTags = useMemo(() => formData || [], [formData]);
+  const availableOptions = useMemo(
+    () => buiTagOptions.filter((tag) => !selectedTags.includes(tag)).map((tag) => ({
+      value: tag,
+      label: showCounts && existingTags ? `${tag} (${existingTags[tag]})` : tag
+    })),
+    [buiTagOptions, selectedTags, showCounts, existingTags]
+  );
+  const handleSelectionChange = useCallback(
+    (key) => {
+      if (key !== null) {
+        const tag = String(key);
+        if (!selectedTags.includes(tag)) {
+          onChange([...selectedTags, tag]);
+        }
+        setInputValue("");
+        setInputError(false);
+      } else if (inputValue) {
+        const newTag = inputValue.toLocaleLowerCase("en-US").trim();
+        const isValid = tagValidator(newTag);
+        const isDuplicate = selectedTags.includes(newTag);
+        setInputError(!isValid);
+        if (isValid && !isDuplicate) {
+          onChange([...selectedTags, newTag]);
+          setInputValue("");
+        }
+      }
+    },
+    [selectedTags, onChange, inputValue, tagValidator]
+  );
+  const handleRemove = useCallback(
+    (tag) => {
+      onChange(selectedTags.filter((item) => item !== tag));
+    },
+    [selectedTags, onChange]
+  );
   useEffectOnce(() => onChange(formData || []));
+  if (theme === "bui") {
+    return /* @__PURE__ */ jsx(
+      ScaffolderField,
+      {
+        rawErrors,
+        rawDescription: helperText ?? uiSchema["ui:description"] ?? description,
+        required,
+        disabled: isDisabled,
+        errors,
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          selectedTags.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "var(--bui-space-1)",
+                marginBottom: "var(--bui-space-2)"
+              },
+              children: selectedTags.map((tag) => /* @__PURE__ */ jsxs("span", { style: chipStyle, children: [
+                tag,
+                !isDisabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleRemove(tag),
+                    style: chipRemoveStyle,
+                    "aria-label": `Remove ${tag}`,
+                    children: "\xD7"
+                  }
+                )
+              ] }, tag))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              label: title,
+              isRequired: required,
+              isDisabled,
+              selectedKey: null,
+              inputValue,
+              onInputChange: setInputValue,
+              onSelectionChange: handleSelectionChange,
+              isLoading: loading,
+              options: availableOptions,
+              allowsCustomValue: true,
+              isInvalid: inputError || rawErrors && rawErrors.length > 0
+            }
+          )
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     ScaffolderField,
     {
@@ -77,7 +176,7 @@ const EntityTagsPicker = (props) => {
       disabled: isDisabled,
       errors,
       children: /* @__PURE__ */ jsx(
-        Autocomplete,
+        MuiAutocomplete,
         {
           multiple: true,
           freeSolo: true,
@@ -91,7 +190,7 @@ const EntityTagsPicker = (props) => {
           ChipProps: { size: "small" },
           renderOption: (option) => showCounts ? `${option} (${existingTags?.[option]})` : option,
           renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
+            MuiTextField,
             {
               ...params,
               label: title,

package/dist/components/fields/EntityTagsPicker/EntityTagsPicker.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityTagsPicker.esm.js","sources":["../../../../src/components/fields/EntityTagsPicker/EntityTagsPicker.tsx"],"sourcesContent":["/\n Copyright 2021 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\nimport { ChangeEvent, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport useEffectOnce from 'react-use/esm/useEffectOnce';\nimport { GetEntityFacetsRequest } from '@backstage/catalog-client';\nimport { makeValidator } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { EntityTagsPickerProps } from './schema';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';\n\nexport { EntityTagsPickerSchema } from './schema';\n\n/\n The underlying component that is rendered in the form for the `EntityTagsPicker`\n * field extension.\n \n @public\n */\nexport const EntityTagsPicker = (props: EntityTagsPickerProps) => {\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const {\n formData,\n onChange,\n schema: {\n title = t('fields.entityTagsPicker.title'),\n description = t('fields.entityTagsPicker.description'),\n },\n uiSchema,\n rawErrors,\n required,\n errors,\n } = props;\n const catalogApi = useApi(catalogApiRef);\n const [tagOptions, setTagOptions] = useState<string[]>([]);\n const [inputValue, setInputValue] = useState('');\n const [inputError, setInputError] = useState(false);\n const tagValidator = makeValidator().isValidTag;\n const kinds = uiSchema['ui:options']?.kinds;\n const showCounts = uiSchema['ui:options']?.showCounts;\n const helperText = uiSchema['ui:options']?.helperText;\n const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n const { loading, value: existingTags } = useAsync(async () => {\n const facet = 'metadata.tags';\n const tagsRequest: GetEntityFacetsRequest = { facets: [facet] };\n if (kinds) {\n tagsRequest.filter = { kind: kinds };\n }\n\n const { facets } = await catalogApi.getEntityFacets(tagsRequest);\n\n const tagFacets = Object.fromEntries(\n facets[facet].map(({ value, count }) => [value, count]),\n );\n\n setTagOptions(\n Object.keys(tagFacets).sort((a, b) =>\n showCounts ? tagFacets[b] - tagFacets[a] : a.localeCompare(b),\n ),\n );\n\n return tagFacets;\n });\n\n const setTags = (_: ChangeEvent<{}>, values: string[] \| null) => {\n // Reset error state in case all tags were removed\n let hasError = false;\n let addDuplicate = false;\n const currentTags = formData \|\| [];\n\n // If adding a new tag\n if (values?.length && currentTags.length < values.length) {\n const newTag = (values[values.length - 1] = values[values.length - 1]\n .toLocaleLowerCase('en-US')\n .trim());\n hasError = !tagValidator(newTag);\n addDuplicate = currentTags.indexOf(newTag) !== -1;\n }\n\n setInputError(hasError);\n setInputValue(!hasError ? '' : inputValue);\n if (!hasError && !addDuplicate) {\n onChange(values \|\| []);\n }\n };\n\n // Initialize field to always return an array\n useEffectOnce(() => onChange(formData \|\| []));\n\n return (\n <ScaffolderField\n rawErrors={rawErrors}\n rawDescription={helperText ?? uiSchema['ui:description'] ?? description}\n required={required}\n disabled={isDisabled}\n errors={errors}\n >\n <Autocomplete\n multiple\n freeSolo\n filterSelectedOptions\n onChange={setTags}\n disabled={isDisabled}\n value={formData \|\| []}\n inputValue={inputValue}\n loading={loading}\n options={tagOptions}\n ChipProps={{ size: 'small' }}\n renderOption={option =>\n showCounts ? `${option} (${existingTags?.[option]})` : option\n }\n renderInput={params => (\n <TextField\n {...params}\n label={title}\n disabled={isDisabled}\n onChange={e => setInputValue(e.target.value)}\n error={inputError}\n FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n />\n )}\n />\n </ScaffolderField>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"EntityTagsPicker.esm.js","sources":["../../../../src/components/fields/EntityTagsPicker/EntityTagsPicker.tsx"],"sourcesContent":["/\n Copyright 2021 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\nimport { type Key, ChangeEvent, useCallback, useMemo, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport useEffectOnce from 'react-use/esm/useEffectOnce';\nimport { GetEntityFacetsRequest } from '@backstage/catalog-client';\nimport { makeValidator } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { EntityTagsPickerProps } from './schema';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport {\n ScaffolderField,\n useScaffolderTheme,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { Autocomplete as BuiAutocomplete } from '../Autocomplete';\nimport { chipStyle, chipRemoveStyle } from '../buiChipStyles';\n\nexport { EntityTagsPickerSchema } from './schema';\n\n/\n The underlying component that is rendered in the form for the `EntityTagsPicker`\n * field extension.\n \n @public\n */\nexport const EntityTagsPicker = (props: EntityTagsPickerProps) => {\n const theme = useScaffolderTheme();\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const {\n formData,\n onChange,\n schema: {\n title = t('fields.entityTagsPicker.title'),\n description = t('fields.entityTagsPicker.description'),\n },\n uiSchema,\n rawErrors,\n required,\n errors,\n } = props;\n const catalogApi = useApi(catalogApiRef);\n const [tagOptions, setTagOptions] = useState<string[]>([]);\n const [inputValue, setInputValue] = useState('');\n const [inputError, setInputError] = useState(false);\n const tagValidator = makeValidator().isValidTag;\n const kinds = uiSchema['ui:options']?.kinds;\n const showCounts = uiSchema['ui:options']?.showCounts;\n const helperText = uiSchema['ui:options']?.helperText;\n const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n const { loading, value: existingTags } = useAsync(async () => {\n const facet = 'metadata.tags';\n const tagsRequest: GetEntityFacetsRequest = { facets: [facet] };\n if (kinds) {\n tagsRequest.filter = { kind: kinds };\n }\n\n const { facets } = await catalogApi.getEntityFacets(tagsRequest);\n\n const tagFacets = Object.fromEntries(\n facets[facet].map(({ value, count }) => [value, count]),\n );\n\n setTagOptions(\n Object.keys(tagFacets).sort((a, b) =>\n showCounts ? tagFacets[b] - tagFacets[a] : a.localeCompare(b),\n ),\n );\n\n return tagFacets;\n });\n\n const setTags = (_: ChangeEvent<{}>, values: string[] \| null) => {\n // Reset error state in case all tags were removed\n let hasError = false;\n let addDuplicate = false;\n const currentTags = formData \|\| [];\n\n // If adding a new tag\n if (values?.length && currentTags.length < values.length) {\n const newTag = (values[values.length - 1] = values[values.length - 1]\n .toLocaleLowerCase('en-US')\n .trim());\n hasError = !tagValidator(newTag);\n addDuplicate = currentTags.indexOf(newTag) !== -1;\n }\n\n setInputError(hasError);\n setInputValue(!hasError ? '' : inputValue);\n if (!hasError && !addDuplicate) {\n onChange(values \|\| []);\n }\n };\n\n // BUI: computed tag options\n const buiTagOptions = useMemo(() => {\n if (!existingTags) return [];\n return Object.keys(existingTags).sort((a, b) =>\n showCounts ? existingTags[b] - existingTags[a] : a.localeCompare(b),\n );\n }, [existingTags, showCounts]);\n\n const selectedTags = useMemo(() => formData \|\| [], [formData]);\n const availableOptions = useMemo(\n () =>\n buiTagOptions\n .filter(tag => !selectedTags.includes(tag))\n .map(tag => ({\n value: tag,\n label:\n showCounts && existingTags ? `${tag} (${existingTags[tag]})` : tag,\n })),\n [buiTagOptions, selectedTags, showCounts, existingTags],\n );\n\n const handleSelectionChange = useCallback(\n (key: Key \| null) => {\n if (key !== null) {\n const tag = String(key);\n if (!selectedTags.includes(tag)) {\n onChange([...selectedTags, tag]);\n }\n setInputValue('');\n setInputError(false);\n } else if (inputValue) {\n const newTag = inputValue.toLocaleLowerCase('en-US').trim();\n const isValid = tagValidator(newTag);\n const isDuplicate = selectedTags.includes(newTag);\n setInputError(!isValid);\n\n if (isValid && !isDuplicate) {\n onChange([...selectedTags, newTag]);\n setInputValue('');\n }\n }\n },\n [selectedTags, onChange, inputValue, tagValidator],\n );\n\n const handleRemove = useCallback(\n (tag: string) => {\n onChange(selectedTags.filter(item => item !== tag));\n },\n [selectedTags, onChange],\n );\n\n // Initialize field to always return an array\n useEffectOnce(() => onChange(formData \|\| []));\n\n if (theme === 'bui') {\n return (\n <ScaffolderField\n rawErrors={rawErrors}\n rawDescription={\n (helperText as string) ?? uiSchema['ui:description'] ?? description\n }\n required={required}\n disabled={isDisabled}\n errors={errors}\n >\n <div>\n {selectedTags.length > 0 && (\n <div\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: 'var(--bui-space-1)',\n marginBottom: 'var(--bui-space-2)',\n }}\n >\n {selectedTags.map(tag => (\n <span key={tag} style={chipStyle}>\n {tag}\n {!isDisabled && (\n <button\n type=\"button\"\n onClick={() => handleRemove(tag)}\n style={chipRemoveStyle}\n aria-label={`Remove ${tag}`}\n >\n ×\n </button>\n )}\n </span>\n ))}\n </div>\n )}\n <BuiAutocomplete\n label={title}\n isRequired={required}\n isDisabled={isDisabled}\n selectedKey={null}\n inputValue={inputValue}\n onInputChange={setInputValue}\n onSelectionChange={handleSelectionChange}\n isLoading={loading}\n options={availableOptions}\n allowsCustomValue\n isInvalid={inputError \|\| (rawErrors && rawErrors.length > 0)}\n />\n </div>\n </ScaffolderField>\n );\n }\n\n return (\n <ScaffolderField\n rawErrors={rawErrors}\n rawDescription={helperText ?? uiSchema['ui:description'] ?? description}\n required={required}\n disabled={isDisabled}\n errors={errors}\n >\n <Autocomplete\n multiple\n freeSolo\n filterSelectedOptions\n onChange={setTags}\n disabled={isDisabled}\n value={formData \|\| []}\n inputValue={inputValue}\n loading={loading}\n options={tagOptions}\n ChipProps={{ size: 'small' }}\n renderOption={option =>\n showCounts ? `${option} (${existingTags?.[option]})` : option\n }\n renderInput={params => (\n <TextField\n {...params}\n label={title}\n disabled={isDisabled}\n onChange={e => setInputValue(e.target.value)}\n error={inputError}\n FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n />\n )}\n />\n </ScaffolderField>\n );\n};\n"],"names":["BuiAutocomplete","Autocomplete","TextField"],"mappings":";;;;;;;;;;;;;;;;AA0CO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAiC;AAChE,EAAA,MAAM,QAAQ,kBAAA,EAAmB;AACjC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,MACzC,WAAA,GAAc,EAAE,qCAAqC;AAAA,KACvD;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,UAAA,GAAa,OAAO,aAAa,CAAA;AACvC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AACzD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA;AAC/C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,eAAc,CAAE,UAAA;AACrC,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,YAAY,CAAA,EAAG,KAAA;AACtC,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,YAAY,CAAA,EAAG,UAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,YAAY,CAAA,EAAG,UAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,QAAA,GAAW,aAAa,CAAA,IAAK,KAAA;AAEhD,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,YAAA,EAAa,GAAI,SAAS,YAAY;AAC5D,IAAA,MAAM,KAAA,GAAQ,eAAA;AACd,IAAA,MAAM,WAAA,GAAsC,EAAE,MAAA,EAAQ,CAAC,KAAK,CAAA,EAAE;AAC9D,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,WAAA,CAAY,MAAA,GAAS,EAAE,IAAA,EAAM,KAAA,EAAM;AAAA,IACrC;AAEA,IAAA,MAAM,EAAE,MAAA,EAAO,GAAI,MAAM,UAAA,CAAW,gBAAgB,WAAW,CAAA;AAE/D,IAAA,MAAM,YAAY,MAAA,CAAO,WAAA;AAAA,MACvB,MAAA,CAAO,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,EAAE,KAAA,EAAO,KAAA,EAAM,KAAM,CAAC,KAAA,EAAO,KAAK,CAAC;AAAA,KACxD;AAEA,IAAA,aAAA;AAAA,MACE,MAAA,CAAO,IAAA,CAAK,SAAS,CAAA,CAAE,IAAA;AAAA,QAAK,CAAC,CAAA,EAAG,CAAA,KAC9B,UAAA,GAAa,SAAA,CAAU,CAAC,CAAA,GAAI,SAAA,CAAU,CAAC,CAAA,GAAI,CAAA,CAAE,aAAA,CAAc,CAAC;AAAA;AAC9D,KACF;AAEA,IAAA,OAAO,SAAA;AAAA,EACT,CAAC,CAAA;AAED,EAAA,MAAM,OAAA,GAAU,CAAC,CAAA,EAAoB,MAAA,KAA4B;AAE/D,IAAA,IAAI,QAAA,GAAW,KAAA;AACf,IAAA,IAAI,YAAA,GAAe,KAAA;AACnB,IAAA,MAAM,WAAA,GAAc,YAAY,EAAC;AAGjC,IAAA,IAAI,MAAA,EAAQ,MAAA,IAAU,WAAA,CAAY,MAAA,GAAS,OAAO,MAAA,EAAQ;AACxD,MAAA,MAAM,MAAA,GAAU,MAAA,CAAO,MAAA,CAAO,MAAA,GAAS,CAAC,CAAA,GAAI,MAAA,CAAO,MAAA,CAAO,MAAA,GAAS,CAAC,CAAA,CACjE,iBAAA,CAAkB,OAAO,EACzB,IAAA,EAAK;AACR,MAAA,QAAA,GAAW,CAAC,aAAa,MAAM,CAAA;AAC/B,MAAA,YAAA,GAAe,WAAA,CAAY,OAAA,CAAQ,MAAM,CAAA,KAAM,EAAA;AAAA,IACjD;AAEA,IAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,IAAA,aAAA,CAAc,CAAC,QAAA,GAAW,EAAA,GAAK,UAAU,CAAA;AACzC,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,YAAA,EAAc;AAC9B,MAAA,QAAA,CAAS,MAAA,IAAU,EAAE,CAAA;AAAA,IACvB;AAAA,EACF,CAAA;AAGA,EAAA,MAAM,aAAA,GAAgB,QAAQ,MAAM;AAClC,IAAA,IAAI,CAAC,YAAA,EAAc,OAAO,EAAC;AAC3B,IAAA,OAAO,MAAA,CAAO,IAAA,CAAK,YAAY,CAAA,CAAE,IAAA;AAAA,MAAK,CAAC,CAAA,EAAG,CAAA,KACxC,UAAA,GAAa,YAAA,CAAa,CAAC,CAAA,GAAI,YAAA,CAAa,CAAC,CAAA,GAAI,CAAA,CAAE,aAAA,CAAc,CAAC;AAAA,KACpE;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,UAAU,CAAC,CAAA;AAE7B,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM,QAAA,IAAY,EAAC,EAAG,CAAC,QAAQ,CAAC,CAAA;AAC7D,EAAA,MAAM,gBAAA,GAAmB,OAAA;AAAA,IACvB,MACE,aAAA,CACG,MAAA,CAAO,CAAA,GAAA,KAAO,CAAC,YAAA,CAAa,QAAA,CAAS,GAAG,CAAC,CAAA,CACzC,GAAA,CAAI,CAAA,GAAA,MAAQ;AAAA,MACX,KAAA,EAAO,GAAA;AAAA,MACP,KAAA,EACE,cAAc,YAAA,GAAe,CAAA,EAAG,GAAG,CAAA,EAAA,EAAK,YAAA,CAAa,GAAG,CAAC,CAAA,CAAA,CAAA,GAAM;AAAA,KACnE,CAAE,CAAA;AAAA,IACN,CAAC,aAAA,EAAe,YAAA,EAAc,UAAA,EAAY,YAAY;AAAA,GACxD;AAEA,EAAA,MAAM,qBAAA,GAAwB,WAAA;AAAA,IAC5B,CAAC,GAAA,KAAoB;AACnB,MAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,QAAA,MAAM,GAAA,GAAM,OAAO,GAAG,CAAA;AACtB,QAAA,IAAI,CAAC,YAAA,CAAa,QAAA,CAAS,GAAG,CAAA,EAAG;AAC/B,UAAA,QAAA,CAAS,CAAC,GAAG,YAAA,EAAc,GAAG,CAAC,CAAA;AAAA,QACjC;AACA,QAAA,aAAA,CAAc,EAAE,CAAA;AAChB,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA,MACrB,WAAW,UAAA,EAAY;AACrB,QAAA,MAAM,MAAA,GAAS,UAAA,CAAW,iBAAA,CAAkB,OAAO,EAAE,IAAA,EAAK;AAC1D,QAAA,MAAM,OAAA,GAAU,aAAa,MAAM,CAAA;AACnC,QAAA,MAAM,WAAA,GAAc,YAAA,CAAa,QAAA,CAAS,MAAM,CAAA;AAChD,QAAA,aAAA,CAAc,CAAC,OAAO,CAAA;AAEtB,QAAA,IAAI,OAAA,IAAW,CAAC,WAAA,EAAa;AAC3B,UAAA,QAAA,CAAS,CAAC,GAAG,YAAA,EAAc,MAAM,CAAC,CAAA;AAClC,UAAA,aAAA,CAAc,EAAE,CAAA;AAAA,QAClB;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAA,EAAc,QAAA,EAAU,UAAA,EAAY,YAAY;AAAA,GACnD;AAEA,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,GAAA,KAAgB;AACf,MAAA,QAAA,CAAS,YAAA,CAAa,MAAA,CAAO,CAAA,IAAA,KAAQ,IAAA,KAAS,GAAG,CAAC,CAAA;AAAA,IACpD,CAAA;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,GACzB;AAGA,EAAA,aAAA,CAAc,MAAM,QAAA,CAAS,QAAA,IAAY,EAAE,CAAC,CAAA;AAE5C,EAAA,IAAI,UAAU,KAAA,EAAO;AACnB,IAAA,uBACE,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,cAAA,EACG,UAAA,IAAyB,QAAA,CAAS,gBAAgB,CAAA,IAAK,WAAA;AAAA,QAE1D,QAAA;AAAA,QACA,QAAA,EAAU,UAAA;AAAA,QACV,MAAA;AAAA,QAEA,+BAAC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,YAAA,CAAa,SAAS,CAAA,oBACrB,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO;AAAA,gBACL,OAAA,EAAS,MAAA;AAAA,gBACT,QAAA,EAAU,MAAA;AAAA,gBACV,GAAA,EAAK,oBAAA;AAAA,gBACL,YAAA,EAAc;AAAA,eAChB;AAAA,cAEC,uBAAa,GAAA,CAAI,CAAA,GAAA,qBAChB,IAAA,CAAC,MAAA,EAAA,EAAe,OAAO,SAAA,EACpB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBACA,CAAC,UAAA,oBACA,GAAA;AAAA,kBAAC,QAAA;AAAA,kBAAA;AAAA,oBACC,IAAA,EAAK,QAAA;AAAA,oBACL,OAAA,EAAS,MAAM,YAAA,CAAa,GAAG,CAAA;AAAA,oBAC/B,KAAA,EAAO,eAAA;AAAA,oBACP,YAAA,EAAY,UAAU,GAAG,CAAA,CAAA;AAAA,oBAC1B,QAAA,EAAA;AAAA;AAAA;AAED,eAAA,EAAA,EAVO,GAYX,CACD;AAAA;AAAA,WACH;AAAA,0BAEF,GAAA;AAAA,YAACA,YAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,KAAA;AAAA,cACP,UAAA,EAAY,QAAA;AAAA,cACZ,UAAA;AAAA,cACA,WAAA,EAAa,IAAA;AAAA,cACb,UAAA;AAAA,cACA,aAAA,EAAe,aAAA;AAAA,cACf,iBAAA,EAAmB,qBAAA;AAAA,cACnB,SAAA,EAAW,OAAA;AAAA,cACX,OAAA,EAAS,gBAAA;AAAA,cACT,iBAAA,EAAiB,IAAA;AAAA,cACjB,SAAA,EAAW,UAAA,IAAe,SAAA,IAAa,SAAA,CAAU,MAAA,GAAS;AAAA;AAAA;AAC5D,SAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,cAAA,EAAgB,UAAA,IAAc,QAAA,CAAS,gBAAgB,CAAA,IAAK,WAAA;AAAA,MAC5D,QAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,MAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAACC,eAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAQ,IAAA;AAAA,UACR,QAAA,EAAQ,IAAA;AAAA,UACR,qBAAA,EAAqB,IAAA;AAAA,UACrB,QAAA,EAAU,OAAA;AAAA,UACV,QAAA,EAAU,UAAA;AAAA,UACV,KAAA,EAAO,YAAY,EAAC;AAAA,UACpB,UAAA;AAAA,UACA,OAAA;AAAA,UACA,OAAA,EAAS,UAAA;AAAA,UACT,SAAA,EAAW,EAAE,IAAA,EAAM,OAAA,EAAQ;AAAA,UAC3B,YAAA,EAAc,YACZ,UAAA,GAAa,CAAA,EAAG,MAAM,CAAA,EAAA,EAAK,YAAA,GAAe,MAAM,CAAC,CAAA,CAAA,CAAA,GAAM,MAAA;AAAA,UAEzD,aAAa,CAAA,MAAA,qBACX,GAAA;AAAA,YAACC,YAAA;AAAA,YAAA;AAAA,cACE,GAAG,MAAA;AAAA,cACJ,KAAA,EAAO,KAAA;AAAA,cACP,QAAA,EAAU,UAAA;AAAA,cACV,QAAA,EAAU,CAAA,CAAA,KAAK,aAAA,CAAc,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cAC3C,KAAA,EAAO,UAAA;AAAA,cACP,mBAAA,EAAqB,EAAE,MAAA,EAAQ,OAAA,EAAS,OAAO,EAAE,UAAA,EAAY,GAAE;AAAE;AAAA;AACnE;AAAA;AAEJ;AAAA,GACF;AAEJ;;;;"}

package/dist/components/fields/MultiEntityPicker/MultiEntityPicker.esm.js CHANGED Viewed

@@ -1,16 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
 import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef, entityPresentationApiRef, EntityDisplayName } from '@backstage/plugin-catalog-react';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
-import { useState, useCallback, useEffect } from 'react';
+import MuiTextField from '@material-ui/core/TextField';
+import MuiAutocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { VirtualizedListbox } from '../VirtualizedListbox.esm.js';
-import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
+import { useScaffolderTheme, ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
+import { chipStyle, chipRemoveStyle } from '../buiChipStyles.esm.js';
 export { MultiEntityPickerSchema } from './schema.esm.js';
 const FREE_SOLO_EVENTS = [
@@ -18,6 +20,7 @@ const FREE_SOLO_EVENTS = [
   "create-option"
 ];
 const MultiEntityPicker = (props) => {
+  const theme = useScaffolderTheme();
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
     onChange,
@@ -36,6 +39,8 @@ const MultiEntityPicker = (props) => {
   const defaultKind = uiSchema["ui:options"]?.defaultKind;
   const defaultNamespace = uiSchema["ui:options"]?.defaultNamespace || void 0;
   const isDisabled = uiSchema?.["ui:disabled"] ?? false;
+  const allowArbitraryValues = uiSchema["ui:options"]?.allowArbitraryValues ?? true;
+  const maxItems = props.schema.maxItems;
   const [noOfItemsSelected, setNoOfItemsSelected] = useState(0);
   const catalogApi = useApi(catalogApiRef);
   const entityPresentationApi = useApi(entityPresentationApiRef);
@@ -53,8 +58,6 @@ const MultiEntityPicker = (props) => {
     );
     return { entities: items, entityRefToPresentation };
   });
-  const allowArbitraryValues = uiSchema["ui:options"]?.allowArbitraryValues ?? true;
-  const maxItems = props.schema.maxItems;
   const onSelect = useCallback(
     (_, refs, reason) => {
       const values = refs.map((ref) => {
@@ -85,11 +88,126 @@ const MultiEntityPicker = (props) => {
     },
     [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues]
   );
+  const allOptions = useMemo(
+    () => (entities?.entities || []).map((entity) => {
+      const entityRef = stringifyEntityRef(entity);
+      const presentation = entities?.entityRefToPresentation.get(entityRef);
+      return {
+        value: entityRef,
+        label: presentation?.primaryTitle || entityRef
+      };
+    }),
+    [entities]
+  );
+  const selectedValues = useMemo(() => formData || [], [formData]);
+  const availableOptions = useMemo(
+    () => allOptions.filter((o) => !selectedValues.includes(o.value)),
+    [allOptions, selectedValues]
+  );
+  const [inputValue, setInputValue] = useState("");
+  const atMaxItems = maxItems !== void 0 && selectedValues.length >= maxItems;
+  const handleSelectionChange = useCallback(
+    (key) => {
+      if (atMaxItems) return;
+      if (key !== null) {
+        const newValue = String(key);
+        if (!selectedValues.includes(newValue)) {
+          onChange([...selectedValues, newValue]);
+        }
+      } else if (allowArbitraryValues && inputValue) {
+        let entityRef = inputValue;
+        try {
+          entityRef = stringifyEntityRef(
+            parseEntityRef(inputValue, { defaultKind, defaultNamespace })
+          );
+        } catch {
+        }
+        if (!selectedValues.includes(entityRef)) {
+          onChange([...selectedValues, entityRef]);
+        }
+      }
+      setInputValue("");
+    },
+    [
+      atMaxItems,
+      selectedValues,
+      onChange,
+      allowArbitraryValues,
+      inputValue,
+      defaultKind,
+      defaultNamespace
+    ]
+  );
+  const handleRemove = useCallback(
+    (value) => {
+      onChange(selectedValues.filter((v) => v !== value));
+    },
+    [selectedValues, onChange]
+  );
   useEffect(() => {
     if (required && !allowArbitraryValues && entities?.entities?.length === 1) {
-      onChange([stringifyEntityRef(entities?.entities[0])]);
+      onChange([stringifyEntityRef(entities.entities[0])]);
     }
   }, [entities, onChange, required, allowArbitraryValues]);
+  if (theme === "bui") {
+    const isAutoSelected = required && !allowArbitraryValues && entities?.entities?.length === 1;
+    return /* @__PURE__ */ jsx(
+      ScaffolderField,
+      {
+        rawErrors,
+        rawDescription: uiSchema["ui:description"] ?? description,
+        required,
+        disabled: isDisabled,
+        errors,
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          selectedValues.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "var(--bui-space-1)",
+                marginBottom: "var(--bui-space-2)"
+              },
+              children: selectedValues.map((value) => {
+                const opt = allOptions.find((o) => o.value === value);
+                return /* @__PURE__ */ jsxs("span", { style: chipStyle, children: [
+                  opt?.label || value,
+                  !isDisabled && !isAutoSelected && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleRemove(value),
+                      style: chipRemoveStyle,
+                      "aria-label": `Remove ${opt?.label || value}`,
+                      children: "\xD7"
+                    }
+                  )
+                ] }, value);
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              id: idSchema?.$id,
+              label: title,
+              isRequired: required,
+              isDisabled: isDisabled || isAutoSelected || atMaxItems,
+              selectedKey: null,
+              inputValue,
+              onInputChange: setInputValue,
+              onSelectionChange: handleSelectionChange,
+              isLoading: loading,
+              options: availableOptions,
+              allowsCustomValue: allowArbitraryValues,
+              isInvalid: rawErrors && rawErrors.length > 0
+            }
+          )
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     ScaffolderField,
     {
@@ -99,7 +217,7 @@ const MultiEntityPicker = (props) => {
       disabled: isDisabled,
       errors,
       children: /* @__PURE__ */ jsx(
-        Autocomplete,
+        MuiAutocomplete,
         {
           multiple: true,
           filterSelectedOptions: true,
@@ -118,7 +236,7 @@ const MultiEntityPicker = (props) => {
           autoSelect: true,
           freeSolo: allowArbitraryValues,
           renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
+            MuiTextField,
             {
               ...params,
               label: title,