@backstage/plugin-scaffolder 1.24.0-next.3 → 1.25.0-next.0

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

@@ -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 FormControl from '@material-ui/core/FormControl';\nimport Autocomplete, {\n  AutocompleteChangeReason,\n  createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport React, { 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';\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 {\n    onChange,\n    schema: { title = 'Entity', description = 'An entity from the catalog' },\n    required,\n    uiSchema,\n    rawErrors,\n    formData,\n    idSchema,\n  } = props;\n  const catalogFilter = buildCatalogFilter(uiSchema);\n  const defaultKind = uiSchema['ui:options']?.defaultKind;\n  const defaultNamespace =\n    uiSchema['ui:options']?.defaultNamespace || undefined;\n\n  const catalogApi = useApi(catalogApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n\n  const { value: entities, loading } = useAsync(async () => {\n    const fields = [\n      'metadata.name',\n      'metadata.namespace',\n      'metadata.title',\n      'kind',\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 (entities?.catalogEntities.length === 1 && selectedEntity === '') {\n      onChange(stringifyEntityRef(entities.catalogEntities[0]));\n    }\n  }, [entities, onChange, selectedEntity]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !formData}\n    >\n      <Autocomplete\n        disabled={entities?.catalogEntities.length === 1}\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\n        freeSolo={allowArbitraryValues}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\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            entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n              ?.primaryTitle!,\n        })}\n        ListboxComponent={VirtualizedListbox}\n      />\n    </FormControl>\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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"}
+{"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 FormControl from '@material-ui/core/FormControl';\nimport Autocomplete, {\n  AutocompleteChangeReason,\n  createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport React, { 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';\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  } = props;\n  const catalogFilter = buildCatalogFilter(uiSchema);\n  const defaultKind = uiSchema['ui:options']?.defaultKind;\n  const defaultNamespace =\n    uiSchema['ui:options']?.defaultNamespace || undefined;\n\n  const catalogApi = useApi(catalogApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n\n  const { value: entities, loading } = useAsync(async () => {\n    const fields = [\n      'metadata.name',\n      'metadata.namespace',\n      'metadata.title',\n      'kind',\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 (entities?.catalogEntities.length === 1 && selectedEntity === '') {\n      onChange(stringifyEntityRef(entities.catalogEntities[0]));\n    }\n  }, [entities, onChange, selectedEntity]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !formData}\n    >\n      <Autocomplete\n        disabled={entities?.catalogEntities.length === 1}\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\n        freeSolo={allowArbitraryValues}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\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            entities?.entityRefToPresentation.get(stringifyEntityRef(option))\n              ?.primaryTitle!,\n        })}\n        ListboxComponent={VirtualizedListbox}\n      />\n    </FormControl>\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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"}

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

@@ -7,6 +7,8 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 export { EntityTagsPickerSchema } from './schema.esm.js';
 
 const EntityTagsPicker = (props) => {
@@ -19,6 +21,7 @@ const EntityTagsPicker = (props) => {
   const kinds = uiSchema["ui:options"]?.kinds;
   const showCounts = uiSchema["ui:options"]?.showCounts;
   const helperText = uiSchema["ui:options"]?.helperText;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const { loading, value: existingTags } = useAsync(async () => {
     const facet = "metadata.tags";
     const tagsRequest = { facets: [facet] };
@@ -69,10 +72,10 @@ const EntityTagsPicker = (props) => {
         TextField,
         {
           ...params,
-          label: "Tags",
+          label: t("fields.entityTagsPicker.title"),
           onChange: (e) => setInputValue(e.target.value),
           error: inputError,
-          helperText: helperText ?? "Add any relevant tags, hit 'Enter' to add new tags. Valid format: [a-z0-9+#] separated by [-], at most 63 characters",
+          helperText: helperText ?? t("fields.entityTagsPicker.description"),
           FormHelperTextProps: { margin: "dense", style: { marginLeft: 0 } }
         }
       )

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

@@ -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 React, { 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 FormControl from '@material-ui/core/FormControl';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { EntityTagsPickerProps } from './schema';\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 { formData, onChange, uiSchema } = 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\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 = (_: React.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    <FormControl margin=\"normal\">\n      <Autocomplete\n        multiple\n        freeSolo\n        filterSelectedOptions\n        onChange={setTags}\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=\"Tags\"\n            onChange={e => setInputValue(e.target.value)}\n            error={inputError}\n            helperText={\n              helperText ??\n              \"Add any relevant tags, hit 'Enter' to add new tags. Valid format: [a-z0-9+#] separated by [-], at most 63 characters\"\n            }\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n          />\n        )}\n      />\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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 React, { 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 FormControl from '@material-ui/core/FormControl';\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';\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 { formData, onChange, uiSchema } = 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 { t } = useTranslationRef(scaffolderTranslationRef);\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 = (_: React.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    <FormControl margin=\"normal\">\n      <Autocomplete\n        multiple\n        freeSolo\n        filterSelectedOptions\n        onChange={setTags}\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={t('fields.entityTagsPicker.title')}\n            onChange={e => setInputValue(e.target.value)}\n            error={inputError}\n            helperText={helperText ?? t('fields.entityTagsPicker.description')}\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n          />\n        )}\n      />\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -9,10 +9,16 @@ import { NotFoundError } from '@backstage/errors';
 import useAsync from 'react-use/esm/useAsync';
 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';
 
 const MyGroupsPicker = (props) => {
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
-    schema: { title, description },
+    schema: {
+      title = t("fields.myGroupsPicker.title"),
+      description = t("fields.myGroupsPicker.description")
+    },
     required,
     rawErrors,
     onChange,

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 React, { useEffect } from 'react';\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\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';\n\nexport { MyGroupsPickerSchema };\n\nexport const MyGroupsPicker = (props: MyGroupsPickerProps) => {\n  const {\n    schema: { title, description },\n    required,\n    rawErrors,\n    onChange,\n    formData,\n  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const errorApi = useApi(errorApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\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 = (_: React.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 (groups?.catalogEntities.length === 1 && !selectedEntity) {\n      onChange(stringifyEntityRef(groups.catalogEntities[0]));\n    }\n  }, [groups, onChange, selectedEntity]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0}\n    >\n      <Autocomplete\n        disabled={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            helperText={description}\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    </FormControl>\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 React, { useEffect } from 'react';\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\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';\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  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const errorApi = useApi(errorApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\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 = (_: React.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 (groups?.catalogEntities.length === 1 && !selectedEntity) {\n      onChange(stringifyEntityRef(groups.catalogEntities[0]));\n    }\n  }, [groups, onChange, selectedEntity]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0}\n    >\n      <Autocomplete\n        disabled={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            helperText={description}\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    </FormControl>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -5,11 +5,17 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 import React from 'react';
 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';
 export { OwnedEntityPickerSchema } from './schema.esm.js';
 
 const OwnedEntityPicker = (props) => {
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
-    schema: { title = "Entity", description = "An entity from the catalog" },
+    schema: {
+      title = t("fields.ownedEntityPicker.title"),
+      description = t("fields.ownedEntityPicker.description")
+    },
     uiSchema,
     required
   } = props;

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 React from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { EntityPicker } from '../EntityPicker/EntityPicker';\n\nimport { OwnedEntityPickerProps } from './schema';\nimport { EntityPickerProps } from '../EntityPicker/schema';\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 {\n    schema: { title = 'Entity', description = 'An entity from the catalog' },\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      <Autocomplete\n        loading={loading}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={params.InputProps}\n          />\n        )}\n        options={[]}\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 = uiOptions.allowedKinds;\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      catalogFilter,\n    },\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":";;;;;;;;;AAkCa,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA,EAAE,KAAQ,GAAA,QAAA,EAAU,cAAc,4BAA6B,EAAA;AAAA,IACvE,QAAA;AAAA,IACA,QAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,OAAS,EAAA,KAAA,EAAO,YAAa,EAAA,GAAI,SAAS,YAAY;AAC5D,IAAM,MAAA,QAAA,GAAW,MAAM,WAAA,CAAY,oBAAqB,EAAA,CAAA;AACxD,IAAA,OAAO,QAAS,CAAA,mBAAA,CAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAI,IAAA,OAAA;AACF,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,aAAa,CACX,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAA;AAAA,YACJ,KAAO,EAAA,KAAA;AAAA,YACP,MAAO,EAAA,OAAA;AAAA,YACP,UAAY,EAAA,WAAA;AAAA,YACZ,mBAAA,EAAqB,EAAE,MAAQ,EAAA,OAAA,EAAS,OAAO,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,YACjE,OAAQ,EAAA,UAAA;AAAA,YACR,QAAA;AAAA,YACA,YAAY,MAAO,CAAA,UAAA;AAAA,WAAA;AAAA,SACrB;AAAA,QAEF,SAAS,EAAC;AAAA,OAAA;AAAA,KACZ,CAAA;AAGJ,EAAA,MAAM,oBAAuB,GAAA,yBAAA;AAAA,IAC3B,QAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,UAAU,oBAAsB,EAAA,CAAA,CAAA;AAClE,EAAA;AAUA,SAAS,yBAAA,CACP,UACA,YAC+B,EAAA;AAE/B,EAAA,MAAM,SACJ,GAAA,QAAA,GAAW,YAAY,CAAA,IAAK,EAAC,CAAA;AAC/B,EAAA,MAAM,eAAe,SAAU,CAAA,YAAA,CAAA;AAE/B,EAAA,MAAM,gBAAgB,OAAQ,CAAA,SAAA,CAAU,aAAa,CAAA,CAAE,IAAI,CAAM,CAAA,MAAA;AAAA,IAC/D,GAAG,CAAA;AAAA,IACH,GAAI,YAAe,GAAA,EAAE,IAAM,EAAA,YAAA,KAAiB,EAAC;AAAA,IAC7C,CAAC,CAAa,UAAA,EAAA,iBAAiB,CAAE,CAAA,GAAG,gBAAgB,EAAC;AAAA,GACrD,CAAA,CAAA,CAAA;AAEF,EAAO,OAAA;AAAA,IACL,YAAc,EAAA;AAAA,MACZ,aAAA;AAAA,KACF;AAAA,GACF,CAAA;AACF,CAAA;AAEA,SAAS,QAAQ,aAA2B,EAAA;AAC1C,EAAA,IAAI,aAAe,EAAA;AACjB,IAAA,OAAO,MAAM,OAAQ,CAAA,aAAa,CAAI,GAAA,aAAA,GAAgB,CAAC,aAAa,CAAA,CAAA;AAAA,GACtE;AACA,EAAO,OAAA,CAAC,EAAE,CAAA,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 Autocomplete from '@material-ui/lab/Autocomplete';\nimport React from 'react';\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';\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      <Autocomplete\n        loading={loading}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={params.InputProps}\n          />\n        )}\n        options={[]}\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 = uiOptions.allowedKinds;\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      catalogFilter,\n    },\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":";;;;;;;;;;;AAoCa,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA;AAAA,MACN,KAAA,GAAQ,EAAE,gCAAgC,CAAA;AAAA,MAC1C,WAAA,GAAc,EAAE,sCAAsC,CAAA;AAAA,KACxD;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,OAAS,EAAA,KAAA,EAAO,YAAa,EAAA,GAAI,SAAS,YAAY;AAC5D,IAAM,MAAA,QAAA,GAAW,MAAM,WAAA,CAAY,oBAAqB,EAAA,CAAA;AACxD,IAAA,OAAO,QAAS,CAAA,mBAAA,CAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAI,IAAA,OAAA;AACF,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,aAAa,CACX,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAA;AAAA,YACJ,KAAO,EAAA,KAAA;AAAA,YACP,MAAO,EAAA,OAAA;AAAA,YACP,UAAY,EAAA,WAAA;AAAA,YACZ,mBAAA,EAAqB,EAAE,MAAQ,EAAA,OAAA,EAAS,OAAO,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,YACjE,OAAQ,EAAA,UAAA;AAAA,YACR,QAAA;AAAA,YACA,YAAY,MAAO,CAAA,UAAA;AAAA,WAAA;AAAA,SACrB;AAAA,QAEF,SAAS,EAAC;AAAA,OAAA;AAAA,KACZ,CAAA;AAGJ,EAAA,MAAM,oBAAuB,GAAA,yBAAA;AAAA,IAC3B,QAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,UAAU,oBAAsB,EAAA,CAAA,CAAA;AAClE,EAAA;AAUA,SAAS,yBAAA,CACP,UACA,YAC+B,EAAA;AAE/B,EAAA,MAAM,SACJ,GAAA,QAAA,GAAW,YAAY,CAAA,IAAK,EAAC,CAAA;AAC/B,EAAA,MAAM,eAAe,SAAU,CAAA,YAAA,CAAA;AAE/B,EAAA,MAAM,gBAAgB,OAAQ,CAAA,SAAA,CAAU,aAAa,CAAA,CAAE,IAAI,CAAM,CAAA,MAAA;AAAA,IAC/D,GAAG,CAAA;AAAA,IACH,GAAI,YAAe,GAAA,EAAE,IAAM,EAAA,YAAA,KAAiB,EAAC;AAAA,IAC7C,CAAC,CAAa,UAAA,EAAA,iBAAiB,CAAE,CAAA,GAAG,gBAAgB,EAAC;AAAA,GACrD,CAAA,CAAA,CAAA;AAEF,EAAO,OAAA;AAAA,IACL,YAAc,EAAA;AAAA,MACZ,aAAA;AAAA,KACF;AAAA,GACF,CAAA;AACF,CAAA;AAEA,SAAS,QAAQ,aAA2B,EAAA;AAC1C,EAAA,IAAI,aAAe,EAAA;AACjB,IAAA,OAAO,MAAM,OAAQ,CAAA,aAAa,CAAI,GAAA,aAAA,GAAgB,CAAC,aAAa,CAAA,CAAA;AAAA,GACtE;AACA,EAAO,OAAA,CAAC,EAAE,CAAA,CAAA;AACZ;;;;"}

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

@@ -1,10 +1,16 @@
 import React from 'react';
 import { EntityPicker } from '../EntityPicker/EntityPicker.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 export { OwnerPickerSchema } from './schema.esm.js';
 
 const OwnerPicker = (props) => {
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
-    schema: { title = "Owner", description = "The owner of the component" },
+    schema: {
+      title = t("fields.ownerPicker.title"),
+      description = t("fields.ownerPicker.description")
+    },
     uiSchema,
     ...restProps
   } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"OwnerPicker.esm.js","sources":["../../../../src/components/fields/OwnerPicker/OwnerPicker.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 React from 'react';\nimport { EntityPicker } from '../EntityPicker/EntityPicker';\nimport { OwnerPickerProps } from './schema';\n\nexport { OwnerPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `OwnerPicker`\n * field extension.\n *\n * @public\n */\nexport const OwnerPicker = (props: OwnerPickerProps) => {\n  const {\n    schema: { title = 'Owner', description = 'The owner of the component' },\n    uiSchema,\n    ...restProps\n  } = props;\n\n  const defaultNamespace = uiSchema['ui:options']?.defaultNamespace;\n  const allowedKinds = uiSchema['ui:options']?.allowedKinds;\n\n  const catalogFilter = uiSchema['ui:options']?.catalogFilter || {\n    kind: allowedKinds || ['Group', 'User'],\n  };\n\n  const ownerUiSchema = {\n    ...uiSchema,\n    'ui:options': {\n      catalogFilter,\n      defaultKind: 'Group',\n      allowArbitraryValues:\n        uiSchema['ui:options']?.allowArbitraryValues ?? true,\n      ...(defaultNamespace !== undefined ? { defaultNamespace } : {}),\n    },\n  };\n\n  return (\n    <EntityPicker\n      {...restProps}\n      schema={{ title, description }}\n      uiSchema={ownerUiSchema}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AA2Ba,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA,EAAE,KAAQ,GAAA,OAAA,EAAS,cAAc,4BAA6B,EAAA;AAAA,IACtE,QAAA;AAAA,IACA,GAAG,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,YAAY,CAAG,EAAA,gBAAA,CAAA;AACjD,EAAM,MAAA,YAAA,GAAe,QAAS,CAAA,YAAY,CAAG,EAAA,YAAA,CAAA;AAE7C,EAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,YAAY,CAAA,EAAG,aAAiB,IAAA;AAAA,IAC7D,IAAM,EAAA,YAAA,IAAgB,CAAC,OAAA,EAAS,MAAM,CAAA;AAAA,GACxC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,QAAA;AAAA,IACH,YAAc,EAAA;AAAA,MACZ,aAAA;AAAA,MACA,WAAa,EAAA,OAAA;AAAA,MACb,oBACE,EAAA,QAAA,CAAS,YAAY,CAAA,EAAG,oBAAwB,IAAA,IAAA;AAAA,MAClD,GAAI,gBAAqB,KAAA,KAAA,CAAA,GAAY,EAAE,gBAAA,KAAqB,EAAC;AAAA,KAC/D;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,MAAA,EAAQ,EAAE,KAAA,EAAO,WAAY,EAAA;AAAA,MAC7B,QAAU,EAAA,aAAA;AAAA,KAAA;AAAA,GACZ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OwnerPicker.esm.js","sources":["../../../../src/components/fields/OwnerPicker/OwnerPicker.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 React from 'react';\nimport { EntityPicker } from '../EntityPicker/EntityPicker';\nimport { OwnerPickerProps } from './schema';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport { OwnerPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `OwnerPicker`\n * field extension.\n *\n * @public\n */\nexport const OwnerPicker = (props: OwnerPickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    schema: {\n      title = t('fields.ownerPicker.title'),\n      description = t('fields.ownerPicker.description'),\n    },\n    uiSchema,\n    ...restProps\n  } = props;\n\n  const defaultNamespace = uiSchema['ui:options']?.defaultNamespace;\n  const allowedKinds = uiSchema['ui:options']?.allowedKinds;\n\n  const catalogFilter = uiSchema['ui:options']?.catalogFilter || {\n    kind: allowedKinds || ['Group', 'User'],\n  };\n\n  const ownerUiSchema = {\n    ...uiSchema,\n    'ui:options': {\n      catalogFilter,\n      defaultKind: 'Group',\n      allowArbitraryValues:\n        uiSchema['ui:options']?.allowArbitraryValues ?? true,\n      ...(defaultNamespace !== undefined ? { defaultNamespace } : {}),\n    },\n  };\n\n  return (\n    <EntityPicker\n      {...restProps}\n      schema={{ title, description }}\n      uiSchema={ownerUiSchema}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6Ba,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA;AAAA,MACN,KAAA,GAAQ,EAAE,0BAA0B,CAAA;AAAA,MACpC,WAAA,GAAc,EAAE,gCAAgC,CAAA;AAAA,KAClD;AAAA,IACA,QAAA;AAAA,IACA,GAAG,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,YAAY,CAAG,EAAA,gBAAA,CAAA;AACjD,EAAM,MAAA,YAAA,GAAe,QAAS,CAAA,YAAY,CAAG,EAAA,YAAA,CAAA;AAE7C,EAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,YAAY,CAAA,EAAG,aAAiB,IAAA;AAAA,IAC7D,IAAM,EAAA,YAAA,IAAgB,CAAC,OAAA,EAAS,MAAM,CAAA;AAAA,GACxC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,QAAA;AAAA,IACH,YAAc,EAAA;AAAA,MACZ,aAAA;AAAA,MACA,WAAa,EAAA,OAAA;AAAA,MACb,oBACE,EAAA,QAAA,CAAS,YAAY,CAAA,EAAG,oBAAwB,IAAA,IAAA;AAAA,MAClD,GAAI,gBAAqB,KAAA,KAAA,CAAA,GAAY,EAAE,gBAAA,KAAqB,EAAC;AAAA,KAC/D;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,MAAA,EAAQ,EAAE,KAAA,EAAO,WAAY,EAAA;AAAA,MAC7B,QAAU,EAAA,aAAA;AAAA,KAAA;AAAA,GACZ,CAAA;AAEJ;;;;"}

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

@@ -1,8 +1,7 @@
 import FormControl from '@material-ui/core/FormControl';
 import React from 'react';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 
 const DefaultRepoBranchPicker = ({
   onChange,
@@ -18,11 +17,11 @@ const DefaultRepoBranchPicker = ({
       required,
       error: rawErrors?.length > 0 && !branch
     },
-    /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "branchInput" }, "Branch"),
     /* @__PURE__ */ React.createElement(
-      Input,
+      TextField,
       {
         id: "branchInput",
+        label: "Branch",
         onChange: (e) => onChange({ branch: e.target.value }),
         value: 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 React from 'react';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\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  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      <InputLabel htmlFor=\"branchInput\">Branch</InputLabel>\n      <Input\n        id=\"branchInput\"\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":";;;;;;AA+BO,MAAM,0BAA0B,CAAC;AAAA,EACtC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AAEnB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAA;AAAA,MACA,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,MAAA;AAAA,KAAA;AAAA,oBAEhC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,aAAA,EAAA,EAAc,QAAM,CAAA;AAAA,oBACxC,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,aAAA;AAAA,QACH,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,QAAQ,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QAClD,KAAO,EAAA,MAAA;AAAA,OAAA;AAAA,KACT;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,sBAAe,8BAA4B,CAAA;AAAA,GAC9C,CAAA;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 React from 'react';\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  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        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":";;;;;AA8BO,MAAM,0BAA0B,CAAC;AAAA,EACtC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AAEnB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAA;AAAA,MACA,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,MAAA;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,aAAA;AAAA,QACH,KAAM,EAAA,QAAA;AAAA,QACN,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,QAAQ,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QAClD,KAAO,EAAA,MAAA;AAAA,OAAA;AAAA,KACT;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,sBAAe,8BAA4B,CAAA;AAAA,GAC9C,CAAA;AAEJ;;;;"}

package/dist/components/fields/RepoUrlPicker/AzureRepoPicker.esm.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { Select } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const AzureRepoPicker = (props) => {
   const {
@@ -13,6 +14,7 @@ const AzureRepoPicker = (props) => {
     state,
     onChange
   } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const organizationItems = allowedOrganizations ? allowedOrganizations.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   const projectItems = allowedProject ? allowedProject.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   const { organization, project } = state;
@@ -23,25 +25,26 @@ const AzureRepoPicker = (props) => {
       required: true,
       error: rawErrors?.length > 0 && !organization
     },
-    allowedOrganizations?.length ? /* @__PURE__ */ React.createElement(
+    allowedOrganizations?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Select,
       {
         native: true,
-        label: "Organization",
+        label: t("fields.azureRepoPicker.organization.title"),
         onChange: (s) => onChange({ organization: String(Array.isArray(s) ? s[0] : s) }),
         disabled: allowedOrganizations.length === 1,
         selected: organization,
         items: organizationItems
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "orgInput" }, "Organization"), /* @__PURE__ */ React.createElement(
-      Input,
+    ), /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.azureRepoPicker.organization.description"))) : /* @__PURE__ */ React.createElement(
+      TextField,
       {
         id: "orgInput",
+        label: t("fields.azureRepoPicker.organization.title"),
         onChange: (e) => onChange({ organization: e.target.value }),
+        helperText: t("fields.azureRepoPicker.organization.description"),
         value: organization
       }
-    )),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Organization that this repo will belong to")
+    )
   ), /* @__PURE__ */ React.createElement(
     FormControl,
     {
@@ -49,25 +52,26 @@ const AzureRepoPicker = (props) => {
       required: true,
       error: rawErrors?.length > 0 && !project
     },
-    allowedProject?.length ? /* @__PURE__ */ React.createElement(
+    allowedProject?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Select,
       {
         native: true,
-        label: "Project",
+        label: t("fields.azureRepoPicker.project.title"),
         onChange: (s) => onChange({ project: String(Array.isArray(s) ? s[0] : s) }),
         disabled: allowedProject.length === 1,
         selected: project,
         items: projectItems
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "projectInput" }, "Project"), /* @__PURE__ */ React.createElement(
-      Input,
+    ), /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.azureRepoPicker.project.description"))) : /* @__PURE__ */ React.createElement(
+      TextField,
       {
         id: "projectInput",
+        label: t("fields.azureRepoPicker.project.title"),
         onChange: (e) => onChange({ project: e.target.value }),
-        value: project
+        value: project,
+        helperText: t("fields.azureRepoPicker.project.description")
       }
-    )),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Project that this repo will belong to")
+    )
   ));
 };
 

package/dist/components/fields/RepoUrlPicker/AzureRepoPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AzureRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { Select, SelectItem } from '@backstage/core-components';\n\nexport const AzureRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOrganizations?: string[];\n    allowedProject?: string[];\n  }>,\n) => {\n  const {\n    allowedOrganizations = [],\n    allowedProject = [],\n    rawErrors,\n    state,\n    onChange,\n  } = props;\n\n  const organizationItems: SelectItem[] = allowedOrganizations\n    ? allowedOrganizations.map(i => ({ label: i, value: i }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  const projectItems: SelectItem[] = allowedProject\n    ? allowedProject.map(i => ({ label: i, value: i }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  const { organization, project } = state;\n\n  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !organization}\n      >\n        {allowedOrganizations?.length ? (\n          <Select\n            native\n            label=\"Organization\"\n            onChange={s =>\n              onChange({ organization: String(Array.isArray(s) ? s[0] : s) })\n            }\n            disabled={allowedOrganizations.length === 1}\n            selected={organization}\n            items={organizationItems}\n          />\n        ) : (\n          <>\n            <InputLabel htmlFor=\"orgInput\">Organization</InputLabel>\n            <Input\n              id=\"orgInput\"\n              onChange={e => onChange({ organization: e.target.value })}\n              value={organization}\n            />\n          </>\n        )}\n        <FormHelperText>\n          The Organization that this repo will belong to\n        </FormHelperText>\n      </FormControl>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !project}\n      >\n        {allowedProject?.length ? (\n          <Select\n            native\n            label=\"Project\"\n            onChange={s =>\n              onChange({ project: String(Array.isArray(s) ? s[0] : s) })\n            }\n            disabled={allowedProject.length === 1}\n            selected={project}\n            items={projectItems}\n          />\n        ) : (\n          <>\n            <InputLabel htmlFor=\"projectInput\">Project</InputLabel>\n            <Input\n              id=\"projectInput\"\n              onChange={e => onChange({ project: e.target.value })}\n              value={project}\n            />\n          </>\n        )}\n        <FormHelperText>\n          The Project that this repo will belong to\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AzureRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/AzureRepoPicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport const AzureRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOrganizations?: string[];\n    allowedProject?: string[];\n  }>,\n) => {\n  const {\n    allowedOrganizations = [],\n    allowedProject = [],\n    rawErrors,\n    state,\n    onChange,\n  } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const organizationItems: SelectItem[] = allowedOrganizations\n    ? allowedOrganizations.map(i => ({ label: i, value: i }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  const projectItems: SelectItem[] = allowedProject\n    ? allowedProject.map(i => ({ label: i, value: i }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  const { organization, project } = state;\n\n  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !organization}\n      >\n        {allowedOrganizations?.length ? (\n          <>\n            <Select\n              native\n              label={t('fields.azureRepoPicker.organization.title')}\n              onChange={s =>\n                onChange({ organization: String(Array.isArray(s) ? s[0] : s) })\n              }\n              disabled={allowedOrganizations.length === 1}\n              selected={organization}\n              items={organizationItems}\n            />\n            <FormHelperText>\n              {t('fields.azureRepoPicker.organization.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <TextField\n            id=\"orgInput\"\n            label={t('fields.azureRepoPicker.organization.title')}\n            onChange={e => onChange({ organization: e.target.value })}\n            helperText={t('fields.azureRepoPicker.organization.description')}\n            value={organization}\n          />\n        )}\n      </FormControl>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !project}\n      >\n        {allowedProject?.length ? (\n          <>\n            <Select\n              native\n              label={t('fields.azureRepoPicker.project.title')}\n              onChange={s =>\n                onChange({ project: String(Array.isArray(s) ? s[0] : s) })\n              }\n              disabled={allowedProject.length === 1}\n              selected={project}\n              items={projectItems}\n            />\n            <FormHelperText>\n              {t('fields.azureRepoPicker.project.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <TextField\n            id=\"projectInput\"\n            label={t('fields.azureRepoPicker.project.title')}\n            onChange={e => onChange({ project: e.target.value })}\n            value={project}\n            helperText={t('fields.azureRepoPicker.project.description')}\n          />\n        )}\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/fields/RepoUrlPicker/BitbucketRepoPicker.esm.js

@@ -7,6 +7,8 @@ import TextField from '@material-ui/core/TextField';
 import useDebounce from 'react-use/esm/useDebounce';
 import { useApi } from '@backstage/core-plugin-api';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const BitbucketRepoPicker = (props) => {
   const {
@@ -17,6 +19,7 @@ const BitbucketRepoPicker = (props) => {
     state,
     accessToken
   } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const { host, workspace, project } = state;
   const ownerItems = allowedOwners ? allowedOwners?.map((i) => ({ label: i, value: i })) : [];
   const projectItems = allowedProjects ? allowedProjects?.map((i) => ({ label: i, value: i })) : [];
@@ -89,7 +92,7 @@ const BitbucketRepoPicker = (props) => {
       Select,
       {
         native: true,
-        label: "Allowed Workspaces",
+        label: t("fields.bitbucketRepoPicker.workspaces.title"),
         onChange: (s) => onChange({ workspace: String(Array.isArray(s) ? s[0] : s) }),
         disabled: allowedOwners.length === 1,
         selected: workspace,
@@ -103,12 +106,19 @@ const BitbucketRepoPicker = (props) => {
           onChange({ workspace: newValue || "" });
         },
         options: availableWorkspaces,
-        renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, label: "Workspace", required: true }),
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: t("fields.bitbucketRepoPicker.workspaces.inputTitle"),
+            required: true
+          }
+        ),
         freeSolo: true,
         autoSelect: true
       }
     ),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Workspace that this repo will belong to")
+    /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.bitbucketRepoPicker.workspaces.description"))
   ), /* @__PURE__ */ React.createElement(
     FormControl,
     {
@@ -120,7 +130,7 @@ const BitbucketRepoPicker = (props) => {
       Select,
       {
         native: true,
-        label: "Allowed Projects",
+        label: t("fields.bitbucketRepoPicker.project.title"),
         onChange: (s) => onChange({ project: String(Array.isArray(s) ? s[0] : s) }),
         disabled: allowedProjects.length === 1,
         selected: project,
@@ -134,12 +144,19 @@ const BitbucketRepoPicker = (props) => {
           onChange({ project: newValue || "" });
         },
         options: availableProjects,
-        renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, label: "Project", required: true }),
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: t("fields.bitbucketRepoPicker.project.inputTitle"),
+            required: true
+          }
+        ),
         freeSolo: true,
         autoSelect: true
       }
     ),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The Project that this repo will belong to")
+    /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.bitbucketRepoPicker.project.description"))
   ));
 };