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

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

@@ -1 +1 @@
-{"version":3,"file":"GiteaRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GiteaRepoPicker.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 FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport const GiteaRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    allowedRepos?: string[];\n  }>,\n) => {\n  const { allowedOwners = [], state, onChange, rawErrors, isDisabled } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const ownerItems: SelectItem[] = allowedOwners\n    ? allowedOwners.map(i => ({ label: i, value: i }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  const { owner } = state;\n\n  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !owner}\n      >\n        {allowedOwners?.length ? (\n          <>\n            <Select\n              native\n              label={t('fields.giteaRepoPicker.owner.title')}\n              onChange={selected =>\n                onChange({\n                  owner: String(\n                    Array.isArray(selected) ? selected[0] : selected,\n                  ),\n                })\n              }\n              disabled={isDisabled || allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n            <FormHelperText>\n              {t('fields.giteaRepoPicker.owner.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <>\n            <TextField\n              id=\"ownerInput\"\n              label={t('fields.giteaRepoPicker.owner.inputTitle')}\n              onChange={e => onChange({ owner: e.target.value })}\n              helperText={t('fields.giteaRepoPicker.owner.description')}\n              disabled={isDisabled}\n              value={owner}\n            />\n          </>\n        )}\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuBO,MAAM,eAAA,GAAkB,CAC7B,KAAA,KAIG;AACH,EAAA,MAAM,EAAE,gBAAgB,EAAC,EAAG,OAAO,QAAA,EAAU,SAAA,EAAW,YAAW,GAAI,KAAA;AACvE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,aAA2B,aAAA,GAC7B,aAAA,CAAc,IAAI,CAAA,CAAA,MAAM,EAAE,OAAO,CAAA,EAAG,KAAA,EAAO,CAAA,EAAE,CAAE,IAC/C,CAAC,EAAE,OAAO,YAAA,EAAc,KAAA,EAAO,WAAW,CAAA;AAE9C,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAElB,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAO,QAAA;AAAA,MACP,QAAA,EAAQ,IAAA;AAAA,MACR,KAAA,EAAO,SAAA,EAAW,MAAA,GAAS,CAAA,IAAK,CAAC,KAAA;AAAA,MAEhC,QAAA,EAAA,aAAA,EAAe,yBACd,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAM,IAAA;AAAA,YACN,KAAA,EAAO,EAAE,oCAAoC,CAAA;AAAA,YAC7C,QAAA,EAAU,cACR,QAAA,CAAS;AAAA,cACP,KAAA,EAAO,MAAA;AAAA,gBACL,MAAM,OAAA,CAAQ,QAAQ,CAAA,GAAI,QAAA,CAAS,CAAC,CAAA,GAAI;AAAA;AAC1C,aACD,CAAA;AAAA,YAEH,QAAA,EAAU,UAAA,IAAc,aAAA,CAAc,MAAA,KAAW,CAAA;AAAA,YACjD,QAAA,EAAU,KAAA;AAAA,YACV,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,wBACA,GAAA,CAAC,cAAA,EAAA,EACE,QAAA,EAAA,CAAA,CAAE,0CAA0C,CAAA,EAC/C;AAAA,OAAA,EACF,oBAEA,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,YAAA;AAAA,UACH,KAAA,EAAO,EAAE,yCAAyC,CAAA;AAAA,UAClD,QAAA,EAAU,OAAK,QAAA,CAAS,EAAE,OAAO,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AAAA,UACjD,UAAA,EAAY,EAAE,0CAA0C,CAAA;AAAA,UACxD,QAAA,EAAU,UAAA;AAAA,UACV,KAAA,EAAO;AAAA;AAAA,OACT,EACF;AAAA;AAAA,GAEJ,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"GiteaRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GiteaRepoPicker.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 FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport MuiTextField from '@material-ui/core/TextField';\nimport { Select as MuiSelect, SelectItem } from '@backstage/core-components';\nimport { BaseRepoUrlPickerProps } from './types';\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 GiteaRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    allowedRepos?: string[];\n  }>,\n) => {\n  const theme = useScaffolderTheme();\n  const { allowedOwners = [], state, onChange, rawErrors, isDisabled } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const { owner } = state;\n\n  if (theme === 'bui') {\n    if (allowedOwners?.length) {\n      const ownerItems = allowedOwners.map(i => ({ label: i, value: i }));\n\n      return (\n        <BuiSelect\n          className={overrides.select}\n          label={t('fields.giteaRepoPicker.owner.title')}\n          description={t('fields.giteaRepoPicker.owner.description')}\n          isDisabled={isDisabled || allowedOwners.length === 1}\n          isInvalid={rawErrors?.length > 0 && !owner}\n          selectedKey={owner ?? null}\n          onSelectionChange={(key: Key | null) => {\n            if (key !== null) onChange({ owner: String(key) });\n          }}\n          options={ownerItems}\n          isRequired\n        />\n      );\n    }\n\n    return (\n      <BuiTextField\n        label={t('fields.giteaRepoPicker.owner.inputTitle')}\n        description={t('fields.giteaRepoPicker.owner.description')}\n        onChange={value => onChange({ owner: value })}\n        isDisabled={isDisabled}\n        value={owner ?? ''}\n        isInvalid={rawErrors?.length > 0 && !owner}\n        isRequired\n      />\n    );\n  }\n\n  const ownerItems: SelectItem[] = allowedOwners\n    ? allowedOwners.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 && !owner}\n      >\n        {allowedOwners?.length ? (\n          <>\n            <MuiSelect\n              native\n              label={t('fields.giteaRepoPicker.owner.title')}\n              onChange={selected =>\n                onChange({\n                  owner: String(\n                    Array.isArray(selected) ? selected[0] : selected,\n                  ),\n                })\n              }\n              disabled={isDisabled || allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n            <FormHelperText>\n              {t('fields.giteaRepoPicker.owner.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <>\n            <MuiTextField\n              id=\"ownerInput\"\n              label={t('fields.giteaRepoPicker.owner.inputTitle')}\n              onChange={e => onChange({ owner: e.target.value })}\n              helperText={t('fields.giteaRepoPicker.owner.description')}\n              disabled={isDisabled}\n              value={owner}\n            />\n          </>\n        )}\n      </FormControl>\n    </>\n  );\n};\n"],"names":["ownerItems","BuiSelect","BuiTextField","MuiSelect"],"mappings":"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"}

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

@@ -2,18 +2,23 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useMemo } from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import TextField from '@material-ui/core/TextField';
-import { Select } from '@backstage/core-components';
+import MuiTextField from '@material-ui/core/TextField';
+import { Select as Select$1 } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
 import { useApi } from '@backstage/core-plugin-api';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 import useDebounce from 'react-use/esm/useDebounce';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import MuiAutocomplete from '@material-ui/lab/Autocomplete';
 import uniq from 'lodash/uniq';
 import map from 'lodash/map';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Select } from '@backstage/ui';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
+import overrides from '../scaffolderFieldOverrides.module.css.esm.js';
 
 const GithubRepoPicker = (props) => {
+  const theme = useScaffolderTheme();
   const {
     allowedOwners = [],
     rawErrors,
@@ -23,7 +28,6 @@ const GithubRepoPicker = (props) => {
     isDisabled
   } = props;
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   const { host, owner } = state;
   const scaffolderApi = useApi(scaffolderApiRef);
   const [availableRepositoriesWithOwner, setAvailableRepositoriesWithOwner] = useState([]);
@@ -62,6 +66,47 @@ const GithubRepoPicker = (props) => {
     onChange({ availableRepos });
   }, [availableRepositoriesWithOwner, owner, onChange]);
   useDebounce(updateAvailableRepositories, 500, [updateAvailableRepositories]);
+  if (theme === "bui") {
+    if (allowedOwners?.length) {
+      const ownerItems2 = allowedOwners.map((i) => ({ label: i, value: i }));
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          className: overrides.select,
+          label: t("fields.githubRepoPicker.owner.title"),
+          description: t("fields.githubRepoPicker.owner.description"),
+          isDisabled: isDisabled || allowedOwners.length === 1,
+          isInvalid: rawErrors?.length > 0 && !owner,
+          selectedKey: owner ?? null,
+          onSelectionChange: (key) => {
+            if (key !== null) onChange({ owner: String(key) });
+          },
+          options: ownerItems2,
+          isRequired: true
+        }
+      );
+    }
+    const options = availableOwners.map((o) => ({ label: o, value: o }));
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        label: t("fields.githubRepoPicker.owner.inputTitle"),
+        description: t("fields.githubRepoPicker.owner.description"),
+        inputValue: owner ?? "",
+        onInputChange: (value) => onChange({ owner: value }),
+        onSelectionChange: (key) => {
+          if (key !== null) {
+            onChange({ owner: String(key) });
+          }
+        },
+        options,
+        isDisabled,
+        isRequired: true,
+        isInvalid: rawErrors?.length > 0 && !owner
+      }
+    );
+  }
+  const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -70,7 +115,7 @@ const GithubRepoPicker = (props) => {
       error: rawErrors?.length > 0 && !owner,
       children: [
         allowedOwners?.length ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-          Select,
+          Select$1,
           {
             native: true,
             label: t("fields.githubRepoPicker.owner.title"),
@@ -80,7 +125,7 @@ const GithubRepoPicker = (props) => {
             items: ownerItems
           }
         ) }) : /* @__PURE__ */ jsx(
-          Autocomplete,
+          MuiAutocomplete,
           {
             value: owner,
             onChange: (_, newValue) => {
@@ -88,7 +133,7 @@ const GithubRepoPicker = (props) => {
             },
             options: availableOwners,
             renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
+              MuiTextField,
               {
                 ...params,
                 label: t("fields.githubRepoPicker.owner.inputTitle"),

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

@@ -1 +1 @@
-{"version":3,"file":"GithubRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GithubRepoPicker.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 { useCallback, useMemo, useState } from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport uniq from 'lodash/uniq';\nimport map from 'lodash/map';\n\nexport const GithubRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    accessToken?: string;\n  }>,\n) => {\n  const {\n    allowedOwners = [],\n    rawErrors,\n    state,\n    onChange,\n    accessToken,\n    isDisabled,\n  } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const ownerItems: SelectItem[] = allowedOwners\n    ? allowedOwners.map(i => ({ label: i, value: i }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  const { host, owner } = state;\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const [availableRepositoriesWithOwner, setAvailableRepositoriesWithOwner] =\n    useState<{ owner: string; name: string }[]>([]);\n\n  // Update available repositories with owner when client is available\n  const updateAvailableRepositoriesWithOwner = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host) {\n      setAvailableRepositoriesWithOwner([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'repositoriesWithOwner',\n        provider: 'github',\n        context: { host },\n      })\n      .then(({ results }) => {\n        setAvailableRepositoriesWithOwner(\n          results.map(r => {\n            const [rOwner, rName] = r.id.split('/');\n            return { owner: rOwner, name: rName };\n          }),\n        );\n      })\n      .catch(() => {\n        setAvailableRepositoriesWithOwner([]);\n      });\n  }, [scaffolderApi, accessToken, host]);\n\n  useDebounce(updateAvailableRepositoriesWithOwner, 500, [\n    updateAvailableRepositoriesWithOwner,\n  ]);\n\n  // Update available owners when available repositories with owner change\n  const availableOwners = useMemo<string[]>(\n    () => uniq(map(availableRepositoriesWithOwner, 'owner')),\n    [availableRepositoriesWithOwner],\n  );\n\n  // Update available repositories when available repositories with owner change or when owner changes\n  const updateAvailableRepositories = useCallback(() => {\n    const availableRepos = availableRepositoriesWithOwner.flatMap(r =>\n      r.owner === owner ? [{ name: r.name }] : [],\n    );\n\n    onChange({ availableRepos });\n  }, [availableRepositoriesWithOwner, owner, onChange]);\n\n  useDebounce(updateAvailableRepositories, 500, [updateAvailableRepositories]);\n\n  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !owner}\n      >\n        {allowedOwners?.length ? (\n          <>\n            <Select\n              native\n              label={t('fields.githubRepoPicker.owner.title')}\n              onChange={s =>\n                onChange({ owner: String(Array.isArray(s) ? s[0] : s) })\n              }\n              disabled={isDisabled || allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n          </>\n        ) : (\n          <Autocomplete\n            value={owner}\n            onChange={(_, newValue) => {\n              onChange({ owner: newValue || '' });\n            }}\n            options={availableOwners}\n            renderInput={params => (\n              <TextField\n                {...params}\n                label={t('fields.githubRepoPicker.owner.inputTitle')}\n                disabled={isDisabled}\n                required\n              />\n            )}\n            freeSolo\n            disabled={isDisabled}\n            autoSelect\n          />\n        )}\n        <FormHelperText>\n          {t('fields.githubRepoPicker.owner.description')}\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"GithubRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GithubRepoPicker.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 { useCallback, useMemo, useState } from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport MuiTextField from '@material-ui/core/TextField';\nimport { Select as MuiSelect, SelectItem } from '@backstage/core-components';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport MuiAutocomplete from '@material-ui/lab/Autocomplete';\nimport uniq from 'lodash/uniq';\nimport map from 'lodash/map';\nimport { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';\nimport { Select as BuiSelect } from '@backstage/ui';\nimport { Autocomplete as BuiAutocomplete } from '../Autocomplete';\nimport overrides from '../scaffolderFieldOverrides.module.css';\nimport type { Key } from 'react-aria-components';\n\nexport const GithubRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    accessToken?: string;\n  }>,\n) => {\n  const theme = useScaffolderTheme();\n  const {\n    allowedOwners = [],\n    rawErrors,\n    state,\n    onChange,\n    accessToken,\n    isDisabled,\n  } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const { host, owner } = state;\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const [availableRepositoriesWithOwner, setAvailableRepositoriesWithOwner] =\n    useState<{ owner: string; name: string }[]>([]);\n\n  // Update available repositories with owner when client is available\n  const updateAvailableRepositoriesWithOwner = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host) {\n      setAvailableRepositoriesWithOwner([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'repositoriesWithOwner',\n        provider: 'github',\n        context: { host },\n      })\n      .then(({ results }) => {\n        setAvailableRepositoriesWithOwner(\n          results.map(r => {\n            const [rOwner, rName] = r.id.split('/');\n            return { owner: rOwner, name: rName };\n          }),\n        );\n      })\n      .catch(() => {\n        setAvailableRepositoriesWithOwner([]);\n      });\n  }, [scaffolderApi, accessToken, host]);\n\n  useDebounce(updateAvailableRepositoriesWithOwner, 500, [\n    updateAvailableRepositoriesWithOwner,\n  ]);\n\n  // Update available owners when available repositories with owner change\n  const availableOwners = useMemo<string[]>(\n    () => uniq(map(availableRepositoriesWithOwner, 'owner')),\n    [availableRepositoriesWithOwner],\n  );\n\n  // Update available repositories when available repositories with owner change or when owner changes\n  const updateAvailableRepositories = useCallback(() => {\n    const availableRepos = availableRepositoriesWithOwner.flatMap(r =>\n      r.owner === owner ? [{ name: r.name }] : [],\n    );\n\n    onChange({ availableRepos });\n  }, [availableRepositoriesWithOwner, owner, onChange]);\n\n  useDebounce(updateAvailableRepositories, 500, [updateAvailableRepositories]);\n\n  if (theme === 'bui') {\n    if (allowedOwners?.length) {\n      const ownerItems = allowedOwners.map(i => ({ label: i, value: i }));\n\n      return (\n        <BuiSelect\n          className={overrides.select}\n          label={t('fields.githubRepoPicker.owner.title')}\n          description={t('fields.githubRepoPicker.owner.description')}\n          isDisabled={isDisabled || allowedOwners.length === 1}\n          isInvalid={rawErrors?.length > 0 && !owner}\n          selectedKey={owner ?? null}\n          onSelectionChange={(key: Key | null) => {\n            if (key !== null) onChange({ owner: String(key) });\n          }}\n          options={ownerItems}\n          isRequired\n        />\n      );\n    }\n\n    const options = availableOwners.map(o => ({ label: o, value: o }));\n\n    return (\n      <BuiAutocomplete\n        label={t('fields.githubRepoPicker.owner.inputTitle')}\n        description={t('fields.githubRepoPicker.owner.description')}\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\n        isInvalid={rawErrors?.length > 0 && !owner}\n      />\n    );\n  }\n\n  const ownerItems: SelectItem[] = allowedOwners\n    ? allowedOwners.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 && !owner}\n      >\n        {allowedOwners?.length ? (\n          <>\n            <MuiSelect\n              native\n              label={t('fields.githubRepoPicker.owner.title')}\n              onChange={s =>\n                onChange({ owner: String(Array.isArray(s) ? s[0] : s) })\n              }\n              disabled={isDisabled || allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n          </>\n        ) : (\n          <MuiAutocomplete\n            value={owner}\n            onChange={(_, newValue) => {\n              onChange({ owner: newValue || '' });\n            }}\n            options={availableOwners}\n            renderInput={params => (\n              <MuiTextField\n                {...params}\n                label={t('fields.githubRepoPicker.owner.inputTitle')}\n                disabled={isDisabled}\n                required\n              />\n            )}\n            freeSolo\n            disabled={isDisabled}\n            autoSelect\n          />\n        )}\n        <FormHelperText>\n          {t('fields.githubRepoPicker.owner.description')}\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":["ownerItems","BuiSelect","BuiAutocomplete","MuiSelect"],"mappings":"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"}

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

@@ -1,17 +1,22 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Select } from '@backstage/core-components';
+import { Select as Select$1 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 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 { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Select } from '@backstage/ui';
+import { Autocomplete } from '../Autocomplete/Autocomplete.esm.js';
+import overrides from '../scaffolderFieldOverrides.module.css.esm.js';
 
 const GitlabRepoPicker = (props) => {
+  const theme = useScaffolderTheme();
   const {
     allowedOwners = [],
     state,
@@ -22,7 +27,6 @@ const GitlabRepoPicker = (props) => {
   } = props;
   const [availableGroups, setAvailableGroups] = useState([]);
   const { t } = useTranslationRef(scaffolderTranslationRef);
-  const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   const { owner, host } = state;
   const scaffolderApi = useApi(scaffolderApiRef);
   const updateAvailableGroups = useCallback(() => {
@@ -37,12 +41,10 @@ const GitlabRepoPicker = (props) => {
       context: { host }
     }).then(({ results }) => {
       setAvailableGroups(
-        results.map((r) => {
-          return {
-            title: r.title,
-            id: r.id
-          };
-        })
+        results.map((r) => ({
+          title: r.title,
+          id: r.id
+        }))
       );
     }).catch(() => {
       setAvailableGroups([]);
@@ -65,15 +67,57 @@ const GitlabRepoPicker = (props) => {
       provider: "gitlab"
     }).then(({ results }) => {
       onChange({
-        availableRepos: results.map((r) => {
-          return { name: r.title, id: r.id };
-        })
+        availableRepos: results.map((r) => ({ name: r.title, id: r.id }))
       });
     }).catch(() => {
       onChange({ availableRepos: [] });
     });
   }, [scaffolderApi, accessToken, host, owner, onChange, availableGroups]);
   useDebounce(updateAvailableRepositories, 500, [updateAvailableRepositories]);
+  if (theme === "bui") {
+    if (allowedOwners?.length) {
+      const ownerItems2 = allowedOwners.map((i) => ({ label: i, value: i }));
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          className: overrides.select,
+          label: t("fields.gitlabRepoPicker.owner.title"),
+          description: t("fields.gitlabRepoPicker.owner.description"),
+          isDisabled: isDisabled || allowedOwners.length === 1,
+          isInvalid: rawErrors?.length > 0 && !owner,
+          selectedKey: owner ?? null,
+          onSelectionChange: (key) => {
+            if (key !== null) onChange({ owner: String(key) });
+          },
+          options: ownerItems2,
+          isRequired: true
+        }
+      );
+    }
+    const options = availableGroups.map((group) => ({
+      label: group.title,
+      value: group.title
+    }));
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        label: t("fields.gitlabRepoPicker.owner.inputTitle"),
+        description: t("fields.gitlabRepoPicker.owner.description"),
+        inputValue: owner ?? "",
+        onInputChange: (value) => onChange({ owner: value }),
+        onSelectionChange: (key) => {
+          if (key !== null) {
+            onChange({ owner: String(key) });
+          }
+        },
+        options,
+        isDisabled,
+        isRequired: true,
+        isInvalid: rawErrors?.length > 0 && !owner
+      }
+    );
+  }
+  const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -82,7 +126,7 @@ const GitlabRepoPicker = (props) => {
       error: rawErrors?.length > 0 && !owner,
       children: [
         allowedOwners?.length ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-          Select,
+          Select$1,
           {
             native: true,
             label: t("fields.gitlabRepoPicker.owner.title"),
@@ -96,7 +140,7 @@ const GitlabRepoPicker = (props) => {
             items: ownerItems
           }
         ) }) : /* @__PURE__ */ jsx(
-          Autocomplete,
+          MuiAutocomplete,
           {
             value: owner,
             onChange: (_, newValue) => {
@@ -104,7 +148,7 @@ const GitlabRepoPicker = (props) => {
             },
             options: availableGroups.map((group) => group.title),
             renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
+              MuiTextField,
               {
                 ...params,
                 label: t("fields.gitlabRepoPicker.owner.inputTitle"),

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

@@ -1 +1 @@
-{"version":3,"file":"GitlabRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GitlabRepoPicker.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 { Select, SelectItem } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\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 { scaffolderTranslationRef } from '../../../translation';\nimport { BaseRepoUrlPickerProps } from './types';\n\nexport const GitlabRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    allowedRepos?: string[];\n    accessToken?: string;\n  }>,\n) => {\n  const {\n    allowedOwners = [],\n    state,\n    onChange,\n    rawErrors,\n    accessToken,\n    isDisabled,\n  } = props;\n  const [availableGroups, setAvailableGroups] = useState<\n    { title: string; id: string }[]\n  >([]);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const ownerItems: SelectItem[] = allowedOwners\n    ? allowedOwners.map(i => ({ label: i, value: i }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  const { owner, host } = state;\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const updateAvailableGroups = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host) {\n      setAvailableGroups([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'groups',\n        provider: 'gitlab',\n        context: { host },\n      })\n      .then(({ results }) => {\n        setAvailableGroups(\n          results.map(r => {\n            return {\n              title: r.title!,\n              id: r.id,\n            };\n          }),\n        );\n      })\n      .catch(() => {\n        setAvailableGroups([]);\n      });\n  }, [scaffolderApi, accessToken, host]);\n\n  useDebounce(updateAvailableGroups, 500, [updateAvailableGroups]);\n\n  // Update available repositories when client is available and group changes\n  const updateAvailableRepositories = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host || !owner) {\n      onChange({ availableRepos: [] });\n      return;\n    }\n\n    const selectedGroup = availableGroups.find(group => group.title === owner);\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'repositories',\n        context: {\n          id: selectedGroup?.id ?? '',\n          host,\n        },\n        provider: 'gitlab',\n      })\n      .then(({ results }) => {\n        onChange({\n          availableRepos: results.map(r => {\n            return { name: r.title!, id: r.id };\n          }),\n        });\n      })\n      .catch(() => {\n        onChange({ availableRepos: [] });\n      });\n  }, [scaffolderApi, accessToken, host, owner, onChange, availableGroups]);\n\n  useDebounce(updateAvailableRepositories, 500, [updateAvailableRepositories]);\n\n  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !owner}\n      >\n        {allowedOwners?.length ? (\n          <>\n            <Select\n              native\n              label={t('fields.gitlabRepoPicker.owner.title')}\n              onChange={selected =>\n                onChange({\n                  owner: String(\n                    Array.isArray(selected) ? selected[0] : selected,\n                  ),\n                })\n              }\n              disabled={isDisabled || allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n          </>\n        ) : (\n          <Autocomplete\n            value={owner}\n            onChange={(_, newValue) => {\n              onChange({ owner: newValue || '' });\n            }}\n            options={availableGroups.map(group => group.title)}\n            renderInput={params => (\n              <TextField\n                {...params}\n                label={t('fields.gitlabRepoPicker.owner.inputTitle')}\n                disabled={isDisabled}\n                required\n              />\n            )}\n            freeSolo\n            disabled={isDisabled}\n            autoSelect\n          />\n        )}\n        <FormHelperText>\n          {t('fields.gitlabRepoPicker.owner.description')}\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"GitlabRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GitlabRepoPicker.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 { Select as MuiSelect, SelectItem } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\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 { scaffolderTranslationRef } from '../../../translation';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';\nimport { Select as BuiSelect } from '@backstage/ui';\nimport { Autocomplete as BuiAutocomplete } from '../Autocomplete';\nimport overrides from '../scaffolderFieldOverrides.module.css';\nimport type { Key } from 'react-aria-components';\n\nexport const GitlabRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    allowedRepos?: string[];\n    accessToken?: string;\n  }>,\n) => {\n  const theme = useScaffolderTheme();\n  const {\n    allowedOwners = [],\n    state,\n    onChange,\n    rawErrors,\n    accessToken,\n    isDisabled,\n  } = props;\n  const [availableGroups, setAvailableGroups] = useState<\n    { title: string; id: string }[]\n  >([]);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const { owner, host } = state;\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const updateAvailableGroups = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host) {\n      setAvailableGroups([]);\n      return;\n    }\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'groups',\n        provider: 'gitlab',\n        context: { host },\n      })\n      .then(({ results }) => {\n        setAvailableGroups(\n          results.map(r => ({\n            title: r.title!,\n            id: r.id,\n          })),\n        );\n      })\n      .catch(() => {\n        setAvailableGroups([]);\n      });\n  }, [scaffolderApi, accessToken, host]);\n\n  useDebounce(updateAvailableGroups, 500, [updateAvailableGroups]);\n\n  // Update available repositories when client is available and group changes\n  const updateAvailableRepositories = useCallback(() => {\n    if (!scaffolderApi.autocomplete || !accessToken || !host || !owner) {\n      onChange({ availableRepos: [] });\n      return;\n    }\n\n    const selectedGroup = availableGroups.find(group => group.title === owner);\n\n    scaffolderApi\n      .autocomplete({\n        token: accessToken,\n        resource: 'repositories',\n        context: {\n          id: selectedGroup?.id ?? '',\n          host,\n        },\n        provider: 'gitlab',\n      })\n      .then(({ results }) => {\n        onChange({\n          availableRepos: results.map(r => ({ name: r.title!, id: r.id })),\n        });\n      })\n      .catch(() => {\n        onChange({ availableRepos: [] });\n      });\n  }, [scaffolderApi, accessToken, host, owner, onChange, availableGroups]);\n\n  useDebounce(updateAvailableRepositories, 500, [updateAvailableRepositories]);\n\n  if (theme === 'bui') {\n    if (allowedOwners?.length) {\n      const ownerItems = allowedOwners.map(i => ({ label: i, value: i }));\n\n      return (\n        <BuiSelect\n          className={overrides.select}\n          label={t('fields.gitlabRepoPicker.owner.title')}\n          description={t('fields.gitlabRepoPicker.owner.description')}\n          isDisabled={isDisabled || allowedOwners.length === 1}\n          isInvalid={rawErrors?.length > 0 && !owner}\n          selectedKey={owner ?? null}\n          onSelectionChange={(key: Key | null) => {\n            if (key !== null) onChange({ owner: String(key) });\n          }}\n          options={ownerItems}\n          isRequired\n        />\n      );\n    }\n\n    const options = availableGroups.map(group => ({\n      label: group.title,\n      value: group.title,\n    }));\n\n    return (\n      <BuiAutocomplete\n        label={t('fields.gitlabRepoPicker.owner.inputTitle')}\n        description={t('fields.gitlabRepoPicker.owner.description')}\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\n        isInvalid={rawErrors?.length > 0 && !owner}\n      />\n    );\n  }\n\n  const ownerItems: SelectItem[] = allowedOwners\n    ? allowedOwners.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 && !owner}\n      >\n        {allowedOwners?.length ? (\n          <>\n            <MuiSelect\n              native\n              label={t('fields.gitlabRepoPicker.owner.title')}\n              onChange={selected =>\n                onChange({\n                  owner: String(\n                    Array.isArray(selected) ? selected[0] : selected,\n                  ),\n                })\n              }\n              disabled={isDisabled || allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n          </>\n        ) : (\n          <MuiAutocomplete\n            value={owner}\n            onChange={(_, newValue) => {\n              onChange({ owner: newValue || '' });\n            }}\n            options={availableGroups.map(group => group.title)}\n            renderInput={params => (\n              <MuiTextField\n                {...params}\n                label={t('fields.gitlabRepoPicker.owner.inputTitle')}\n                disabled={isDisabled}\n                required\n              />\n            )}\n            freeSolo\n            disabled={isDisabled}\n            autoSelect\n          />\n        )}\n        <FormHelperText>\n          {t('fields.gitlabRepoPicker.owner.description')}\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":["ownerItems","BuiSelect","BuiAutocomplete","MuiSelect"],"mappings":"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"}

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

@@ -17,9 +17,12 @@ import { RepoUrlPickerHost } from './RepoUrlPickerHost.esm.js';
 import { RepoUrlPickerRepoName } from './RepoUrlPickerRepoName.esm.js';
 import { parseRepoPickerUrl, serializeRepoPickerUrl } from './utils.esm.js';
 import { MarkdownContent } from '@backstage/core-components';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Flex, Text } from '@backstage/ui';
 export { RepoUrlPickerSchema } from './schema.esm.js';
 
 const RepoUrlPicker = (props) => {
+  const scaffolderTheme = useScaffolderTheme();
   const { uiSchema, onChange, rawErrors, formData, schema } = props;
   const [state, setState] = useState(
     parseRepoPickerUrl(formData)
@@ -117,12 +120,8 @@ const RepoUrlPicker = (props) => {
   );
   const hostType = (state.host && integrationApi.byHost(state.host)?.type) ?? null;
   const description = uiSchema["ui:description"] ?? schema.description;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    schema.title && /* @__PURE__ */ jsxs(Box, { my: 1, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h5", children: schema.title }),
-      /* @__PURE__ */ jsx(Divider, {})
-    ] }),
-    description && /* @__PURE__ */ jsx(Typography, { variant: "body1", children: /* @__PURE__ */ jsx(MarkdownContent, { content: description }) }),
+  const accessToken = uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey];
+  const subComponents = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       RepoUrlPickerHost,
       {
@@ -141,7 +140,7 @@ const RepoUrlPicker = (props) => {
         rawErrors,
         state,
         isDisabled,
-        accessToken: uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey]
+        accessToken
       }
     ),
     hostType === "gitea" && /* @__PURE__ */ jsx(
@@ -163,7 +162,7 @@ const RepoUrlPicker = (props) => {
         state,
         onChange: updateLocalState,
         isDisabled,
-        accessToken: uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey]
+        accessToken
       }
     ),
     hostType === "bitbucket" && /* @__PURE__ */ jsx(
@@ -175,7 +174,7 @@ const RepoUrlPicker = (props) => {
         state,
         onChange: updateLocalState,
         isDisabled,
-        accessToken: uiSchema?.["ui:options"]?.requestUserCredentials?.secretsKey && secrets[uiSchema["ui:options"].requestUserCredentials.secretsKey]
+        accessToken
       }
     ),
     hostType === "azure" && /* @__PURE__ */ jsx(
@@ -213,6 +212,21 @@ const RepoUrlPicker = (props) => {
       }
     )
   ] });
+  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 }),
+      subComponents
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    schema.title && /* @__PURE__ */ jsxs(Box, { my: 1, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", children: schema.title }),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    description && /* @__PURE__ */ jsx(Typography, { variant: "body1", children: /* @__PURE__ */ jsx(MarkdownContent, { content: description }) }),
+    subComponents
+  ] });
 };
 
 export { RepoUrlPicker };

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

