@backstage/plugin-scaffolder-react 1.14.6-next.1 → 1.14.6-next.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.14.6-next.2
+
+### Patch Changes
+
+- 48aab13: Add i18n support for scaffolder-react plugin
+- 3db64ba: Disable the submit button on creating
+- 34ea3f5: Updated dependency `flatted` to `3.3.3`.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.0-next.2
+  - @backstage/plugin-catalog-react@1.16.0-next.2
+  - @backstage/core-components@0.16.5-next.1
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/core-plugin-api@1.10.4
+  - @backstage/theme@0.6.4
+  - @backstage/types@1.2.1
+  - @backstage/version-bridge@1.0.11
+  - @backstage/plugin-permission-react@0.4.31
+  - @backstage/plugin-scaffolder-common@1.5.10-next.0
+
 ## 1.14.6-next.1
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 import { z } from 'zod';
 import { FieldExtensionComponentProps, CustomFieldValidator, FieldSchema, TemplateParameterSchema, FieldExtensionOptions, FormProps, ReviewStepProps, LayoutOptions, TemplateGroupFilter, ScaffolderTaskOutput, ScaffolderRJSFFormProps, ScaffolderStep } from '@backstage/plugin-scaffolder-react';
@@ -10,6 +9,7 @@ import { UiSchema, FieldValidation, WidgetProps } from '@rjsf/utils';
 import { AnyApiRef, ApiHolder, IconComponent } from '@backstage/core-plugin-api';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
+import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/alpha';
 
 /*
  * Copyright 2024 The Backstage Authors
@@ -177,7 +177,7 @@ interface ParsedTemplateSchema {
  */
 declare const useTemplateSchema: (manifest: TemplateParameterSchema) => {
     steps: ParsedTemplateSchema[];
-    presentation?: TemplatePresentationV1beta3 | undefined;
+    presentation?: TemplatePresentationV1beta3;
 };
 
 /**
@@ -415,7 +415,7 @@ declare const ScaffolderField: (props: PropsWithChildren<ScaffolderFieldProps>)
  * Secret Widget for overriding the default password input widget
  * @alpha
  */
-declare const SecretWidget: (props: Pick<WidgetProps, 'name' | 'onChange' | 'schema' | 'required' | 'disabled'>) => React__default.JSX.Element;
+declare const SecretWidget: (props: Pick<WidgetProps, "name" | "onChange" | "schema" | "required" | "disabled">) => React__default.JSX.Element;
 
 /**
  * Takes a step from a Backstage Template Manifest and converts it to a JSON Schema and UI Schema for rjsf
@@ -441,9 +441,9 @@ declare const useFormDataFromQuery: (initialState?: Record<string, JsonValue>) =
  * @alpha
  */
 declare const useTemplateParameterSchema: (templateRef: string) => {
-    manifest?: TemplateParameterSchema | undefined;
+    manifest?: TemplateParameterSchema;
     loading: boolean;
-    error?: Error | undefined;
+    error?: Error;
 };
 
 /**
@@ -466,4 +466,24 @@ declare module '@backstage/theme' {
     }
 }
 
-export { type BackstageOverrides, type BackstageTemplateStepperClassKey, DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormDecoratorBlueprint, FormFieldBlueprint, type FormFieldExtensionData, type FormValidation, type ParsedTemplateSchema, ReviewState, type ReviewStateProps, ScaffolderField, type ScaffolderFieldProps, type ScaffolderFormDecorator, type ScaffolderFormDecoratorContext, type ScaffolderFormFieldsApi, ScaffolderPageContextMenu, type ScaffolderPageContextMenuProps, type ScaffolderReactComponentsNameToClassKey, type ScaffolderReactTemplateCategoryPickerClassKey, SecretWidget, Stepper, type StepperProps, TaskLogStream, TaskSteps, type TaskStepsProps, TemplateCard, type TemplateCardProps, TemplateCategoryPicker, TemplateGroup, type TemplateGroupProps, TemplateGroups, type TemplateGroupsProps, Workflow, type WorkflowProps, createAsyncValidators, createFieldValidation, createFormField, createScaffolderFormDecorator, extractSchemaFromStep, formFieldsApi, formFieldsApiRef, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+/** @alpha */
+declare const scaffolderReactTranslationRef: _backstage_core_plugin_api_alpha.TranslationRef<"scaffolder-react", {
+    readonly "workflow.noDescription": "No description";
+    readonly "passwordWidget.content": "This widget is insecure. Please use [`ui:field: Secret`](https://backstage.io/docs/features/software-templates/writing-templates/#using-secrets) instead of `ui:widget: password`";
+    readonly "scaffolderPageContextMenu.createLabel": "Create";
+    readonly "scaffolderPageContextMenu.moreLabel": "more";
+    readonly "scaffolderPageContextMenu.editorLabel": "Manage Templates";
+    readonly "scaffolderPageContextMenu.actionsLabel": "Installed Actions";
+    readonly "scaffolderPageContextMenu.tasksLabel": "Task List";
+    readonly "stepper.backButtonText": "Back";
+    readonly "stepper.createButtonText": "Create";
+    readonly "stepper.reviewButtonText": "Review";
+    readonly "stepper.stepIndexLabel": "Step {{index, number}}";
+    readonly "stepper.nextButtonText": "Next";
+    readonly "templateCategoryPicker.title": "Categories";
+    readonly "templateCard.noDescription": "No description";
+    readonly "templateCard.chooseButtonText": "Choose";
+    readonly "templateOutputs.title": "Text Output";
+}>;
+
+export { type BackstageOverrides, type BackstageTemplateStepperClassKey, DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormDecoratorBlueprint, FormFieldBlueprint, type FormFieldExtensionData, type FormValidation, type ParsedTemplateSchema, ReviewState, type ReviewStateProps, ScaffolderField, type ScaffolderFieldProps, type ScaffolderFormDecorator, type ScaffolderFormDecoratorContext, type ScaffolderFormFieldsApi, ScaffolderPageContextMenu, type ScaffolderPageContextMenuProps, type ScaffolderReactComponentsNameToClassKey, type ScaffolderReactTemplateCategoryPickerClassKey, SecretWidget, Stepper, type StepperProps, TaskLogStream, TaskSteps, type TaskStepsProps, TemplateCard, type TemplateCardProps, TemplateCategoryPicker, TemplateGroup, type TemplateGroupProps, TemplateGroups, type TemplateGroupsProps, Workflow, type WorkflowProps, createAsyncValidators, createFieldValidation, createFormField, createScaffolderFormDecorator, extractSchemaFromStep, formFieldsApi, formFieldsApiRef, scaffolderReactTranslationRef, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };

package/dist/alpha.esm.js

@@ -23,4 +23,5 @@ export { useFilteredSchemaProperties } from './next/hooks/useFilteredSchemaPrope
 export { FormDecoratorBlueprint } from './next/blueprints/FormDecoratorBlueprint.esm.js';
 export { FormFieldBlueprint, createFormField } from './next/blueprints/FormFieldBlueprint.esm.js';
 export { createScaffolderFormDecorator } from './next/extensions/createScaffolderFormDecorator.esm.js';
+export { scaffolderReactTranslationRef } from './translation.esm.js';
 //# sourceMappingURL=alpha.esm.js.map

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alpha.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/useCustomFieldExtensions.esm.js

@@ -14,8 +14,10 @@ import '@backstage/plugin-catalog-react';
 import '@backstage/plugin-scaffolder-common';
 import '@material-ui/core/Typography';
 import '../next/components/Workflow/Workflow.esm.js';
+import '@backstage/frontend-plugin-api';
 import '@material-ui/core/Box';
 import '@material-ui/core/Paper';
+import '../translation.esm.js';
 import '../next/components/TemplateOutputs/LinkOutputs.esm.js';
 import '@material-ui/core/Button';
 import '@material-ui/icons/Description';

package/dist/hooks/useCustomFieldExtensions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomFieldExtensions.esm.js","sources":["../../src/hooks/useCustomFieldExtensions.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useAsync, useMountEffect } from '@react-hookz/web';\nimport { useApi, useElementFilter } from '@backstage/core-plugin-api';\nimport { formFieldsApiRef } from '../next';\nimport { FieldExtensionOptions } from '../extensions';\nimport {\n  FIELD_EXTENSION_KEY,\n  FIELD_EXTENSION_WRAPPER_KEY,\n} from '../extensions/keys';\n\n/**\n * Hook that returns all custom field extensions from the current outlet.\n * @public\n */\nexport const useCustomFieldExtensions = <\n  // todo(blam): this shouldn't be here, should remove this, but this is a breaking change to remove the generic.\n  TComponentDataType = FieldExtensionOptions,\n>(\n  outlet: React.ReactNode,\n) => {\n  // Get custom fields created with FormFieldBlueprint\n  const formFieldsApi = useApi(formFieldsApiRef);\n  const [{ result: blueprintFields }, { execute }] = useAsync(\n    () => formFieldsApi.getFormFields(),\n    [],\n  );\n  useMountEffect(execute);\n\n  // Get custom fields created with ScaffolderFieldExtensions\n  const outletFields = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: FIELD_EXTENSION_WRAPPER_KEY,\n      })\n      .findComponentData<TComponentDataType>({\n        key: FIELD_EXTENSION_KEY,\n      }),\n  );\n\n  // This should really be a different type moving foward, but we do this to keep type compatibility.\n  // should probably also move the defaults into the API eventually too, but that will come with the move\n  // to the new frontend system.\n  const blueprintsToLegacy: FieldExtensionOptions[] = blueprintFields?.map(\n    field => ({\n      component: field.component,\n      name: field.name,\n      validation: field.validation,\n      schema: field.schema?.schema,\n    }),\n  );\n\n  return [...blueprintsToLegacy, ...outletFields] as TComponentDataType[];\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4Ba,MAAA,wBAAA,GAA2B,CAItC,MACG,KAAA;AAEH,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAC7C,EAAM,MAAA,CAAC,EAAE,MAAQ,EAAA,eAAA,IAAmB,EAAE,OAAA,EAAS,CAAI,GAAA,QAAA;AAAA,IACjD,MAAM,cAAc,aAAc,EAAA;AAAA,IAClC;AAAC,GACH;AACA,EAAA,cAAA,CAAe,OAAO,CAAA;AAGtB,EAAA,MAAM,YAAe,GAAA,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KAC5C,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA;AAAA,KACN,EACA,iBAAsC,CAAA;AAAA,MACrC,GAAK,EAAA;AAAA,KACN;AAAA,GACL;AAKA,EAAA,MAAM,qBAA8C,eAAiB,EAAA,GAAA;AAAA,IACnE,CAAU,KAAA,MAAA;AAAA,MACR,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,MAAA,EAAQ,MAAM,MAAQ,EAAA;AAAA,KACxB;AAAA,GACF;AAEA,EAAA,OAAO,CAAC,GAAG,kBAAoB,EAAA,GAAG,YAAY,CAAA;AAChD;;;;"}
+{"version":3,"file":"useCustomFieldExtensions.esm.js","sources":["../../src/hooks/useCustomFieldExtensions.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useAsync, useMountEffect } from '@react-hookz/web';\nimport { useApi, useElementFilter } from '@backstage/core-plugin-api';\nimport { formFieldsApiRef } from '../next';\nimport { FieldExtensionOptions } from '../extensions';\nimport {\n  FIELD_EXTENSION_KEY,\n  FIELD_EXTENSION_WRAPPER_KEY,\n} from '../extensions/keys';\n\n/**\n * Hook that returns all custom field extensions from the current outlet.\n * @public\n */\nexport const useCustomFieldExtensions = <\n  // todo(blam): this shouldn't be here, should remove this, but this is a breaking change to remove the generic.\n  TComponentDataType = FieldExtensionOptions,\n>(\n  outlet: React.ReactNode,\n) => {\n  // Get custom fields created with FormFieldBlueprint\n  const formFieldsApi = useApi(formFieldsApiRef);\n  const [{ result: blueprintFields }, { execute }] = useAsync(\n    () => formFieldsApi.getFormFields(),\n    [],\n  );\n  useMountEffect(execute);\n\n  // Get custom fields created with ScaffolderFieldExtensions\n  const outletFields = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: FIELD_EXTENSION_WRAPPER_KEY,\n      })\n      .findComponentData<TComponentDataType>({\n        key: FIELD_EXTENSION_KEY,\n      }),\n  );\n\n  // This should really be a different type moving foward, but we do this to keep type compatibility.\n  // should probably also move the defaults into the API eventually too, but that will come with the move\n  // to the new frontend system.\n  const blueprintsToLegacy: FieldExtensionOptions[] = blueprintFields?.map(\n    field => ({\n      component: field.component,\n      name: field.name,\n      validation: field.validation,\n      schema: field.schema?.schema,\n    }),\n  );\n\n  return [...blueprintsToLegacy, ...outletFields] as TComponentDataType[];\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4Ba,MAAA,wBAAA,GAA2B,CAItC,MACG,KAAA;AAEH,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA;AAC7C,EAAM,MAAA,CAAC,EAAE,MAAQ,EAAA,eAAA,IAAmB,EAAE,OAAA,EAAS,CAAI,GAAA,QAAA;AAAA,IACjD,MAAM,cAAc,aAAc,EAAA;AAAA,IAClC;AAAC,GACH;AACA,EAAA,cAAA,CAAe,OAAO,CAAA;AAGtB,EAAA,MAAM,YAAe,GAAA,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KAC5C,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA;AAAA,KACN,EACA,iBAAsC,CAAA;AAAA,MACrC,GAAK,EAAA;AAAA,KACN;AAAA,GACL;AAKA,EAAA,MAAM,qBAA8C,eAAiB,EAAA,GAAA;AAAA,IACnE,CAAU,KAAA,MAAA;AAAA,MACR,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,MAAA,EAAQ,MAAM,MAAQ,EAAA;AAAA,KACxB;AAAA,GACF;AAEA,EAAA,OAAO,CAAC,GAAG,kBAAoB,EAAA,GAAG,YAAY,CAAA;AAChD;;;;"}

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ApiHolder, Extension } from '@backstage/core-plugin-api';
 import React__default, { HTMLAttributes, ReactNode, FormEvent, ElementType, Ref, ComponentType, PropsWithChildren } from 'react';
 import { JsonObject, JsonValue, Observable } from '@backstage/types';

