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

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

@@ -1 +1 @@
-{"version":3,"file":"GitHubRepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/GitHubRepoBranchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 `GitHubRepoBranchPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const GitHubRepoBranchPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  accessToken,\n  isDisabled,\n  required,\n}: BaseRepoBranchPickerProps<{\n  accessToken?: string;\n}>) => {\n  const { host, owner, 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      !owner ||\n      !repository ||\n      !accessToken ||\n      !host\n    ) {\n      setAvailableBranches([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'branches',\n        context: { host, owner, repository },\n        provider: 'github',\n      })\n      .then(({ results }) => {\n        setAvailableBranches(results.map(r => r.id));\n      })\n      .catch(() => {\n        setAvailableBranches([]);\n      });\n  }, [host, owner, 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,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAEO;AACL,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,UAAA,EAAY,QAAO,GAAI,KAAA;AAE5C,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,KAAA,IACD,CAAC,UAAA,IACD,CAAC,WAAA,IACD,CAAC,IAAA,EACD;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,IAAA,EAAM,KAAA,EAAO,UAAA,EAAW;AAAA,MACnC,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,OAAO,UAAA,EAAY,WAAA,EAAa,aAAa,CAAC,CAAA;AAExD,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":"GitHubRepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/GitHubRepoBranchPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 `GitHubRepoBranchPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const GitHubRepoBranchPicker = ({\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, owner, 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      !owner ||\n      !repository ||\n      !accessToken ||\n      !host\n    ) {\n      setAvailableBranches([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'branches',\n        context: { host, owner, repository },\n        provider: 'github',\n      })\n      .then(({ results }) => {\n        setAvailableBranches(results.map(r => r.id));\n      })\n      .catch(() => {\n        setAvailableBranches([]);\n      });\n  }, [host, owner, 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":"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"}

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

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useApi } from '@backstage/core-plugin-api';
 import { scmIntegrationsApiRef, scmAuthApiRef } from '@backstage/integration-react';
 import { useState, useEffect, useCallback } from 'react';
@@ -11,8 +11,11 @@ import { BitbucketRepoBranchPicker } from './BitbucketRepoBranchPicker.esm.js';
 import { DefaultRepoBranchPicker } from './DefaultRepoBranchPicker.esm.js';
 import { GitHubRepoBranchPicker } from './GitHubRepoBranchPicker.esm.js';
 import { MarkdownContent } from '@backstage/core-components';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Flex, Text } from '@backstage/ui';
 
 const RepoBranchPicker = (props) => {
+  const scaffolderTheme = useScaffolderTheme();
   const {
     uiSchema,
     onChange,
@@ -75,6 +78,8 @@ const RepoBranchPicker = (props) => {
     [setState]
   );
   const hostType = (host && integrationApi.byHost(host)?.type) ?? null;
+  const accessToken = uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey];
+  const isDisabled = uiSchema?.["ui:disabled"] ?? false;
   const renderRepoBranchPicker = () => {
     switch (hostType) {
       case "bitbucket":
@@ -84,8 +89,8 @@ const RepoBranchPicker = (props) => {
             onChange: updateLocalState,
             state,
             rawErrors,
-            accessToken: uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey],
-            isDisabled: uiSchema?.["ui:disabled"] ?? false,
+            accessToken,
+            isDisabled,
             required
           }
         );
@@ -96,8 +101,8 @@ const RepoBranchPicker = (props) => {
             onChange: updateLocalState,
             state,
             rawErrors,
-            accessToken: uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey],
-            isDisabled: uiSchema?.["ui:disabled"] ?? false,
+            accessToken,
+            isDisabled,
             required
           }
         );
@@ -108,13 +113,20 @@ const RepoBranchPicker = (props) => {
             onChange: updateLocalState,
             state,
             rawErrors,
-            isDisabled: uiSchema?.["ui:disabled"] ?? false,
+            isDisabled,
             required
           }
         );
     }
   };
   const description = uiSchema["ui:description"] ?? schema.description;