@@ -1 +1 @@
-{"version":3,"file":"RepoUrlPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/RepoUrlPicker.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 { useApi } from '@backstage/core-plugin-api';\nimport {\n  scmAuthApiRef,\n  scmIntegrationsApiRef,\n} from '@backstage/integration-react';\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';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { AzureRepoPicker } from './AzureRepoPicker';\nimport { BitbucketRepoPicker } from './BitbucketRepoPicker';\nimport { GerritRepoPicker } from './GerritRepoPicker';\nimport { GiteaRepoPicker } from './GiteaRepoPicker';\nimport { GithubRepoPicker } from './GithubRepoPicker';\nimport { GitlabRepoPicker } from './GitlabRepoPicker';\nimport { RepoUrlPickerHost } from './RepoUrlPickerHost';\nimport { RepoUrlPickerRepoName } from './RepoUrlPickerRepoName';\nimport { RepoUrlPickerFieldSchema } from './schema';\nimport { RepoUrlPickerState } from './types';\nimport { parseRepoPickerUrl, serializeRepoPickerUrl } from './utils';\nimport { MarkdownContent } from '@backstage/core-components';\n\nexport { RepoUrlPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `RepoUrlPicker`\n * field extension.\n *\n * @public\n */\nexport const RepoUrlPicker = (\n  props: typeof RepoUrlPickerFieldSchema.TProps,\n) => {\n  const { uiSchema, onChange, rawErrors, formData, schema } = props;\n  const [state, setState] = useState<RepoUrlPickerState>(\n    parseRepoPickerUrl(formData),\n  );\n  const [credentialsHost, setCredentialsHost] = useState<string | undefined>(\n    undefined,\n  );\n  const integrationApi = useApi(scmIntegrationsApiRef);\n  const scmAuthApi = useApi(scmAuthApiRef);\n  const { secrets, setSecrets } = useTemplateSecrets();\n  const allowedHosts = useMemo(\n    () => uiSchema?.['ui:options']?.allowedHosts ?? [],\n    [uiSchema],\n  );\n  const allowedOrganizations = useMemo(\n    () => uiSchema?.['ui:options']?.allowedOrganizations ?? [],\n    [uiSchema],\n  );\n  const allowedOwners = useMemo(\n    () => uiSchema?.['ui:options']?.allowedOwners ?? [],\n    [uiSchema],\n  );\n  const allowedProjects = useMemo(\n    () => uiSchema?.['ui:options']?.allowedProjects ?? [],\n    [uiSchema],\n  );\n  const allowedRepos = useMemo(\n    () => uiSchema?.['ui:options']?.allowedRepos ?? [],\n    [uiSchema],\n  );\n  const isDisabled = useMemo(\n    () => uiSchema?.['ui:disabled'] ?? false,\n    [uiSchema],\n  );\n  const { owner, organization, project, repoName } = state;\n\n  useEffect(() => {\n    onChange(serializeRepoPickerUrl(state));\n  }, [state, onChange]);\n\n  /* we deal with calling the repo setting here instead of in each components for ease */\n  useEffect(() => {\n    if (allowedOrganizations.length > 0 && !organization) {\n      setState(prevState => ({\n        ...prevState,\n        organization: allowedOrganizations[0],\n      }));\n    }\n  }, [setState, allowedOrganizations, organization]);\n\n  useEffect(() => {\n    if (allowedOwners.length > 0 && !owner) {\n      setState(prevState => ({\n        ...prevState,\n        owner: allowedOwners[0],\n      }));\n    }\n  }, [setState, allowedOwners, owner]);\n\n  useEffect(() => {\n    if (allowedProjects.length > 0 && !project) {\n      setState(prevState => ({\n        ...prevState,\n        project: allowedProjects[0],\n      }));\n    }\n  }, [setState, allowedProjects, project]);\n\n  useEffect(() => {\n    if (allowedRepos.length > 0 && !repoName) {\n      setState(prevState => ({ ...prevState, repoName: allowedRepos[0] }));\n    }\n  }, [setState, allowedRepos, repoName]);\n\n  const updateLocalState = useCallback(\n    (newState: RepoUrlPickerState) => {\n      setState(prevState => ({ ...prevState, ...newState }));\n    },\n    [setState],\n  );\n\n  useDebounce(\n    async () => {\n      const { requestUserCredentials } = uiSchema?.['ui:options'] ?? {};\n\n      if (!requestUserCredentials || !state.host) {\n        return;\n      }\n\n      // don't show login prompt if secret value is already in state for selected host\n      if (\n        secrets[requestUserCredentials.secretsKey] &&\n        credentialsHost === state.host\n      ) {\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://${state.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      setCredentialsHost(state.host);\n    },\n    500,\n    [state, uiSchema],\n  );\n\n  const hostType =\n    (state.host && integrationApi.byHost(state.host)?.type) ?? null;\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      <RepoUrlPickerHost\n        host={state.host}\n        hosts={allowedHosts}\n        onChange={host => setState(prevState => ({ ...prevState, host }))}\n        rawErrors={rawErrors}\n        isDisabled={isDisabled}\n      />\n      {hostType === 'github' && (\n        <GithubRepoPicker\n          allowedOwners={allowedOwners}\n          onChange={updateLocalState}\n          rawErrors={rawErrors}\n          state={state}\n          isDisabled={isDisabled}\n          accessToken={\n            uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n            secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]\n          }\n        />\n      )}\n      {hostType === 'gitea' && (\n        <GiteaRepoPicker\n          allowedOwners={allowedOwners}\n          allowedRepos={allowedRepos}\n          rawErrors={rawErrors}\n          state={state}\n          isDisabled={isDisabled}\n          onChange={updateLocalState}\n        />\n      )}\n      {hostType === 'gitlab' && (\n        <GitlabRepoPicker\n          allowedOwners={allowedOwners}\n          rawErrors={rawErrors}\n          state={state}\n          onChange={updateLocalState}\n          isDisabled={isDisabled}\n          accessToken={\n            uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n            secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]\n          }\n        />\n      )}\n      {hostType === 'bitbucket' && (\n        <BitbucketRepoPicker\n          allowedOwners={allowedOwners}\n          allowedProjects={allowedProjects}\n          rawErrors={rawErrors}\n          state={state}\n          onChange={updateLocalState}\n          isDisabled={isDisabled}\n          accessToken={\n            uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n            secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]\n          }\n        />\n      )}\n      {hostType === 'azure' && (\n        <AzureRepoPicker\n          allowedOrganizations={allowedOrganizations}\n          allowedProject={allowedProjects}\n          rawErrors={rawErrors}\n          state={state}\n          isDisabled={isDisabled}\n          onChange={updateLocalState}\n        />\n      )}\n      {hostType === 'gerrit' && (\n        <GerritRepoPicker\n          rawErrors={rawErrors}\n          state={state}\n          onChange={updateLocalState}\n          isDisabled={isDisabled}\n        />\n      )}\n      <RepoUrlPickerRepoName\n        repoName={state.repoName}\n        allowedRepos={allowedRepos}\n        onChange={repo =>\n          setState(prevState => ({\n            ...prevState,\n            repoName: repo.id || repo.name,\n          }))\n        }\n        isDisabled={isDisabled}\n        rawErrors={rawErrors}\n        availableRepos={state.availableRepos}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RepoUrlPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/RepoUrlPicker.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 { useApi } from '@backstage/core-plugin-api';\nimport {\n  scmAuthApiRef,\n  scmIntegrationsApiRef,\n} from '@backstage/integration-react';\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';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { AzureRepoPicker } from './AzureRepoPicker';\nimport { BitbucketRepoPicker } from './BitbucketRepoPicker';\nimport { GerritRepoPicker } from './GerritRepoPicker';\nimport { GiteaRepoPicker } from './GiteaRepoPicker';\nimport { GithubRepoPicker } from './GithubRepoPicker';\nimport { GitlabRepoPicker } from './GitlabRepoPicker';\nimport { RepoUrlPickerHost } from './RepoUrlPickerHost';\nimport { RepoUrlPickerRepoName } from './RepoUrlPickerRepoName';\nimport { RepoUrlPickerFieldSchema } from './schema';\nimport { RepoUrlPickerState } from './types';\nimport { parseRepoPickerUrl, serializeRepoPickerUrl } from './utils';\nimport { MarkdownContent } from '@backstage/core-components';\nimport { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';\nimport { Flex, Text } from '@backstage/ui';\n\nexport { RepoUrlPickerSchema } from './schema';\n\n/**\n * The underlying component that is rendered in the form for the `RepoUrlPicker`\n * field extension.\n *\n * @public\n */\nexport const RepoUrlPicker = (\n  props: typeof RepoUrlPickerFieldSchema.TProps,\n) => {\n  const scaffolderTheme = useScaffolderTheme();\n  const { uiSchema, onChange, rawErrors, formData, schema } = props;\n  const [state, setState] = useState<RepoUrlPickerState>(\n    parseRepoPickerUrl(formData),\n  );\n  const [credentialsHost, setCredentialsHost] = useState<string | undefined>(\n    undefined,\n  );\n  const integrationApi = useApi(scmIntegrationsApiRef);\n  const scmAuthApi = useApi(scmAuthApiRef);\n  const { secrets, setSecrets } = useTemplateSecrets();\n  const allowedHosts = useMemo(\n    () => uiSchema?.['ui:options']?.allowedHosts ?? [],\n    [uiSchema],\n  );\n  const allowedOrganizations = useMemo(\n    () => uiSchema?.['ui:options']?.allowedOrganizations ?? [],\n    [uiSchema],\n  );\n  const allowedOwners = useMemo(\n    () => uiSchema?.['ui:options']?.allowedOwners ?? [],\n    [uiSchema],\n  );\n  const allowedProjects = useMemo(\n    () => uiSchema?.['ui:options']?.allowedProjects ?? [],\n    [uiSchema],\n  );\n  const allowedRepos = useMemo(\n    () => uiSchema?.['ui:options']?.allowedRepos ?? [],\n    [uiSchema],\n  );\n  const isDisabled = useMemo(\n    () => uiSchema?.['ui:disabled'] ?? false,\n    [uiSchema],\n  );\n  const { owner, organization, project, repoName } = state;\n\n  useEffect(() => {\n    onChange(serializeRepoPickerUrl(state));\n  }, [state, onChange]);\n\n  /* we deal with calling the repo setting here instead of in each components for ease */\n  useEffect(() => {\n    if (allowedOrganizations.length > 0 && !organization) {\n      setState(prevState => ({\n        ...prevState,\n        organization: allowedOrganizations[0],\n      }));\n    }\n  }, [setState, allowedOrganizations, organization]);\n\n  useEffect(() => {\n    if (allowedOwners.length > 0 && !owner) {\n      setState(prevState => ({\n        ...prevState,\n        owner: allowedOwners[0],\n      }));\n    }\n  }, [setState, allowedOwners, owner]);\n\n  useEffect(() => {\n    if (allowedProjects.length > 0 && !project) {\n      setState(prevState => ({\n        ...prevState,\n        project: allowedProjects[0],\n      }));\n    }\n  }, [setState, allowedProjects, project]);\n\n  useEffect(() => {\n    if (allowedRepos.length > 0 && !repoName) {\n      setState(prevState => ({ ...prevState, repoName: allowedRepos[0] }));\n    }\n  }, [setState, allowedRepos, repoName]);\n\n  const updateLocalState = useCallback(\n    (newState: RepoUrlPickerState) => {\n      setState(prevState => ({ ...prevState, ...newState }));\n    },\n    [setState],\n  );\n\n  useDebounce(\n    async () => {\n      const { requestUserCredentials } = uiSchema?.['ui:options'] ?? {};\n\n      if (!requestUserCredentials || !state.host) {\n        return;\n      }\n\n      // don't show login prompt if secret value is already in state for selected host\n      if (\n        secrets[requestUserCredentials.secretsKey] &&\n        credentialsHost === state.host\n      ) {\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://${state.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      setCredentialsHost(state.host);\n    },\n    500,\n    [state, uiSchema],\n  );\n\n  const hostType =\n    (state.host && integrationApi.byHost(state.host)?.type) ?? null;\n\n  const description = uiSchema['ui:description'] ?? schema.description;\n\n  const accessToken =\n    uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&\n    secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey];\n\n  const subComponents = (\n    <>\n      <RepoUrlPickerHost\n        host={state.host}\n        hosts={allowedHosts}\n        onChange={host => setState(prevState => ({ ...prevState, host }))}\n        rawErrors={rawErrors}\n        isDisabled={isDisabled}\n      />\n      {hostType === 'github' && (\n        <GithubRepoPicker\n          allowedOwners={allowedOwners}\n          onChange={updateLocalState}\n          rawErrors={rawErrors}\n          state={state}\n          isDisabled={isDisabled}\n          accessToken={accessToken}\n        />\n      )}\n      {hostType === 'gitea' && (\n        <GiteaRepoPicker\n          allowedOwners={allowedOwners}\n          allowedRepos={allowedRepos}\n          rawErrors={rawErrors}\n          state={state}\n          isDisabled={isDisabled}\n          onChange={updateLocalState}\n        />\n      )}\n      {hostType === 'gitlab' && (\n        <GitlabRepoPicker\n          allowedOwners={allowedOwners}\n          rawErrors={rawErrors}\n          state={state}\n          onChange={updateLocalState}\n          isDisabled={isDisabled}\n          accessToken={accessToken}\n        />\n      )}\n      {hostType === 'bitbucket' && (\n        <BitbucketRepoPicker\n          allowedOwners={allowedOwners}\n          allowedProjects={allowedProjects}\n          rawErrors={rawErrors}\n          state={state}\n          onChange={updateLocalState}\n          isDisabled={isDisabled}\n          accessToken={accessToken}\n        />\n      )}\n      {hostType === 'azure' && (\n        <AzureRepoPicker\n          allowedOrganizations={allowedOrganizations}\n          allowedProject={allowedProjects}\n          rawErrors={rawErrors}\n          state={state}\n          isDisabled={isDisabled}\n          onChange={updateLocalState}\n        />\n      )}\n      {hostType === 'gerrit' && (\n        <GerritRepoPicker\n          rawErrors={rawErrors}\n          state={state}\n          onChange={updateLocalState}\n          isDisabled={isDisabled}\n        />\n      )}\n      <RepoUrlPickerRepoName\n        repoName={state.repoName}\n        allowedRepos={allowedRepos}\n        onChange={repo =>\n          setState(prevState => ({\n            ...prevState,\n            repoName: repo.id || repo.name,\n          }))\n        }\n        isDisabled={isDisabled}\n        rawErrors={rawErrors}\n        availableRepos={state.availableRepos}\n      />\n    </>\n  );\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        {subComponents}\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      {subComponents}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useEffect } from 'react';
-import { Progress, Select } from '@backstage/core-components';
+import { Progress, Select as Select$1 } from '@backstage/core-components';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { useApi } from '@backstage/core-plugin-api';
@@ -8,8 +8,12 @@ import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 import useAsync from 'react-use/esm/useAsync';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { useScaffolderTheme } from '@backstage/plugin-scaffolder-react/alpha';
+import { Select } from '@backstage/ui';
+import overrides from '../scaffolderFieldOverrides.module.css.esm.js';
 
 const RepoUrlPickerHost = (props) => {
+  const theme = useScaffolderTheme();
   const { host, hosts, onChange, rawErrors, isDisabled } = props;
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -33,6 +37,26 @@ const RepoUrlPickerHost = (props) => {
   if (loading) {
     return /* @__PURE__ */ jsx(Progress, {});
   }
+  if (theme === "bui") {
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        className: overrides.select,
+        label: t("fields.repoUrlPicker.host.title"),
+        description: t("fields.repoUrlPicker.host.description"),
+        isDisabled: isDisabled || hosts?.length === 1,
+        isInvalid: rawErrors?.length > 0 && !host,
+        selectedKey: host ?? null,
+        onSelectionChange: (key) => {
+          if (key !== null) onChange(String(key));
+        },
+        options: hostsOptions,
+        isRequired: true,
+        "data-testid": "host-select"
+      }
+    );
+  }
+  const muiHostsOptions = hostsOptions;
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -41,14 +65,14 @@ const RepoUrlPickerHost = (props) => {
       error: rawErrors?.length > 0 && !host,
       children: [
         /* @__PURE__ */ jsx(
-          Select,
+          Select$1,
           {
             native: true,
             disabled: isDisabled || hosts?.length === 1,
             label: t("fields.repoUrlPicker.host.title"),
             onChange: (s) => onChange(String(Array.isArray(s) ? s[0] : s)),
             selected: host,
-            items: hostsOptions,
+            items: muiHostsOptions,
             "data-testid": "host-select"
           }
         ),