package/dist/next/components/PasswordWidget/PasswordWidget.esm.js

@@ -1,9 +1,12 @@
+import { MarkdownContent } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import FormHelperText from '@material-ui/core/FormHelperText';
 import TextField from '@material-ui/core/TextField';
 import React from 'react';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import { MarkdownContent } from '@backstage/core-components';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 
 const PasswordWidget = (props) => {
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const {
     value,
     onChange,
@@ -21,12 +24,7 @@ const PasswordWidget = (props) => {
       value,
       autoComplete: "off"
     }
-  ), /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
-    {
-      content: "This widget is insecure. Please use [`ui:field: Secret`](https://backstage.io/docs/features/software-templates/writing-templates/#using-secrets) instead of\n          `ui:widget: password`"
-    }
-  )));
+  ), /* @__PURE__ */ React.createElement(FormHelperText, { error: true }, /* @__PURE__ */ React.createElement(MarkdownContent, { content: t("passwordWidget.content") })));
 };
 
 export { PasswordWidget };

package/dist/next/components/PasswordWidget/PasswordWidget.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordWidget.esm.js","sources":["../../../../src/next/components/PasswordWidget/PasswordWidget.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 { WidgetProps } from '@rjsf/utils';\nimport TextField from '@material-ui/core/TextField';\nimport React from 'react';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport { MarkdownContent } from '@backstage/core-components';\n\nexport const PasswordWidget = (\n  props: Pick<WidgetProps, 'onChange' | 'schema' | 'value'>,\n) => {\n  const {\n    value,\n    onChange,\n    schema: { title },\n  } = props;\n\n  return (\n    <>\n      <TextField\n        id={title}\n        label={title}\n        aria-describedby={title}\n        onChange={e => {\n          onChange(e.target.value);\n        }}\n        value={value}\n        autoComplete=\"off\"\n      />\n      <FormHelperText error>\n        <MarkdownContent\n          content=\"This widget is insecure. Please use [`ui:field: Secret`](https://backstage.io/docs/features/software-templates/writing-templates/#using-secrets) instead of\n          `ui:widget: password`\"\n        />\n      </FormHelperText>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAsBa,MAAA,cAAA,GAAiB,CAC5B,KACG,KAAA;AACH,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,EAAQ,EAAE,KAAM;AAAA,GACd,GAAA,KAAA;AAEJ,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,KAAA;AAAA,MACJ,KAAO,EAAA,KAAA;AAAA,MACP,kBAAkB,EAAA,KAAA;AAAA,MAClB,UAAU,CAAK,CAAA,KAAA;AACb,QAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,OACzB;AAAA,MACA,KAAA;AAAA,MACA,YAAa,EAAA;AAAA;AAAA,GAEf,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,KAAA,EAAK,IACnB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA;AAAA;AAAA,GAGZ,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PasswordWidget.esm.js","sources":["../../../../src/next/components/PasswordWidget/PasswordWidget.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 { MarkdownContent } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport TextField from '@material-ui/core/TextField';\nimport { WidgetProps } from '@rjsf/utils';\nimport React from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\n\nexport const PasswordWidget = (\n  props: Pick<WidgetProps, 'onChange' | 'schema' | 'value'>,\n) => {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n\n  const {\n    value,\n    onChange,\n    schema: { title },\n  } = props;\n\n  return (\n    <>\n      <TextField\n        id={title}\n        label={title}\n        aria-describedby={title}\n        onChange={e => {\n          onChange(e.target.value);\n        }}\n        value={value}\n        autoComplete=\"off\"\n      />\n      <FormHelperText error>\n        <MarkdownContent content={t('passwordWidget.content')} />\n      </FormHelperText>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAyBa,MAAA,cAAA,GAAiB,CAC5B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,6BAA6B,CAAA;AAE7D,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,EAAQ,EAAE,KAAM;AAAA,GACd,GAAA,KAAA;AAEJ,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,KAAA;AAAA,MACJ,KAAO,EAAA,KAAA;AAAA,MACP,kBAAkB,EAAA,KAAA;AAAA,MAClB,UAAU,CAAK,CAAA,KAAA;AACb,QAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,OACzB;AAAA,MACA,KAAA;AAAA,MACA,YAAa,EAAA;AAAA;AAAA,GAEf,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,KAAA,EAAK,IACnB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,CAAE,CAAA,wBAAwB,CAAG,EAAA,CACzD,CACF,CAAA;AAEJ;;;;"}

package/dist/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.esm.js

@@ -1,11 +1,12 @@
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import IconButton from '@material-ui/core/IconButton';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import Popover from '@material-ui/core/Popover';
-import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import { makeStyles } from '@material-ui/core/styles';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import DescriptionIcon from '@material-ui/icons/Description';
 import Edit from '@material-ui/icons/Edit';
 import List from '@material-ui/icons/List';
@@ -13,6 +14,7 @@ import MoreVert from '@material-ui/icons/MoreVert';
 import React, { useState } from 'react';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { taskReadPermission, templateManagementPermission } from '@backstage/plugin-scaffolder-common/alpha';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   button: {
@@ -20,6 +22,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 function ScaffolderPageContextMenu(props) {
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } = props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState();
@@ -42,7 +45,7 @@ function ScaffolderPageContextMenu(props) {
     IconButton,
     {
       id: "long-menu",
-      "aria-label": "more",
+      "aria-label": t("scaffolderPageContextMenu.moreLabel"),
       "aria-controls": "long-menu",
       "aria-expanded": !!anchorEl,
       "aria-haspopup": "true",
@@ -63,7 +66,27 @@ function ScaffolderPageContextMenu(props) {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React.createElement(MenuList, null, onCreateClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onCreateClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(CreateComponentIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Create" })), onEditorClicked && canManageTemplates && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onEditorClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Manage Templates" })), onActionsClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onActionsClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(DescriptionIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Installed Actions" })), onTasksClicked && canReadTasks && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onTasksClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
+    /* @__PURE__ */ React.createElement(MenuList, null, onCreateClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onCreateClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(CreateComponentIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: t("scaffolderPageContextMenu.createLabel")
+      }
+    )), onEditorClicked && canManageTemplates && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onEditorClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: t("scaffolderPageContextMenu.editorLabel")
+      }
+    )), onActionsClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onActionsClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(DescriptionIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: t("scaffolderPageContextMenu.actionsLabel")
+      }
+    )), onTasksClicked && canReadTasks && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onTasksClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: t("scaffolderPageContextMenu.tasksLabel")
+      }
+    )))
   ));
 }
 

package/dist/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScaffolderPageContextMenu.esm.js","sources":["../../../../src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MenuList from '@material-ui/core/MenuList';\nimport Popover from '@material-ui/core/Popover';\nimport CreateComponentIcon from '@material-ui/icons/AddCircleOutline';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Description from '@material-ui/icons/Description';\nimport Edit from '@material-ui/icons/Edit';\nimport List from '@material-ui/icons/List';\nimport MoreVert from '@material-ui/icons/MoreVert';\nimport React, { useState } from 'react';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { taskReadPermission } from '@backstage/plugin-scaffolder-common/alpha';\nimport { templateManagementPermission } from '@backstage/plugin-scaffolder-common/alpha';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    color: theme.page.fontColor,\n  },\n}));\n\n/**\n * @alpha\n */\nexport type ScaffolderPageContextMenuProps = {\n  onEditorClicked?: () => void;\n  onActionsClicked?: () => void;\n  onTasksClicked?: () => void;\n  onCreateClicked?: () => void;\n};\n\n/**\n * @alpha\n */\nexport function ScaffolderPageContextMenu(\n  props: ScaffolderPageContextMenuProps,\n) {\n  const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } =\n    props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();\n\n  const { allowed: canReadTasks } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canManageTemplates } = usePermission({\n    permission: templateManagementPermission,\n  });\n\n  if (\n    !onEditorClicked &&\n    !onActionsClicked &&\n    !onTasksClicked &&\n    !onCreateClicked\n  ) {\n    return null;\n  }\n\n  const onOpen = (event: React.SyntheticEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const onClose = () => {\n    setAnchorEl(undefined);\n  };\n\n  return (\n    <>\n      <IconButton\n        id=\"long-menu\"\n        aria-label=\"more\"\n        aria-controls=\"long-menu\"\n        aria-expanded={!!anchorEl}\n        aria-haspopup=\"true\"\n        role=\"button\"\n        onClick={onOpen}\n        data-testid=\"menu-button\"\n        color=\"inherit\"\n        className={classes.button}\n      >\n        <MoreVert />\n      </IconButton>\n      <Popover\n        aria-labelledby=\"long-menu\"\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <MenuList>\n          {onCreateClicked && (\n            <MenuItem onClick={onCreateClicked}>\n              <ListItemIcon>\n                <CreateComponentIcon fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText primary=\"Create\" />\n            </MenuItem>\n          )}\n          {onEditorClicked && canManageTemplates && (\n            <MenuItem onClick={onEditorClicked}>\n              <ListItemIcon>\n                <Edit fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText primary=\"Manage Templates\" />\n            </MenuItem>\n          )}\n          {onActionsClicked && (\n            <MenuItem onClick={onActionsClicked}>\n              <ListItemIcon>\n                <Description fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText primary=\"Installed Actions\" />\n            </MenuItem>\n          )}\n          {onTasksClicked && canReadTasks && (\n            <MenuItem onClick={onTasksClicked}>\n              <ListItemIcon>\n                <List fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText primary=\"Task List\" />\n            </MenuItem>\n          )}\n        </MenuList>\n      </Popover>\n    </>\n  );\n}\n"],"names":["Description"],"mappings":"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"}
+{"version":3,"file":"ScaffolderPageContextMenu.esm.js","sources":["../../../../src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MenuList from '@material-ui/core/MenuList';\nimport Popover from '@material-ui/core/Popover';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CreateComponentIcon from '@material-ui/icons/AddCircleOutline';\nimport Description from '@material-ui/icons/Description';\nimport Edit from '@material-ui/icons/Edit';\nimport List from '@material-ui/icons/List';\nimport MoreVert from '@material-ui/icons/MoreVert';\nimport React, { useState } from 'react';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { taskReadPermission } from '@backstage/plugin-scaffolder-common/alpha';\nimport { templateManagementPermission } from '@backstage/plugin-scaffolder-common/alpha';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    color: theme.page.fontColor,\n  },\n}));\n\n/**\n * @alpha\n */\nexport type ScaffolderPageContextMenuProps = {\n  onEditorClicked?: () => void;\n  onActionsClicked?: () => void;\n  onTasksClicked?: () => void;\n  onCreateClicked?: () => void;\n};\n\n/**\n * @alpha\n */\nexport function ScaffolderPageContextMenu(\n  props: ScaffolderPageContextMenuProps,\n) {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } =\n    props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();\n\n  const { allowed: canReadTasks } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canManageTemplates } = usePermission({\n    permission: templateManagementPermission,\n  });\n\n  if (\n    !onEditorClicked &&\n    !onActionsClicked &&\n    !onTasksClicked &&\n    !onCreateClicked\n  ) {\n    return null;\n  }\n\n  const onOpen = (event: React.SyntheticEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const onClose = () => {\n    setAnchorEl(undefined);\n  };\n\n  return (\n    <>\n      <IconButton\n        id=\"long-menu\"\n        aria-label={t('scaffolderPageContextMenu.moreLabel')}\n        aria-controls=\"long-menu\"\n        aria-expanded={!!anchorEl}\n        aria-haspopup=\"true\"\n        role=\"button\"\n        onClick={onOpen}\n        data-testid=\"menu-button\"\n        color=\"inherit\"\n        className={classes.button}\n      >\n        <MoreVert />\n      </IconButton>\n      <Popover\n        aria-labelledby=\"long-menu\"\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <MenuList>\n          {onCreateClicked && (\n            <MenuItem onClick={onCreateClicked}>\n              <ListItemIcon>\n                <CreateComponentIcon fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary={t('scaffolderPageContextMenu.createLabel')}\n              />\n            </MenuItem>\n          )}\n          {onEditorClicked && canManageTemplates && (\n            <MenuItem onClick={onEditorClicked}>\n              <ListItemIcon>\n                <Edit fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary={t('scaffolderPageContextMenu.editorLabel')}\n              />\n            </MenuItem>\n          )}\n          {onActionsClicked && (\n            <MenuItem onClick={onActionsClicked}>\n              <ListItemIcon>\n                <Description fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary={t('scaffolderPageContextMenu.actionsLabel')}\n              />\n            </MenuItem>\n          )}\n          {onTasksClicked && canReadTasks && (\n            <MenuItem onClick={onTasksClicked}>\n              <ListItemIcon>\n                <List fontSize=\"small\" />\n              </ListItemIcon>\n              <ListItemText\n                primary={t('scaffolderPageContextMenu.tasksLabel')}\n              />\n            </MenuItem>\n          )}\n        </MenuList>\n      </Popover>\n    </>\n  );\n}\n"],"names":["Description"],"mappings":"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"}

package/dist/next/components/Stepper/Stepper.esm.js

@@ -1,27 +1,29 @@
 import { useAnalytics, useApiHolder } from '@backstage/core-plugin-api';
