@backstage/plugin-scaffolder 1.24.0-next.2 → 1.24.0

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

@@ -1,36 +1,39 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const GerritRepoPicker = (props) => {
   const { onChange, rawErrors, state } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const { workspace, owner } = state;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, { margin: "normal", error: rawErrors?.length > 0 && !workspace }, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Owner"), /* @__PURE__ */ React.createElement(
-    Input,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, { margin: "normal", error: rawErrors?.length > 0 && !workspace }, /* @__PURE__ */ React.createElement(
+    TextField,
     {
       id: "ownerInput",
+      label: t("fields.gerritRepoPicker.owner.title"),
       onChange: (e) => onChange({ owner: e.target.value }),
+      helperText: t("fields.gerritRepoPicker.owner.description"),
       value: owner
     }
-  ), /* @__PURE__ */ React.createElement(FormHelperText, null, "The owner of the project (optional)")), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(
     FormControl,
     {
       margin: "normal",
       required: true,
       error: rawErrors?.length > 0 && !workspace
     },
-    /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "parentInput" }, "Parent"),
     /* @__PURE__ */ React.createElement(
-      Input,
+      TextField,
       {
         id: "parentInput",
+        label: t("fields.gerritRepoPicker.parent.title"),
         onChange: (e) => onChange({ workspace: e.target.value }),
-        value: workspace
+        value: workspace,
+        helperText: t("fields.gerritRepoPicker.parent.description")
       }
-    ),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The project parent that the repo will belong to")
+    )
   ));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"GerritRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GerritRepoPicker.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 */\nimport React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport { BaseRepoUrlPickerProps } from './types';\n\nexport const GerritRepoPicker = (props: BaseRepoUrlPickerProps) => {\n  const { onChange, rawErrors, state } = props;\n  const { workspace, owner } = state;\n  return (\n    <>\n      <FormControl margin=\"normal\" error={rawErrors?.length > 0 && !workspace}>\n        <InputLabel htmlFor=\"ownerInput\">Owner</InputLabel>\n        <Input\n          id=\"ownerInput\"\n          onChange={e => onChange({ owner: e.target.value })}\n          value={owner}\n        />\n        <FormHelperText>The owner of the project (optional)</FormHelperText>\n      </FormControl>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !workspace}\n      >\n        <InputLabel htmlFor=\"parentInput\">Parent</InputLabel>\n        <Input\n          id=\"parentInput\"\n          onChange={e => onChange({ workspace: e.target.value })}\n          value={workspace}\n        />\n        <FormHelperText>\n          The project parent that the repo will belong to\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBa,MAAA,gBAAA,GAAmB,CAAC,KAAkC,KAAA;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACvC,EAAM,MAAA,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC7B,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,MAAO,EAAA,QAAA,EAAS,OAAO,SAAW,EAAA,MAAA,GAAS,CAAK,IAAA,CAAC,6BAC3D,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,YAAA,EAAA,EAAa,OAAK,CACtC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,YAAA;AAAA,MACH,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,MACjD,KAAO,EAAA,KAAA;AAAA,KAAA;AAAA,GAET,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,IAAA,EAAA,qCAAmC,CACrD,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,SAAA;AAAA,KAAA;AAAA,oBAEhC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,aAAA,EAAA,EAAc,QAAM,CAAA;AAAA,oBACxC,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,aAAA;AAAA,QACH,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,WAAW,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACrD,KAAO,EAAA,SAAA;AAAA,OAAA;AAAA,KACT;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,sBAAe,iDAEhB,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"GerritRepoPicker.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/GerritRepoPicker.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 */\nimport React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport TextField from '@material-ui/core/TextField';\nimport { BaseRepoUrlPickerProps } from './types';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport const GerritRepoPicker = (props: BaseRepoUrlPickerProps) => {\n  const { onChange, rawErrors, state } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const { workspace, owner } = state;\n  return (\n    <>\n      <FormControl margin=\"normal\" error={rawErrors?.length > 0 && !workspace}>\n        <TextField\n          id=\"ownerInput\"\n          label={t('fields.gerritRepoPicker.owner.title')}\n          onChange={e => onChange({ owner: e.target.value })}\n          helperText={t('fields.gerritRepoPicker.owner.description')}\n          value={owner}\n        />\n      </FormControl>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !workspace}\n      >\n        <TextField\n          id=\"parentInput\"\n          label={t('fields.gerritRepoPicker.parent.title')}\n          onChange={e => onChange({ workspace: e.target.value })}\n          value={workspace}\n          helperText={t('fields.gerritRepoPicker.parent.description')}\n        />\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBa,MAAA,gBAAA,GAAmB,CAAC,KAAkC,KAAA;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACvC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAM,MAAA,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,MAAO,EAAA,QAAA,EAAS,OAAO,SAAW,EAAA,MAAA,GAAS,CAAK,IAAA,CAAC,SAC5D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,YAAA;AAAA,MACH,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,MAC9C,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,MACjD,UAAA,EAAY,EAAE,2CAA2C,CAAA;AAAA,MACzD,KAAO,EAAA,KAAA;AAAA,KAAA;AAAA,GAEX,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,SAAA;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,aAAA;AAAA,QACH,KAAA,EAAO,EAAE,sCAAsC,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,WAAW,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACrD,KAAO,EAAA,SAAA;AAAA,QACP,UAAA,EAAY,EAAE,4CAA4C,CAAA;AAAA,OAAA;AAAA,KAC5D;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { Select } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const GiteaRepoPicker = (props) => {
   const { allowedOwners = [], state, onChange, rawErrors } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   const { owner } = state;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -16,27 +18,30 @@ const GiteaRepoPicker = (props) => {
       required: true,
       error: rawErrors?.length > 0 && !owner
     },
-    allowedOwners?.length ? /* @__PURE__ */ React.createElement(
+    allowedOwners?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Select,
       {
         native: true,
-        label: "Owner Available",
+        label: t("fields.giteaRepoPicker.owner.title"),
         onChange: (selected) => onChange({
-          owner: String(Array.isArray(selected) ? selected[0] : selected)
+          owner: String(
+            Array.isArray(selected) ? selected[0] : selected
+          )
         }),
         disabled: allowedOwners.length === 1,
         selected: owner,
         items: ownerItems
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Owner"), /* @__PURE__ */ React.createElement(
-      Input,
+    ), /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.giteaRepoPicker.owner.description"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      TextField,
       {
         id: "ownerInput",
+        label: t("fields.giteaRepoPicker.owner.inputTitle"),
         onChange: (e) => onChange({ owner: e.target.value }),
+        helperText: t("fields.giteaRepoPicker.owner.description"),
         value: owner
       }
-    )),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "Gitea namespace where this repository will belong to. It can be the name of organization, group, subgroup, user, or the project.")
+    ))
   ));
 };
 

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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport { BaseRepoUrlPickerProps } from './types';\n\nexport const GiteaRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    allowedRepos?: string[];\n  }>,\n) => {\n  const { allowedOwners = [], state, onChange, rawErrors } = props;\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          <Select\n            native\n            label=\"Owner Available\"\n            onChange={selected =>\n              onChange({\n                owner: String(Array.isArray(selected) ? selected[0] : selected),\n              })\n            }\n            disabled={allowedOwners.length === 1}\n            selected={owner}\n            items={ownerItems}\n          />\n        ) : (\n          <>\n            <InputLabel htmlFor=\"ownerInput\">Owner</InputLabel>\n            <Input\n              id=\"ownerInput\"\n              onChange={e => onChange({ owner: e.target.value })}\n              value={owner}\n            />\n          </>\n        )}\n        <FormHelperText>\n          Gitea namespace where this repository will belong to. It can be the\n          name of organization, group, subgroup, user, or the project.\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuBa,MAAA,eAAA,GAAkB,CAC7B,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,aAAgB,GAAA,IAAI,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA,CAAA;AAC3D,EAAA,MAAM,aAA2B,aAC7B,GAAA,aAAA,CAAc,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC/C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,KAAA;AAAA,KAAA;AAAA,IAEhC,eAAe,MACd,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAM,EAAA,iBAAA;AAAA,QACN,QAAA,EAAU,cACR,QAAS,CAAA;AAAA,UACP,KAAA,EAAO,OAAO,KAAM,CAAA,OAAA,CAAQ,QAAQ,CAAI,GAAA,QAAA,CAAS,CAAC,CAAA,GAAI,QAAQ,CAAA;AAAA,SAC/D,CAAA;AAAA,QAEH,QAAA,EAAU,cAAc,MAAW,KAAA,CAAA;AAAA,QACnC,QAAU,EAAA,KAAA;AAAA,QACV,KAAO,EAAA,UAAA;AAAA,OAAA;AAAA,wBAIP,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,YAAA,EAAA,EAAa,OAAK,CACtC,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,YAAA;AAAA,QACH,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACjD,KAAO,EAAA,KAAA;AAAA,OAAA;AAAA,KAEX,CAAA;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,sBAAe,kIAGhB,CAAA;AAAA,GAEJ,CAAA,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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport { 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 } = 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={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              value={owner}\n            />\n          </>\n        )}\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwBa,MAAA,eAAA,GAAkB,CAC7B,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,aAAgB,GAAA,IAAI,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA,CAAA;AAC3D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAA,MAAM,aAA2B,aAC7B,GAAA,aAAA,CAAc,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC/C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,KAAA;AAAA,KAAA;AAAA,IAEhC,aAAA,EAAe,yBAEZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAA,EAAO,EAAE,oCAAoC,CAAA;AAAA,QAC7C,QAAA,EAAU,cACR,QAAS,CAAA;AAAA,UACP,KAAO,EAAA,MAAA;AAAA,YACL,MAAM,OAAQ,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,CAAC,CAAI,GAAA,QAAA;AAAA,WAC1C;AAAA,SACD,CAAA;AAAA,QAEH,QAAA,EAAU,cAAc,MAAW,KAAA,CAAA;AAAA,QACnC,QAAU,EAAA,KAAA;AAAA,QACV,KAAO,EAAA,UAAA;AAAA,OAAA;AAAA,KACT,sCACC,cACE,EAAA,IAAA,EAAA,CAAA,CAAE,0CAA0C,CAC/C,CACF,oBAGE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,YAAA;AAAA,QACH,KAAA,EAAO,EAAE,yCAAyC,CAAA;AAAA,QAClD,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACjD,UAAA,EAAY,EAAE,0CAA0C,CAAA;AAAA,QACxD,KAAO,EAAA,KAAA;AAAA,OAAA;AAAA,KAEX,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { Select } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const GithubRepoPicker = (props) => {
   const { allowedOwners = [], rawErrors, state, onChange } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   const { owner } = state;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -16,25 +18,26 @@ const GithubRepoPicker = (props) => {
       required: true,
       error: rawErrors?.length > 0 && !owner
     },
-    allowedOwners?.length ? /* @__PURE__ */ React.createElement(
+    allowedOwners?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Select,
       {
         native: true,
-        label: "Owner Available",
+        label: t("fields.githubRepoPicker.owner.title"),
         onChange: (s) => onChange({ owner: String(Array.isArray(s) ? s[0] : s) }),
         disabled: allowedOwners.length === 1,
         selected: owner,
         items: ownerItems
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Owner"), /* @__PURE__ */ React.createElement(
-      Input,
+    ), /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.githubRepoPicker.owner.description"))) : /* @__PURE__ */ React.createElement(
+      TextField,
       {
         id: "ownerInput",
+        label: t("fields.githubRepoPicker.owner.inputTitle"),
         onChange: (e) => onChange({ owner: e.target.value }),
+        helperText: t("fields.githubRepoPicker.owner.description"),
         value: owner
       }
-    )),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The organization, user or project that this repo will belong to")
+    )
   ));
 };
 

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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport { BaseRepoUrlPickerProps } from './types';\n\nexport const GithubRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n  }>,\n) => {\n  const { allowedOwners = [], rawErrors, state, onChange } = props;\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          <Select\n            native\n            label=\"Owner Available\"\n            onChange={s =>\n              onChange({ owner: String(Array.isArray(s) ? s[0] : s) })\n            }\n            disabled={allowedOwners.length === 1}\n            selected={owner}\n            items={ownerItems}\n          />\n        ) : (\n          <>\n            <InputLabel htmlFor=\"ownerInput\">Owner</InputLabel>\n            <Input\n              id=\"ownerInput\"\n              onChange={e => onChange({ owner: e.target.value })}\n              value={owner}\n            />\n          </>\n        )}\n        <FormHelperText>\n          The organization, user or project that this repo will belong to\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuBa,MAAA,gBAAA,GAAmB,CAC9B,KAGG,KAAA;AACH,EAAA,MAAM,EAAE,aAAgB,GAAA,IAAI,SAAW,EAAA,KAAA,EAAO,UAAa,GAAA,KAAA,CAAA;AAC3D,EAAA,MAAM,aAA2B,aAC7B,GAAA,aAAA,CAAc,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC/C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,KAAA;AAAA,KAAA;AAAA,IAEhC,eAAe,MACd,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAM,EAAA,iBAAA;AAAA,QACN,QAAU,EAAA,CAAA,CAAA,KACR,QAAS,CAAA,EAAE,OAAO,MAAO,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,IAAI,CAAE,CAAA,CAAC,CAAI,GAAA,CAAC,GAAG,CAAA;AAAA,QAEzD,QAAA,EAAU,cAAc,MAAW,KAAA,CAAA;AAAA,QACnC,QAAU,EAAA,KAAA;AAAA,QACV,KAAO,EAAA,UAAA;AAAA,OAAA;AAAA,wBAIP,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,YAAA,EAAA,EAAa,OAAK,CACtC,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,YAAA;AAAA,QACH,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACjD,KAAO,EAAA,KAAA;AAAA,OAAA;AAAA,KAEX,CAAA;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,sBAAe,iEAEhB,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport { 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 GithubRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n  }>,\n) => {\n  const { allowedOwners = [], rawErrors, state, onChange } = 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.githubRepoPicker.owner.title')}\n              onChange={s =>\n                onChange({ owner: String(Array.isArray(s) ? s[0] : s) })\n              }\n              disabled={allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n            <FormHelperText>\n              {t('fields.githubRepoPicker.owner.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <TextField\n            id=\"ownerInput\"\n            label={t('fields.githubRepoPicker.owner.inputTitle')}\n            onChange={e => onChange({ owner: e.target.value })}\n            helperText={t('fields.githubRepoPicker.owner.description')}\n            value={owner}\n          />\n        )}\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwBa,MAAA,gBAAA,GAAmB,CAC9B,KAGG,KAAA;AACH,EAAA,MAAM,EAAE,aAAgB,GAAA,IAAI,SAAW,EAAA,KAAA,EAAO,UAAa,GAAA,KAAA,CAAA;AAC3D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAA,MAAM,aAA2B,aAC7B,GAAA,aAAA,CAAc,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC/C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,KAAA;AAAA,KAAA;AAAA,IAEhC,aAAA,EAAe,yBAEZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,QAAU,EAAA,CAAA,CAAA,KACR,QAAS,CAAA,EAAE,OAAO,MAAO,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,IAAI,CAAE,CAAA,CAAC,CAAI,GAAA,CAAC,GAAG,CAAA;AAAA,QAEzD,QAAA,EAAU,cAAc,MAAW,KAAA,CAAA;AAAA,QACnC,QAAU,EAAA,KAAA;AAAA,QACV,KAAO,EAAA,UAAA;AAAA,OAAA;AAAA,uBAER,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACE,EAAE,2CAA2C,CAChD,CACF,CAEA,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,YAAA;AAAA,QACH,KAAA,EAAO,EAAE,0CAA0C,CAAA;AAAA,QACnD,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACjD,UAAA,EAAY,EAAE,2CAA2C,CAAA;AAAA,QACzD,KAAO,EAAA,KAAA;AAAA,OAAA;AAAA,KACT;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
 import { Select } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const GitlabRepoPicker = (props) => {
   const { allowedOwners = [], state, onChange, rawErrors } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const ownerItems = allowedOwners ? allowedOwners.map((i) => ({ label: i, value: i })) : [{ label: "Loading...", value: "loading" }];
   const { owner } = state;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -16,27 +18,30 @@ const GitlabRepoPicker = (props) => {
       required: true,
       error: rawErrors?.length > 0 && !owner
     },
-    allowedOwners?.length ? /* @__PURE__ */ React.createElement(
+    allowedOwners?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Select,
       {
         native: true,
-        label: "Owner Available",
+        label: t("fields.gitlabRepoPicker.owner.title"),
         onChange: (selected) => onChange({
-          owner: String(Array.isArray(selected) ? selected[0] : selected)
+          owner: String(
+            Array.isArray(selected) ? selected[0] : selected
+          )
         }),
         disabled: allowedOwners.length === 1,
         selected: owner,
         items: ownerItems
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: "ownerInput" }, "Owner"), /* @__PURE__ */ React.createElement(
-      Input,
+    ), /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.gitlabRepoPicker.owner.description"))) : /* @__PURE__ */ React.createElement(
+      TextField,
       {
         id: "ownerInput",
+        label: t("fields.gitlabRepoPicker.owner.inputTitle"),
         onChange: (e) => onChange({ owner: e.target.value }),
+        helperText: t("fields.gitlabRepoPicker.owner.description"),
         value: owner
       }
-    )),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "GitLab namespace where this repository will belong to. It can be the name of organization, group, subgroup, user, or the project.")
+    )
   ));
 };
 

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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport { BaseRepoUrlPickerProps } from './types';\n\nexport const GitlabRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    allowedRepos?: string[];\n  }>,\n) => {\n  const { allowedOwners = [], state, onChange, rawErrors } = props;\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          <Select\n            native\n            label=\"Owner Available\"\n            onChange={selected =>\n              onChange({\n                owner: String(Array.isArray(selected) ? selected[0] : selected),\n              })\n            }\n            disabled={allowedOwners.length === 1}\n            selected={owner}\n            items={ownerItems}\n          />\n        ) : (\n          <>\n            <InputLabel htmlFor=\"ownerInput\">Owner</InputLabel>\n            <Input\n              id=\"ownerInput\"\n              onChange={e => onChange({ owner: e.target.value })}\n              value={owner}\n            />\n          </>\n        )}\n        <FormHelperText>\n          GitLab namespace where this repository will belong to. It can be the\n          name of organization, group, subgroup, user, or the project.\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuBa,MAAA,gBAAA,GAAmB,CAC9B,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,aAAgB,GAAA,IAAI,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA,CAAA;AAC3D,EAAA,MAAM,aAA2B,aAC7B,GAAA,aAAA,CAAc,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC/C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,KAAA;AAAA,KAAA;AAAA,IAEhC,eAAe,MACd,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAM,EAAA,iBAAA;AAAA,QACN,QAAA,EAAU,cACR,QAAS,CAAA;AAAA,UACP,KAAA,EAAO,OAAO,KAAM,CAAA,OAAA,CAAQ,QAAQ,CAAI,GAAA,QAAA,CAAS,CAAC,CAAA,GAAI,QAAQ,CAAA;AAAA,SAC/D,CAAA;AAAA,QAEH,QAAA,EAAU,cAAc,MAAW,KAAA,CAAA;AAAA,QACnC,QAAU,EAAA,KAAA;AAAA,QACV,KAAO,EAAA,UAAA;AAAA,OAAA;AAAA,wBAIP,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,YAAA,EAAA,EAAa,OAAK,CACtC,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,YAAA;AAAA,QACH,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACjD,KAAO,EAAA,KAAA;AAAA,OAAA;AAAA,KAEX,CAAA;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,sBAAe,mIAGhB,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"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 React from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport { 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 GitlabRepoPicker = (\n  props: BaseRepoUrlPickerProps<{\n    allowedOwners?: string[];\n    allowedRepos?: string[];\n  }>,\n) => {\n  const { allowedOwners = [], state, onChange, rawErrors } = 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.gitlabRepoPicker.owner.title')}\n              onChange={selected =>\n                onChange({\n                  owner: String(\n                    Array.isArray(selected) ? selected[0] : selected,\n                  ),\n                })\n              }\n              disabled={allowedOwners.length === 1}\n              selected={owner}\n              items={ownerItems}\n            />\n            <FormHelperText>\n              {t('fields.gitlabRepoPicker.owner.description')}\n            </FormHelperText>\n          </>\n        ) : (\n          <TextField\n            id=\"ownerInput\"\n            label={t('fields.gitlabRepoPicker.owner.inputTitle')}\n            onChange={e => onChange({ owner: e.target.value })}\n            helperText={t('fields.gitlabRepoPicker.owner.description')}\n            value={owner}\n          />\n        )}\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwBa,MAAA,gBAAA,GAAmB,CAC9B,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,aAAgB,GAAA,IAAI,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA,CAAA;AAC3D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAA,MAAM,aAA2B,aAC7B,GAAA,aAAA,CAAc,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC/C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,KAAA;AAAA,KAAA;AAAA,IAEhC,aAAA,EAAe,yBAEZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,QAAA,EAAU,cACR,QAAS,CAAA;AAAA,UACP,KAAO,EAAA,MAAA;AAAA,YACL,MAAM,OAAQ,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,CAAC,CAAI,GAAA,QAAA;AAAA,WAC1C;AAAA,SACD,CAAA;AAAA,QAEH,QAAA,EAAU,cAAc,MAAW,KAAA,CAAA;AAAA,QACnC,QAAU,EAAA,KAAA;AAAA,QACV,KAAO,EAAA,UAAA;AAAA,OAAA;AAAA,uBAER,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACE,EAAE,2CAA2C,CAChD,CACF,CAEA,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,YAAA;AAAA,QACH,KAAA,EAAO,EAAE,0CAA0C,CAAA;AAAA,QACnD,QAAA,EAAU,OAAK,QAAS,CAAA,EAAE,OAAO,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,QACjD,UAAA,EAAY,EAAE,2CAA2C,CAAA;AAAA,QACzD,KAAO,EAAA,KAAA;AAAA,OAAA;AAAA,KACT;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

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

@@ -5,9 +5,12 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import { useApi } from '@backstage/core-plugin-api';
 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';
 
 const RepoUrlPickerHost = (props) => {
   const { host, hosts, onChange, rawErrors } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const scaffolderApi = useApi(scaffolderApiRef);
   const { value: { integrations } = { integrations: [] }, loading } = useAsync(
     async () => {
@@ -41,14 +44,14 @@ const RepoUrlPickerHost = (props) => {
       {
         native: true,
         disabled: hosts?.length === 1,
-        label: "Host",
+        label: t("fields.repoUrlPicker.host.title"),
         onChange: (s) => onChange(String(Array.isArray(s) ? s[0] : s)),
         selected: host,
         items: hostsOptions,
         "data-testid": "host-select"
       }
     ),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The host where the repository will be created")
+    /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.repoUrlPicker.host.description"))
   ));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"RepoUrlPickerHost.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useEffect } from 'react';\nimport { Progress, Select, SelectItem } from '@backstage/core-components';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport useAsync from 'react-use/esm/useAsync';\n\nexport const RepoUrlPickerHost = (props: {\n  host?: string;\n  hosts?: string[];\n  onChange: (host: string) => void;\n  rawErrors: string[];\n}) => {\n  const { host, hosts, onChange, rawErrors } = props;\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const { value: { integrations } = { integrations: [] }, loading } = useAsync(\n    async () => {\n      return await scaffolderApi.getIntegrationsList({\n        allowedHosts: hosts ?? [],\n      });\n    },\n  );\n\n  useEffect(() => {\n    // If there is no host chosen currently\n    if (!host) {\n      // Set the first of the allowedHosts option if that available\n      if (hosts?.length) {\n        onChange(hosts[0]);\n        // if there's no hosts provided, fallback to using the first integration\n      } else if (integrations?.length) {\n        onChange(integrations[0].host);\n      }\n    }\n  }, [hosts, host, onChange, integrations]);\n\n  // If there are no allowedHosts provided, then show all integrations. Otherwise, only show integrations\n  // that are provided in the dropdown for the user to choose from.\n  const hostsOptions: SelectItem[] = integrations\n    ? integrations\n        .filter(i => (hosts?.length ? hosts?.includes(i.host) : true))\n        .map(i => ({ label: i.title, value: i.host }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !host}\n      >\n        <Select\n          native\n          disabled={hosts?.length === 1}\n          label=\"Host\"\n          onChange={s => onChange(String(Array.isArray(s) ? s[0] : s))}\n          selected={host}\n          items={hostsOptions}\n          data-testid=\"host-select\"\n        />\n\n        <FormHelperText>\n          The host where the repository will be created\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuBa,MAAA,iBAAA,GAAoB,CAAC,KAK5B,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA,CAAA;AAC7C,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA,CAAA;AAE7C,EAAM,MAAA,EAAE,KAAO,EAAA,EAAE,YAAa,EAAA,GAAI,EAAE,YAAA,EAAc,EAAC,EAAK,EAAA,OAAA,EAAY,GAAA,QAAA;AAAA,IAClE,YAAY;AACV,MAAO,OAAA,MAAM,cAAc,mBAAoB,CAAA;AAAA,QAC7C,YAAA,EAAc,SAAS,EAAC;AAAA,OACzB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,IAAM,EAAA;AAET,MAAA,IAAI,OAAO,MAAQ,EAAA;AACjB,QAAS,QAAA,CAAA,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AAAA,OAEnB,MAAA,IAAW,cAAc,MAAQ,EAAA;AAC/B,QAAS,QAAA,CAAA,YAAA,CAAa,CAAC,CAAA,CAAE,IAAI,CAAA,CAAA;AAAA,OAC/B;AAAA,KACF;AAAA,KACC,CAAC,KAAA,EAAO,IAAM,EAAA,QAAA,EAAU,YAAY,CAAC,CAAA,CAAA;AAIxC,EAAA,MAAM,YAA6B,GAAA,YAAA,GAC/B,YACG,CAAA,MAAA,CAAO,CAAM,CAAA,KAAA,KAAA,EAAO,MAAS,GAAA,KAAA,EAAO,QAAS,CAAA,CAAA,CAAE,IAAI,CAAA,GAAI,IAAK,CAC5D,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA,EAAE,KAAO,EAAA,CAAA,CAAE,KAAO,EAAA,KAAA,EAAO,EAAE,IAAK,EAAA,CAAE,CAC/C,GAAA,CAAC,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,IAAA;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,QAAA,EAAU,OAAO,MAAW,KAAA,CAAA;AAAA,QAC5B,KAAM,EAAA,MAAA;AAAA,QACN,QAAU,EAAA,CAAA,CAAA,KAAK,QAAS,CAAA,MAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAE,CAAA,CAAC,CAAI,GAAA,CAAC,CAAC,CAAA;AAAA,QAC3D,QAAU,EAAA,IAAA;AAAA,QACV,KAAO,EAAA,YAAA;AAAA,QACP,aAAY,EAAA,aAAA;AAAA,OAAA;AAAA,KACd;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,sBAAe,+CAEhB,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RepoUrlPickerHost.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/RepoUrlPickerHost.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useEffect } from 'react';\nimport { Progress, Select, SelectItem } from '@backstage/core-components';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport const RepoUrlPickerHost = (props: {\n  host?: string;\n  hosts?: string[];\n  onChange: (host: string) => void;\n  rawErrors: string[];\n}) => {\n  const { host, hosts, onChange, rawErrors } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const scaffolderApi = useApi(scaffolderApiRef);\n\n  const { value: { integrations } = { integrations: [] }, loading } = useAsync(\n    async () => {\n      return await scaffolderApi.getIntegrationsList({\n        allowedHosts: hosts ?? [],\n      });\n    },\n  );\n\n  useEffect(() => {\n    // If there is no host chosen currently\n    if (!host) {\n      // Set the first of the allowedHosts option if that available\n      if (hosts?.length) {\n        onChange(hosts[0]);\n        // if there's no hosts provided, fallback to using the first integration\n      } else if (integrations?.length) {\n        onChange(integrations[0].host);\n      }\n    }\n  }, [hosts, host, onChange, integrations]);\n\n  // If there are no allowedHosts provided, then show all integrations. Otherwise, only show integrations\n  // that are provided in the dropdown for the user to choose from.\n  const hostsOptions: SelectItem[] = integrations\n    ? integrations\n        .filter(i => (hosts?.length ? hosts?.includes(i.host) : true))\n        .map(i => ({ label: i.title, value: i.host }))\n    : [{ label: 'Loading...', value: 'loading' }];\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  return (\n    <>\n      <FormControl\n        margin=\"normal\"\n        required\n        error={rawErrors?.length > 0 && !host}\n      >\n        <Select\n          native\n          disabled={hosts?.length === 1}\n          label={t('fields.repoUrlPicker.host.title')}\n          onChange={s => onChange(String(Array.isArray(s) ? s[0] : s))}\n          selected={host}\n          items={hostsOptions}\n          data-testid=\"host-select\"\n        />\n\n        <FormHelperText>\n          {t('fields.repoUrlPicker.host.description')}\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyBa,MAAA,iBAAA,GAAoB,CAAC,KAK5B,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA,CAAA;AAE7C,EAAM,MAAA,EAAE,KAAO,EAAA,EAAE,YAAa,EAAA,GAAI,EAAE,YAAA,EAAc,EAAC,EAAK,EAAA,OAAA,EAAY,GAAA,QAAA;AAAA,IAClE,YAAY;AACV,MAAO,OAAA,MAAM,cAAc,mBAAoB,CAAA;AAAA,QAC7C,YAAA,EAAc,SAAS,EAAC;AAAA,OACzB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,IAAM,EAAA;AAET,MAAA,IAAI,OAAO,MAAQ,EAAA;AACjB,QAAS,QAAA,CAAA,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AAAA,OAEnB,MAAA,IAAW,cAAc,MAAQ,EAAA;AAC/B,QAAS,QAAA,CAAA,YAAA,CAAa,CAAC,CAAA,CAAE,IAAI,CAAA,CAAA;AAAA,OAC/B;AAAA,KACF;AAAA,KACC,CAAC,KAAA,EAAO,IAAM,EAAA,QAAA,EAAU,YAAY,CAAC,CAAA,CAAA;AAIxC,EAAA,MAAM,YAA6B,GAAA,YAAA,GAC/B,YACG,CAAA,MAAA,CAAO,CAAM,CAAA,KAAA,KAAA,EAAO,MAAS,GAAA,KAAA,EAAO,QAAS,CAAA,CAAA,CAAE,IAAI,CAAA,GAAI,IAAK,CAC5D,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA,EAAE,KAAO,EAAA,CAAA,CAAE,KAAO,EAAA,KAAA,EAAO,EAAE,IAAK,EAAA,CAAE,CAC/C,GAAA,CAAC,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,IAAA;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,QAAA,EAAU,OAAO,MAAW,KAAA,CAAA;AAAA,QAC5B,KAAA,EAAO,EAAE,iCAAiC,CAAA;AAAA,QAC1C,QAAU,EAAA,CAAA,CAAA,KAAK,QAAS,CAAA,MAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAE,CAAA,CAAC,CAAI,GAAA,CAAC,CAAC,CAAA;AAAA,QAC3D,QAAU,EAAA,IAAA;AAAA,QACV,KAAO,EAAA,YAAA;AAAA,QACP,aAAY,EAAA,aAAA;AAAA,OAAA;AAAA,KACd;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACE,CAAE,CAAA,uCAAuC,CAC5C,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

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

@@ -4,9 +4,12 @@ import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import TextField from '@material-ui/core/TextField';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const RepoUrlPickerRepoName = (props) => {
   const { repoName, allowedRepos, onChange, rawErrors, availableRepos } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   useEffect(() => {
     if (!repoName) {
       if (allowedRepos?.length) {
@@ -26,7 +29,7 @@ const RepoUrlPickerRepoName = (props) => {
       Select,
       {
         native: true,
-        label: "Repositories Available",
+        label: t("fields.repoUrlPicker.repository.title"),
         onChange: (selected) => onChange(String(Array.isArray(selected) ? selected[0] : selected)),
         disabled: allowedRepos.length === 1,
         selected: repoName,
@@ -40,12 +43,19 @@ const RepoUrlPickerRepoName = (props) => {
           onChange(newValue || "");
         },
         options: availableRepos || [],
-        renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, label: "Repository", required: true }),
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: t("fields.repoUrlPicker.repository.inputTitle"),
+            required: true
+          }
+        ),
         freeSolo: true,
         autoSelect: true
       }
     ),
-    /* @__PURE__ */ React.createElement(FormHelperText, null, "The name of the repository")
+    /* @__PURE__ */ React.createElement(FormHelperText, null, t("fields.repoUrlPicker.repository.description"))
   ));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"RepoUrlPickerRepoName.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useEffect } from 'react';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\n\nexport const RepoUrlPickerRepoName = (props: {\n  repoName?: string;\n  allowedRepos?: string[];\n  onChange: (host: string) => void;\n  rawErrors: string[];\n  availableRepos?: string[];\n}) => {\n  const { repoName, allowedRepos, onChange, rawErrors, availableRepos } = props;\n\n  useEffect(() => {\n    // If there is no repoName chosen currently\n    if (!repoName) {\n      // Set the first of the allowedRepos option if that available\n      if (allowedRepos?.length) {\n        onChange(allowedRepos[0]);\n      }\n    }\n  }, [allowedRepos, repoName, onChange]);\n\n  const repoItems: SelectItem[] = allowedRepos\n    ? allowedRepos.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 && !repoName}\n      >\n        {allowedRepos?.length ? (\n          <Select\n            native\n            label=\"Repositories Available\"\n            onChange={selected =>\n              onChange(String(Array.isArray(selected) ? selected[0] : selected))\n            }\n            disabled={allowedRepos.length === 1}\n            selected={repoName}\n            items={repoItems}\n          />\n        ) : (\n          <Autocomplete\n            value={repoName}\n            onChange={(_, newValue) => {\n              onChange(newValue || '');\n            }}\n            options={availableRepos || []}\n            renderInput={params => (\n              <TextField {...params} label=\"Repository\" required />\n            )}\n            freeSolo\n            autoSelect\n          />\n        )}\n        <FormHelperText>The name of the repository</FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBa,MAAA,qBAAA,GAAwB,CAAC,KAMhC,KAAA;AACJ,EAAA,MAAM,EAAE,QAAU,EAAA,YAAA,EAAc,QAAU,EAAA,SAAA,EAAW,gBAAmB,GAAA,KAAA,CAAA;AAExE,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,QAAU,EAAA;AAEb,MAAA,IAAI,cAAc,MAAQ,EAAA;AACxB,QAAS,QAAA,CAAA,YAAA,CAAa,CAAC,CAAC,CAAA,CAAA;AAAA,OAC1B;AAAA,KACF;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,QAAA,EAAU,QAAQ,CAAC,CAAA,CAAA;AAErC,EAAA,MAAM,YAA0B,YAC5B,GAAA,YAAA,CAAa,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC9C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,QAAA;AAAA,KAAA;AAAA,IAEhC,cAAc,MACb,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAM,EAAA,wBAAA;AAAA,QACN,QAAU,EAAA,CAAA,QAAA,KACR,QAAS,CAAA,MAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,QAAQ,CAAA,GAAI,QAAS,CAAA,CAAC,CAAI,GAAA,QAAQ,CAAC,CAAA;AAAA,QAEnE,QAAA,EAAU,aAAa,MAAW,KAAA,CAAA;AAAA,QAClC,QAAU,EAAA,QAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,OAAA;AAAA,KAGT,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,QAAA;AAAA,QACP,QAAA,EAAU,CAAC,CAAA,EAAG,QAAa,KAAA;AACzB,UAAA,QAAA,CAAS,YAAY,EAAE,CAAA,CAAA;AAAA,SACzB;AAAA,QACA,OAAA,EAAS,kBAAkB,EAAC;AAAA,QAC5B,WAAA,EAAa,4BACV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAW,GAAG,MAAQ,EAAA,KAAA,EAAM,YAAa,EAAA,QAAA,EAAQ,IAAC,EAAA,CAAA;AAAA,QAErD,QAAQ,EAAA,IAAA;AAAA,QACR,UAAU,EAAA,IAAA;AAAA,OAAA;AAAA,KACZ;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,sBAAe,4BAA0B,CAAA;AAAA,GAE9C,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RepoUrlPickerRepoName.esm.js","sources":["../../../../src/components/fields/RepoUrlPicker/RepoUrlPickerRepoName.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useEffect } from 'react';\nimport { Select, SelectItem } from '@backstage/core-components';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport const RepoUrlPickerRepoName = (props: {\n  repoName?: string;\n  allowedRepos?: string[];\n  onChange: (host: string) => void;\n  rawErrors: string[];\n  availableRepos?: string[];\n}) => {\n  const { repoName, allowedRepos, onChange, rawErrors, availableRepos } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  useEffect(() => {\n    // If there is no repoName chosen currently\n    if (!repoName) {\n      // Set the first of the allowedRepos option if that available\n      if (allowedRepos?.length) {\n        onChange(allowedRepos[0]);\n      }\n    }\n  }, [allowedRepos, repoName, onChange]);\n\n  const repoItems: SelectItem[] = allowedRepos\n    ? allowedRepos.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 && !repoName}\n      >\n        {allowedRepos?.length ? (\n          <Select\n            native\n            label={t('fields.repoUrlPicker.repository.title')}\n            onChange={selected =>\n              onChange(String(Array.isArray(selected) ? selected[0] : selected))\n            }\n            disabled={allowedRepos.length === 1}\n            selected={repoName}\n            items={repoItems}\n          />\n        ) : (\n          <Autocomplete\n            value={repoName}\n            onChange={(_, newValue) => {\n              onChange(newValue || '');\n            }}\n            options={availableRepos || []}\n            renderInput={params => (\n              <TextField\n                {...params}\n                label={t('fields.repoUrlPicker.repository.inputTitle')}\n                required\n              />\n            )}\n            freeSolo\n            autoSelect\n          />\n        )}\n        <FormHelperText>\n          {t('fields.repoUrlPicker.repository.description')}\n        </FormHelperText>\n      </FormControl>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwBa,MAAA,qBAAA,GAAwB,CAAC,KAMhC,KAAA;AACJ,EAAA,MAAM,EAAE,QAAU,EAAA,YAAA,EAAc,QAAU,EAAA,SAAA,EAAW,gBAAmB,GAAA,KAAA,CAAA;AACxE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,QAAU,EAAA;AAEb,MAAA,IAAI,cAAc,MAAQ,EAAA;AACxB,QAAS,QAAA,CAAA,YAAA,CAAa,CAAC,CAAC,CAAA,CAAA;AAAA,OAC1B;AAAA,KACF;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,QAAA,EAAU,QAAQ,CAAC,CAAA,CAAA;AAErC,EAAA,MAAM,YAA0B,YAC5B,GAAA,YAAA,CAAa,IAAI,CAAM,CAAA,MAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAA,CAAE,IAC9C,CAAC,EAAE,OAAO,YAAc,EAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAE9C,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,QAAQ,EAAA,IAAA;AAAA,MACR,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,QAAA;AAAA,KAAA;AAAA,IAEhC,cAAc,MACb,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,KAAA,EAAO,EAAE,uCAAuC,CAAA;AAAA,QAChD,QAAU,EAAA,CAAA,QAAA,KACR,QAAS,CAAA,MAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,QAAQ,CAAA,GAAI,QAAS,CAAA,CAAC,CAAI,GAAA,QAAQ,CAAC,CAAA;AAAA,QAEnE,QAAA,EAAU,aAAa,MAAW,KAAA,CAAA;AAAA,QAClC,QAAU,EAAA,QAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,OAAA;AAAA,KAGT,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,QAAA;AAAA,QACP,QAAA,EAAU,CAAC,CAAA,EAAG,QAAa,KAAA;AACzB,UAAA,QAAA,CAAS,YAAY,EAAE,CAAA,CAAA;AAAA,SACzB;AAAA,QACA,OAAA,EAAS,kBAAkB,EAAC;AAAA,QAC5B,aAAa,CACX,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAA;AAAA,YACJ,KAAA,EAAO,EAAE,4CAA4C,CAAA;AAAA,YACrD,QAAQ,EAAA,IAAA;AAAA,WAAA;AAAA,SACV;AAAA,QAEF,QAAQ,EAAA,IAAA;AAAA,QACR,UAAU,EAAA,IAAA;AAAA,OAAA;AAAA,KACZ;AAAA,oBAED,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACE,CAAE,CAAA,6CAA6C,CAClD,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

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

@@ -5,23 +5,32 @@ const renderRow = (props) => {
   const { data, index, style } = props;
   return React.cloneElement(data[index], { style });
 };
+const OuterElementContext = React.createContext({});
+const OuterElementType = React.forwardRef(
+  (props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return /* @__PURE__ */ React.createElement("div", { ref, ...props, ...outerProps });
+  }
+);
 const VirtualizedListbox = React.forwardRef((props, ref) => {
-  const itemData = React.Children.toArray(props.children);
+  const { children, ...other } = props;
+  const itemData = React.Children.toArray(children);
   const itemCount = itemData.length;
   const itemSize = 36;
-  const itemsToShow = Math.min(10, itemCount);
-  const height = Math.max(itemSize, itemsToShow * itemSize - 0.5 * itemSize);
-  return /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+  const itemsToShow = Math.min(10, itemCount) + 0.5;
+  const height = itemsToShow * itemSize;
+  return /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(OuterElementContext.Provider, { value: other }, /* @__PURE__ */ React.createElement(
     FixedSizeList,
     {
       height,
       itemData,
       itemCount,
       itemSize,
+      outerElementType: OuterElementType,
       width: "100%"
     },
     renderRow
-  ));
+  )));
 });
 
 export { VirtualizedListbox };

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedListbox.esm.js","sources":["../../../src/components/fields/VirtualizedListbox.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 React from 'react';\nimport { FixedSizeList, ListChildComponentProps } from 'react-window';\n\nconst renderRow = (props: ListChildComponentProps) => {\n  const { data, index, style } = props;\n  return React.cloneElement(data[index], { style });\n};\n\nexport const VirtualizedListbox = React.forwardRef<\n  HTMLDivElement,\n  { children?: React.ReactNode }\n>((props, ref) => {\n  const itemData = React.Children.toArray(props.children);\n  const itemCount = itemData.length;\n\n  const itemSize = 36;\n\n  const itemsToShow = Math.min(10, itemCount);\n  const height = Math.max(itemSize, itemsToShow * itemSize - 0.5 * itemSize);\n\n  return (\n    <div ref={ref}>\n      <FixedSizeList\n        height={height}\n        itemData={itemData}\n        itemCount={itemCount}\n        itemSize={itemSize}\n        width=\"100%\"\n      >\n        {renderRow}\n      </FixedSizeList>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;AAmBA,MAAM,SAAA,GAAY,CAAC,KAAmC,KAAA;AACpD,EAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC/B,EAAA,OAAO,MAAM,YAAa,CAAA,IAAA,CAAK,KAAK,CAAG,EAAA,EAAE,OAAO,CAAA,CAAA;AAClD,CAAA,CAAA;AAEO,MAAM,kBAAqB,GAAA,KAAA,CAAM,UAGtC,CAAA,CAAC,OAAO,GAAQ,KAAA;AAChB,EAAA,MAAM,QAAW,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,QAAQ,CAAA,CAAA;AACtD,EAAA,MAAM,YAAY,QAAS,CAAA,MAAA,CAAA;AAE3B,EAAA,MAAM,QAAW,GAAA,EAAA,CAAA;AAEjB,EAAA,MAAM,WAAc,GAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,SAAS,CAAA,CAAA;AAC1C,EAAA,MAAM,SAAS,IAAK,CAAA,GAAA,CAAI,UAAU,WAAc,GAAA,QAAA,GAAW,MAAM,QAAQ,CAAA,CAAA;AAEzE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,GACH,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAM,EAAA,MAAA;AAAA,KAAA;AAAA,IAEL,SAAA;AAAA,GAEL,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"VirtualizedListbox.esm.js","sources":["../../../src/components/fields/VirtualizedListbox.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 React from 'react';\nimport { FixedSizeList, ListChildComponentProps } from 'react-window';\n\ntype HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst renderRow = (props: ListChildComponentProps) => {\n  const { data, index, style } = props;\n  return React.cloneElement(data[index], { style });\n};\n\n// Context needed to keep Autocomplete working correctly : https://v4.mui.com/components/autocomplete/#Virtualize.tsx\nconst OuterElementContext = React.createContext<HTMLDivProps>({});\n\nconst OuterElementType = React.forwardRef<HTMLDivElement, HTMLDivProps>(\n  (props, ref) => {\n    const outerProps = React.useContext(OuterElementContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  },\n);\n\nexport const VirtualizedListbox = React.forwardRef<\n  HTMLDivElement,\n  HTMLDivProps\n>((props, ref) => {\n  const { children, ...other } = props;\n  const itemData = React.Children.toArray(children);\n  const itemCount = itemData.length;\n\n  const itemSize = 36;\n\n  const itemsToShow = Math.min(10, itemCount) + 0.5;\n  const height = itemsToShow * itemSize;\n\n  return (\n    <div ref={ref}>\n      <OuterElementContext.Provider value={other}>\n        <FixedSizeList\n          height={height}\n          itemData={itemData}\n          itemCount={itemCount}\n          itemSize={itemSize}\n          outerElementType={OuterElementType}\n          width=\"100%\"\n        >\n          {renderRow}\n        </FixedSizeList>\n      </OuterElementContext.Provider>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;AAqBA,MAAM,SAAA,GAAY,CAAC,KAAmC,KAAA;AACpD,EAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC/B,EAAA,OAAO,MAAM,YAAa,CAAA,IAAA,CAAK,KAAK,CAAG,EAAA,EAAE,OAAO,CAAA,CAAA;AAClD,CAAA,CAAA;AAGA,MAAM,mBAAsB,GAAA,KAAA,CAAM,aAA4B,CAAA,EAAE,CAAA,CAAA;AAEhE,MAAM,mBAAmB,KAAM,CAAA,UAAA;AAAA,EAC7B,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA,UAAA,GAAa,KAAM,CAAA,UAAA,CAAW,mBAAmB,CAAA,CAAA;AACvD,IAAA,2CAAQ,KAAI,EAAA,EAAA,GAAA,EAAW,GAAG,KAAA,EAAQ,GAAG,UAAY,EAAA,CAAA,CAAA;AAAA,GACnD;AACF,CAAA,CAAA;AAEO,MAAM,kBAAqB,GAAA,KAAA,CAAM,UAGtC,CAAA,CAAC,OAAO,GAAQ,KAAA;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,KAAA,EAAU,GAAA,KAAA,CAAA;AAC/B,EAAA,MAAM,QAAW,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAChD,EAAA,MAAM,YAAY,QAAS,CAAA,MAAA,CAAA;AAE3B,EAAA,MAAM,QAAW,GAAA,EAAA,CAAA;AAEjB,EAAA,MAAM,WAAc,GAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,SAAS,CAAI,GAAA,GAAA,CAAA;AAC9C,EAAA,MAAM,SAAS,WAAc,GAAA,QAAA,CAAA;AAE7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,GACH,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,oBAAoB,QAApB,EAAA,EAA6B,OAAO,KACnC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAkB,EAAA,gBAAA;AAAA,MAClB,KAAM,EAAA,MAAA;AAAA,KAAA;AAAA,IAEL,SAAA;AAAA,GAEL,CACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/next/TemplateEditorPage/CustomFieldExplorer.esm.js

@@ -17,6 +17,8 @@ import yaml from 'yaml';
 import { Form } from '@backstage/plugin-scaffolder-react/alpha';
 import { TemplateEditorForm } from './TemplateEditorForm.esm.js';
 import validator from '@rjsf/validator-ajv8';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -48,6 +50,7 @@ const CustomFieldExplorer = ({
   onClose
 }) => {
   const classes = useStyles();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
   const [selectedField, setSelectedField] = useState(fieldOptions[0]);
   const [fieldFormState, setFieldFormState] = useState({});
@@ -88,16 +91,21 @@ const CustomFieldExplorer = ({
     },
     [setFieldFormState, setRefreshKey]
   );
-  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-field-label" }, "Choose Custom Field Extension"), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-field-label" }, t("templateEditorPage.customFieldExplorer.selectFieldLabel")), /* @__PURE__ */ React.createElement(
     Select,
     {
       value: selectedField,
-      label: "Choose Custom Field Extension",
+      label: t("templateEditorPage.customFieldExplorer.selectFieldLabel"),
       labelId: "select-field-label",
       onChange: (e) => handleSelectionChange(e.target.value)
     },
     fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option }, option.name))
-  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Field Options" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      title: t("templateEditorPage.customFieldExplorer.fieldForm.title")
+    }
+  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
     Form,
     {
       showErrorList: false,
@@ -120,9 +128,16 @@ const CustomFieldExplorer = ({
         type: "submit",
         disabled: !selectedField.schema?.uiOptions
       },
-      "Apply"
+      t(
+        "templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle"
+      )
     )
-  )))), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Example Template Spec" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+  )))), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      title: t("templateEditorPage.customFieldExplorer.preview.title")
+    }
+  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
     CodeMirror,
     {
       readOnly: true,