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

package/dist/components/fields/MultiEntityPicker/MultiEntityPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiEntityPicker.esm.js","sources":["../../../../src/components/fields/MultiEntityPicker/MultiEntityPicker.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  catalogApiRef,\n  entityPresentationApiRef,\n  EntityDisplayName,\n  EntityRefPresentationSnapshot,\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, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { FieldValidation } from '@rjsf/utils';\nimport {\n  MultiEntityPickerFilterQueryValue,\n  MultiEntityPickerProps,\n  MultiEntityPickerUiOptions,\n  MultiEntityPickerFilterQuery,\n} from './schema';\nimport { VirtualizedListbox } from '../VirtualizedListbox';\nimport { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport { MultiEntityPickerSchema } from './schema';\n\n// AutocompleteChangeReason events that can be triggered when a user inputs a freeSolo option\nconst FREE_SOLO_EVENTS: readonly AutocompleteChangeReason[] = [\n  'blur',\n  'create-option',\n];\n\n/**\n * The underlying component that is rendered in the form for the `MultiEntityPicker`\n * field extension.\n */\nexport const MultiEntityPicker = (props: MultiEntityPickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    onChange,\n    schema: {\n      title = t('fields.multiEntityPicker.title'),\n      description = t('fields.multiEntityPicker.description'),\n    },\n    required,\n    uiSchema,\n    rawErrors,\n    formData,\n    idSchema,\n    errors,\n  } = props;\n\n  const catalogFilter = buildCatalogFilter(uiSchema);\n  const defaultKind = uiSchema['ui:options']?.defaultKind;\n  const defaultNamespace =\n    uiSchema['ui:options']?.defaultNamespace || undefined;\n  const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n  const [noOfItemsSelected, setNoOfItemsSelected] = useState(0);\n\n  const catalogApi = useApi(catalogApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const { value: entities, loading } = useAsync(async () => {\n    const { items } = await catalogApi.getEntities(\n      catalogFilter ? { filter: catalogFilter } : undefined,\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    return { entities: items, entityRefToPresentation };\n  });\n  const allowArbitraryValues =\n    uiSchema['ui:options']?.allowArbitraryValues ?? true;\n\n  // if not specified, maxItems defaults to undefined\n  const maxItems = props.schema.maxItems;\n\n  const onSelect = useCallback(\n    (_: any, refs: (string | Entity)[], reason: AutocompleteChangeReason) => {\n      const values = refs\n        .map(ref => {\n          // If the ref is not a string, then it was a selected option in the picker\n          if (typeof ref !== 'string') {\n            // if ref does not exist: pass 'undefined' to trigger validation for required value\n            return ref ? stringifyEntityRef(ref as Entity) : undefined;\n          }\n\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\n          // We need to check against formData here as that's the previous value for this field.\n          if (\n            // If value already matches what exists in form data, allow it\n            formData?.includes(ref) ||\n            // If arbitrary values are allowed and the reason is a free solo event, allow it\n            (allowArbitraryValues && FREE_SOLO_EVENTS.includes(reason))\n          ) {\n            return entityRef;\n          }\n\n          return undefined;\n        })\n        .filter(ref => ref !== undefined) as string[];\n\n      setNoOfItemsSelected(values.length);\n      onChange(values);\n    },\n    [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues],\n  );\n\n  useEffect(() => {\n    if (required && !allowArbitraryValues && entities?.entities?.length === 1) {\n      onChange([stringifyEntityRef(entities?.entities[0])]);\n    }\n  }, [entities, onChange, 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        multiple\n        filterSelectedOptions\n        disabled={\n          isDisabled ||\n          (required &&\n            !allowArbitraryValues &&\n            entities?.entities?.length === 1)\n        }\n        id={idSchema?.$id}\n        defaultValue={formData}\n        loading={loading}\n        onChange={onSelect}\n        options={entities?.entities || []}\n        renderOption={option => <EntityDisplayName entityRef={option} />}\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        getOptionDisabled={_options =>\n          maxItems ? noOfItemsSelected >= maxItems : false\n        }\n        autoSelect\n        freeSolo={allowArbitraryValues}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            disabled={isDisabled}\n            margin=\"dense\"\n            FormHelperTextProps={{\n              margin: 'dense',\n              style: { marginLeft: 0 },\n            }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={{\n              ...params.InputProps,\n              required: formData?.length === 0 && required,\n            }}\n          />\n        )}\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\nexport const validateMultiEntityPickerValidation = (\n  values: string[],\n  validation: FieldValidation,\n) => {\n  values.forEach(value => {\n    try {\n      parseEntityRef(value);\n    } catch {\n      validation.addError(`${value} is not a valid entity ref`);\n    }\n  });\n};\n\n/**\n * Converts a special `{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<MultiEntityPickerFilterQueryValue, 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: MultiEntityPickerFilterQuery,\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 *\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: MultiEntityPickerProps['uiSchema'],\n): EntityFilterQuery | undefined {\n  const catalogFilter: MultiEntityPickerUiOptions['catalogFilter'] | undefined =\n    uiSchema['ui:options']?.catalogFilter;\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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"}
+{"version":3,"file":"MultiEntityPicker.esm.js","sources":["../../../../src/components/fields/MultiEntityPicker/MultiEntityPicker.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  catalogApiRef,\n  entityPresentationApiRef,\n  EntityDisplayName,\n  EntityRefPresentationSnapshot,\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 { type Key, useCallback, useEffect, useMemo, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { FieldValidation } from '@rjsf/utils';\nimport {\n  MultiEntityPickerFilterQueryValue,\n  MultiEntityPickerProps,\n  MultiEntityPickerUiOptions,\n  MultiEntityPickerFilterQuery,\n} from './schema';\nimport { VirtualizedListbox } from '../VirtualizedListbox';\nimport {\n  ScaffolderField,\n  useScaffolderTheme,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { Autocomplete as BuiAutocomplete } from '../Autocomplete';\nimport { chipStyle, chipRemoveStyle } from '../buiChipStyles';\n\nexport { MultiEntityPickerSchema } from './schema';\n\n// AutocompleteChangeReason events that can be triggered when a user inputs a freeSolo option\nconst FREE_SOLO_EVENTS: readonly AutocompleteChangeReason[] = [\n  'blur',\n  'create-option',\n];\n\n/**\n * The underlying component that is rendered in the form for the `MultiEntityPicker`\n * field extension.\n */\nexport const MultiEntityPicker = (props: MultiEntityPickerProps) => {\n  const theme = useScaffolderTheme();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    onChange,\n    schema: {\n      title = t('fields.multiEntityPicker.title'),\n      description = t('fields.multiEntityPicker.description'),\n    },\n    required,\n    uiSchema,\n    rawErrors,\n    formData,\n    idSchema,\n    errors,\n  } = props;\n\n  const catalogFilter = buildCatalogFilter(uiSchema);\n  const defaultKind = uiSchema['ui:options']?.defaultKind;\n  const defaultNamespace =\n    uiSchema['ui:options']?.defaultNamespace || undefined;\n  const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n  const allowArbitraryValues =\n    uiSchema['ui:options']?.allowArbitraryValues ?? true;\n  const maxItems = props.schema.maxItems;\n\n  const [noOfItemsSelected, setNoOfItemsSelected] = useState(0);\n\n  const catalogApi = useApi(catalogApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const { value: entities, loading } = useAsync(async () => {\n    const { items } = await catalogApi.getEntities(\n      catalogFilter ? { filter: catalogFilter } : undefined,\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    return { entities: items, entityRefToPresentation };\n  });\n\n  const onSelect = useCallback(\n    (_: any, refs: (string | Entity)[], reason: AutocompleteChangeReason) => {\n      const values = refs\n        .map(ref => {\n          // If the ref is not a string, then it was a selected option in the picker\n          if (typeof ref !== 'string') {\n            // if ref does not exist: pass 'undefined' to trigger validation for required value\n            return ref ? stringifyEntityRef(ref as Entity) : undefined;\n          }\n\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\n          // We need to check against formData here as that's the previous value for this field.\n          if (\n            // If value already matches what exists in form data, allow it\n            formData?.includes(ref) ||\n            // If arbitrary values are allowed and the reason is a free solo event, allow it\n            (allowArbitraryValues && FREE_SOLO_EVENTS.includes(reason))\n          ) {\n            return entityRef;\n          }\n\n          return undefined;\n        })\n        .filter(ref => ref !== undefined) as string[];\n\n      setNoOfItemsSelected(values.length);\n      onChange(values);\n    },\n    [onChange, formData, defaultKind, defaultNamespace, allowArbitraryValues],\n  );\n\n  // BUI: options and selection state\n  const allOptions = useMemo(\n    () =>\n      (entities?.entities || []).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  const selectedValues = useMemo(() => formData || [], [formData]);\n  const availableOptions = useMemo(\n    () => allOptions.filter(o => !selectedValues.includes(o.value)),\n    [allOptions, selectedValues],\n  );\n\n  const [inputValue, setInputValue] = useState('');\n\n  const atMaxItems =\n    maxItems !== undefined && selectedValues.length >= maxItems;\n\n  const handleSelectionChange = useCallback(\n    (key: Key | null) => {\n      if (atMaxItems) return;\n\n      if (key !== null) {\n        const newValue = String(key);\n        if (!selectedValues.includes(newValue)) {\n          onChange([...selectedValues, newValue]);\n        }\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        if (!selectedValues.includes(entityRef)) {\n          onChange([...selectedValues, entityRef]);\n        }\n      }\n      setInputValue('');\n    },\n    [\n      atMaxItems,\n      selectedValues,\n      onChange,\n      allowArbitraryValues,\n      inputValue,\n      defaultKind,\n      defaultNamespace,\n    ],\n  );\n\n  const handleRemove = useCallback(\n    (value: string) => {\n      onChange(selectedValues.filter(v => v !== value));\n    },\n    [selectedValues, onChange],\n  );\n\n  useEffect(() => {\n    if (required && !allowArbitraryValues && entities?.entities?.length === 1) {\n      onChange([stringifyEntityRef(entities.entities[0])]);\n    }\n  }, [entities, onChange, required, allowArbitraryValues]);\n\n  if (theme === 'bui') {\n    const isAutoSelected =\n      required && !allowArbitraryValues && entities?.entities?.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        <div>\n          {selectedValues.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              {selectedValues.map(value => {\n                const opt = allOptions.find(o => o.value === value);\n                return (\n                  <span key={value} style={chipStyle}>\n                    {opt?.label || value}\n                    {!isDisabled && !isAutoSelected && (\n                      <button\n                        type=\"button\"\n                        onClick={() => handleRemove(value)}\n                        style={chipRemoveStyle}\n                        aria-label={`Remove ${opt?.label || value}`}\n                      >\n                        &times;\n                      </button>\n                    )}\n                  </span>\n                );\n              })}\n            </div>\n          )}\n          <BuiAutocomplete\n            id={idSchema?.$id}\n            label={title}\n            isRequired={required}\n            isDisabled={isDisabled || isAutoSelected || atMaxItems}\n            selectedKey={null}\n            inputValue={inputValue}\n            onInputChange={setInputValue}\n            onSelectionChange={handleSelectionChange}\n            isLoading={loading}\n            options={availableOptions}\n            allowsCustomValue={allowArbitraryValues}\n            isInvalid={rawErrors && rawErrors.length > 0}\n          />\n        </div>\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        multiple\n        filterSelectedOptions\n        disabled={\n          isDisabled ||\n          (required &&\n            !allowArbitraryValues &&\n            entities?.entities?.length === 1)\n        }\n        id={idSchema?.$id}\n        defaultValue={formData}\n        loading={loading}\n        onChange={onSelect}\n        options={entities?.entities || []}\n        renderOption={option => <EntityDisplayName entityRef={option} />}\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        getOptionDisabled={_options =>\n          maxItems ? noOfItemsSelected >= maxItems : false\n        }\n        autoSelect\n        freeSolo={allowArbitraryValues}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            disabled={isDisabled}\n            margin=\"dense\"\n            FormHelperTextProps={{\n              margin: 'dense',\n              style: { marginLeft: 0 },\n            }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={{\n              ...params.InputProps,\n              required: formData?.length === 0 && required,\n            }}\n          />\n        )}\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\nexport const validateMultiEntityPickerValidation = (\n  values: string[],\n  validation: FieldValidation,\n) => {\n  values.forEach(value => {\n    try {\n      parseEntityRef(value);\n    } catch {\n      validation.addError(`${value} is not a valid entity ref`);\n    }\n  });\n};\n\n/**\n * Converts a special `{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<MultiEntityPickerFilterQueryValue, 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: MultiEntityPickerFilterQuery,\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 *\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: MultiEntityPickerProps['uiSchema'],\n): EntityFilterQuery | undefined {\n  const catalogFilter: MultiEntityPickerUiOptions['catalogFilter'] | undefined =\n    uiSchema['ui:options']?.catalogFilter;\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/MyGroupsPicker/MyGroupsPicker.esm.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { useEffect } from 'react';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { useApi, identityApiRef, errorApiRef } from '@backstage/core-plugin-api';
-import TextField from '@material-ui/core/TextField';
+import MuiTextField from '@material-ui/core/TextField';
 export { MyGroupsPickerSchema } from './schema.esm.js';
-import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
+import MuiAutocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
 import { catalogApiRef, entityPresentationApiRef, EntityDisplayName } from '@backstage/plugin-catalog-react';
 import { NotFoundError } from '@backstage/errors';
 import useAsync from 'react-use/esm/useAsync';
@@ -11,9 +11,11 @@ import { stringifyEntityRef } from '@backstage/catalog-model';
 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';
 
 const MyGroupsPicker = (props) => {
+  const theme = useScaffolderTheme();
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
     schema: {
@@ -25,6 +27,7 @@ const MyGroupsPicker = (props) => {
     onChange,
     formData,
     uiSchema,
+    idSchema,
     errors
   } = props;
   const identityApi = useApi(identityApiRef);
@@ -58,11 +61,68 @@ const MyGroupsPicker = (props) => {
     onChange(value ? stringifyEntityRef(value) : "");
   };
   const selectedEntity = groups?.catalogEntities.find((e) => stringifyEntityRef(e) === formData) || null;
+  const buiOptions = useMemo(
+    () => (groups?.catalogEntities || []).map((entity) => {
+      const entityRef = stringifyEntityRef(entity);
+      const presentation = groups?.entityRefToPresentation.get(entityRef);
+      return {
+        value: entityRef,
+        label: presentation?.primaryTitle || entityRef
+      };
+    }),
+    [groups]
+  );
+  const [inputValue, setInputValue] = useState("");
+  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 handleSelectionChange = useCallback(
+    (key) => {
+      onChange(key !== null ? String(key) : "");
+    },
+    [onChange]
+  );
   useEffect(() => {
     if (required && groups?.catalogEntities.length === 1 && !selectedEntity) {
       onChange(stringifyEntityRef(groups.catalogEntities[0]));
     }
   }, [groups, onChange, selectedEntity, required]);
+  if (theme === "bui") {
+    const isAutoSelected = required && groups?.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,
+            isLoading: loading,
+            options: buiOptions,
+            allowsCustomValue: false,
+            isInvalid: rawErrors && rawErrors.length > 0
+          }
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     ScaffolderField,
     {
@@ -72,7 +132,7 @@ const MyGroupsPicker = (props) => {
       disabled: isDisabled,
       errors,
       children: /* @__PURE__ */ jsx(
-        Autocomplete,
+        MuiAutocomplete,
         {
           disabled: required && groups?.catalogEntities.length === 1,
           id: "OwnershipEntityRefPicker-dropdown",
@@ -83,7 +143,7 @@ const MyGroupsPicker = (props) => {
           getOptionLabel: (option) => groups?.entityRefToPresentation.get(stringifyEntityRef(option))?.primaryTitle,
           autoSelect: true,
           renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
+            MuiTextField,
             {
               ...params,
               label: title,

package/dist/components/fields/MyGroupsPicker/MyGroupsPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MyGroupsPicker.esm.js","sources":["../../../../src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 */\n\nimport { ChangeEvent, useEffect } from 'react';\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport { MyGroupsPickerProps, MyGroupsPickerSchema } from './schema';\nimport Autocomplete, {\n  createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport {\n  catalogApiRef,\n  EntityDisplayName,\n  entityPresentationApiRef,\n  EntityRefPresentationSnapshot,\n} from '@backstage/plugin-catalog-react';\nimport { NotFoundError } from '@backstage/errors';\nimport useAsync from 'react-use/esm/useAsync';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\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 { MyGroupsPickerSchema };\n\nexport const MyGroupsPicker = (props: MyGroupsPickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    schema: {\n      title = t('fields.myGroupsPicker.title'),\n      description = t('fields.myGroupsPicker.description'),\n    },\n    required,\n    rawErrors,\n    onChange,\n    formData,\n    uiSchema,\n    errors,\n  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const errorApi = useApi(errorApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n  const { value: groups, loading } = useAsync(async () => {\n    const { userEntityRef } = await identityApi.getBackstageIdentity();\n\n    if (!userEntityRef) {\n      errorApi.post(new NotFoundError('No user entity ref found'));\n      return { catalogEntities: [], entityRefToPresentation: new Map() };\n    }\n\n    const { items } = await catalogApi.getEntities({\n      filter: {\n        kind: 'Group',\n        ['relations.hasMember']: [userEntityRef],\n      },\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 updateChange = (_: ChangeEvent<{}>, value: Entity | null) => {\n    onChange(value ? stringifyEntityRef(value) : '');\n  };\n\n  const selectedEntity =\n    groups?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ||\n    null;\n\n  useEffect(() => {\n    if (required && groups?.catalogEntities.length === 1 && !selectedEntity) {\n      onChange(stringifyEntityRef(groups.catalogEntities[0]));\n    }\n  }, [groups, onChange, selectedEntity, required]);\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={required && groups?.catalogEntities.length === 1}\n        id=\"OwnershipEntityRefPicker-dropdown\"\n        options={groups?.catalogEntities || []}\n        value={selectedEntity}\n        loading={loading}\n        onChange={updateChange}\n        getOptionLabel={option =>\n          groups?.entityRefToPresentation.get(stringifyEntityRef(option))\n            ?.primaryTitle!\n        }\n        autoSelect\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={params.InputProps}\n          />\n        )}\n        renderOption={option => <EntityDisplayName entityRef={option} />}\n        filterOptions={createFilterOptions<Entity>({\n          stringify: option =>\n            groups?.entityRefToPresentation.get(stringifyEntityRef(option))\n              ?.primaryTitle!,\n        })}\n        ListboxComponent={VirtualizedListbox}\n      />\n    </ScaffolderField>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MyGroupsPicker.esm.js","sources":["../../../../src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 */\n\nimport {\n  type Key,\n  ChangeEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport { MyGroupsPickerProps, MyGroupsPickerSchema } from './schema';\nimport Autocomplete, {\n  createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport {\n  catalogApiRef,\n  EntityDisplayName,\n  entityPresentationApiRef,\n  EntityRefPresentationSnapshot,\n} from '@backstage/plugin-catalog-react';\nimport { NotFoundError } from '@backstage/errors';\nimport useAsync from 'react-use/esm/useAsync';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\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 { MyGroupsPickerSchema };\n\nexport const MyGroupsPicker = (props: MyGroupsPickerProps) => {\n  const theme = useScaffolderTheme();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    schema: {\n      title = t('fields.myGroupsPicker.title'),\n      description = t('fields.myGroupsPicker.description'),\n    },\n    required,\n    rawErrors,\n    onChange,\n    formData,\n    uiSchema,\n    idSchema,\n    errors,\n  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const errorApi = useApi(errorApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n  const { value: groups, loading } = useAsync(async () => {\n    const { userEntityRef } = await identityApi.getBackstageIdentity();\n\n    if (!userEntityRef) {\n      errorApi.post(new NotFoundError('No user entity ref found'));\n      return { catalogEntities: [], entityRefToPresentation: new Map() };\n    }\n\n    const { items } = await catalogApi.getEntities({\n      filter: {\n        kind: 'Group',\n        ['relations.hasMember']: [userEntityRef],\n      },\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  // MUI: update handler\n  const updateChange = (_: ChangeEvent<{}>, value: Entity | null) => {\n    onChange(value ? stringifyEntityRef(value) : '');\n  };\n\n  const selectedEntity =\n    groups?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ||\n    null;\n\n  // BUI: options\n  const buiOptions = useMemo(\n    () =>\n      (groups?.catalogEntities || []).map(entity => {\n        const entityRef = stringifyEntityRef(entity);\n        const presentation = groups?.entityRefToPresentation.get(entityRef);\n        return {\n          value: entityRef,\n          label: presentation?.primaryTitle || entityRef,\n        };\n      }),\n    [groups],\n  );\n\n  const [inputValue, setInputValue] = useState('');\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 handleSelectionChange = useCallback(\n    (key: Key | null) => {\n      onChange(key !== null ? String(key) : '');\n    },\n    [onChange],\n  );\n\n  useEffect(() => {\n    if (required && groups?.catalogEntities.length === 1 && !selectedEntity) {\n      onChange(stringifyEntityRef(groups.catalogEntities[0]));\n    }\n  }, [groups, onChange, selectedEntity, required]);\n\n  if (theme === 'bui') {\n    const isAutoSelected = required && groups?.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          isLoading={loading}\n          options={buiOptions}\n          allowsCustomValue={false}\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={required && groups?.catalogEntities.length === 1}\n        id=\"OwnershipEntityRefPicker-dropdown\"\n        options={groups?.catalogEntities || []}\n        value={selectedEntity}\n        loading={loading}\n        onChange={updateChange}\n        getOptionLabel={option =>\n          groups?.entityRefToPresentation.get(stringifyEntityRef(option))\n            ?.primaryTitle!\n        }\n        autoSelect\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={params.InputProps}\n          />\n        )}\n        renderOption={option => <EntityDisplayName entityRef={option} />}\n        filterOptions={createFilterOptions<Entity>({\n          stringify: option =>\n            groups?.entityRefToPresentation.get(stringifyEntityRef(option))\n              ?.primaryTitle!,\n        })}\n        ListboxComponent={VirtualizedListbox}\n      />\n    </ScaffolderField>\n  );\n};\n"],"names":["BuiAutocomplete","Autocomplete","TextField"],"mappings":"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"}

package/dist/components/fields/OwnedEntityPicker/OwnedEntityPicker.esm.js

@@ -1,17 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { useApi, identityApiRef } from '@backstage/core-plugin-api';
-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 useAsync from 'react-use/esm/useAsync';
 import { EntityPicker } from '../EntityPicker/EntityPicker.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 { OwnedEntityPickerSchema } from './schema.esm.js';
 
 const OwnedEntityPicker = (props) => {
   const { t } = useTranslationRef(scaffolderTranslationRef);
+  const theme = useScaffolderTheme();
   const {
     schema: {
       title = t("fields.ownedEntityPicker.title"),
@@ -25,7 +27,27 @@ const OwnedEntityPicker = (props) => {
     const identity = await identityApi.getBackstageIdentity();
     return identity.ownershipEntityRefs;
   });
-  if (loading)
+  if (loading) {
+    if (theme === "bui") {
+      return /* @__PURE__ */ jsx(
+        ScaffolderField,
+        {
+          rawDescription: uiSchema["ui:description"] ?? description,
+          required,
+          disabled: uiSchema["ui:disabled"],
+          children: /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              label: title,
+              isRequired: required,
+              isLoading: true,
+              options: [],
+              isDisabled: true
+            }
+          )
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       ScaffolderField,
       {
@@ -33,11 +55,11 @@ const OwnedEntityPicker = (props) => {
         required,
         disabled: uiSchema["ui:disabled"],
         children: /* @__PURE__ */ jsx(
-          Autocomplete,
+          MuiAutocomplete,
           {
             loading,
             renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
+              MuiTextField,
               {
                 ...params,
                 label: title,
@@ -56,6 +78,7 @@ const OwnedEntityPicker = (props) => {
         )
       }
     );
+  }
   const entityPickerUISchema = buildEntityPickerUISchema(
     uiSchema,
     identityRefs

package/dist/components/fields/OwnedEntityPicker/OwnedEntityPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwnedEntityPicker.esm.js","sources":["../../../../src/components/fields/OwnedEntityPicker/OwnedEntityPicker.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 { RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport useAsync from 'react-use/esm/useAsync';\nimport { EntityPicker } from '../EntityPicker/EntityPicker';\n\nimport { OwnedEntityPickerProps } from './schema';\nimport { EntityPickerProps } from '../EntityPicker/schema';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';\n\nexport { OwnedEntityPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `OwnedEntityPicker`\n * field extension.\n *\n * @public\n */\nexport const OwnedEntityPicker = (props: OwnedEntityPickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    schema: {\n      title = t('fields.ownedEntityPicker.title'),\n      description = t('fields.ownedEntityPicker.description'),\n    },\n    uiSchema,\n    required,\n  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const { loading, value: identityRefs } = useAsync(async () => {\n    const identity = await identityApi.getBackstageIdentity();\n    return identity.ownershipEntityRefs;\n  });\n\n  if (loading)\n    return (\n      <ScaffolderField\n        rawDescription={uiSchema['ui:description'] ?? description}\n        required={required}\n        disabled={uiSchema['ui:disabled']}\n      >\n        <Autocomplete\n          loading={loading}\n          renderInput={params => (\n            <TextField\n              {...params}\n              label={title}\n              margin=\"dense\"\n              FormHelperTextProps={{\n                margin: 'dense',\n                style: { marginLeft: 0 },\n              }}\n              variant=\"outlined\"\n              required={required}\n              InputProps={params.InputProps}\n            />\n          )}\n          options={[]}\n        />\n      </ScaffolderField>\n    );\n\n  const entityPickerUISchema = buildEntityPickerUISchema(\n    uiSchema,\n    identityRefs,\n  );\n\n  return <EntityPicker {...props} uiSchema={entityPickerUISchema} />;\n};\n\n/**\n * Builds a `uiSchema` for an `EntityPicker` from a parent `OwnedEntityPicker`.\n * Migrates deprecated parameters such as `allowedKinds` to `catalogFilter` structure.\n *\n * @param uiSchema The `uiSchema` of an `OwnedEntityPicker` component.\n * @param identityRefs The user and group entities that the user claims ownership through.\n * @returns The `uiSchema` for an `EntityPicker` component.\n */\nfunction buildEntityPickerUISchema(\n  uiSchema: OwnedEntityPickerProps['uiSchema'],\n  identityRefs: string[] | undefined,\n): EntityPickerProps['uiSchema'] {\n  // Note: This is typed to avoid es-lint rule TS2698\n  const uiOptions: EntityPickerProps['uiSchema']['ui:options'] =\n    uiSchema?.['ui:options'] || {};\n  const { allowedKinds, ...extraOptions } = uiOptions;\n\n  const catalogFilter = asArray(uiOptions.catalogFilter).map(e => ({\n    ...e,\n    ...(allowedKinds ? { kind: allowedKinds } : {}),\n    [`relations.${RELATION_OWNED_BY}`]: identityRefs || [],\n  }));\n\n  return {\n    'ui:options': {\n      ...extraOptions,\n      catalogFilter,\n    },\n    'ui:disabled': uiSchema['ui:disabled'],\n  };\n}\n\nfunction asArray(catalogFilter: any): any[] {\n  if (catalogFilter) {\n    return Array.isArray(catalogFilter) ? catalogFilter : [catalogFilter];\n  }\n  return [{}];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAoCO,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAkC;AAClE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM;AAAA,IACJ,MAAA,EAAQ;AAAA,MACN,KAAA,GAAQ,EAAE,gCAAgC,CAAA;AAAA,MAC1C,WAAA,GAAc,EAAE,sCAAsC;AAAA,KACxD;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,YAAA,EAAa,GAAI,SAAS,YAAY;AAC5D,IAAA,MAAM,QAAA,GAAW,MAAM,WAAA,CAAY,oBAAA,EAAqB;AACxD,IAAA,OAAO,QAAA,CAAS,mBAAA;AAAA,EAClB,CAAC,CAAA;AAED,EAAA,IAAI,OAAA;AACF,IAAA,uBACE,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAgB,QAAA,CAAS,gBAAgB,CAAA,IAAK,WAAA;AAAA,QAC9C,QAAA;AAAA,QACA,QAAA,EAAU,SAAS,aAAa,CAAA;AAAA,QAEhC,QAAA,kBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,aAAa,CAAA,MAAA,qBACX,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACE,GAAG,MAAA;AAAA,gBACJ,KAAA,EAAO,KAAA;AAAA,gBACP,MAAA,EAAO,OAAA;AAAA,gBACP,mBAAA,EAAqB;AAAA,kBACnB,MAAA,EAAQ,OAAA;AAAA,kBACR,KAAA,EAAO,EAAE,UAAA,EAAY,CAAA;AAAE,iBACzB;AAAA,gBACA,OAAA,EAAQ,UAAA;AAAA,gBACR,QAAA;AAAA,gBACA,YAAY,MAAA,CAAO;AAAA;AAAA,aACrB;AAAA,YAEF,SAAS;AAAC;AAAA;AACZ;AAAA,KACF;AAGJ,EAAA,MAAM,oBAAA,GAAuB,yBAAA;AAAA,IAC3B,QAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,UAAU,oBAAA,EAAsB,CAAA;AAClE;AAUA,SAAS,yBAAA,CACP,UACA,YAAA,EAC+B;AAE/B,EAAA,MAAM,SAAA,GACJ,QAAA,GAAW,YAAY,CAAA,IAAK,EAAC;AAC/B,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,YAAA,EAAa,GAAI,SAAA;AAE1C,EAAA,MAAM,gBAAgB,OAAA,CAAQ,SAAA,CAAU,aAAa,CAAA,CAAE,IAAI,CAAA,CAAA,MAAM;AAAA,IAC/D,GAAG,CAAA;AAAA,IACH,GAAI,YAAA,GAAe,EAAE,IAAA,EAAM,YAAA,KAAiB,EAAC;AAAA,IAC7C,CAAC,CAAA,UAAA,EAAa,iBAAiB,CAAA,CAAE,GAAG,gBAAgB;AAAC,GACvD,CAAE,CAAA;AAEF,EAAA,OAAO;AAAA,IACL,YAAA,EAAc;AAAA,MACZ,GAAG,YAAA;AAAA,MACH;AAAA,KACF;AAAA,IACA,aAAA,EAAe,SAAS,aAAa;AAAA,GACvC;AACF;AAEA,SAAS,QAAQ,aAAA,EAA2B;AAC1C,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,OAAO,MAAM,OAAA,CAAQ,aAAa,CAAA,GAAI,aAAA,GAAgB,CAAC,aAAa,CAAA;AAAA,EACtE;AACA,EAAA,OAAO,CAAC,EAAE,CAAA;AACZ;;;;"}
+{"version":3,"file":"OwnedEntityPicker.esm.js","sources":["../../../../src/components/fields/OwnedEntityPicker/OwnedEntityPicker.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 { RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport MuiAutocomplete from '@material-ui/lab/Autocomplete';\nimport useAsync from 'react-use/esm/useAsync';\nimport { EntityPicker } from '../EntityPicker/EntityPicker';\n\nimport { OwnedEntityPickerProps } from './schema';\nimport { EntityPickerProps } from '../EntityPicker/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';\n\nexport { OwnedEntityPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `OwnedEntityPicker`\n * field extension.\n *\n * @public\n */\nexport const OwnedEntityPicker = (props: OwnedEntityPickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const theme = useScaffolderTheme();\n  const {\n    schema: {\n      title = t('fields.ownedEntityPicker.title'),\n      description = t('fields.ownedEntityPicker.description'),\n    },\n    uiSchema,\n    required,\n  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const { loading, value: identityRefs } = useAsync(async () => {\n    const identity = await identityApi.getBackstageIdentity();\n    return identity.ownershipEntityRefs;\n  });\n\n  if (loading) {\n    if (theme === 'bui') {\n      return (\n        <ScaffolderField\n          rawDescription={uiSchema['ui:description'] ?? description}\n          required={required}\n          disabled={uiSchema['ui:disabled']}\n        >\n          <BuiAutocomplete\n            label={title}\n            isRequired={required}\n            isLoading\n            options={[]}\n            isDisabled\n          />\n        </ScaffolderField>\n      );\n    }\n    return (\n      <ScaffolderField\n        rawDescription={uiSchema['ui:description'] ?? description}\n        required={required}\n        disabled={uiSchema['ui:disabled']}\n      >\n        <MuiAutocomplete\n          loading={loading}\n          renderInput={params => (\n            <TextField\n              {...params}\n              label={title}\n              margin=\"dense\"\n              FormHelperTextProps={{\n                margin: 'dense',\n                style: { marginLeft: 0 },\n              }}\n              variant=\"outlined\"\n              required={required}\n              InputProps={params.InputProps}\n            />\n          )}\n          options={[]}\n        />\n      </ScaffolderField>\n    );\n  }\n\n  const entityPickerUISchema = buildEntityPickerUISchema(\n    uiSchema,\n    identityRefs,\n  );\n\n  return <EntityPicker {...props} uiSchema={entityPickerUISchema} />;\n};\n\n/**\n * Builds a `uiSchema` for an `EntityPicker` from a parent `OwnedEntityPicker`.\n * Migrates deprecated parameters such as `allowedKinds` to `catalogFilter` structure.\n *\n * @param uiSchema The `uiSchema` of an `OwnedEntityPicker` component.\n * @param identityRefs The user and group entities that the user claims ownership through.\n * @returns The `uiSchema` for an `EntityPicker` component.\n */\nfunction buildEntityPickerUISchema(\n  uiSchema: OwnedEntityPickerProps['uiSchema'],\n  identityRefs: string[] | undefined,\n): EntityPickerProps['uiSchema'] {\n  // Note: This is typed to avoid es-lint rule TS2698\n  const uiOptions: EntityPickerProps['uiSchema']['ui:options'] =\n    uiSchema?.['ui:options'] || {};\n  const { allowedKinds, ...extraOptions } = uiOptions;\n\n  const catalogFilter = asArray(uiOptions.catalogFilter).map(e => ({\n    ...e,\n    ...(allowedKinds ? { kind: allowedKinds } : {}),\n    [`relations.${RELATION_OWNED_BY}`]: identityRefs || [],\n  }));\n\n  return {\n    'ui:options': {\n      ...extraOptions,\n      catalogFilter,\n    },\n    'ui:disabled': uiSchema['ui:disabled'],\n  };\n}\n\nfunction asArray(catalogFilter: any): any[] {\n  if (catalogFilter) {\n    return Array.isArray(catalogFilter) ? catalogFilter : [catalogFilter];\n  }\n  return [{}];\n}\n"],"names":["BuiAutocomplete","TextField"],"mappings":"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"}

package/dist/components/fields/OwnedEntityPicker/schema.esm.js

@@ -11,6 +11,7 @@ import '../VirtualizedListbox.esm.js';
 import '@backstage/core-plugin-api/alpha';
 import '../../../translation.esm.js';
 import '@backstage/plugin-scaffolder-react/alpha';
+import '../Autocomplete/Autocomplete.esm.js';
 import { EntityPickerFieldSchema } from '../EntityPicker/schema.esm.js';
 
 const OwnedEntityPickerFieldSchema = EntityPickerFieldSchema;

package/dist/components/fields/OwnedEntityPicker/schema.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.esm.js","sources":["../../../../src/components/fields/OwnedEntityPicker/schema.ts"],"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 { EntityPickerFieldSchema } from '../EntityPicker';\n\n/**\n * @public\n */\nexport const OwnedEntityPickerFieldSchema = EntityPickerFieldSchema;\n\n/**\n * The input props that can be specified under `ui:options` for the\n * `OwnedEntityPicker` field extension.\n * @public\n */\nexport type OwnedEntityPickerUiOptions = NonNullable<\n  (typeof OwnedEntityPickerFieldSchema.TProps.uiSchema)['ui:options']\n>;\n\nexport type OwnedEntityPickerProps = typeof OwnedEntityPickerFieldSchema.TProps;\n\nexport const OwnedEntityPickerSchema = OwnedEntityPickerFieldSchema.schema;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoBO,MAAM,4BAAA,GAA+B;AAarC,MAAM,0BAA0B,4BAAA,CAA6B;;;;"}
+{"version":3,"file":"schema.esm.js","sources":["../../../../src/components/fields/OwnedEntityPicker/schema.ts"],"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 { EntityPickerFieldSchema } from '../EntityPicker';\n\n/**\n * @public\n */\nexport const OwnedEntityPickerFieldSchema = EntityPickerFieldSchema;\n\n/**\n * The input props that can be specified under `ui:options` for the\n * `OwnedEntityPicker` field extension.\n * @public\n */\nexport type OwnedEntityPickerUiOptions = NonNullable<\n  (typeof OwnedEntityPickerFieldSchema.TProps.uiSchema)['ui:options']\n>;\n\nexport type OwnedEntityPickerProps = typeof OwnedEntityPickerFieldSchema.TProps;\n\nexport const OwnedEntityPickerSchema = OwnedEntityPickerFieldSchema.schema;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBO,MAAM,4BAAA,GAA+B;AAarC,MAAM,0BAA0B,4BAAA,CAA6B;;;;"}

package/dist/components/fields/RepoBranchPicker/BitbucketRepoBranchPicker.esm.js

@@ -1,12 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useApi } from '@backstage/core-plugin-api';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-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 { useState, useCallback } from 'react';
 import useDebounce from 'react-use/esm/useDebounce';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
 
 const BitbucketRepoBranchPicker = ({
   onChange,
@@ -16,6 +18,7 @@ const BitbucketRepoBranchPicker = ({
   isDisabled,
   required
 }) => {
+  const theme = useScaffolderTheme();
   const { host, workspace, repository, branch } = state;
   const [availableBranches, setAvailableBranches] = useState([]);
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -36,6 +39,27 @@ const BitbucketRepoBranchPicker = ({
     });
   }, [host, workspace, repository, accessToken, scaffolderApi]);
   useDebounce(updateAvailableBranches, 500, [updateAvailableBranches]);
+  if (theme === "bui") {
+    const options = availableBranches.map((b) => ({ label: b, value: b }));
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        label: "Branch",
+        description: "The branch of the repository",
+        inputValue: branch ?? "",
+        onInputChange: (value) => onChange({ branch: value }),
+        onSelectionChange: (key) => {
+          if (key !== null) {
+            onChange({ branch: String(key) });
+          }
+        },
+        options,
+        isDisabled,
+        isRequired: required,
+        isInvalid: rawErrors?.length > 0 && !branch
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -44,7 +68,7 @@ const BitbucketRepoBranchPicker = ({
       error: rawErrors?.length > 0 && !branch,
       children: [
         /* @__PURE__ */ jsx(
-          Autocomplete,
+          MuiAutocomplete,
           {
             value: branch,
             onChange: (_, newValue) => {
@@ -53,7 +77,7 @@ const BitbucketRepoBranchPicker = ({
             disabled: isDisabled,
             options: availableBranches,
             renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
+              MuiTextField,
               {
                 ...params,
                 label: "Branch",

package/dist/components/fields/RepoBranchPicker/BitbucketRepoBranchPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitbucketRepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/BitbucketRepoBranchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { useCallback, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { BaseRepoBranchPickerProps } from './types';\n\n/**\n * The underlying component that is rendered in the form for the `BitbucketRepoBranchPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const BitbucketRepoBranchPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  accessToken,\n  isDisabled,\n  required,\n}: BaseRepoBranchPickerProps<{\n  accessToken?: string;\n}>) => {\n  const { host, workspace, repository, branch } = state;\n\n  const [availableBranches, setAvailableBranches] = useState<string[]>([]);\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const updateAvailableBranches = useCallback(() => {\n    if (\n      !scaffolderApi.autocomplete ||\n      !workspace ||\n      !repository ||\n      !accessToken ||\n      host !== 'bitbucket.org'\n    ) {\n      setAvailableBranches([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'branches',\n        context: { workspace, repository },\n        provider: 'bitbucket-cloud',\n      })\n      .then(({ results }) => {\n        setAvailableBranches(results.map(r => r.id));\n      })\n      .catch(() => {\n        setAvailableBranches([]);\n      });\n  }, [host, workspace, repository, accessToken, scaffolderApi]);\n\n  useDebounce(updateAvailableBranches, 500, [updateAvailableBranches]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !branch}\n    >\n      <Autocomplete\n        value={branch}\n        onChange={(_, newValue) => {\n          onChange({ branch: newValue || '' });\n        }}\n        disabled={isDisabled}\n        options={availableBranches}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label=\"Branch\"\n            disabled={isDisabled}\n            required={required}\n          />\n        )}\n        freeSolo\n        autoSelect\n      />\n      <FormHelperText>The branch of the repository</FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiCO,MAAM,4BAA4B,CAAC;AAAA,EACxC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAEO;AACL,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,UAAA,EAAY,QAAO,GAAI,KAAA;AAEhD,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEvE,EAAA,MAAM,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAE7C,EAAA,MAAM,uBAAA,GAA0B,YAAY,MAAM;AAChD,IAAA,IACE,CAAC,aAAA,CAAc,YAAA,IACf,CAAC,SAAA,IACD,CAAC,UAAA,IACD,CAAC,WAAA,IACD,IAAA,KAAS,eAAA,EACT;AACA,MAAA,oBAAA,CAAqB,EAAE,CAAA;AACvB,MAAA;AAAA,IACF;AAEA,IAAA,aAAA,CACG,YAAA,CAAa;AAAA,MACZ,KAAA,EAAO,WAAA;AAAA,MACP,QAAA,EAAU,UAAA;AAAA,MACV,OAAA,EAAS,EAAE,SAAA,EAAW,UAAA,EAAW;AAAA,MACjC,QAAA,EAAU;AAAA,KACX,CAAA,CACA,IAAA,CAAK,CAAC,EAAE,SAAQ,KAAM;AACrB,MAAA,oBAAA,CAAqB,OAAA,CAAQ,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,EAAE,CAAC,CAAA;AAAA,IAC7C,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,oBAAA,CAAqB,EAAE,CAAA;AAAA,IACzB,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,IAAA,EAAM,WAAW,UAAA,EAAY,WAAA,EAAa,aAAa,CAAC,CAAA;AAE5D,EAAA,WAAA,CAAY,uBAAA,EAAyB,GAAA,EAAK,CAAC,uBAAuB,CAAC,CAAA;AAEnE,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAO,QAAA;AAAA,MACP,QAAA;AAAA,MACA,KAAA,EAAO,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,MAAA;AAAA,YACP,QAAA,EAAU,CAAC,CAAA,EAAG,QAAA,KAAa;AACzB,cAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,QAAA,IAAY,EAAA,EAAI,CAAA;AAAA,YACrC,CAAA;AAAA,YACA,QAAA,EAAU,UAAA;AAAA,YACV,OAAA,EAAS,iBAAA;AAAA,YACT,aAAa,CAAA,MAAA,qBACX,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACE,GAAG,MAAA;AAAA,gBACJ,KAAA,EAAM,QAAA;AAAA,gBACN,QAAA,EAAU,UAAA;AAAA,gBACV;AAAA;AAAA,aACF;AAAA,YAEF,QAAA,EAAQ,IAAA;AAAA,YACR,UAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBACA,GAAA,CAAC,kBAAe,QAAA,EAAA,8BAAA,EAA4B;AAAA;AAAA;AAAA,GAC9C;AAEJ;;;;"}
+{"version":3,"file":"BitbucketRepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/BitbucketRepoBranchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport MuiTextField from '@material-ui/core/TextField';\nimport MuiAutocomplete from '@material-ui/lab/Autocomplete';\nimport { useCallback, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { BaseRepoBranchPickerProps } from './types';\nimport { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';\nimport { Autocomplete as BuiAutocomplete } from '../Autocomplete';\nimport type { Key } from 'react-aria-components';\n\n/**\n * The underlying component that is rendered in the form for the `BitbucketRepoBranchPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const BitbucketRepoBranchPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  accessToken,\n  isDisabled,\n  required,\n}: BaseRepoBranchPickerProps<{\n  accessToken?: string;\n}>) => {\n  const theme = useScaffolderTheme();\n  const { host, workspace, repository, branch } = state;\n\n  const [availableBranches, setAvailableBranches] = useState<string[]>([]);\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const updateAvailableBranches = useCallback(() => {\n    if (\n      !scaffolderApi.autocomplete ||\n      !workspace ||\n      !repository ||\n      !accessToken ||\n      host !== 'bitbucket.org'\n    ) {\n      setAvailableBranches([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'branches',\n        context: { workspace, repository },\n        provider: 'bitbucket-cloud',\n      })\n      .then(({ results }) => {\n        setAvailableBranches(results.map(r => r.id));\n      })\n      .catch(() => {\n        setAvailableBranches([]);\n      });\n  }, [host, workspace, repository, accessToken, scaffolderApi]);\n\n  useDebounce(updateAvailableBranches, 500, [updateAvailableBranches]);\n\n  if (theme === 'bui') {\n    const options = availableBranches.map(b => ({ label: b, value: b }));\n\n    return (\n      <BuiAutocomplete\n        label=\"Branch\"\n        description=\"The branch of the repository\"\n        inputValue={branch ?? ''}\n        onInputChange={value => onChange({ branch: value })}\n        onSelectionChange={(key: Key | null) => {\n          if (key !== null) {\n            onChange({ branch: String(key) });\n          }\n        }}\n        options={options}\n        isDisabled={isDisabled}\n        isRequired={required}\n        isInvalid={rawErrors?.length > 0 && !branch}\n      />\n    );\n  }\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !branch}\n    >\n      <MuiAutocomplete\n        value={branch}\n        onChange={(_, newValue) => {\n          onChange({ branch: newValue || '' });\n        }}\n        disabled={isDisabled}\n        options={availableBranches}\n        renderInput={params => (\n          <MuiTextField\n            {...params}\n            label=\"Branch\"\n            disabled={isDisabled}\n            required={required}\n          />\n        )}\n        freeSolo\n        autoSelect\n      />\n      <FormHelperText>The branch of the repository</FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":["BuiAutocomplete"],"mappings":";;;;;;;;;;;;AAoCO,MAAM,4BAA4B,CAAC;AAAA,EACxC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAEO;AACL,EAAA,MAAM,QAAQ,kBAAA,EAAmB;AACjC,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,UAAA,EAAY,QAAO,GAAI,KAAA;AAEhD,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEvE,EAAA,MAAM,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAE7C,EAAA,MAAM,uBAAA,GAA0B,YAAY,MAAM;AAChD,IAAA,IACE,CAAC,aAAA,CAAc,YAAA,IACf,CAAC,SAAA,IACD,CAAC,UAAA,IACD,CAAC,WAAA,IACD,IAAA,KAAS,eAAA,EACT;AACA,MAAA,oBAAA,CAAqB,EAAE,CAAA;AACvB,MAAA;AAAA,IACF;AAEA,IAAA,aAAA,CACG,YAAA,CAAa;AAAA,MACZ,KAAA,EAAO,WAAA;AAAA,MACP,QAAA,EAAU,UAAA;AAAA,MACV,OAAA,EAAS,EAAE,SAAA,EAAW,UAAA,EAAW;AAAA,MACjC,QAAA,EAAU;AAAA,KACX,CAAA,CACA,IAAA,CAAK,CAAC,EAAE,SAAQ,KAAM;AACrB,MAAA,oBAAA,CAAqB,OAAA,CAAQ,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,EAAE,CAAC,CAAA;AAAA,IAC7C,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,oBAAA,CAAqB,EAAE,CAAA;AAAA,IACzB,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,IAAA,EAAM,WAAW,UAAA,EAAY,WAAA,EAAa,aAAa,CAAC,CAAA;AAE5D,EAAA,WAAA,CAAY,uBAAA,EAAyB,GAAA,EAAK,CAAC,uBAAuB,CAAC,CAAA;AAEnE,EAAA,IAAI,UAAU,KAAA,EAAO;AACnB,IAAA,MAAM,OAAA,GAAU,kBAAkB,GAAA,CAAI,CAAA,CAAA,MAAM,EAAE,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,CAAA,EAAE,CAAE,CAAA;AAEnE,IAAA,uBACE,GAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,QAAA;AAAA,QACN,WAAA,EAAY,8BAAA;AAAA,QACZ,YAAY,MAAA,IAAU,EAAA;AAAA,QACtB,eAAe,CAAA,KAAA,KAAS,QAAA,CAAS,EAAE,MAAA,EAAQ,OAAO,CAAA;AAAA,QAClD,iBAAA,EAAmB,CAAC,GAAA,KAAoB;AACtC,UAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,YAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,MAAA,CAAO,GAAG,GAAG,CAAA;AAAA,UAClC;AAAA,QACF,CAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA,EAAY,QAAA;AAAA,QACZ,SAAA,EAAW,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC;AAAA;AAAA,KACvC;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAO,QAAA;AAAA,MACP,QAAA;AAAA,MACA,KAAA,EAAO,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,MAAA;AAAA,YACP,QAAA,EAAU,CAAC,CAAA,EAAG,QAAA,KAAa;AACzB,cAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,QAAA,IAAY,EAAA,EAAI,CAAA;AAAA,YACrC,CAAA;AAAA,YACA,QAAA,EAAU,UAAA;AAAA,YACV,OAAA,EAAS,iBAAA;AAAA,YACT,aAAa,CAAA,MAAA,qBACX,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACE,GAAG,MAAA;AAAA,gBACJ,KAAA,EAAM,QAAA;AAAA,gBACN,QAAA,EAAU,UAAA;AAAA,gBACV;AAAA;AAAA,aACF;AAAA,YAEF,QAAA,EAAQ,IAAA;AAAA,YACR,UAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBACA,GAAA,CAAC,kBAAe,QAAA,EAAA,8BAAA,EAA4B;AAAA;AAAA;AAAA,GAC9C;AAEJ;;;;"}

package/dist/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.esm.js

@@ -1,7 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import TextField from '@material-ui/core/TextField';
+import MuiTextField from '@material-ui/core/TextField';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { TextField } from '@backstage/ui';
 
 const DefaultRepoBranchPicker = ({
   onChange,
@@ -10,7 +12,22 @@ const DefaultRepoBranchPicker = ({
   isDisabled,
   required
 }) => {
+  const theme = useScaffolderTheme();
   const { branch } = state;
+  if (theme === "bui") {
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: "Branch",
+        description: "The branch of the repository",
+        isDisabled,
+        onChange: (value) => onChange({ branch: value }),
+        value: branch ?? "",
+        isInvalid: rawErrors?.length > 0 && !branch,
+        isRequired: required
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -19,7 +36,7 @@ const DefaultRepoBranchPicker = ({
       error: rawErrors?.length > 0 && !branch,
       children: [
         /* @__PURE__ */ jsx(
-          TextField,
+          MuiTextField,
           {
             id: "branchInput",
             label: "Branch",

package/dist/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\n\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\n\nimport { BaseRepoBranchPickerProps } from './types';\n\n/**\n * The underlying component that is rendered in the form for the `DefaultRepoBranchPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const DefaultRepoBranchPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  isDisabled,\n  required,\n}: BaseRepoBranchPickerProps) => {\n  const { branch } = state;\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !branch}\n    >\n      <TextField\n        id=\"branchInput\"\n        label=\"Branch\"\n        disabled={isDisabled}\n        onChange={e => onChange({ branch: e.target.value })}\n        value={branch}\n      />\n      <FormHelperText>The branch of the repository</FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,0BAA0B,CAAC;AAAA,EACtC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAiC;AAC/B,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAO,QAAA;AAAA,MACP,QAAA;AAAA,MACA,KAAA,EAAO,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,aAAA;AAAA,YACH,KAAA,EAAM,QAAA;AAAA,YACN,QAAA,EAAU,UAAA;AAAA,YACV,QAAA,EAAU,OAAK,QAAA,CAAS,EAAE,QAAQ,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AAAA,YAClD,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,wBACA,GAAA,CAAC,kBAAe,QAAA,EAAA,8BAAA,EAA4B;AAAA;AAAA;AAAA,GAC9C;AAEJ;;;;"}
+{"version":3,"file":"DefaultRepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/DefaultRepoBranchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\n\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport MuiTextField from '@material-ui/core/TextField';\n\nimport { BaseRepoBranchPickerProps } from './types';\nimport { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';\nimport { TextField as BuiTextField } from '@backstage/ui';\n\n/**\n * The underlying component that is rendered in the form for the `DefaultRepoBranchPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const DefaultRepoBranchPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  isDisabled,\n  required,\n}: BaseRepoBranchPickerProps) => {\n  const theme = useScaffolderTheme();\n  const { branch } = state;\n\n  if (theme === 'bui') {\n    return (\n      <BuiTextField\n        label=\"Branch\"\n        description=\"The branch of the repository\"\n        isDisabled={isDisabled}\n        onChange={value => onChange({ branch: value })}\n        value={branch ?? ''}\n        isInvalid={rawErrors?.length > 0 && !branch}\n        isRequired={required}\n      />\n    );\n  }\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !branch}\n    >\n      <MuiTextField\n        id=\"branchInput\"\n        label=\"Branch\"\n        disabled={isDisabled}\n        onChange={e => onChange({ branch: e.target.value })}\n        value={branch}\n      />\n      <FormHelperText>The branch of the repository</FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":["BuiTextField"],"mappings":";;;;;;;AA+BO,MAAM,0BAA0B,CAAC;AAAA,EACtC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAiC;AAC/B,EAAA,MAAM,QAAQ,kBAAA,EAAmB;AACjC,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,IAAI,UAAU,KAAA,EAAO;AACnB,IAAA,uBACE,GAAA;AAAA,MAACA,SAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,QAAA;AAAA,QACN,WAAA,EAAY,8BAAA;AAAA,QACZ,UAAA;AAAA,QACA,UAAU,CAAA,KAAA,KAAS,QAAA,CAAS,EAAE,MAAA,EAAQ,OAAO,CAAA;AAAA,QAC7C,OAAO,MAAA,IAAU,EAAA;AAAA,QACjB,SAAA,EAAW,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC,MAAA;AAAA,QACrC,UAAA,EAAY;AAAA;AAAA,KACd;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAO,QAAA;AAAA,MACP,QAAA;AAAA,MACA,KAAA,EAAO,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,aAAA;AAAA,YACH,KAAA,EAAM,QAAA;AAAA,YACN,QAAA,EAAU,UAAA;AAAA,YACV,QAAA,EAAU,OAAK,QAAA,CAAS,EAAE,QAAQ,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AAAA,YAClD,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,wBACA,GAAA,CAAC,kBAAe,QAAA,EAAA,8BAAA,EAA4B;AAAA;AAAA;AAAA,GAC9C;AAEJ;;;;"}

package/dist/components/fields/RepoBranchPicker/GitHubRepoBranchPicker.esm.js

@@ -1,12 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useApi } from '@backstage/core-plugin-api';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-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 { useState, useCallback } from 'react';
 import useDebounce from 'react-use/esm/useDebounce';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
 
 const GitHubRepoBranchPicker = ({
   onChange,
@@ -16,6 +18,7 @@ const GitHubRepoBranchPicker = ({
   isDisabled,
   required
 }) => {
+  const theme = useScaffolderTheme();
   const { host, owner, repository, branch } = state;
   const [availableBranches, setAvailableBranches] = useState([]);
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -36,6 +39,27 @@ const GitHubRepoBranchPicker = ({
     });
   }, [host, owner, repository, accessToken, scaffolderApi]);
   useDebounce(updateAvailableBranches, 500, [updateAvailableBranches]);
+  if (theme === "bui") {
+    const options = availableBranches.map((b) => ({ label: b, value: b }));
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        label: "Branch",
+        description: "The branch of the repository",
+        inputValue: branch ?? "",
+        onInputChange: (value) => onChange({ branch: value }),
+        onSelectionChange: (key) => {
+          if (key !== null) {
+            onChange({ branch: String(key) });
+          }
+        },
+        options,
+        isDisabled,
+        isRequired: required,
+        isInvalid: rawErrors?.length > 0 && !branch
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -44,7 +68,7 @@ const GitHubRepoBranchPicker = ({
       error: rawErrors?.length > 0 && !branch,
       children: [
         /* @__PURE__ */ jsx(
-          Autocomplete,
+          MuiAutocomplete,
           {
             value: branch,
             onChange: (_, newValue) => {
@@ -53,7 +77,7 @@ const GitHubRepoBranchPicker = ({
             disabled: isDisabled,
             options: availableBranches,
             renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
+              MuiTextField,
               {
                 ...params,
                 label: "Branch",