-import MuiStepper from '@material-ui/core/Stepper';
-import MuiStep from '@material-ui/core/Step';
-import MuiStepLabel from '@material-ui/core/StepLabel';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import Button from '@material-ui/core/Button';
 import LinearProgress from '@material-ui/core/LinearProgress';
+import MuiStep from '@material-ui/core/Step';
+import MuiStepLabel from '@material-ui/core/StepLabel';
+import MuiStepper from '@material-ui/core/Stepper';
+import { makeStyles } from '@material-ui/core/styles';
+import { customizeValidator } from '@rjsf/validator-ajv8';
+import ajvErrors from 'ajv-errors';
+import { merge } from 'lodash';
 import React, { useState, useMemo, useCallback } from 'react';
-import { createAsyncValidators } from './createAsyncValidators.esm.js';
-import { ReviewState } from '../ReviewState/ReviewState.esm.js';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 import { useFormDataFromQuery } from '../../hooks/useFormDataFromQuery.esm.js';
 import { useTemplateSchema } from '../../hooks/useTemplateSchema.esm.js';
 import 'react-use/esm/useAsync';
 import '../../../api/ref.esm.js';
 import 'lodash/cloneDeep';
-import { customizeValidator } from '@rjsf/validator-ajv8';
 import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps.esm.js';
-import { hasErrors } from './utils.esm.js';
-import * as index from './FieldOverrides/index.esm.js';
 import { Form } from '../Form/Form.esm.js';
-import { ErrorListTemplate } from './ErrorListTemplate/errorListTemplate.esm.js';
-import { makeStyles } from '@material-ui/core/styles';
 import { PasswordWidget } from '../PasswordWidget/PasswordWidget.esm.js';
-import ajvErrors from 'ajv-errors';
-import { merge } from 'lodash';
+import { ReviewState } from '../ReviewState/ReviewState.esm.js';
+import { createAsyncValidators } from './createAsyncValidators.esm.js';
+import { ErrorListTemplate } from './ErrorListTemplate/errorListTemplate.esm.js';
+import * as index from './FieldOverrides/index.esm.js';
+import { hasErrors } from './utils.esm.js';
 
 const validator = customizeValidator();
 ajvErrors(validator.ajv);
@@ -43,13 +45,14 @@ const useStyles = makeStyles(
   { name: "BackstageTemplateStepper" }
 );
 const Stepper = (stepperProps) => {
-  const { layouts = [], components = {}, ...props } = stepperProps;
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
+  const { layouts = [], components = {}, onCreate, ...props } = stepperProps;
   const {
     ReviewStateComponent = ReviewState,
     ReviewStepComponent,
-    backButtonText = "Back",
-    createButtonText = "Create",
-    reviewButtonText = "Review"
+    backButtonText = t("stepper.backButtonText"),
+    createButtonText = t("stepper.createButtonText"),
+    reviewButtonText = t("stepper.reviewButtonText")
   } = components;
   const analytics = useAnalytics();
   const { presentation, steps } = useTemplateSchema(props.manifest);
@@ -125,10 +128,16 @@ const Stepper = (stepperProps) => {
     [validation, analytics]
   );
   const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);