+  if (scaffolderTheme === "bui") {
+    return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", children: [
+      schema.title && /* @__PURE__ */ jsx(Text, { as: "h5", variant: "title-small", weight: "bold", children: schema.title }),
+      description && /* @__PURE__ */ jsx(MarkdownContent, { content: description }),
+      renderRepoBranchPicker()
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     schema.title && /* @__PURE__ */ jsxs(Box, { my: 1, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "h5", children: schema.title }),

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

@@ -1 +1 @@
-{"version":3,"file":"RepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/RepoBranchPicker.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 {\n  scmIntegrationsApiRef,\n  scmAuthApiRef,\n} from '@backstage/integration-react';\nimport { useEffect, useState, useCallback } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport Typography from '@material-ui/core/Typography';\n\nimport { RepoBranchPickerProps } from './schema';\nimport { RepoBranchPickerState } from './types';\nimport { BitbucketRepoBranchPicker } from './BitbucketRepoBranchPicker';\nimport { DefaultRepoBranchPicker } from './DefaultRepoBranchPicker';\nimport { GitHubRepoBranchPicker } from './GitHubRepoBranchPicker';\nimport { MarkdownContent } from '@backstage/core-components';\n\n/**\n * The underlying component that is rendered in the form for the `RepoBranchPicker`\n * field extension.\n *\n * @public\n */\nexport const RepoBranchPicker = (props: RepoBranchPickerProps) => {\n  const {\n    uiSchema,\n    onChange,\n    rawErrors,\n    formData,\n    schema,\n    formContext,\n    required,\n  } = props;\n  const {\n    formData: { repoUrl },\n  } = formContext;\n\n  const [state, setState] = useState<RepoBranchPickerState>({\n    branch: formData || '',\n  });\n  const { host, branch } = state;\n\n  const integrationApi = useApi(scmIntegrationsApiRef);\n  const scmAuthApi = useApi(scmAuthApiRef);\n\n  const { secrets, setSecrets } = useTemplateSecrets();\n\n  useDebounce(\n    async () => {\n      const { requestUserCredentials } = uiSchema?.['ui:options'] ?? {};\n\n      if (!requestUserCredentials || !host) {\n        return;\n      }\n\n      // don't show login prompt if secret value is already in state\n      if (secrets[requestUserCredentials.secretsKey]) {\n        return;\n      }\n\n      // user has requested that we use the users credentials\n      // so lets grab them using the scmAuthApi and pass through\n      // any additional scopes from the ui:options\n      const { token } = await scmAuthApi.getCredentials({\n        url: `https://${host}`,\n        additionalScope: {\n          repoWrite: true,\n          customScopes: requestUserCredentials.additionalScopes,\n        },\n      });\n\n      // set the secret using the key provided in the ui:options for use\n      // in the templating the manifest with ${{ secrets[secretsKey] }}\n      setSecrets({ [requestUserCredentials.secretsKey]: token });\n    },\n    500,\n    [host, uiSchema],\n  );\n\n  useEffect(() => {\n    if (repoUrl) {\n      const url = new URL(`https://${repoUrl}`);\n\n      setState(prevState => ({\n        ...prevState,\n        host: url.host,\n        workspace: url.searchParams.get('workspace') || '',\n        repository: url.searchParams.get('repo') || '',\n        owner: url.searchParams.get('owner') || '',\n      }));\n    }\n  }, [repoUrl]);\n\n  useEffect(() => {\n    onChange(branch);\n  }, [branch, onChange]);\n\n  const updateLocalState = useCallback(\n    (newState: RepoBranchPickerState) => {\n      setState(prevState => ({ ...prevState, ...newState }));\n    },\n    [setState],\n  );\n\n  const hostType = (host && integrationApi.byHost(host)?.type) ?? null;\n\n  const renderRepoBranchPicker = () => {\n    switch (hostType) {\n      case 'bitbucket':\n        return (\n          <BitbucketRepoBranchPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            accessToken={\n              uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n              secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]\n            }\n            isDisabled={uiSchema?.['ui:disabled'] ?? false}\n            required={required}\n          />\n        );\n      case 'github':\n        return (\n          <GitHubRepoBranchPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            accessToken={\n              uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n              secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]\n            }\n            isDisabled={uiSchema?.['ui:disabled'] ?? false}\n            required={required}\n          />\n        );\n      default:\n        return (\n          <DefaultRepoBranchPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            isDisabled={uiSchema?.['ui:disabled'] ?? false}\n            required={required}\n          />\n        );\n    }\n  };\n\n  const description = uiSchema['ui:description'] ?? schema.description;\n\n  return (\n    <>\n      {schema.title && (\n        <Box my={1}>\n          <Typography variant=\"h5\">{schema.title}</Typography>\n          <Divider />\n        </Box>\n      )}\n      {description && (\n        <Typography variant=\"body1\">\n          <MarkdownContent content={description} />\n        </Typography>\n      )}\n      {renderRepoBranchPicker()}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RepoBranchPicker.esm.js","sources":["../../../../src/components/fields/RepoBranchPicker/RepoBranchPicker.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 {\n  scmIntegrationsApiRef,\n  scmAuthApiRef,\n} from '@backstage/integration-react';\nimport { useEffect, useState, useCallback } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport Typography from '@material-ui/core/Typography';\n\nimport { RepoBranchPickerProps } from './schema';\nimport { RepoBranchPickerState } from './types';\nimport { BitbucketRepoBranchPicker } from './BitbucketRepoBranchPicker';\nimport { DefaultRepoBranchPicker } from './DefaultRepoBranchPicker';\nimport { GitHubRepoBranchPicker } from './GitHubRepoBranchPicker';\nimport { MarkdownContent } from '@backstage/core-components';\nimport { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';\nimport { Flex, Text } from '@backstage/ui';\n\n/**\n * The underlying component that is rendered in the form for the `RepoBranchPicker`\n * field extension.\n *\n * @public\n */\nexport const RepoBranchPicker = (props: RepoBranchPickerProps) => {\n  const scaffolderTheme = useScaffolderTheme();\n  const {\n    uiSchema,\n    onChange,\n    rawErrors,\n    formData,\n    schema,\n    formContext,\n    required,\n  } = props;\n  const {\n    formData: { repoUrl },\n  } = formContext;\n\n  const [state, setState] = useState<RepoBranchPickerState>({\n    branch: formData || '',\n  });\n  const { host, branch } = state;\n\n  const integrationApi = useApi(scmIntegrationsApiRef);\n  const scmAuthApi = useApi(scmAuthApiRef);\n\n  const { secrets, setSecrets } = useTemplateSecrets();\n\n  useDebounce(\n    async () => {\n      const { requestUserCredentials } = uiSchema?.['ui:options'] ?? {};\n\n      if (!requestUserCredentials || !host) {\n        return;\n      }\n\n      // don't show login prompt if secret value is already in state\n      if (secrets[requestUserCredentials.secretsKey]) {\n        return;\n      }\n\n      // user has requested that we use the users credentials\n      // so lets grab them using the scmAuthApi and pass through\n      // any additional scopes from the ui:options\n      const { token } = await scmAuthApi.getCredentials({\n        url: `https://${host}`,\n        additionalScope: {\n          repoWrite: true,\n          customScopes: requestUserCredentials.additionalScopes,\n        },\n      });\n\n      // set the secret using the key provided in the ui:options for use\n      // in the templating the manifest with ${{ secrets[secretsKey] }}\n      setSecrets({ [requestUserCredentials.secretsKey]: token });\n    },\n    500,\n    [host, uiSchema],\n  );\n\n  useEffect(() => {\n    if (repoUrl) {\n      const url = new URL(`https://${repoUrl}`);\n\n      setState(prevState => ({\n        ...prevState,\n        host: url.host,\n        workspace: url.searchParams.get('workspace') || '',\n        repository: url.searchParams.get('repo') || '',\n        owner: url.searchParams.get('owner') || '',\n      }));\n    }\n  }, [repoUrl]);\n\n  useEffect(() => {\n    onChange(branch);\n  }, [branch, onChange]);\n\n  const updateLocalState = useCallback(\n    (newState: RepoBranchPickerState) => {\n      setState(prevState => ({ ...prevState, ...newState }));\n    },\n    [setState],\n  );\n\n  const hostType = (host && integrationApi.byHost(host)?.type) ?? null;\n\n  const accessToken =\n    uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n    secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey];\n  const isDisabled = uiSchema?.['ui:disabled'] ?? false;\n\n  const renderRepoBranchPicker = () => {\n    switch (hostType) {\n      case 'bitbucket':\n        return (\n          <BitbucketRepoBranchPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            accessToken={accessToken}\n            isDisabled={isDisabled}\n            required={required}\n          />\n        );\n      case 'github':\n        return (\n          <GitHubRepoBranchPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            accessToken={accessToken}\n            isDisabled={isDisabled}\n            required={required}\n          />\n        );\n      default:\n        return (\n          <DefaultRepoBranchPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            isDisabled={isDisabled}\n            required={required}\n          />\n        );\n    }\n  };\n\n  const description = uiSchema['ui:description'] ?? schema.description;\n\n  if (scaffolderTheme === 'bui') {\n    return (\n      <Flex direction=\"column\" gap=\"4\">\n        {schema.title && (\n          <Text as=\"h5\" variant=\"title-small\" weight=\"bold\">\n            {schema.title}\n          </Text>\n        )}\n        {description && <MarkdownContent content={description} />}\n        {renderRepoBranchPicker()}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      {schema.title && (\n        <Box my={1}>\n          <Typography variant=\"h5\">{schema.title}</Typography>\n          <Divider />\n        </Box>\n      )}\n      {description && (\n        <Typography variant=\"body1\">\n          <MarkdownContent content={description} />\n        </Typography>\n      )}\n      {renderRepoBranchPicker()}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.esm.js

@@ -1,9 +1,11 @@
-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 { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { TextField } from '@backstage/ui';
 
 const DefaultRepoOwnerPicker = ({
   onChange,
@@ -13,8 +15,23 @@ const DefaultRepoOwnerPicker = ({
   required,
   schema
 }) => {
+  const theme = useScaffolderTheme();
   const { owner } = state;
   const { t } = useTranslationRef(scaffolderTranslationRef);
+  if (theme === "bui") {
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: schema?.title ?? t("fields.repoOwnerPicker.title"),
+        description: schema?.description ?? t("fields.repoOwnerPicker.description"),
+        isDisabled,
+        onChange: (value) => onChange({ owner: value }),
+        value: owner ?? "",
+        isInvalid: rawErrors?.length > 0 && !owner,
+        isRequired: required
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -23,7 +40,7 @@ const DefaultRepoOwnerPicker = ({
       error: rawErrors?.length > 0 && !owner,
       children: [
         /* @__PURE__ */ jsx(
-          TextField,
+          MuiTextField,
           {
             id: "ownerInput",
             label: schema?.title ?? t("fields.repoOwnerPicker.title"),

package/dist/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRepoOwnerPicker.esm.js","sources":["../../../../src/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nimport { BaseRepoOwnerPickerProps } from './types';\nimport { scaffolderTranslationRef } from '../../../translation';\n\n/**\n * The underlying component that is rendered in the form for the `DefaultRepoOwnerPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const DefaultRepoOwnerPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  isDisabled,\n  required,\n  schema,\n}: BaseRepoOwnerPickerProps) => {\n  const { owner } = state;\n\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !owner}\n    >\n      <TextField\n        id=\"ownerInput\"\n        label={schema?.title ?? t('fields.repoOwnerPicker.title')}\n        disabled={isDisabled}\n        onChange={e => onChange({ owner: e.target.value })}\n        value={owner}\n      />\n      <FormHelperText>\n        {schema?.description ?? t('fields.repoOwnerPicker.description')}\n      </FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA+BO,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAElB,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,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,KAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,YAAA;AAAA,YACH,KAAA,EAAO,MAAA,EAAQ,KAAA,IAAS,CAAA,CAAE,8BAA8B,CAAA;AAAA,YACxD,QAAA,EAAU,UAAA;AAAA,YACV,QAAA,EAAU,OAAK,QAAA,CAAS,EAAE,OAAO,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AAAA,YACjD,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,4BACC,cAAA,EAAA,EACE,QAAA,EAAA,MAAA,EAAQ,WAAA,IAAe,CAAA,CAAE,oCAAoC,CAAA,EAChE;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"DefaultRepoOwnerPicker.esm.js","sources":["../../../../src/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nimport { BaseRepoOwnerPickerProps } from './types';\nimport { scaffolderTranslationRef } from '../../../translation';\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 `DefaultRepoOwnerPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const DefaultRepoOwnerPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  isDisabled,\n  required,\n  schema,\n}: BaseRepoOwnerPickerProps) => {\n  const theme = useScaffolderTheme();\n  const { owner } = state;\n\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  if (theme === 'bui') {\n    return (\n      <BuiTextField\n        label={schema?.title ?? t('fields.repoOwnerPicker.title')}\n        description={\n          schema?.description ?? t('fields.repoOwnerPicker.description')\n        }\n        isDisabled={isDisabled}\n        onChange={value => onChange({ owner: value })}\n        value={owner ?? ''}\n        isInvalid={rawErrors?.length > 0 && !owner}\n        isRequired={required}\n      />\n    );\n  }\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !owner}\n    >\n      <MuiTextField\n        id=\"ownerInput\"\n        label={schema?.title ?? t('fields.repoOwnerPicker.title')}\n        disabled={isDisabled}\n        onChange={e => onChange({ owner: e.target.value })}\n        value={owner}\n      />\n      <FormHelperText>\n        {schema?.description ?? t('fields.repoOwnerPicker.description')}\n      </FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":["BuiTextField"],"mappings":";;;;;;;;;AAiCO,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,MAAM,QAAQ,kBAAA,EAAmB;AACjC,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAElB,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAA,IAAI,UAAU,KAAA,EAAO;AACnB,IAAA,uBACE,GAAA;AAAA,MAACA,SAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,MAAA,EAAQ,KAAA,IAAS,CAAA,CAAE,8BAA8B,CAAA;AAAA,QACxD,WAAA,EACE,MAAA,EAAQ,WAAA,IAAe,CAAA,CAAE,oCAAoC,CAAA;AAAA,QAE/D,UAAA;AAAA,QACA,UAAU,CAAA,KAAA,KAAS,QAAA,CAAS,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,QAC5C,OAAO,KAAA,IAAS,EAAA;AAAA,QAChB,SAAA,EAAW,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC,KAAA;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,KAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,YAAA;AAAA,YACH,KAAA,EAAO,MAAA,EAAQ,KAAA,IAAS,CAAA,CAAE,8BAA8B,CAAA;AAAA,YACxD,QAAA,EAAU,UAAA;AAAA,YACV,QAAA,EAAU,OAAK,QAAA,CAAS,EAAE,OAAO,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AAAA,YACjD,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,4BACC,cAAA,EAAA,EACE,QAAA,EAAA,MAAA,EAAQ,WAAA,IAAe,CAAA,CAAE,oCAAoC,CAAA,EAChE;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.esm.js

@@ -1,14 +1,16 @@
-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 { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
 
 const GitHubRepoOwnerPicker = ({
   onChange,
@@ -20,6 +22,7 @@ const GitHubRepoOwnerPicker = ({
   schema,
   excludedOwners = []
 }) => {
+  const theme = useScaffolderTheme();
   const { host, owner } = state;
   const [availableOwners, setAvailableOwners] = useState([]);
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -42,6 +45,27 @@ const GitHubRepoOwnerPicker = ({
     });
   }, [host, accessToken, scaffolderApi, excludedOwners]);
   useDebounce(updateAvailableOwners, 500, [updateAvailableOwners]);
+  if (theme === "bui") {
+    const options = availableOwners.map((o) => ({ label: o, value: o }));
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        label: schema?.title ?? t("fields.repoOwnerPicker.title"),
+        description: schema?.description ?? t("fields.repoOwnerPicker.description"),
+        inputValue: owner ?? "",
+        onInputChange: (value) => onChange({ owner: value }),
+        onSelectionChange: (key) => {
+          if (key !== null) {
+            onChange({ owner: String(key) });
+          }
+        },
+        options,
+        isDisabled,
+        isRequired: required,
+        isInvalid: rawErrors?.length > 0 && !owner
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -50,7 +74,7 @@ const GitHubRepoOwnerPicker = ({
       error: rawErrors?.length > 0 && !owner,
       children: [
         /* @__PURE__ */ jsx(
-          Autocomplete,
+          MuiAutocomplete,
           {
             value: owner,
             onChange: (_, newValue) => {
@@ -59,7 +83,7 @@ const GitHubRepoOwnerPicker = ({
             disabled: isDisabled,
             options: availableOwners,
             renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
+              MuiTextField,
               {
                 ...params,
                 label: schema?.title ?? t("fields.repoOwnerPicker.title"),

package/dist/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GitHubRepoOwnerPicker.esm.js","sources":["../../../../src/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nimport { BaseRepoOwnerPickerProps } from './types';\nimport { scaffolderTranslationRef } from '../../../translation';\n\n/**\n * The underlying component that is rendered in the form for the `GitHubRepoOwnerPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const GitHubRepoOwnerPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  accessToken,\n  isDisabled,\n  required,\n  schema,\n  excludedOwners = [],\n}: BaseRepoOwnerPickerProps<{\n  accessToken?: string;\n  excludedOwners?: string[];\n}>) => {\n  const { host, owner } = state;\n\n  const [availableOwners, setAvailableOwners] = useState<string[]>([]);\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const updateAvailableOwners = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host) {\n      setAvailableOwners([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'owners',\n        context: { host },\n        provider: 'github',\n      })\n      .then(({ results }) => {\n        const owners = results\n          .map(r => r.id)\n          .filter(id => !excludedOwners.includes(id));\n\n        setAvailableOwners(owners);\n      })\n      .catch(() => {\n        setAvailableOwners([]);\n      });\n  }, [host, accessToken, scaffolderApi, excludedOwners]);\n\n  useDebounce(updateAvailableOwners, 500, [updateAvailableOwners]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !owner}\n    >\n      <Autocomplete\n        value={owner}\n        onChange={(_, newValue) => {\n          onChange({ owner: newValue || '' });\n        }}\n        disabled={isDisabled}\n        options={availableOwners}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={schema?.title ?? t('fields.repoOwnerPicker.title')}\n            disabled={isDisabled}\n            required={required}\n          />\n        )}\n        freeSolo\n        autoSelect\n      />\n      <FormHelperText>\n        {schema?.description ?? t('fields.repoOwnerPicker.description')}\n      </FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAoCO,MAAM,wBAAwB,CAAC;AAAA,EACpC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAiB;AACnB,CAAA,KAGO;AACL,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAM,GAAI,KAAA;AAExB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAEnE,EAAA,MAAM,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAC7C,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAA,MAAM,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAA,IAAI,CAAC,aAAA,CAAc,YAAA,IAAgB,CAAC,WAAA,IAAe,CAAC,IAAA,EAAM;AACxD,MAAA,kBAAA,CAAmB,EAAE,CAAA;AACrB,MAAA;AAAA,IACF;AAEA,IAAA,aAAA,CACG,YAAA,CAAa;AAAA,MACZ,KAAA,EAAO,WAAA;AAAA,MACP,QAAA,EAAU,QAAA;AAAA,MACV,OAAA,EAAS,EAAE,IAAA,EAAK;AAAA,MAChB,QAAA,EAAU;AAAA,KACX,CAAA,CACA,IAAA,CAAK,CAAC,EAAE,SAAQ,KAAM;AACrB,MAAA,MAAM,MAAA,GAAS,OAAA,CACZ,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,EAAE,CAAA,CACb,MAAA,CAAO,CAAA,EAAA,KAAM,CAAC,cAAA,CAAe,QAAA,CAAS,EAAE,CAAC,CAAA;AAE5C,MAAA,kBAAA,CAAmB,MAAM,CAAA;AAAA,IAC3B,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,kBAAA,CAAmB,EAAE,CAAA;AAAA,IACvB,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,IAAA,EAAM,WAAA,EAAa,aAAA,EAAe,cAAc,CAAC,CAAA;AAErD,EAAA,WAAA,CAAY,qBAAA,EAAuB,GAAA,EAAK,CAAC,qBAAqB,CAAC,CAAA;AAE/D,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,KAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,KAAA;AAAA,YACP,QAAA,EAAU,CAAC,CAAA,EAAG,QAAA,KAAa;AACzB,cAAA,QAAA,CAAS,EAAE,KAAA,EAAO,QAAA,IAAY,EAAA,EAAI,CAAA;AAAA,YACpC,CAAA;AAAA,YACA,QAAA,EAAU,UAAA;AAAA,YACV,OAAA,EAAS,eAAA;AAAA,YACT,aAAa,CAAA,MAAA,qBACX,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACE,GAAG,MAAA;AAAA,gBACJ,KAAA,EAAO,MAAA,EAAQ,KAAA,IAAS,CAAA,CAAE,8BAA8B,CAAA;AAAA,gBACxD,QAAA,EAAU,UAAA;AAAA,gBACV;AAAA;AAAA,aACF;AAAA,YAEF,QAAA,EAAQ,IAAA;AAAA,YACR,UAAA,EAAU;AAAA;AAAA,SACZ;AAAA,4BACC,cAAA,EAAA,EACE,QAAA,EAAA,MAAA,EAAQ,WAAA,IAAe,CAAA,CAAE,oCAAoC,CAAA,EAChE;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"GitHubRepoOwnerPicker.esm.js","sources":["../../../../src/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nimport { BaseRepoOwnerPickerProps } from './types';\nimport { scaffolderTranslationRef } from '../../../translation';\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 `GitHubRepoOwnerPicker`\n * field extension.\n *\n * @public\n *\n */\nexport const GitHubRepoOwnerPicker = ({\n  onChange,\n  state,\n  rawErrors,\n  accessToken,\n  isDisabled,\n  required,\n  schema,\n  excludedOwners = [],\n}: BaseRepoOwnerPickerProps<{\n  accessToken?: string;\n  excludedOwners?: string[];\n}>) => {\n  const theme = useScaffolderTheme();\n  const { host, owner } = state;\n\n  const [availableOwners, setAvailableOwners] = useState<string[]>([]);\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const updateAvailableOwners = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host) {\n      setAvailableOwners([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'owners',\n        context: { host },\n        provider: 'github',\n      })\n      .then(({ results }) => {\n        const owners = results\n          .map(r => r.id)\n          .filter(id => !excludedOwners.includes(id));\n\n        setAvailableOwners(owners);\n      })\n      .catch(() => {\n        setAvailableOwners([]);\n      });\n  }, [host, accessToken, scaffolderApi, excludedOwners]);\n\n  useDebounce(updateAvailableOwners, 500, [updateAvailableOwners]);\n\n  if (theme === 'bui') {\n    const options = availableOwners.map(o => ({ label: o, value: o }));\n\n    return (\n      <BuiAutocomplete\n        label={schema?.title ?? t('fields.repoOwnerPicker.title')}\n        description={\n          schema?.description ?? t('fields.repoOwnerPicker.description')\n        }\n        inputValue={owner ?? ''}\n        onInputChange={value => onChange({ owner: value })}\n        onSelectionChange={(key: Key | null) => {\n          if (key !== null) {\n            onChange({ owner: String(key) });\n          }\n        }}\n        options={options}\n        isDisabled={isDisabled}\n        isRequired={required}\n        isInvalid={rawErrors?.length > 0 && !owner}\n      />\n    );\n  }\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0 && !owner}\n    >\n      <MuiAutocomplete\n        value={owner}\n        onChange={(_, newValue) => {\n          onChange({ owner: newValue || '' });\n        }}\n        disabled={isDisabled}\n        options={availableOwners}\n        renderInput={params => (\n          <MuiTextField\n            {...params}\n            label={schema?.title ?? t('fields.repoOwnerPicker.title')}\n            disabled={isDisabled}\n            required={required}\n          />\n        )}\n        freeSolo\n        autoSelect\n      />\n      <FormHelperText>\n        {schema?.description ?? t('fields.repoOwnerPicker.description')}\n      </FormHelperText>\n    </FormControl>\n  );\n};\n"],"names":["BuiAutocomplete"],"mappings":"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"}

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

@@ -57,37 +57,34 @@ const RepoOwnerPicker = (props) => {
     [setState]
   );
   const hostType = (host && integrationApi.byHost(host)?.type) ?? null;
-  const renderRepoOwnerPicker = () => {
-    switch (hostType) {
-      case "github":
-        return /* @__PURE__ */ jsx(
-          GitHubRepoOwnerPicker,
-          {
-            onChange: updateLocalState,
-            state,
-            rawErrors,
-            accessToken: uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey],
-            isDisabled: uiSchema?.["ui:disabled"] ?? false,
-            required,
-            schema,
-            excludedOwners
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx(
-          DefaultRepoOwnerPicker,
-          {
-            onChange: updateLocalState,
-            state,
-            rawErrors,
-            isDisabled: uiSchema?.["ui:disabled"] ?? false,
-            required,
-            schema
-          }
-        );
-    }
-  };
-  return renderRepoOwnerPicker();
+  switch (hostType) {
+    case "github":
+      return /* @__PURE__ */ jsx(
+        GitHubRepoOwnerPicker,
+        {
+          onChange: updateLocalState,
+          state,
+          rawErrors,
+          accessToken: uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey],
+          isDisabled: uiSchema?.["ui:disabled"] ?? false,
+          required,
+          schema,
+          excludedOwners
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(
+        DefaultRepoOwnerPicker,
+        {
+          onChange: updateLocalState,
+          state,
+          rawErrors,
+          isDisabled: uiSchema?.["ui:disabled"] ?? false,
+          required,
+          schema
+        }
+      );
+  }
 };
 
 export { RepoOwnerPicker };

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

@@ -1 +1 @@
-{"version":3,"file":"RepoOwnerPicker.esm.js","sources":["../../../../src/components/fields/RepoOwnerPicker/RepoOwnerPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {\n  scmIntegrationsApiRef,\n  scmAuthApiRef,\n} from '@backstage/integration-react';\nimport { useEffect, useState, useCallback, useMemo } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';\n\nimport { RepoOwnerPickerProps } from './schema';\nimport { RepoOwnerPickerState } from './types';\nimport { DefaultRepoOwnerPicker } from './DefaultRepoOwnerPicker';\nimport { GitHubRepoOwnerPicker } from './GitHubRepoOwnerPicker';\n\n/**\n * The underlying component that is rendered in the form for the `RepoOwnerPicker`\n * field extension.\n *\n * @public\n */\nexport const RepoOwnerPicker = (props: RepoOwnerPickerProps) => {\n  const { uiSchema, onChange, rawErrors, formData, schema, required } = props;\n  const [state, setState] = useState<RepoOwnerPickerState>({\n    owner: formData || '',\n  });\n  const excludedOwners = useMemo(\n    () => uiSchema?.['ui:options']?.excludedOwners ?? [],\n    [uiSchema],\n  );\n  const { host, owner } = state;\n\n  const integrationApi = useApi(scmIntegrationsApiRef);\n  const scmAuthApi = useApi(scmAuthApiRef);\n\n  const { secrets, setSecrets } = useTemplateSecrets();\n\n  useDebounce(\n    async () => {\n      const { requestUserCredentials } = uiSchema?.['ui:options'] ?? {};\n\n      if (!requestUserCredentials || !host) {\n        return;\n      }\n\n      // don't show login prompt if secret value is already in state\n      if (secrets[requestUserCredentials.secretsKey]) {\n        return;\n      }\n\n      // user has requested that we use the users credentials\n      // so lets grab them using the scmAuthApi and pass through\n      // any additional scopes from the ui:options\n      const { token } = await scmAuthApi.getCredentials({\n        url: `https://${host}`,\n        additionalScope: {\n          repoWrite: true,\n          customScopes: requestUserCredentials.additionalScopes,\n        },\n      });\n\n      // set the secret using the key provided in the ui:options for use\n      // in the templating the manifest with ${{ secrets[secretsKey] }}\n      setSecrets({ [requestUserCredentials.secretsKey]: token });\n    },\n    500,\n    [host, uiSchema],\n  );\n\n  useEffect(() => {\n    if (uiSchema?.['ui:options']?.host) {\n      const hostUiOption = uiSchema['ui:options'].host;\n      setState(prevState => ({ ...prevState, host: hostUiOption }));\n    }\n  }, [uiSchema]);\n\n  useEffect(() => {\n    onChange(owner);\n  }, [owner, onChange]);\n\n  const updateLocalState = useCallback(\n    (newState: RepoOwnerPickerState) => {\n      setState(prevState => ({ ...prevState, ...newState }));\n    },\n    [setState],\n  );\n\n  const hostType = (host && integrationApi.byHost(host)?.type) ?? null;\n\n  const renderRepoOwnerPicker = () => {\n    switch (hostType) {\n      case 'github':\n        return (\n          <GitHubRepoOwnerPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            accessToken={\n              uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n              secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]\n            }\n            isDisabled={uiSchema?.['ui:disabled'] ?? false}\n            required={required}\n            schema={schema}\n            excludedOwners={excludedOwners}\n          />\n        );\n      default:\n        return (\n          <DefaultRepoOwnerPicker\n            onChange={updateLocalState}\n            state={state}\n            rawErrors={rawErrors}\n            isDisabled={uiSchema?.['ui:disabled'] ?? false}\n            required={required}\n            schema={schema}\n          />\n        );\n    }\n  };\n\n  return renderRepoOwnerPicker();\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RepoOwnerPicker.esm.js","sources":["../../../../src/components/fields/RepoOwnerPicker/RepoOwnerPicker.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 {\n  scmIntegrationsApiRef,\n  scmAuthApiRef,\n} from '@backstage/integration-react';\nimport { useEffect, useState, useCallback, useMemo } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';\n\nimport { RepoOwnerPickerProps } from './schema';\nimport { RepoOwnerPickerState } from './types';\nimport { DefaultRepoOwnerPicker } from './DefaultRepoOwnerPicker';\nimport { GitHubRepoOwnerPicker } from './GitHubRepoOwnerPicker';\n/**\n * The underlying component that is rendered in the form for the `RepoOwnerPicker`\n * field extension.\n *\n * @public\n */\nexport const RepoOwnerPicker = (props: RepoOwnerPickerProps) => {\n  const { uiSchema, onChange, rawErrors, formData, schema, required } = props;\n  const [state, setState] = useState<RepoOwnerPickerState>({\n    owner: formData || '',\n  });\n  const excludedOwners = useMemo(\n    () => uiSchema?.['ui:options']?.excludedOwners ?? [],\n    [uiSchema],\n  );\n  const { host, owner } = state;\n\n  const integrationApi = useApi(scmIntegrationsApiRef);\n  const scmAuthApi = useApi(scmAuthApiRef);\n\n  const { secrets, setSecrets } = useTemplateSecrets();\n\n  useDebounce(\n    async () => {\n      const { requestUserCredentials } = uiSchema?.['ui:options'] ?? {};\n\n      if (!requestUserCredentials || !host) {\n        return;\n      }\n\n      // don't show login prompt if secret value is already in state\n      if (secrets[requestUserCredentials.secretsKey]) {\n        return;\n      }\n\n      // user has requested that we use the users credentials\n      // so lets grab them using the scmAuthApi and pass through\n      // any additional scopes from the ui:options\n      const { token } = await scmAuthApi.getCredentials({\n        url: `https://${host}`,\n        additionalScope: {\n          repoWrite: true,\n          customScopes: requestUserCredentials.additionalScopes,\n        },\n      });\n\n      // set the secret using the key provided in the ui:options for use\n      // in the templating the manifest with ${{ secrets[secretsKey] }}\n      setSecrets({ [requestUserCredentials.secretsKey]: token });\n    },\n    500,\n    [host, uiSchema],\n  );\n\n  useEffect(() => {\n    if (uiSchema?.['ui:options']?.host) {\n      const hostUiOption = uiSchema['ui:options'].host;\n      setState(prevState => ({ ...prevState, host: hostUiOption }));\n    }\n  }, [uiSchema]);\n\n  useEffect(() => {\n    onChange(owner);\n  }, [owner, onChange]);\n\n  const updateLocalState = useCallback(\n    (newState: RepoOwnerPickerState) => {\n      setState(prevState => ({ ...prevState, ...newState }));\n    },\n    [setState],\n  );\n\n  const hostType = (host && integrationApi.byHost(host)?.type) ?? null;\n\n  switch (hostType) {\n    case 'github':\n      return (\n        <GitHubRepoOwnerPicker\n          onChange={updateLocalState}\n          state={state}\n          rawErrors={rawErrors}\n          accessToken={\n            uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n            secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]\n          }\n          isDisabled={uiSchema?.['ui:disabled'] ?? false}\n          required={required}\n          schema={schema}\n          excludedOwners={excludedOwners}\n        />\n      );\n    default:\n      return (\n        <DefaultRepoOwnerPicker\n          onChange={updateLocalState}\n          state={state}\n          rawErrors={rawErrors}\n          isDisabled={uiSchema?.['ui:disabled'] ?? false}\n          required={required}\n          schema={schema}\n        />\n      );\n  }\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,12 +1,16 @@
 import { jsxs, Fragment, jsx } 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 { Select } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Select as Select$1, TextField } from '@backstage/ui';
+import overrides from '../scaffolderFieldOverrides.module.css.esm.js';
 
 const AzureRepoPicker = (props) => {
+  const theme = useScaffolderTheme();
   const {
     allowedOrganizations = [],
     allowedProject = [],
@@ -16,9 +20,87 @@ const AzureRepoPicker = (props) => {
     isDisabled
   } = props;
   const { t } = useTranslationRef(scaffolderTranslationRef);
+  const { organization, project } = state;
+  if (theme === "bui") {
+    const renderOrganizationPicker = () => {
+      if (allowedOrganizations?.length) {
+        const organizationItems2 = allowedOrganizations.map((i) => ({
+          label: i,
+          value: i
+        }));
+        return /* @__PURE__ */ jsx(
+          Select$1,
+          {
+            className: overrides.select,
+            label: t("fields.azureRepoPicker.organization.title"),
+            description: t("fields.azureRepoPicker.organization.description"),
+            isDisabled: isDisabled || allowedOrganizations.length === 1,
+            isInvalid: rawErrors?.length > 0 && !organization,
+            selectedKey: organization ?? null,
+            onSelectionChange: (key) => {
+              if (key !== null) onChange({ organization: String(key) });
+            },
+            options: organizationItems2,
+            isRequired: true
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: t("fields.azureRepoPicker.organization.title"),
+          description: t("fields.azureRepoPicker.organization.description"),
+          onChange: (value) => onChange({ organization: value }),
+          isDisabled,
+          value: organization ?? "",
+          isInvalid: rawErrors?.length > 0 && !organization,
+          isRequired: true
+        }
+      );
+    };
+    const renderProjectPicker = () => {
+      if (allowedProject?.length) {
+        const projectItems2 = allowedProject.map((i) => ({
+          label: i,
+          value: i
+        }));
+        return /* @__PURE__ */ jsx(
+          Select$1,
+          {
+            className: overrides.select,
+            label: t("fields.azureRepoPicker.project.title"),
+            description: t("fields.azureRepoPicker.project.description"),
+            isDisabled: isDisabled || allowedProject.length === 1,
+            isInvalid: rawErrors?.length > 0 && !project,
+            selectedKey: project ?? null,
+            onSelectionChange: (key) => {
+              if (key !== null) onChange({ project: String(key) });
+            },
+            options: projectItems2,
+            isRequired: true
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: t("fields.azureRepoPicker.project.title"),
+          description: t("fields.azureRepoPicker.project.description"),
+          onChange: (value) => onChange({ project: value }),
+          value: project ?? "",
+          isDisabled,
+          isInvalid: rawErrors?.length > 0 && !project,
+          isRequired: true
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderOrganizationPicker(),
+      renderProjectPicker()
+    ] });
+  }
   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;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       FormControl,
@@ -40,7 +122,7 @@ const AzureRepoPicker = (props) => {
           ),
           /* @__PURE__ */ jsx(FormHelperText, { children: t("fields.azureRepoPicker.organization.description") })
         ] }) : /* @__PURE__ */ jsx(
-          TextField,
+          MuiTextField,
           {
             id: "orgInput",
             label: t("fields.azureRepoPicker.organization.title"),
@@ -72,7 +154,7 @@ const AzureRepoPicker = (props) => {
           ),
           /* @__PURE__ */ jsx(FormHelperText, { children: t("fields.azureRepoPicker.project.description") })
         ] }) : /* @__PURE__ */ jsx(
-          TextField,
+          MuiTextField,
           {
             id: "projectInput",
             label: t("fields.azureRepoPicker.project.title"),

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 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    isDisabled,\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={isDisabled || 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            disabled={isDisabled}\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={isDisabled || 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            disabled={isDisabled}\n            helperText={t('fields.azureRepoPicker.project.description')}\n          />\n        )}\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 FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport MuiTextField from '@material-ui/core/TextField';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { Select as MuiSelect, SelectItem } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';\nimport { TextField as BuiTextField, Select as BuiSelect } from '@backstage/ui';\nimport overrides from '../scaffolderFieldOverrides.module.css';\nimport type { Key } from 'react-aria-components';\n\nexport const AzureRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOrganizations?: string[];\n    allowedProject?: string[];\n  }>,\n) => {\n  const theme = useScaffolderTheme();\n  const {\n    allowedOrganizations = [],\n    allowedProject = [],\n    rawErrors,\n    state,\n    onChange,\n    isDisabled,\n  } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const { organization, project } = state;\n\n  if (theme === 'bui') {\n    const renderOrganizationPicker = () => {\n      if (allowedOrganizations?.length) {\n        const organizationItems = allowedOrganizations.map(i => ({\n          label: i,\n          value: i,\n        }));\n\n        return (\n          <BuiSelect\n            className={overrides.select}\n            label={t('fields.azureRepoPicker.organization.title')}\n            description={t('fields.azureRepoPicker.organization.description')}\n            isDisabled={isDisabled || allowedOrganizations.length === 1}\n            isInvalid={rawErrors?.length > 0 && !organization}\n            selectedKey={organization ?? null}\n            onSelectionChange={(key: Key | null) => {\n              if (key !== null) onChange({ organization: String(key) });\n            }}\n            options={organizationItems}\n            isRequired\n          />\n        );\n      }\n\n      return (\n        <BuiTextField\n          label={t('fields.azureRepoPicker.organization.title')}\n          description={t('fields.azureRepoPicker.organization.description')}\n          onChange={value => onChange({ organization: value })}\n          isDisabled={isDisabled}\n          value={organization ?? ''}\n          isInvalid={rawErrors?.length > 0 && !organization}\n          isRequired\n        />\n      );\n    };\n\n    const renderProjectPicker = () => {\n      if (allowedProject?.length) {\n        const projectItems = allowedProject.map(i => ({\n          label: i,\n          value: i,\n        }));\n\n        return (\n          <BuiSelect\n            className={overrides.select}\n            label={t('fields.azureRepoPicker.project.title')}\n            description={t('fields.azureRepoPicker.project.description')}\n            isDisabled={isDisabled || allowedProject.length === 1}\n            isInvalid={rawErrors?.length > 0 && !project}\n            selectedKey={project ?? null}\n            onSelectionChange={(key: Key | null) => {\n              if (key !== null) onChange({ project: String(key) });\n            }}\n            options={projectItems}\n            isRequired\n          />\n        );\n      }\n\n      return (\n        <BuiTextField\n          label={t('fields.azureRepoPicker.project.title')}\n          description={t('fields.azureRepoPicker.project.description')}\n          onChange={value => onChange({ project: value })}\n          value={project ?? ''}\n          isDisabled={isDisabled}\n          isInvalid={rawErrors?.length > 0 && !project}\n          isRequired\n        />\n      );\n    };\n\n    return (\n      <>\n        {renderOrganizationPicker()}\n        {renderProjectPicker()}\n      </>\n    );\n  }\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  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !organization}\n      >\n        {allowedOrganizations?.length ? (\n          <>\n            <MuiSelect\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={isDisabled || allowedOrganizations.length === 1}\n              selected={organization}\n              items={organizationItems}\n            />\n            <FormHelperText>\n              {t('fields.azureRepoPicker.organization.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <MuiTextField\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            disabled={isDisabled}\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            <MuiSelect\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={isDisabled || allowedProject.length === 1}\n              selected={project}\n              items={projectItems}\n            />\n            <FormHelperText>\n              {t('fields.azureRepoPicker.project.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <MuiTextField\n            id=\"projectInput\"\n            label={t('fields.azureRepoPicker.project.title')}\n            onChange={e => onChange({ project: e.target.value })}\n            value={project}\n            disabled={isDisabled}\n            helperText={t('fields.azureRepoPicker.project.description')}\n          />\n        )}\n      </FormControl>\n    </>\n  );\n};\n"],"names":["organizationItems","BuiSelect","BuiTextField","projectItems","MuiSelect"],"mappings":"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"}