-  const handleCreate = useCallback(() => {
-    props.onCreate(stepsState);
+  const [isCreating, setIsCreating] = useState(false);
+  const handleCreate = useCallback(async () => {
+    setIsCreating(true);
     analytics.captureEvent("click", `${createLabel}`);
-  }, [props, stepsState, analytics, createLabel]);
+    try {
+      await onCreate(stepsState);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [analytics, createLabel, onCreate, stepsState]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isValidating && /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" }), /* @__PURE__ */ React.createElement(
     MuiStepper,
     {
@@ -142,7 +151,7 @@ const Stepper = (stepperProps) => {
       return /* @__PURE__ */ React.createElement(MuiStep, { key: index }, /* @__PURE__ */ React.createElement(
         MuiStepLabel,
         {
-          "aria-label": `Step ${index + 1}`,
+          "aria-label": t("stepper.stepIndexLabel", { index: index + 1 }),
           style: { cursor: isAllowedLabelClick ? "pointer" : "default" },
           onClick: () => {
             if (isAllowedLabelClick) setActiveStep(index);
@@ -189,7 +198,7 @@ const Stepper = (stepperProps) => {
         type: "submit",
         disabled: isValidating
       },
-      activeStep === steps.length - 1 ? reviewLabel : "Next"
+      activeStep === steps.length - 1 ? reviewLabel : t("stepper.nextButtonText")
     ))
   ) : (
     // TODO: potentially move away from this pattern, deprecate?
@@ -215,6 +224,7 @@ const Stepper = (stepperProps) => {
     ), /* @__PURE__ */ React.createElement(
       Button,
       {
+        disabled: isCreating,
         variant: "contained",
         color: "primary",
         onClick: handleCreate

package/dist/next/components/Stepper/Stepper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.esm.js","sources":["../../../../src/next/components/Stepper/Stepper.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 { useAnalytics, useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonValue } from '@backstage/types';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport { type IChangeEvent } from '@rjsf/core';\nimport { ErrorSchema } from '@rjsf/utils';\nimport React, {\n  useCallback,\n  useMemo,\n  useState,\n  type ReactNode,\n  ComponentType,\n} from 'react';\nimport {\n  createAsyncValidators,\n  type FormValidation,\n} from './createAsyncValidators';\nimport { ReviewState, type ReviewStateProps } from '../ReviewState';\nimport { useTemplateSchema, useFormDataFromQuery } from '../../hooks';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';\nimport { hasErrors } from './utils';\nimport * as FieldOverrides from './FieldOverrides';\nimport { Form } from '../Form';\nimport {\n  TemplateParameterSchema,\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { ReviewStepProps } from '@backstage/plugin-scaffolder-react';\nimport { ErrorListTemplate } from './ErrorListTemplate';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { PasswordWidget } from '../PasswordWidget/PasswordWidget';\nimport ajvErrors from 'ajv-errors';\nimport { merge } from 'lodash';\n\nconst validator = customizeValidator();\najvErrors(validator.ajv);\n\n/** @alpha */\nexport type BackstageTemplateStepperClassKey =\n  | 'backButton'\n  | 'footer'\n  | 'formWrapper';\n\nconst useStyles = makeStyles(\n  theme => ({\n    backButton: {\n      marginRight: theme.spacing(1),\n    },\n    footer: {\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'right',\n      marginTop: theme.spacing(2),\n    },\n    formWrapper: {\n      padding: theme.spacing(2),\n    },\n  }),\n  { name: 'BackstageTemplateStepper' },\n);\n\n/**\n * The Props for {@link Stepper} component\n * @alpha\n */\nexport type StepperProps = {\n  manifest: TemplateParameterSchema;\n  extensions: FieldExtensionOptions<any, any>[];\n  /**\n   * @deprecated This was only ever used for analytics tracking purposes, which\n   * is now handled in the `<Workflow />` component. Passing it in will have no\n   * effect.\n   */\n  templateName?: string;\n  formProps?: FormProps;\n  initialState?: Record<string, JsonValue>;\n  onCreate: (values: Record<string, JsonValue>) => Promise<void>;\n  components?: {\n    ReviewStepComponent?: ComponentType<ReviewStepProps>;\n    ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;\n    backButtonText?: ReactNode;\n    createButtonText?: ReactNode;\n    reviewButtonText?: ReactNode;\n  };\n  layouts?: LayoutOptions[];\n};\n\n/**\n * The `Stepper` component is the Wizard that is rendered when a user selects a template\n * @alpha\n */\nexport const Stepper = (stepperProps: StepperProps) => {\n  const { layouts = [], components = {}, ...props } = stepperProps;\n  const {\n    ReviewStateComponent = ReviewState,\n    ReviewStepComponent,\n    backButtonText = 'Back',\n    createButtonText = 'Create',\n    reviewButtonText = 'Review',\n  } = components;\n  const analytics = useAnalytics();\n  const { presentation, steps } = useTemplateSchema(props.manifest);\n  const apiHolder = useApiHolder();\n  const [activeStep, setActiveStep] = useState(0);\n  const [isValidating, setIsValidating] = useState(false);\n  const [initialState] = useFormDataFromQuery(props.initialState);\n  const [stepsState, setStepsState] =\n    useState<Record<string, JsonValue>>(initialState);\n\n  const [errors, setErrors] = useState<undefined | FormValidation>();\n  const styles = useStyles();\n\n  const backLabel =\n    presentation?.buttonLabels?.backButtonText ?? backButtonText;\n  const createLabel =\n    presentation?.buttonLabels?.createButtonText ?? createButtonText;\n  const reviewLabel =\n    presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText;\n\n  const extensions = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, component }) => [name, component]),\n    );\n  }, [props.extensions]);\n\n  const fields = useMemo(\n    () => ({ ...FieldOverrides, ...extensions }),\n    [extensions],\n  );\n\n  const validators = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, validation }) => [name, validation]),\n    );\n  }, [props.extensions]);\n\n  const validation = useMemo(() => {\n    return createAsyncValidators(steps[activeStep]?.mergedSchema, validators, {\n      apiHolder,\n    });\n  }, [steps, activeStep, validators, apiHolder]);\n\n  const handleBack = useCallback(() => {\n    setActiveStep(prevActiveStep => prevActiveStep - 1);\n  }, [setActiveStep]);\n\n  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });\n\n  const {\n    formContext: propFormContext,\n    uiSchema: propUiSchema,\n    liveOmit: _shouldLiveOmit,\n    omitExtraData: _shouldOmitExtraData,\n    ...restFormProps\n  } = props.formProps ?? {};\n\n  const handleChange = useCallback(\n    (e: IChangeEvent) => {\n      setStepsState(current => {\n        return { ...current, ...e.formData };\n      });\n    },\n    [setStepsState],\n  );\n\n  const handleNext = useCallback(\n    async ({ formData = {} }: { formData?: Record<string, JsonValue> }) => {\n      // The validation should never throw, as the validators are wrapped in a try/catch.\n      // This makes it fine to set and unset state without try/catch.\n      setErrors(undefined);\n      setIsValidating(true);\n\n      const returnedValidation = await validation(formData);\n\n      setStepsState(current => ({\n        ...current,\n        ...formData,\n      }));\n\n      setIsValidating(false);\n\n      if (hasErrors(returnedValidation)) {\n        setErrors(returnedValidation);\n      } else {\n        setErrors(undefined);\n        setActiveStep(prevActiveStep => {\n          const stepNum = prevActiveStep + 1;\n          analytics.captureEvent('click', `Next Step (${stepNum})`);\n          return stepNum;\n        });\n      }\n    },\n    [validation, analytics],\n  );\n\n  const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);\n\n  const handleCreate = useCallback(() => {\n    props.onCreate(stepsState);\n    analytics.captureEvent('click', `${createLabel}`);\n  }, [props, stepsState, analytics, createLabel]);\n\n  return (\n    <>\n      {isValidating && <LinearProgress variant=\"indeterminate\" />}\n      <MuiStepper\n        activeStep={activeStep}\n        alternativeLabel\n        variant=\"elevation\"\n        style={{ overflowX: 'auto' }}\n      >\n        {steps.map((step, index) => {\n          const isAllowedLabelClick = activeStep > index;\n          return (\n            <MuiStep key={index}>\n              <MuiStepLabel\n                aria-label={`Step ${index + 1}`}\n                style={{ cursor: isAllowedLabelClick ? 'pointer' : 'default' }}\n                onClick={() => {\n                  if (isAllowedLabelClick) setActiveStep(index);\n                }}\n              >\n                {step.title}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n        <MuiStep>\n          <MuiStepLabel>{reviewLabel}</MuiStepLabel>\n        </MuiStep>\n      </MuiStepper>\n      <div className={styles.formWrapper}>\n        {/* eslint-disable-next-line no-nested-ternary */}\n        {activeStep < steps.length ? (\n          <Form\n            key={activeStep}\n            validator={validator}\n            extraErrors={errors as unknown as ErrorSchema}\n            formData={stepsState}\n            formContext={{ ...propFormContext, formData: stepsState }}\n            schema={currentStep.schema}\n            uiSchema={mergedUiSchema}\n            onSubmit={handleNext}\n            fields={fields}\n            showErrorList=\"top\"\n            templates={{ ErrorListTemplate }}\n            onChange={handleChange}\n            widgets={{ password: PasswordWidget }}\n            experimental_defaultFormStateBehavior={{\n              allOf: 'populateDefaults',\n            }}\n            {...restFormProps}\n          >\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1 || isValidating}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={isValidating}\n              >\n                {activeStep === steps.length - 1 ? reviewLabel : 'Next'}\n              </Button>\n            </div>\n          </Form>\n        ) : // TODO: potentially move away from this pattern, deprecate?\n        ReviewStepComponent ? (\n          <ReviewStepComponent\n            disableButtons={isValidating}\n            formData={stepsState}\n            handleBack={handleBack}\n            handleReset={() => {}}\n            steps={steps}\n            handleCreate={handleCreate}\n          />\n        ) : (\n          <>\n            <ReviewStateComponent formState={stepsState} schemas={steps} />\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                onClick={handleCreate}\n              >\n                {createLabel}\n              </Button>\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["FieldOverrides","validation"],"mappings":"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"}
+{"version":3,"file":"Stepper.esm.js","sources":["../../../../src/next/components/Stepper/Stepper.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 { useAnalytics, useApiHolder } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport {\n  FieldExtensionOptions,\n  FormProps,\n  LayoutOptions,\n  ReviewStepProps,\n  TemplateParameterSchema,\n} from '@backstage/plugin-scaffolder-react';\nimport { JsonValue } from '@backstage/types';\nimport Button from '@material-ui/core/Button';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { type IChangeEvent } from '@rjsf/core';\nimport { ErrorSchema } from '@rjsf/utils';\nimport { customizeValidator } from '@rjsf/validator-ajv8';\nimport ajvErrors from 'ajv-errors';\nimport { merge } from 'lodash';\nimport React, {\n  ComponentType,\n  useCallback,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\nimport { useFormDataFromQuery, useTemplateSchema } from '../../hooks';\nimport { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';\nimport { Form } from '../Form';\nimport { PasswordWidget } from '../PasswordWidget/PasswordWidget';\nimport { ReviewState, type ReviewStateProps } from '../ReviewState';\nimport {\n  createAsyncValidators,\n  type FormValidation,\n} from './createAsyncValidators';\nimport { ErrorListTemplate } from './ErrorListTemplate';\nimport * as FieldOverrides from './FieldOverrides';\nimport { hasErrors } from './utils';\n\nconst validator = customizeValidator();\najvErrors(validator.ajv);\n\n/** @alpha */\nexport type BackstageTemplateStepperClassKey =\n  | 'backButton'\n  | 'footer'\n  | 'formWrapper';\n\nconst useStyles = makeStyles(\n  theme => ({\n    backButton: {\n      marginRight: theme.spacing(1),\n    },\n    footer: {\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'right',\n      marginTop: theme.spacing(2),\n    },\n    formWrapper: {\n      padding: theme.spacing(2),\n    },\n  }),\n  { name: 'BackstageTemplateStepper' },\n);\n\n/**\n * The Props for {@link Stepper} component\n * @alpha\n */\nexport type StepperProps = {\n  manifest: TemplateParameterSchema;\n  extensions: FieldExtensionOptions<any, any>[];\n  /**\n   * @deprecated This was only ever used for analytics tracking purposes, which\n   * is now handled in the `<Workflow />` component. Passing it in will have no\n   * effect.\n   */\n  templateName?: string;\n  formProps?: FormProps;\n  initialState?: Record<string, JsonValue>;\n  onCreate: (values: Record<string, JsonValue>) => Promise<void>;\n  components?: {\n    ReviewStepComponent?: ComponentType<ReviewStepProps>;\n    ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;\n    backButtonText?: ReactNode;\n    createButtonText?: ReactNode;\n    reviewButtonText?: ReactNode;\n  };\n  layouts?: LayoutOptions[];\n};\n\n/**\n * The `Stepper` component is the Wizard that is rendered when a user selects a template\n * @alpha\n */\nexport const Stepper = (stepperProps: StepperProps) => {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const { layouts = [], components = {}, onCreate, ...props } = stepperProps;\n  const {\n    ReviewStateComponent = ReviewState,\n    ReviewStepComponent,\n    backButtonText = t('stepper.backButtonText'),\n    createButtonText = t('stepper.createButtonText'),\n    reviewButtonText = t('stepper.reviewButtonText'),\n  } = components;\n  const analytics = useAnalytics();\n  const { presentation, steps } = useTemplateSchema(props.manifest);\n  const apiHolder = useApiHolder();\n  const [activeStep, setActiveStep] = useState(0);\n  const [isValidating, setIsValidating] = useState(false);\n  const [initialState] = useFormDataFromQuery(props.initialState);\n  const [stepsState, setStepsState] =\n    useState<Record<string, JsonValue>>(initialState);\n\n  const [errors, setErrors] = useState<undefined | FormValidation>();\n  const styles = useStyles();\n\n  const backLabel =\n    presentation?.buttonLabels?.backButtonText ?? backButtonText;\n  const createLabel =\n    presentation?.buttonLabels?.createButtonText ?? createButtonText;\n  const reviewLabel =\n    presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText;\n\n  const extensions = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, component }) => [name, component]),\n    );\n  }, [props.extensions]);\n\n  const fields = useMemo(\n    () => ({ ...FieldOverrides, ...extensions }),\n    [extensions],\n  );\n\n  const validators = useMemo(() => {\n    return Object.fromEntries(\n      props.extensions.map(({ name, validation }) => [name, validation]),\n    );\n  }, [props.extensions]);\n\n  const validation = useMemo(() => {\n    return createAsyncValidators(steps[activeStep]?.mergedSchema, validators, {\n      apiHolder,\n    });\n  }, [steps, activeStep, validators, apiHolder]);\n\n  const handleBack = useCallback(() => {\n    setActiveStep(prevActiveStep => prevActiveStep - 1);\n  }, [setActiveStep]);\n\n  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });\n\n  const {\n    formContext: propFormContext,\n    uiSchema: propUiSchema,\n    liveOmit: _shouldLiveOmit,\n    omitExtraData: _shouldOmitExtraData,\n    ...restFormProps\n  } = props.formProps ?? {};\n\n  const handleChange = useCallback(\n    (e: IChangeEvent) => {\n      setStepsState(current => {\n        return { ...current, ...e.formData };\n      });\n    },\n    [setStepsState],\n  );\n\n  const handleNext = useCallback(\n    async ({ formData = {} }: { formData?: Record<string, JsonValue> }) => {\n      // The validation should never throw, as the validators are wrapped in a try/catch.\n      // This makes it fine to set and unset state without try/catch.\n      setErrors(undefined);\n      setIsValidating(true);\n\n      const returnedValidation = await validation(formData);\n\n      setStepsState(current => ({\n        ...current,\n        ...formData,\n      }));\n\n      setIsValidating(false);\n\n      if (hasErrors(returnedValidation)) {\n        setErrors(returnedValidation);\n      } else {\n        setErrors(undefined);\n        setActiveStep(prevActiveStep => {\n          const stepNum = prevActiveStep + 1;\n          analytics.captureEvent('click', `Next Step (${stepNum})`);\n          return stepNum;\n        });\n      }\n    },\n    [validation, analytics],\n  );\n\n  const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);\n\n  const [isCreating, setIsCreating] = useState(false);\n\n  const handleCreate = useCallback(async () => {\n    setIsCreating(true);\n    analytics.captureEvent('click', `${createLabel}`);\n    try {\n      await onCreate(stepsState);\n    } finally {\n      setIsCreating(false);\n    }\n  }, [analytics, createLabel, onCreate, stepsState]);\n\n  return (\n    <>\n      {isValidating && <LinearProgress variant=\"indeterminate\" />}\n      <MuiStepper\n        activeStep={activeStep}\n        alternativeLabel\n        variant=\"elevation\"\n        style={{ overflowX: 'auto' }}\n      >\n        {steps.map((step, index) => {\n          const isAllowedLabelClick = activeStep > index;\n          return (\n            <MuiStep key={index}>\n              <MuiStepLabel\n                aria-label={t('stepper.stepIndexLabel', { index: index + 1 })}\n                style={{ cursor: isAllowedLabelClick ? 'pointer' : 'default' }}\n                onClick={() => {\n                  if (isAllowedLabelClick) setActiveStep(index);\n                }}\n              >\n                {step.title}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n        <MuiStep>\n          <MuiStepLabel>{reviewLabel}</MuiStepLabel>\n        </MuiStep>\n      </MuiStepper>\n      <div className={styles.formWrapper}>\n        {/* eslint-disable-next-line no-nested-ternary */}\n        {activeStep < steps.length ? (\n          <Form\n            key={activeStep}\n            validator={validator}\n            extraErrors={errors as unknown as ErrorSchema}\n            formData={stepsState}\n            formContext={{ ...propFormContext, formData: stepsState }}\n            schema={currentStep.schema}\n            uiSchema={mergedUiSchema}\n            onSubmit={handleNext}\n            fields={fields}\n            showErrorList=\"top\"\n            templates={{ ErrorListTemplate }}\n            onChange={handleChange}\n            widgets={{ password: PasswordWidget }}\n            experimental_defaultFormStateBehavior={{\n              allOf: 'populateDefaults',\n            }}\n            {...restFormProps}\n          >\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1 || isValidating}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                type=\"submit\"\n                disabled={isValidating}\n              >\n                {activeStep === steps.length - 1\n                  ? reviewLabel\n                  : t('stepper.nextButtonText')}\n              </Button>\n            </div>\n          </Form>\n        ) : // TODO: potentially move away from this pattern, deprecate?\n        ReviewStepComponent ? (\n          <ReviewStepComponent\n            disableButtons={isValidating}\n            formData={stepsState}\n            handleBack={handleBack}\n            handleReset={() => {}}\n            steps={steps}\n            handleCreate={handleCreate}\n          />\n        ) : (\n          <>\n            <ReviewStateComponent formState={stepsState} schemas={steps} />\n            <div className={styles.footer}>\n              <Button\n                onClick={handleBack}\n                className={styles.backButton}\n                disabled={activeStep < 1}\n              >\n                {backLabel}\n              </Button>\n              <Button\n                disabled={isCreating}\n                variant=\"contained\"\n                color=\"primary\"\n                onClick={handleCreate}\n              >\n                {createLabel}\n              </Button>\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["FieldOverrides","validation"],"mappings":"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"}

package/dist/next/components/TemplateCard/TemplateCardActions.esm.js

@@ -1,8 +1,10 @@
 import { UserIcon } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   footer: {
@@ -24,6 +26,7 @@ const TemplateCardActions = ({
   handleChoose,
   ownedByRelations
 }) => {
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const styles = useStyles();
   return /* @__PURE__ */ React.createElement("div", { className: styles.footer, "data-testid": "template-card-actions--footer" }, /* @__PURE__ */ React.createElement(
     "div",
@@ -49,7 +52,7 @@ const TemplateCardActions = ({
       "data-testid": "template-card-actions--create",
       onClick: handleChoose
     },
-    "Choose"
+    t("templateCard.chooseButtonText")
   ) : null);
 };
 

package/dist/next/components/TemplateCard/TemplateCardActions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateCardActions.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCardActions.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { UserIcon } from '@backstage/core-components';\nimport { EntityRefLinks } from '@backstage/plugin-catalog-react';\nimport Button from '@material-ui/core/Button';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport React from 'react';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  footer: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    flex: 1,\n    alignItems: 'center',\n  },\n  ownedBy: {\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    color: theme.palette.link,\n  },\n  actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' },\n}));\n\n/**\n * The Props for the {@link TemplateCardActions} component\n * @alpha\n */\nexport interface TemplateCardActionsProps {\n  ownedByRelations: any;\n  canCreateTask: boolean;\n  handleChoose: () => void;\n}\nexport const TemplateCardActions = ({\n  canCreateTask,\n  handleChoose,\n  ownedByRelations,\n}: TemplateCardActionsProps) => {\n  const styles = useStyles();\n\n  return (\n    <div className={styles.footer} data-testid=\"template-card-actions--footer\">\n      <div\n        className={styles.ownedBy}\n        data-testid=\"template-card-actions--ownedby\"\n      >\n        {ownedByRelations.length > 0 && (\n          <>\n            <UserIcon fontSize=\"small\" />\n            <EntityRefLinks\n              style={{ marginLeft: '8px' }}\n              entityRefs={ownedByRelations}\n              defaultKind=\"Group\"\n              hideIcons\n            />\n          </>\n        )}\n      </div>\n      {canCreateTask ? (\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          color=\"primary\"\n          data-testid=\"template-card-actions--create\"\n          onClick={handleChoose}\n        >\n          Choose\n        </Button>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,SAAA,GAAY,WAAkB,CAAU,KAAA,MAAA;AAAA,EAC5C,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA,eAAA;AAAA,IAChB,IAAM,EAAA,CAAA;AAAA,IACN,UAAY,EAAA;AAAA,GACd;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,IAAM,EAAA,CAAA;AAAA,IACN,KAAA,EAAO,MAAM,OAAQ,CAAA;AAAA,GACvB;AAAA,EACA,iBAAiB,EAAE,OAAA,EAAS,QAAQ,IAAM,EAAA,CAAA,EAAG,YAAY,UAAW;AACtE,CAAE,CAAA,CAAA;AAWK,MAAM,sBAAsB,CAAC;AAAA,EAClC,aAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,2CACG,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,MAAA,EAAQ,eAAY,+BACzC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB,aAAY,EAAA;AAAA,KAAA;AAAA,IAEX,gBAAA,CAAiB,SAAS,CACzB,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,QAAS,EAAA,EAAA,QAAA,EAAS,SAAQ,CAC3B,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,UAAA,EAAY,KAAM,EAAA;AAAA,QAC3B,UAAY,EAAA,gBAAA;AAAA,QACZ,WAAY,EAAA,OAAA;AAAA,QACZ,SAAS,EAAA;AAAA;AAAA,KAEb;AAAA,KAGH,aACC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,OAAA;AAAA,MACL,OAAQ,EAAA,UAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,aAAY,EAAA,+BAAA;AAAA,MACZ,OAAS,EAAA;AAAA,KAAA;AAAA,IACV;AAAA,MAGC,IACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateCardActions.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCardActions.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { UserIcon } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { EntityRefLinks } from '@backstage/plugin-catalog-react';\nimport Button from '@material-ui/core/Button';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport React from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  footer: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    flex: 1,\n    alignItems: 'center',\n  },\n  ownedBy: {\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    color: theme.palette.link,\n  },\n  actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' },\n}));\n\n/**\n * The Props for the {@link TemplateCardActions} component\n * @alpha\n */\nexport interface TemplateCardActionsProps {\n  ownedByRelations: any;\n  canCreateTask: boolean;\n  handleChoose: () => void;\n}\nexport const TemplateCardActions = ({\n  canCreateTask,\n  handleChoose,\n  ownedByRelations,\n}: TemplateCardActionsProps) => {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const styles = useStyles();\n\n  return (\n    <div className={styles.footer} data-testid=\"template-card-actions--footer\">\n      <div\n        className={styles.ownedBy}\n        data-testid=\"template-card-actions--ownedby\"\n      >\n        {ownedByRelations.length > 0 && (\n          <>\n            <UserIcon fontSize=\"small\" />\n            <EntityRefLinks\n              style={{ marginLeft: '8px' }}\n              entityRefs={ownedByRelations}\n              defaultKind=\"Group\"\n              hideIcons\n            />\n          </>\n        )}\n      </div>\n      {canCreateTask ? (\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          color=\"primary\"\n          data-testid=\"template-card-actions--create\"\n          onClick={handleChoose}\n        >\n          {t('templateCard.chooseButtonText')}\n        </Button>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,SAAA,GAAY,WAAkB,CAAU,KAAA,MAAA;AAAA,EAC5C,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA,eAAA;AAAA,IAChB,IAAM,EAAA,CAAA;AAAA,IACN,UAAY,EAAA;AAAA,GACd;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,IAAM,EAAA,CAAA;AAAA,IACN,KAAA,EAAO,MAAM,OAAQ,CAAA;AAAA,GACvB;AAAA,EACA,iBAAiB,EAAE,OAAA,EAAS,QAAQ,IAAM,EAAA,CAAA,EAAG,YAAY,UAAW;AACtE,CAAE,CAAA,CAAA;AAWK,MAAM,sBAAsB,CAAC;AAAA,EAClC,aAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,6BAA6B,CAAA;AAC7D,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,2CACG,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,MAAA,EAAQ,eAAY,+BACzC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB,aAAY,EAAA;AAAA,KAAA;AAAA,IAEX,gBAAA,CAAiB,SAAS,CACzB,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,QAAS,EAAA,EAAA,QAAA,EAAS,SAAQ,CAC3B,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,UAAA,EAAY,KAAM,EAAA;AAAA,QAC3B,UAAY,EAAA,gBAAA;AAAA,QACZ,WAAY,EAAA,OAAA;AAAA,QACZ,SAAS,EAAA;AAAA;AAAA,KAEb;AAAA,KAGH,aACC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,OAAA;AAAA,MACL,OAAQ,EAAA,UAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,aAAY,EAAA,+BAAA;AAAA,MACZ,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,EAAE,+BAA+B;AAAA,MAElC,IACN,CAAA;AAEJ;;;;"}

package/dist/next/components/TemplateCard/TemplateCardContent.esm.js

@@ -1,8 +1,10 @@
 import { MarkdownContent } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core/styles';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 
 const useStyles = makeStyles(() => ({
   box: {
@@ -20,12 +22,13 @@ const useStyles = makeStyles(() => ({
   }
 }));
 const TemplateCardContent = ({ template }) => {
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const styles = useStyles();
   return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, "data-testid": "template-card-content-grid" }, /* @__PURE__ */ React.createElement(Box, { className: styles.box, "data-testid": "template-card-content-container" }, /* @__PURE__ */ React.createElement(
     MarkdownContent,
     {
       className: styles.markdown,
-      content: template.metadata.description ?? "No description"
+      content: template.metadata.description ?? t("templateCard.noDescription")
     }
   )));
 };

package/dist/next/components/TemplateCard/TemplateCardContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateCardContent.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCardContent.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { MarkdownContent } from '@backstage/core-components';\nimport type { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport React from 'react';\n\nconst useStyles = makeStyles(() => ({\n  box: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: '-webkit-box',\n    '-webkit-line-clamp': 10,\n    '-webkit-box-orient': 'vertical',\n  },\n  markdown: {\n    /** to make the styles for React Markdown not leak into the description */\n    '& :first-child': {\n      margin: 0,\n    },\n  },\n}));\n\n/**\n * The Props for the {@link TemplateCardContent} component\n * @alpha\n */\nexport interface TemplateCardContentProps {\n  template: TemplateEntityV1beta3;\n}\nexport const TemplateCardContent = ({ template }: TemplateCardContentProps) => {\n  const styles = useStyles();\n  return (\n    <Grid item xs={12} data-testid=\"template-card-content-grid\">\n      <Box className={styles.box} data-testid=\"template-card-content-container\">\n        <MarkdownContent\n          className={styles.markdown}\n          content={template.metadata.description ?? 'No description'}\n        />\n      </Box>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,GAAK,EAAA;AAAA,IACH,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,OAAS,EAAA,aAAA;AAAA,IACT,oBAAsB,EAAA,EAAA;AAAA,IACtB,oBAAsB,EAAA;AAAA,GACxB;AAAA,EACA,QAAU,EAAA;AAAA;AAAA,IAER,gBAAkB,EAAA;AAAA,MAChB,MAAQ,EAAA;AAAA;AACV;AAEJ,CAAE,CAAA,CAAA;AASK,MAAM,mBAAsB,GAAA,CAAC,EAAE,QAAA,EAAyC,KAAA;AAC7E,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,aAAA,EAAY,4BAC7B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,GAAA,EAAK,eAAY,iCACtC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB,OAAA,EAAS,QAAS,CAAA,QAAA,CAAS,WAAe,IAAA;AAAA;AAAA,GAE9C,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateCardContent.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCardContent.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { MarkdownContent } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport type { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(() => ({\n  box: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: '-webkit-box',\n    '-webkit-line-clamp': 10,\n    '-webkit-box-orient': 'vertical',\n  },\n  markdown: {\n    /** to make the styles for React Markdown not leak into the description */\n    '& :first-child': {\n      margin: 0,\n    },\n  },\n}));\n\n/**\n * The Props for the {@link TemplateCardContent} component\n * @alpha\n */\nexport interface TemplateCardContentProps {\n  template: TemplateEntityV1beta3;\n}\nexport const TemplateCardContent = ({ template }: TemplateCardContentProps) => {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const styles = useStyles();\n  return (\n    <Grid item xs={12} data-testid=\"template-card-content-grid\">\n      <Box className={styles.box} data-testid=\"template-card-content-container\">\n        <MarkdownContent\n          className={styles.markdown}\n          content={\n            template.metadata.description ?? t('templateCard.noDescription')\n          }\n        />\n      </Box>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA0BA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,GAAK,EAAA;AAAA,IACH,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,OAAS,EAAA,aAAA;AAAA,IACT,oBAAsB,EAAA,EAAA;AAAA,IACtB,oBAAsB,EAAA;AAAA,GACxB;AAAA,EACA,QAAU,EAAA;AAAA;AAAA,IAER,gBAAkB,EAAA;AAAA,MAChB,MAAQ,EAAA;AAAA;AACV;AAEJ,CAAE,CAAA,CAAA;AASK,MAAM,mBAAsB,GAAA,CAAC,EAAE,QAAA,EAAyC,KAAA;AAC7E,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,6BAA6B,CAAA;AAC7D,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,aAAA,EAAY,4BAC7B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,GAAA,EAAK,eAAY,iCACtC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB,OACE,EAAA,QAAA,CAAS,QAAS,CAAA,WAAA,IAAe,EAAE,4BAA4B;AAAA;AAAA,GAGrE,CACF,CAAA;AAEJ;;;;"}

package/dist/next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js

@@ -1,6 +1,7 @@
-import React from 'react';
-import capitalize from 'lodash/capitalize';
 import { Progress } from '@backstage/core-components';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { useEntityTypeFilter } from '@backstage/plugin-catalog-react';
 import Box from '@material-ui/core/Box';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -11,8 +12,9 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import { useEntityTypeFilter } from '@backstage/plugin-catalog-react';
-import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import capitalize from 'lodash/capitalize';
+import React from 'react';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 
 const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
@@ -24,6 +26,7 @@ const useStyles = makeStyles(
   { name: "ScaffolderReactTemplateCategoryPicker" }
 );
 const TemplateCategoryPicker = () => {
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const classes = useStyles();
   const alertApi = useApi(alertApiRef);
   const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
@@ -44,7 +47,7 @@ const TemplateCategoryPicker = () => {
       component: "label",
       htmlFor: "categories-picker"
     },
-    "Categories"
+    t("templateCategoryPicker.title")
   ), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {

package/dist/next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateCategoryPicker.esm.js","sources":["../../../../src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.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 */\n\nimport React, { ReactNode } from 'react';\nimport capitalize from 'lodash/capitalize';\nimport { Progress } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { useEntityTypeFilter } from '@backstage/plugin-catalog-react';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/** @alpha */\nexport type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n  },\n  { name: 'ScaffolderReactTemplateCategoryPicker' },\n);\n\n/**\n * The Category Picker that is rendered on the left side for picking\n * categories and filtering the template list.\n * @alpha\n */\nexport const TemplateCategoryPicker = () => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =\n    useEntityTypeFilter();\n\n  if (loading) return <Progress />;\n\n  if (error) {\n    alertApi.post({\n      message: `Failed to load entity types with error: ${error}`,\n      severity: 'error',\n    });\n    return null;\n  }\n\n  if (!availableTypes) return null;\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography\n        className={classes.label}\n        variant=\"button\"\n        component=\"label\"\n        htmlFor=\"categories-picker\"\n      >\n        Categories\n      </Typography>\n      <Autocomplete<string, true>\n        PopperComponent={popperProps => (\n          <div {...popperProps}>{popperProps.children as ReactNode}</div>\n        )}\n        multiple\n        id=\"categories-picker\"\n        options={availableTypes}\n        value={selectedTypes}\n        onChange={(_: object, value: string[]) => setSelectedTypes(value)}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={icon}\n                checkedIcon={checkedIcon}\n                checked={selected}\n              />\n            }\n            label={capitalize(option)}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgCA,MAAM,IAAO,mBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AACxD,MAAM,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAKnD,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,MAAM,EAAC;AAAA,IACP,OAAO;AAAC,GACV;AAAA,EACA,EAAE,MAAM,uCAAwC;AAClD,CAAA;AAOO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,gBAAgB,aAAe,EAAA,gBAAA,KACrD,mBAAoB,EAAA;AAEtB,EAAI,IAAA,OAAA,EAAgB,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,IAAA,CAAA;AAE9B,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAA,EAAS,2CAA2C,KAAK,CAAA,CAAA;AAAA,MACzD,QAAU,EAAA;AAAA,KACX,CAAA;AACD,IAAO,OAAA,IAAA;AAAA;AAGT,EAAI,IAAA,CAAC,gBAAuB,OAAA,IAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,MAAM,EAAI,EAAA,CAAA,EAAG,IAAI,CACvC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,OAAQ,EAAA,QAAA;AAAA,MACR,SAAU,EAAA,OAAA;AAAA,MACV,OAAQ,EAAA;AAAA,KAAA;AAAA,IACT;AAAA,GAGD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,iBAAiB,CACf,WAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,SAAK,GAAG,WAAA,EAAA,EAAc,YAAY,QAAsB,CAAA;AAAA,MAE3D,QAAQ,EAAA,IAAA;AAAA,MACR,EAAG,EAAA,mBAAA;AAAA,MACH,OAAS,EAAA,cAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,CAAC,CAAW,EAAA,KAAA,KAAoB,iBAAiB,KAAK,CAAA;AAAA,MAChE,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,WAAA;AAAA,cACA,OAAS,EAAA;AAAA;AAAA,WACX;AAAA,UAEF,KAAA,EAAO,WAAW,MAAM;AAAA;AAAA,OAC1B;AAAA,MAEF,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,cAAe,EAAA,IAAA,CAAA;AAAA,MAC3B,aAAa,CAAU,MAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA;AAAA;AAAA,GAErE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateCategoryPicker.esm.js","sources":["../../../../src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.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 */\n\nimport { Progress } from '@backstage/core-components';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { useEntityTypeFilter } from '@backstage/plugin-catalog-react';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport capitalize from 'lodash/capitalize';\nimport React, { ReactNode } from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/** @alpha */\nexport type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n  },\n  { name: 'ScaffolderReactTemplateCategoryPicker' },\n);\n\n/**\n * The Category Picker that is rendered on the left side for picking\n * categories and filtering the template list.\n * @alpha\n */\nexport const TemplateCategoryPicker = () => {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =\n    useEntityTypeFilter();\n\n  if (loading) return <Progress />;\n\n  if (error) {\n    alertApi.post({\n      message: `Failed to load entity types with error: ${error}`,\n      severity: 'error',\n    });\n    return null;\n  }\n\n  if (!availableTypes) return null;\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography\n        className={classes.label}\n        variant=\"button\"\n        component=\"label\"\n        htmlFor=\"categories-picker\"\n      >\n        {t('templateCategoryPicker.title')}\n      </Typography>\n      <Autocomplete<string, true>\n        PopperComponent={popperProps => (\n          <div {...popperProps}>{popperProps.children as ReactNode}</div>\n        )}\n        multiple\n        id=\"categories-picker\"\n        options={availableTypes}\n        value={selectedTypes}\n        onChange={(_: object, value: string[]) => setSelectedTypes(value)}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={icon}\n                checkedIcon={checkedIcon}\n                checked={selected}\n              />\n            }\n            label={capitalize(option)}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmCA,MAAM,IAAO,mBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AACxD,MAAM,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAKnD,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,MAAM,EAAC;AAAA,IACP,OAAO;AAAC,GACV;AAAA,EACA,EAAE,MAAM,uCAAwC;AAClD,CAAA;AAOO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,6BAA6B,CAAA;AAC7D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,gBAAgB,aAAe,EAAA,gBAAA,KACrD,mBAAoB,EAAA;AAEtB,EAAI,IAAA,OAAA,EAAgB,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,IAAA,CAAA;AAE9B,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAA,EAAS,2CAA2C,KAAK,CAAA,CAAA;AAAA,MACzD,QAAU,EAAA;AAAA,KACX,CAAA;AACD,IAAO,OAAA,IAAA;AAAA;AAGT,EAAI,IAAA,CAAC,gBAAuB,OAAA,IAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,MAAM,EAAI,EAAA,CAAA,EAAG,IAAI,CACvC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,OAAQ,EAAA,QAAA;AAAA,MACR,SAAU,EAAA,OAAA;AAAA,MACV,OAAQ,EAAA;AAAA,KAAA;AAAA,IAEP,EAAE,8BAA8B;AAAA,GAEnC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,iBAAiB,CACf,WAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,SAAK,GAAG,WAAA,EAAA,EAAc,YAAY,QAAsB,CAAA;AAAA,MAE3D,QAAQ,EAAA,IAAA;AAAA,MACR,EAAG,EAAA,mBAAA;AAAA,MACH,OAAS,EAAA,cAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,CAAC,CAAW,EAAA,KAAA,KAAoB,iBAAiB,KAAK,CAAA;AAAA,MAChE,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,WAAA;AAAA,cACA,OAAS,EAAA;AAAA;AAAA,WACX;AAAA,UAEF,KAAA,EAAO,WAAW,MAAM;AAAA;AAAA,OAC1B;AAAA,MAEF,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,cAAe,EAAA,IAAA,CAAA;AAAA,MAC3B,aAAa,CAAU,MAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA;AAAA;AAAA,GAErE,CAAA;AAEJ;;;;"}

package/dist/next/components/TemplateGroups/TemplateGroups.esm.js

@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react';
+import { Progress, Link } from '@backstage/core-components';
+import { useApi, errorApiRef } from '@backstage/core-plugin-api';
 import { useEntityList } from '@backstage/plugin-catalog-react';
 import { isTemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { Progress, Link } from '@backstage/core-components';
 import Typography from '@material-ui/core/Typography';
-import { useApi, errorApiRef } from '@backstage/core-plugin-api';
+import React, { useCallback } from 'react';
 import { TemplateGroup } from '../TemplateGroup/TemplateGroup.esm.js';
 
 const TemplateGroups = (props) => {

package/dist/next/components/TemplateGroups/TemplateGroups.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateGroups.esm.js","sources":["../../../../src/next/components/TemplateGroups/TemplateGroups.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, { useCallback } from 'react';\n\nimport { useEntityList } from '@backstage/plugin-catalog-react';\nimport {\n  isTemplateEntityV1beta3,\n  TemplateEntityV1beta3,\n} from '@backstage/plugin-scaffolder-common';\nimport { Progress, Link } from '@backstage/core-components';\nimport Typography from '@material-ui/core/Typography';\nimport { errorApiRef, IconComponent, useApi } from '@backstage/core-plugin-api';\nimport { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';\nimport { TemplateGroup } from '../TemplateGroup/TemplateGroup';\n\n/**\n * @alpha\n */\nexport interface TemplateGroupsProps {\n  groups: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  TemplateCardComponent?: React.ComponentType<{\n    template: TemplateEntityV1beta3;\n  }>;\n  onTemplateSelected?: (template: TemplateEntityV1beta3) => void;\n  additionalLinksForEntity?: (template: TemplateEntityV1beta3) => {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n}\n\n/**\n * @alpha\n */\nexport const TemplateGroups = (props: TemplateGroupsProps) => {\n  const { loading, error, entities } = useEntityList();\n  const { groups, templateFilter, TemplateCardComponent, onTemplateSelected } =\n    props;\n  const errorApi = useApi(errorApiRef);\n  const onSelected = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      onTemplateSelected?.(template);\n    },\n    [onTemplateSelected],\n  );\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error) {\n    errorApi.post(error);\n    return null;\n  }\n\n  if (!entities || !entities.length) {\n    return (\n      <Typography variant=\"body2\">\n        No templates found that match your filter. Learn more about{' '}\n        <Link to=\"https://backstage.io/docs/features/software-templates/adding-templates\">\n          adding templates\n        </Link>\n        .\n      </Typography>\n    );\n  }\n\n  return (\n    <>\n      {groups.map(({ title, filter }, index) => {\n        const templates = entities\n          .filter(isTemplateEntityV1beta3)\n          .filter(e => (templateFilter ? templateFilter(e) : true))\n          .filter(filter)\n          .map(template => {\n            const additionalLinks =\n              props.additionalLinksForEntity?.(template) ?? [];\n\n            return {\n              template,\n              additionalLinks,\n            };\n          });\n\n        return (\n          <TemplateGroup\n            key={index}\n            templates={templates}\n            title={title}\n            components={{ CardComponent: TemplateCardComponent }}\n            onSelected={onSelected}\n          />\n        );\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgDa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,QAAA,KAAa,aAAc,EAAA;AACnD,EAAA,MAAM,EAAE,MAAA,EAAQ,cAAgB,EAAA,qBAAA,EAAuB,oBACrD,GAAA,KAAA;AACF,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,QAAoC,KAAA;AACnC,MAAA,kBAAA,GAAqB,QAAQ,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;AAEA,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA;AAAA;AAGnB,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AACnB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,QAAA,CAAS,MAAQ,EAAA;AACjC,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAQ,6DACkC,EAAA,GAAA,kBAC3D,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,EAAG,EAAA,wEAAA,EAAA,EAAyE,kBAElF,CAAA,EAAO,GAET,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,OAAO,GAAI,CAAA,CAAC,EAAE,KAAO,EAAA,MAAA,IAAU,KAAU,KAAA;AACxC,IAAA,MAAM,YAAY,QACf,CAAA,MAAA,CAAO,uBAAuB,CAAA,CAC9B,OAAO,CAAM,CAAA,KAAA,cAAA,GAAiB,cAAe,CAAA,CAAC,IAAI,IAAK,CAAA,CACvD,OAAO,MAAM,CAAA,CACb,IAAI,CAAY,QAAA,KAAA;AACf,MAAA,MAAM,eACJ,GAAA,KAAA,CAAM,wBAA2B,GAAA,QAAQ,KAAK,EAAC;AAEjD,MAAO,OAAA;AAAA,QACL,QAAA;AAAA,QACA;AAAA,OACF;AAAA,KACD,CAAA;AAEH,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,KAAA;AAAA,QACL,SAAA;AAAA,QACA,KAAA;AAAA,QACA,UAAA,EAAY,EAAE,aAAA,EAAe,qBAAsB,EAAA;AAAA,QACnD;AAAA;AAAA,KACF;AAAA,GAEH,CACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateGroups.esm.js","sources":["../../../../src/next/components/TemplateGroups/TemplateGroups.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 { Link, Progress } from '@backstage/core-components';\nimport { errorApiRef, IconComponent, useApi } from '@backstage/core-plugin-api';\nimport { useEntityList } from '@backstage/plugin-catalog-react';\nimport {\n  isTemplateEntityV1beta3,\n  TemplateEntityV1beta3,\n} from '@backstage/plugin-scaffolder-common';\nimport { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';\nimport Typography from '@material-ui/core/Typography';\nimport React, { useCallback } from 'react';\n\nimport { TemplateGroup } from '../TemplateGroup/TemplateGroup';\n\n/**\n * @alpha\n */\nexport interface TemplateGroupsProps {\n  groups: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  TemplateCardComponent?: React.ComponentType<{\n    template: TemplateEntityV1beta3;\n  }>;\n  onTemplateSelected?: (template: TemplateEntityV1beta3) => void;\n  additionalLinksForEntity?: (template: TemplateEntityV1beta3) => {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n}\n\n/**\n * @alpha\n */\nexport const TemplateGroups = (props: TemplateGroupsProps) => {\n  const { loading, error, entities } = useEntityList();\n  const { groups, templateFilter, TemplateCardComponent, onTemplateSelected } =\n    props;\n  const errorApi = useApi(errorApiRef);\n  const onSelected = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      onTemplateSelected?.(template);\n    },\n    [onTemplateSelected],\n  );\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error) {\n    errorApi.post(error);\n    return null;\n  }\n\n  if (!entities || !entities.length) {\n    return (\n      <Typography variant=\"body2\">\n        No templates found that match your filter. Learn more about{' '}\n        <Link to=\"https://backstage.io/docs/features/software-templates/adding-templates\">\n          adding templates\n        </Link>\n        .\n      </Typography>\n    );\n  }\n\n  return (\n    <>\n      {groups.map(({ title, filter }, index) => {\n        const templates = entities\n          .filter(isTemplateEntityV1beta3)\n          .filter(e => (templateFilter ? templateFilter(e) : true))\n          .filter(filter)\n          .map(template => {\n            const additionalLinks =\n              props.additionalLinksForEntity?.(template) ?? [];\n\n            return {\n              template,\n              additionalLinks,\n            };\n          });\n\n        return (\n          <TemplateGroup\n            key={index}\n            templates={templates}\n            title={title}\n            components={{ CardComponent: TemplateCardComponent }}\n            onSelected={onSelected}\n          />\n        );\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgDa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,QAAA,KAAa,aAAc,EAAA;AACnD,EAAA,MAAM,EAAE,MAAA,EAAQ,cAAgB,EAAA,qBAAA,EAAuB,oBACrD,GAAA,KAAA;AACF,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,QAAoC,KAAA;AACnC,MAAA,kBAAA,GAAqB,QAAQ,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;AAEA,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA;AAAA;AAGnB,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AACnB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,QAAA,CAAS,MAAQ,EAAA;AACjC,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAQ,6DACkC,EAAA,GAAA,kBAC3D,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,EAAG,EAAA,wEAAA,EAAA,EAAyE,kBAElF,CAAA,EAAO,GAET,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,OAAO,GAAI,CAAA,CAAC,EAAE,KAAO,EAAA,MAAA,IAAU,KAAU,KAAA;AACxC,IAAA,MAAM,YAAY,QACf,CAAA,MAAA,CAAO,uBAAuB,CAAA,CAC9B,OAAO,CAAM,CAAA,KAAA,cAAA,GAAiB,cAAe,CAAA,CAAC,IAAI,IAAK,CAAA,CACvD,OAAO,MAAM,CAAA,CACb,IAAI,CAAY,QAAA,KAAA;AACf,MAAA,MAAM,eACJ,GAAA,KAAA,CAAM,wBAA2B,GAAA,QAAQ,KAAK,EAAC;AAEjD,MAAO,OAAA;AAAA,QACL,QAAA;AAAA,QACA;AAAA,OACF;AAAA,KACD,CAAA;AAEH,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,KAAA;AAAA,QACL,SAAA;AAAA,QACA,KAAA;AAAA,QACA,UAAA,EAAY,EAAE,aAAA,EAAe,qBAAsB,EAAA;AAAA,QACnD;AAAA;AAAA,KACF;AAAA,GAEH,CACH,CAAA;AAEJ;;;;"}

package/dist/next/components/TemplateOutputs/DefaultTemplateOutputs.esm.js

@@ -1,11 +1,14 @@
 import { InfoCard, MarkdownContent } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 import React, { useState, useEffect, useMemo } from 'react';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 import { LinkOutputs } from './LinkOutputs.esm.js';
 import { TextOutputs } from './TextOutputs.esm.js';
 
 const DefaultTemplateOutputs = (props) => {
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const { output } = props;
   const [textOutputIndex, setTextOutputIndex] = useState(
     void 0
@@ -13,7 +16,7 @@ const DefaultTemplateOutputs = (props) => {
   useEffect(() => {
     if (textOutputIndex === void 0 && output?.text) {
       const defaultIndex = output.text.findIndex(
-        (t) => t.default
+        (text) => text.default
       );
       setTextOutputIndex(defaultIndex >= 0 ? defaultIndex : 0);
     }
@@ -49,7 +52,7 @@ const DefaultTemplateOutputs = (props) => {
   ))) : null, textOutput ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2, "data-testid": "text-output-box" }, /* @__PURE__ */ React.createElement(
     InfoCard,
     {
-      title: textOutput.title ?? "Text Output",
+      title: textOutput.title ?? t("templateOutputs.title"),
       noPadding: true,
       titleTypographyProps: { component: "h2" }
     },

package/dist/next/components/TemplateOutputs/DefaultTemplateOutputs.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTemplateOutputs.esm.js","sources":["../../../../src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { InfoCard, MarkdownContent } from '@backstage/core-components';\nimport {\n  ScaffolderOutputText,\n  ScaffolderTaskOutput,\n} from '@backstage/plugin-scaffolder-react';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { LinkOutputs } from './LinkOutputs';\nimport { TextOutputs } from './TextOutputs';\n\n/**\n * The DefaultOutputs renderer for the scaffolder task output\n *\n * @alpha\n */\nexport const DefaultTemplateOutputs = (props: {\n  output?: ScaffolderTaskOutput;\n}) => {\n  const { output } = props;\n  const [textOutputIndex, setTextOutputIndex] = useState<number | undefined>(\n    undefined,\n  );\n\n  useEffect(() => {\n    if (textOutputIndex === undefined && output?.text) {\n      const defaultIndex = output.text.findIndex(\n        (t: ScaffolderOutputText) => t.default,\n      );\n      setTextOutputIndex(defaultIndex >= 0 ? defaultIndex : 0);\n    }\n  }, [textOutputIndex, output]);\n\n  const textOutput = useMemo(\n    () =>\n      textOutputIndex !== undefined ? output?.text?.[textOutputIndex] : null,\n    [output, textOutputIndex],\n  );\n\n  if (!output) {\n    return null;\n  }\n\n  const displayTextButtons = (output.text || []).length > 1;\n  const emptyOutput = (output.links || []).length === 0 && !displayTextButtons;\n\n  return (\n    <>\n      {!emptyOutput ? (\n        <Box paddingBottom={2} data-testid=\"output-box\">\n          <Paper>\n            <Box\n              padding={2}\n              justifyContent=\"center\"\n              display=\"flex\"\n              gridGap={16}\n              flexWrap=\"wrap\"\n            >\n              {displayTextButtons && (\n                <TextOutputs\n                  data-testid=\"text-outputs\"\n                  output={output}\n                  index={textOutputIndex}\n                  setIndex={setTextOutputIndex}\n                />\n              )}\n              <LinkOutputs output={output} />\n            </Box>\n          </Paper>\n        </Box>\n      ) : null}\n      {textOutput ? (\n        <Box paddingBottom={2} data-testid=\"text-output-box\">\n          <InfoCard\n            title={textOutput.title ?? 'Text Output'}\n            noPadding\n            titleTypographyProps={{ component: 'h2' }}\n          >\n            <Box padding={2} height=\"100%\">\n              <MarkdownContent content={textOutput.content ?? ''} />\n            </Box>\n          </InfoCard>\n        </Box>\n      ) : null}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA+Ba,MAAA,sBAAA,GAAyB,CAAC,KAEjC,KAAA;AACJ,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA;AAAA,IAC5C,KAAA;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,eAAA,KAAoB,KAAa,CAAA,IAAA,MAAA,EAAQ,IAAM,EAAA;AACjD,MAAM,MAAA,YAAA,GAAe,OAAO,IAAK,CAAA,SAAA;AAAA,QAC/B,CAAC,MAA4B,CAAE,CAAA;AAAA,OACjC;AACA,MAAmB,kBAAA,CAAA,YAAA,IAAgB,CAAI,GAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AACzD,GACC,EAAA,CAAC,eAAiB,EAAA,MAAM,CAAC,CAAA;AAE5B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MACE,eAAoB,KAAA,KAAA,CAAA,GAAY,MAAQ,EAAA,IAAA,GAAO,eAAe,CAAI,GAAA,IAAA;AAAA,IACpE,CAAC,QAAQ,eAAe;AAAA,GAC1B;AAEA,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,kBAAsB,GAAA,CAAA,MAAA,CAAO,IAAQ,IAAA,IAAI,MAAS,GAAA,CAAA;AACxD,EAAA,MAAM,eAAe,MAAO,CAAA,KAAA,IAAS,EAAI,EAAA,MAAA,KAAW,KAAK,CAAC,kBAAA;AAE1D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,CAAC,WAAA,mBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,eAAe,CAAG,EAAA,aAAA,EAAY,YACjC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,cAAe,EAAA,QAAA;AAAA,MACf,OAAQ,EAAA,MAAA;AAAA,MACR,OAAS,EAAA,EAAA;AAAA,MACT,QAAS,EAAA;AAAA,KAAA;AAAA,IAER,kBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,cAAA;AAAA,QACZ,MAAA;AAAA,QACA,KAAO,EAAA,eAAA;AAAA,QACP,QAAU,EAAA;AAAA;AAAA,KACZ;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,eAAY,MAAgB,EAAA;AAAA,GAEjC,CACF,CAAA,GACE,IACH,EAAA,UAAA,uCACE,GAAI,EAAA,EAAA,aAAA,EAAe,CAAG,EAAA,aAAA,EAAY,iBACjC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,WAAW,KAAS,IAAA,aAAA;AAAA,MAC3B,SAAS,EAAA,IAAA;AAAA,MACT,oBAAA,EAAsB,EAAE,SAAA,EAAW,IAAK;AAAA,KAAA;AAAA,oBAEvC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAS,EAAA,CAAA,EAAG,MAAO,EAAA,MAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAS,EAAA,UAAA,CAAW,OAAW,IAAA,EAAA,EAAI,CACtD;AAAA,GAEJ,IACE,IACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DefaultTemplateOutputs.esm.js","sources":["../../../../src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { InfoCard, MarkdownContent } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport {\n  ScaffolderOutputText,\n  ScaffolderTaskOutput,\n} from '@backstage/plugin-scaffolder-react';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { scaffolderReactTranslationRef } from '../../../translation';\nimport { LinkOutputs } from './LinkOutputs';\nimport { TextOutputs } from './TextOutputs';\n\n/**\n * The DefaultOutputs renderer for the scaffolder task output\n *\n * @alpha\n */\nexport const DefaultTemplateOutputs = (props: {\n  output?: ScaffolderTaskOutput;\n}) => {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const { output } = props;\n  const [textOutputIndex, setTextOutputIndex] = useState<number | undefined>(\n    undefined,\n  );\n\n  useEffect(() => {\n    if (textOutputIndex === undefined && output?.text) {\n      const defaultIndex = output.text.findIndex(\n        (text: ScaffolderOutputText) => text.default,\n      );\n      setTextOutputIndex(defaultIndex >= 0 ? defaultIndex : 0);\n    }\n  }, [textOutputIndex, output]);\n\n  const textOutput = useMemo(\n    () =>\n      textOutputIndex !== undefined ? output?.text?.[textOutputIndex] : null,\n    [output, textOutputIndex],\n  );\n\n  if (!output) {\n    return null;\n  }\n\n  const displayTextButtons = (output.text || []).length > 1;\n  const emptyOutput = (output.links || []).length === 0 && !displayTextButtons;\n\n  return (\n    <>\n      {!emptyOutput ? (\n        <Box paddingBottom={2} data-testid=\"output-box\">\n          <Paper>\n            <Box\n              padding={2}\n              justifyContent=\"center\"\n              display=\"flex\"\n              gridGap={16}\n              flexWrap=\"wrap\"\n            >\n              {displayTextButtons && (\n                <TextOutputs\n                  data-testid=\"text-outputs\"\n                  output={output}\n                  index={textOutputIndex}\n                  setIndex={setTextOutputIndex}\n                />\n              )}\n              <LinkOutputs output={output} />\n            </Box>\n          </Paper>\n        </Box>\n      ) : null}\n      {textOutput ? (\n        <Box paddingBottom={2} data-testid=\"text-output-box\">\n          <InfoCard\n            title={textOutput.title ?? t('templateOutputs.title')}\n            noPadding\n            titleTypographyProps={{ component: 'h2' }}\n          >\n            <Box padding={2} height=\"100%\">\n              <MarkdownContent content={textOutput.content ?? ''} />\n            </Box>\n          </InfoCard>\n        </Box>\n      ) : null}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAkCa,MAAA,sBAAA,GAAyB,CAAC,KAEjC,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,6BAA6B,CAAA;AAC7D,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA;AAAA,IAC5C,KAAA;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,eAAA,KAAoB,KAAa,CAAA,IAAA,MAAA,EAAQ,IAAM,EAAA;AACjD,MAAM,MAAA,YAAA,GAAe,OAAO,IAAK,CAAA,SAAA;AAAA,QAC/B,CAAC,SAA+B,IAAK,CAAA;AAAA,OACvC;AACA,MAAmB,kBAAA,CAAA,YAAA,IAAgB,CAAI,GAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AACzD,GACC,EAAA,CAAC,eAAiB,EAAA,MAAM,CAAC,CAAA;AAE5B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MACE,eAAoB,KAAA,KAAA,CAAA,GAAY,MAAQ,EAAA,IAAA,GAAO,eAAe,CAAI,GAAA,IAAA;AAAA,IACpE,CAAC,QAAQ,eAAe;AAAA,GAC1B;AAEA,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,kBAAsB,GAAA,CAAA,MAAA,CAAO,IAAQ,IAAA,IAAI,MAAS,GAAA,CAAA;AACxD,EAAA,MAAM,eAAe,MAAO,CAAA,KAAA,IAAS,EAAI,EAAA,MAAA,KAAW,KAAK,CAAC,kBAAA;AAE1D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,CAAC,WAAA,mBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,eAAe,CAAG,EAAA,aAAA,EAAY,YACjC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,cAAe,EAAA,QAAA;AAAA,MACf,OAAQ,EAAA,MAAA;AAAA,MACR,OAAS,EAAA,EAAA;AAAA,MACT,QAAS,EAAA;AAAA,KAAA;AAAA,IAER,kBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,cAAA;AAAA,QACZ,MAAA;AAAA,QACA,KAAO,EAAA,eAAA;AAAA,QACP,QAAU,EAAA;AAAA;AAAA,KACZ;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,eAAY,MAAgB,EAAA;AAAA,GAEjC,CACF,CAAA,GACE,IACH,EAAA,UAAA,uCACE,GAAI,EAAA,EAAA,aAAA,EAAe,CAAG,EAAA,aAAA,EAAY,iBACjC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,UAAA,CAAW,KAAS,IAAA,CAAA,CAAE,uBAAuB,CAAA;AAAA,MACpD,SAAS,EAAA,IAAA;AAAA,MACT,oBAAA,EAAsB,EAAE,SAAA,EAAW,IAAK;AAAA,KAAA;AAAA,oBAEvC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAS,EAAA,CAAA,EAAG,MAAO,EAAA,MAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAS,EAAA,UAAA,CAAW,OAAW,IAAA,EAAA,EAAI,CACtD;AAAA,GAEJ,IACE,IACN,CAAA;AAEJ;;;;"}

package/dist/next/components/Workflow/Workflow.esm.js

@@ -1,13 +1,15 @@
-import React, { useCallback, useEffect } from 'react';
-import { Content, Progress, InfoCard, MarkdownContent } from '@backstage/core-components';
 import { stringifyEntityRef } from '@backstage/catalog-model';
-import { makeStyles } from '@material-ui/core/styles';
+import { Content, Progress, InfoCard, MarkdownContent } from '@backstage/core-components';
 import { useAnalytics, useApi, errorApiRef } from '@backstage/core-plugin-api';
-import { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema.esm.js';
-import { Stepper } from '../Stepper/Stepper.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useCallback, useEffect } from 'react';
 import { SecretsContextProvider } from '../../../secrets/SecretsContext.esm.js';
+import { scaffolderReactTranslationRef } from '../../../translation.esm.js';
 import { useFilteredSchemaProperties } from '../../hooks/useFilteredSchemaProperties.esm.js';
+import { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema.esm.js';
 import { useTemplateTimeSavedMinutes } from '../../hooks/useTemplateTimeSaved.esm.js';
+import { Stepper } from '../Stepper/Stepper.esm.js';
 
 const useStyles = makeStyles({
   markdown: {
@@ -21,6 +23,7 @@ const useStyles = makeStyles({
   }
 });
 const Workflow = (workflowProps) => {
+  const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const { title, description, namespace, templateName, onCreate, ...props } = workflowProps;
   const analytics = useAnalytics();
   const styles = useStyles();
@@ -35,7 +38,7 @@ const Workflow = (workflowProps) => {
   const minutesSaved = useTemplateTimeSavedMinutes(templateRef);
   const workflowOnCreate = useCallback(
     async (formState) => {
-      onCreate(formState);
+      await onCreate(formState);
       const name = typeof formState.name === "string" ? formState.name : void 0;
       analytics.captureEvent("create", name ?? templateName ?? "unknown", {
         value: minutesSaved
@@ -60,7 +63,7 @@ const Workflow = (workflowProps) => {
         {
           className: styles.markdown,
           linkTarget: "_blank",
-          content: description ?? sortedManifest.description ?? "No description"
+          content: description ?? sortedManifest.description ?? t("workflow.noDescription")
         }
       ),
       noPadding: true,

package/dist/next/components/Workflow/Workflow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workflow.esm.js","sources":["../../../../src/next/components/Workflow/Workflow.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useEffect } from 'react';\nimport {\n  Content,\n  InfoCard,\n  MarkdownContent,\n  Progress,\n} from '@backstage/core-components';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { errorApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema';\nimport { Stepper, type StepperProps } from '../Stepper/Stepper';\nimport { SecretsContextProvider } from '../../../secrets/SecretsContext';\nimport { useFilteredSchemaProperties } from '../../hooks/useFilteredSchemaProperties';\nimport { ReviewStepProps } from '@backstage/plugin-scaffolder-react';\nimport { useTemplateTimeSavedMinutes } from '../../hooks/useTemplateTimeSaved';\nimport { JsonValue } from '@backstage/types';\n\nconst useStyles = makeStyles({\n  markdown: {\n    /** to make the styles for React Markdown not leak into the description */\n    '& :first-child': {\n      marginTop: 0,\n    },\n    '& :last-child': {\n      marginBottom: 0,\n    },\n  },\n});\n\n/**\n * @alpha\n */\nexport type WorkflowProps = {\n  title?: string;\n  description?: string;\n  namespace: string;\n  templateName: string;\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  onError(error: Error | undefined): JSX.Element | null;\n} & Pick<\n  StepperProps,\n  | 'extensions'\n  | 'formProps'\n  | 'components'\n  | 'onCreate'\n  | 'initialState'\n  | 'layouts'\n>;\n\n/**\n * @alpha\n */\nexport const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {\n  const { title, description, namespace, templateName, onCreate, ...props } =\n    workflowProps;\n\n  const analytics = useAnalytics();\n  const styles = useStyles();\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace: namespace,\n    name: templateName,\n  });\n\n  const errorApi = useApi(errorApiRef);\n\n  const { loading, manifest, error } = useTemplateParameterSchema(templateRef);\n\n  const sortedManifest = useFilteredSchemaProperties(manifest);\n\n  const minutesSaved = useTemplateTimeSavedMinutes(templateRef);\n\n  const workflowOnCreate = useCallback(\n    async (formState: Record<string, JsonValue>) => {\n      onCreate(formState);\n\n      const name =\n        typeof formState.name === 'string' ? formState.name : undefined;\n      analytics.captureEvent('create', name ?? templateName ?? 'unknown', {\n        value: minutesSaved,\n      });\n    },\n    [onCreate, analytics, templateName, minutesSaved],\n  );\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(new Error(`Failed to load template, ${error}`));\n    }\n  }, [error, errorApi]);\n\n  if (error) {\n    return props.onError(error);\n  }\n\n  return (\n    <Content>\n      {loading && <Progress />}\n      {sortedManifest && (\n        <InfoCard\n          title={title ?? sortedManifest.title}\n          subheader={\n            <MarkdownContent\n              className={styles.markdown}\n              linkTarget=\"_blank\"\n              content={\n                description ?? sortedManifest.description ?? 'No description'\n              }\n            />\n          }\n          noPadding\n          titleTypographyProps={{ component: 'h2' }}\n        >\n          <Stepper\n            manifest={sortedManifest}\n            onCreate={workflowOnCreate}\n            {...props}\n          />\n        </InfoCard>\n      )}\n    </Content>\n  );\n};\n\n/**\n * @alpha\n */\nexport const EmbeddableWorkflow = (props: WorkflowProps) => (\n  <SecretsContextProvider>\n    <Workflow {...props} />\n  </SecretsContextProvider>\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAkCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,QAAU,EAAA;AAAA;AAAA,IAER,gBAAkB,EAAA;AAAA,MAChB,SAAW,EAAA;AAAA,KACb;AAAA,IACA,eAAiB,EAAA;AAAA,MACf,YAAc,EAAA;AAAA;AAChB;AAEJ,CAAC,CAAA;AA2BY,MAAA,QAAA,GAAW,CAAC,aAAqD,KAAA;AAC5E,EAAM,MAAA,EAAE,OAAO,WAAa,EAAA,SAAA,EAAW,cAAc,QAAU,EAAA,GAAG,OAChE,GAAA,aAAA;AAEF,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,cAAc,kBAAmB,CAAA;AAAA,IACrC,IAAM,EAAA,UAAA;AAAA,IACN,SAAA;AAAA,IACA,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AAEnC,EAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,KAAM,EAAA,GAAI,2BAA2B,WAAW,CAAA;AAE3E,EAAM,MAAA,cAAA,GAAiB,4BAA4B,QAAQ,CAAA;AAE3D,EAAM,MAAA,YAAA,GAAe,4BAA4B,WAAW,CAAA;AAE5D,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,OAAO,SAAyC,KAAA;AAC9C,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,OACJ,OAAO,SAAA,CAAU,IAAS,KAAA,QAAA,GAAW,UAAU,IAAO,GAAA,KAAA,CAAA;AACxD,MAAA,SAAA,CAAU,YAAa,CAAA,QAAA,EAAU,IAAQ,IAAA,YAAA,IAAgB,SAAW,EAAA;AAAA,QAClE,KAAO,EAAA;AAAA,OACR,CAAA;AAAA,KACH;AAAA,IACA,CAAC,QAAA,EAAU,SAAW,EAAA,YAAA,EAAc,YAAY;AAAA,GAClD;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,QAAA,CAAS,KAAK,IAAI,KAAA,CAAM,CAA4B,yBAAA,EAAA,KAAK,EAAE,CAAC,CAAA;AAAA;AAC9D,GACC,EAAA,CAAC,KAAO,EAAA,QAAQ,CAAC,CAAA;AAEpB,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,OAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA;AAG5B,EAAA,2CACG,OACE,EAAA,IAAA,EAAA,OAAA,oBAAY,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAS,GACrB,cACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,SAAS,cAAe,CAAA,KAAA;AAAA,MAC/B,SACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,QAAA;AAAA,UAClB,UAAW,EAAA,QAAA;AAAA,UACX,OAAA,EACE,WAAe,IAAA,cAAA,CAAe,WAAe,IAAA;AAAA;AAAA,OAEjD;AAAA,MAEF,SAAS,EAAA,IAAA;AAAA,MACT,oBAAA,EAAsB,EAAE,SAAA,EAAW,IAAK;AAAA,KAAA;AAAA,oBAExC,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,cAAA;AAAA,QACV,QAAU,EAAA,gBAAA;AAAA,QACT,GAAG;AAAA;AAAA;AACN,GAGN,CAAA;AAEJ;AAKa,MAAA,kBAAA,GAAqB,CAAC,KACjC,qBAAA,KAAA,CAAA,aAAA,CAAC,8CACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAU,GAAG,KAAA,EAAO,CACvB;;;;"}
+{"version":3,"file":"Workflow.esm.js","sources":["../../../../src/next/components/Workflow/Workflow.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { stringifyEntityRef } from '@backstage/catalog-model';\nimport {\n  Content,\n  InfoCard,\n  MarkdownContent,\n  Progress,\n} from '@backstage/core-components';\nimport { errorApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { ReviewStepProps } from '@backstage/plugin-scaffolder-react';\nimport { JsonValue } from '@backstage/types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { useCallback, useEffect } from 'react';\n\nimport { SecretsContextProvider } from '../../../secrets/SecretsContext';\nimport { scaffolderReactTranslationRef } from '../../../translation';\nimport { useFilteredSchemaProperties } from '../../hooks/useFilteredSchemaProperties';\nimport { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema';\nimport { useTemplateTimeSavedMinutes } from '../../hooks/useTemplateTimeSaved';\nimport { Stepper, type StepperProps } from '../Stepper/Stepper';\n\nconst useStyles = makeStyles({\n  markdown: {\n    /** to make the styles for React Markdown not leak into the description */\n    '& :first-child': {\n      marginTop: 0,\n    },\n    '& :last-child': {\n      marginBottom: 0,\n    },\n  },\n});\n\n/**\n * @alpha\n */\nexport type WorkflowProps = {\n  title?: string;\n  description?: string;\n  namespace: string;\n  templateName: string;\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  onError(error: Error | undefined): JSX.Element | null;\n} & Pick<\n  StepperProps,\n  | 'extensions'\n  | 'formProps'\n  | 'components'\n  | 'onCreate'\n  | 'initialState'\n  | 'layouts'\n>;\n\n/**\n * @alpha\n */\nexport const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {\n  const { t } = useTranslationRef(scaffolderReactTranslationRef);\n  const { title, description, namespace, templateName, onCreate, ...props } =\n    workflowProps;\n\n  const analytics = useAnalytics();\n  const styles = useStyles();\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace: namespace,\n    name: templateName,\n  });\n\n  const errorApi = useApi(errorApiRef);\n\n  const { loading, manifest, error } = useTemplateParameterSchema(templateRef);\n\n  const sortedManifest = useFilteredSchemaProperties(manifest);\n\n  const minutesSaved = useTemplateTimeSavedMinutes(templateRef);\n\n  const workflowOnCreate = useCallback(\n    async (formState: Record<string, JsonValue>) => {\n      await onCreate(formState);\n\n      const name =\n        typeof formState.name === 'string' ? formState.name : undefined;\n      analytics.captureEvent('create', name ?? templateName ?? 'unknown', {\n        value: minutesSaved,\n      });\n    },\n    [onCreate, analytics, templateName, minutesSaved],\n  );\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(new Error(`Failed to load template, ${error}`));\n    }\n  }, [error, errorApi]);\n\n  if (error) {\n    return props.onError(error);\n  }\n\n  return (\n    <Content>\n      {loading && <Progress />}\n      {sortedManifest && (\n        <InfoCard\n          title={title ?? sortedManifest.title}\n          subheader={\n            <MarkdownContent\n              className={styles.markdown}\n              linkTarget=\"_blank\"\n              content={\n                description ??\n                sortedManifest.description ??\n                t('workflow.noDescription')\n              }\n            />\n          }\n          noPadding\n          titleTypographyProps={{ component: 'h2' }}\n        >\n          <Stepper\n            manifest={sortedManifest}\n            onCreate={workflowOnCreate}\n            {...props}\n          />\n        </InfoCard>\n      )}\n    </Content>\n  );\n};\n\n/**\n * @alpha\n */\nexport const EmbeddableWorkflow = (props: WorkflowProps) => (\n  <SecretsContextProvider>\n    <Workflow {...props} />\n  </SecretsContextProvider>\n);\n"],"names":[],"mappings":"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"}

package/dist/translation.esm.js

@@ -0,0 +1,40 @@
+import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
+
+const scaffolderReactTranslationRef = createTranslationRef({
+  id: "scaffolder-react",
+  messages: {
+    passwordWidget: {
+      content: "This widget is insecure. Please use [`ui:field: Secret`](https://backstage.io/docs/features/software-templates/writing-templates/#using-secrets) instead of `ui:widget: password`"
+    },
+    scaffolderPageContextMenu: {
+      moreLabel: "more",
+      createLabel: "Create",
+      editorLabel: "Manage Templates",
+      actionsLabel: "Installed Actions",
+      tasksLabel: "Task List"
+    },
+    stepper: {
+      backButtonText: "Back",
+      createButtonText: "Create",
+      reviewButtonText: "Review",
+      stepIndexLabel: "Step {{index, number}}",
+      nextButtonText: "Next"
+    },
+    templateCategoryPicker: {
+      title: "Categories"
+    },
+    templateCard: {
+      noDescription: "No description",
+      chooseButtonText: "Choose"
+    },
+    templateOutputs: {
+      title: "Text Output"
+    },
+    workflow: {
+      noDescription: "No description"
+    }
+  }
+});
+
+export { scaffolderReactTranslationRef };
+//# sourceMappingURL=translation.esm.js.map

package/dist/translation.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"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 */\nimport { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @alpha */\nexport const scaffolderReactTranslationRef = createTranslationRef({\n  id: 'scaffolder-react',\n  messages: {\n    passwordWidget: {\n      content:\n        'This widget is insecure. Please use [`ui:field: Secret`](https://backstage.io/docs/features/software-templates/writing-templates/#using-secrets) instead of `ui:widget: password`',\n    },\n    scaffolderPageContextMenu: {\n      moreLabel: 'more',\n      createLabel: 'Create',\n      editorLabel: 'Manage Templates',\n      actionsLabel: 'Installed Actions',\n      tasksLabel: 'Task List',\n    },\n    stepper: {\n      backButtonText: 'Back',\n      createButtonText: 'Create',\n      reviewButtonText: 'Review',\n      stepIndexLabel: 'Step {{index, number}}',\n      nextButtonText: 'Next',\n    },\n    templateCategoryPicker: {\n      title: 'Categories',\n    },\n    templateCard: {\n      noDescription: 'No description',\n      chooseButtonText: 'Choose',\n    },\n    templateOutputs: {\n      title: 'Text Output',\n    },\n    workflow: {\n      noDescription: 'No description',\n    },\n  },\n});\n"],"names":[],"mappings":";;AAkBO,MAAM,gCAAgC,oBAAqB,CAAA;AAAA,EAChE,EAAI,EAAA,kBAAA;AAAA,EACJ,QAAU,EAAA;AAAA,IACR,cAAgB,EAAA;AAAA,MACd,OACE,EAAA;AAAA,KACJ;AAAA,IACA,yBAA2B,EAAA;AAAA,MACzB,SAAW,EAAA,MAAA;AAAA,MACX,WAAa,EAAA,QAAA;AAAA,MACb,WAAa,EAAA,kBAAA;AAAA,MACb,YAAc,EAAA,mBAAA;AAAA,MACd,UAAY,EAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,cAAgB,EAAA,MAAA;AAAA,MAChB,gBAAkB,EAAA,QAAA;AAAA,MAClB,gBAAkB,EAAA,QAAA;AAAA,MAClB,cAAgB,EAAA,wBAAA;AAAA,MAChB,cAAgB,EAAA;AAAA,KAClB;AAAA,IACA,sBAAwB,EAAA;AAAA,MACtB,KAAO,EAAA;AAAA,KACT;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,aAAe,EAAA,gBAAA;AAAA,MACf,gBAAkB,EAAA;AAAA,KACpB;AAAA,IACA,eAAiB,EAAA;AAAA,MACf,KAAO,EAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,aAAe,EAAA;AAAA;AACjB;AAEJ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.14.6-next.1",
+  "version": "1.14.6-next.2",
   "description": "A frontend library that helps other Backstage plugins interact with the Scaffolder",
   "backstage": {
     "role": "web-library",
@@ -45,7 +45,7 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "index": [
+      "*": [
         "dist/index.d.ts"
       ],
       "alpha": [
@@ -68,10 +68,10 @@
   "dependencies": {
     "@backstage/catalog-client": "1.9.1",
     "@backstage/catalog-model": "1.7.3",
-    "@backstage/core-components": "0.16.5-next.0",
+    "@backstage/core-components": "0.16.5-next.1",
     "@backstage/core-plugin-api": "1.10.4",
-    "@backstage/frontend-plugin-api": "0.9.6-next.1",
-    "@backstage/plugin-catalog-react": "1.16.0-next.1",
+    "@backstage/frontend-plugin-api": "0.10.0-next.2",
+    "@backstage/plugin-catalog-react": "1.16.0-next.2",
     "@backstage/plugin-permission-react": "0.4.31",
     "@backstage/plugin-scaffolder-common": "1.5.10-next.0",
     "@backstage/theme": "0.6.4",
@@ -89,7 +89,7 @@
     "ajv": "^8.0.1",
     "ajv-errors": "^3.0.0",
     "classnames": "^2.2.6",
-    "flatted": "3.3.2",
+    "flatted": "3.3.3",
     "humanize-duration": "^3.25.1",
     "immer": "^9.0.6",
     "json-schema": "^0.4.0",
@@ -104,12 +104,12 @@
     "zod-to-json-schema": "^3.20.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.30.1-next.0",
-    "@backstage/core-app-api": "1.15.5",
-    "@backstage/plugin-catalog": "1.28.0-next.1",
+    "@backstage/cli": "0.31.0-next.1",
+    "@backstage/core-app-api": "1.16.0-next.0",
+    "@backstage/plugin-catalog": "1.28.0-next.2",
     "@backstage/plugin-catalog-common": "1.1.3",
     "@backstage/plugin-permission-common": "0.8.4",
-    "@backstage/test-utils": "1.7.5",
+    "@backstage/test-utils": "1.7.6-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",