@backstage/plugin-scaffolder-react 1.14.2-next.1 → 1.14.2

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.14.2
+
+### Patch Changes
+
+- 3c62a50: Experimental support for `formDecorators` to enable secret collection and mutations to the parameters for scaffolder tasks
+- c4ffd13: Added the autocomplete feature to GitlabRepoUrlPicker
+- 28e286f: Added test coverage selectors to TemplateCard and its sub-components
+- c846d76: Updated dependency `flatted` to `3.3.2`.
+- 9951ba4: Updated dependency `@rjsf/utils` to `5.23.1`.
+  Updated dependency `@rjsf/core` to `5.23.1`.
+  Updated dependency `@rjsf/material-ui` to `5.23.1`.
+  Updated dependency `@rjsf/validator-ajv8` to `5.23.1`.
+- 97a13ad: Improve performance of typing into scaffolder secret widget
+- 184161f: Scaffolder field extensions registered with `FormFieldBlueprint` are now collected in the `useCustomFieldExtensions` hook, enabling them for use in the scaffolder.
+- b21a5ae: Open links in the scaffolder entity and step descriptions in a new tab, to ensure consistency and improve user experience
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.15.0
+  - @backstage/plugin-scaffolder-common@1.5.8
+  - @backstage/catalog-client@1.9.0
+  - @backstage/frontend-plugin-api@0.9.3
+  - @backstage/theme@0.6.3
+  - @backstage/core-components@0.16.2
+  - @backstage/catalog-model@1.7.2
+  - @backstage/core-plugin-api@1.10.2
+  - @backstage/types@1.2.0
+  - @backstage/version-bridge@1.0.10
+  - @backstage/plugin-permission-react@0.4.29
+
+## 1.14.2-next.2
+
+### Patch Changes
+
+- 184161f: Scaffolder field extensions registered with `FormFieldBlueprint` are now collected in the `useCustomFieldExtensions` hook, enabling them for use in the scaffolder.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.14.3-next.2
+  - @backstage/catalog-client@1.9.0-next.2
+  - @backstage/catalog-model@1.7.2-next.0
+  - @backstage/core-components@0.16.2-next.2
+  - @backstage/core-plugin-api@1.10.2-next.0
+  - @backstage/frontend-plugin-api@0.9.3-next.2
+  - @backstage/theme@0.6.3-next.0
+  - @backstage/types@1.2.0
+  - @backstage/version-bridge@1.0.10
+  - @backstage/plugin-permission-react@0.4.29-next.0
+  - @backstage/plugin-scaffolder-common@1.5.8-next.1
+
 ## 1.14.2-next.1
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -1,15 +1,96 @@
 /// <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';
 import { JsonObject, JsonValue } from '@backstage/types';
 import * as React from 'react';
 import React__default, { ComponentType, ReactNode, PropsWithChildren, ReactElement } from 'react';
 import { TemplatePresentationV1beta3, TemplateEntityV1beta3, TaskStep } from '@backstage/plugin-scaffolder-common';
 import { UiSchema, FieldValidation, WidgetProps } from '@rjsf/utils';
-import { TemplateParameterSchema, FieldExtensionOptions, FormProps, ReviewStepProps, LayoutOptions, CustomFieldValidator, TemplateGroupFilter, ScaffolderTaskOutput, ScaffolderRJSFFormProps, ScaffolderStep, FieldExtensionComponentProps, FieldSchema } from '@backstage/plugin-scaffolder-react';
 import { ApiHolder, IconComponent, AnyApiRef } from '@backstage/core-plugin-api';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
-import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
-import { z } from 'zod';
+
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+
+/** @alpha */
+interface FormField {
+  readonly $$type: '@backstage/scaffolder/FormField';
+}
+
+/** @alpha */
+declare const formFieldsApi: _backstage_frontend_plugin_api.ExtensionDefinition<{
+    config: {};
+    configInput: {};
+    output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+    inputs: {
+        formFields: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>, {
+            singleton: false;
+            optional: false;
+        }>;
+    };
+    kind: "api";
+    name: "form-fields";
+    params: {
+        factory: _backstage_frontend_plugin_api.AnyApiFactory;
+    };
+}>;
+
+/** @alpha */
+type FormFieldExtensionData<TReturnValue extends z.ZodType = z.ZodType, TUiOptions extends z.ZodType = z.ZodType> = {
+    name: string;
+    component: (props: FieldExtensionComponentProps<z.output<TReturnValue>, z.output<TUiOptions>>) => JSX.Element | null;
+    validation?: CustomFieldValidator<z.output<TReturnValue>, z.output<TUiOptions>>;
+    schema?: FieldSchema<z.output<TReturnValue>, z.output<TUiOptions>>;
+};
+
+/**
+ * @alpha
+ * Creates extensions that are Field Extensions for the Scaffolder
+ * */
+declare const FormFieldBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
+    kind: "scaffolder-form-field";
+    name: undefined;
+    params: {
+        field: () => Promise<FormField>;
+    };
+    output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
+    inputs: {};
+    config: {};
+    configInput: {};
+    dataRefs: {
+        formFieldLoader: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
+    };
+}>;
+/**
+ * @alpha
+ * Used to create a form field binding with typechecking for compliance
+ */
+declare function createFormField<TReturnValue extends z.ZodType, TUiOptions extends z.ZodType>(opts: FormFieldExtensionData<TReturnValue, TUiOptions>): FormField;
+
+/** @alpha */
+interface ScaffolderFormFieldsApi {
+    getFormFields(): Promise<FormFieldExtensionData[]>;
+}
+
+/** @alpha */
+declare const formFieldsApiRef: _backstage_frontend_plugin_api.ApiRef<ScaffolderFormFieldsApi>;
 
 /**
  * This is the parsed template schema that is returned from the {@link useTemplateSchema} hook.
@@ -319,61 +400,6 @@ declare module '@backstage/theme' {
     }
 }
 
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-
-
-/** @alpha */
-interface FormField {
-  readonly $$type: '@backstage/scaffolder/FormField';
-}
-
-/** @alpha */
-type FormFieldExtensionData<TReturnValue extends z.ZodType = z.ZodType, TUiOptions extends z.ZodType = z.ZodType> = {
-    name: string;
-    component: (props: FieldExtensionComponentProps<z.output<TReturnValue>, z.output<TUiOptions>>) => JSX.Element | null;
-    validation?: CustomFieldValidator<z.output<TReturnValue>, z.output<TUiOptions>>;
-    schema?: FieldSchema<z.output<TReturnValue>, z.output<TUiOptions>>;
-};
-
-/**
- * @alpha
- * Creates extensions that are Field Extensions for the Scaffolder
- * */
-declare const FormFieldBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
-    kind: "scaffolder-form-field";
-    name: undefined;
-    params: {
-        field: () => Promise<FormField>;
-    };
-    output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
-    inputs: {};
-    config: {};
-    configInput: {};
-    dataRefs: {
-        formFieldLoader: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<() => Promise<FormField>, "scaffolder.form-field-loader", {}>;
-    };
-}>;
-/**
- * @alpha
- * Used to create a form field binding with typechecking for compliance
- */
-declare function createFormField<TReturnValue extends z.ZodType, TUiOptions extends z.ZodType>(opts: FormFieldExtensionData<TReturnValue, TUiOptions>): FormField;
-
 /** @alpha */
 type ScaffolderFormDecoratorContext<TInput extends JsonObject = JsonObject> = {
     input: TInput;
@@ -415,4 +441,4 @@ declare function createScaffolderFormDecorator<TInputSchema extends {
     } : never) => Promise<void>;
 }): ScaffolderFormDecorator<TInput>;
 
-export { type BackstageOverrides, type BackstageTemplateStepperClassKey, DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormFieldBlueprint, type FormFieldExtensionData, type FormValidation, type ParsedTemplateSchema, ReviewState, type ReviewStateProps, ScaffolderField, type ScaffolderFieldProps, type ScaffolderFormDecorator, type ScaffolderFormDecoratorContext, 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, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { type BackstageOverrides, type BackstageTemplateStepperClassKey, DefaultTemplateOutputs, EmbeddableWorkflow, Form, 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 };

package/dist/alpha.esm.js

@@ -1,3 +1,5 @@
+export { formFieldsApi } from './next/api/FormFieldsApi.esm.js';
+export { formFieldsApiRef } from './next/api/ref.esm.js';
 export { Stepper } from './next/components/Stepper/Stepper.esm.js';
 export { createAsyncValidators } from './next/components/Stepper/createAsyncValidators.esm.js';
 export { TemplateCard } from './next/components/TemplateCard/TemplateCard.esm.js';

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

@@ -1,8 +1,56 @@
-import { useElementFilter } from '@backstage/core-plugin-api';
+import { useAsync, useMountEffect } from '@react-hookz/web';
+import { useApi, useElementFilter } from '@backstage/core-plugin-api';
+import '../next/api/FormFieldsApi.esm.js';
+import { formFieldsApiRef } from '../next/api/ref.esm.js';
+import '../next/components/Stepper/Stepper.esm.js';
+import 'json-schema-library';
+import 'flatted';
+import '../next/components/TemplateCard/TemplateCard.esm.js';
+import 'react';
+import '@backstage/core-components';
+import 'lodash';
+import '@backstage/catalog-model';
+import '@backstage/plugin-catalog-react';
+import '@backstage/plugin-scaffolder-common';
+import '@material-ui/core/Typography';
+import '../next/components/Workflow/Workflow.esm.js';
+import '@material-ui/core/Box';
+import '@material-ui/core/Paper';
+import '../next/components/TemplateOutputs/LinkOutputs.esm.js';
+import '@material-ui/core/Button';
+import '@material-ui/icons/Description';
+import '../next/components/Form/Form.esm.js';
+import '@material-ui/core/Stepper';
+import '@material-ui/core/Step';
+import '@material-ui/core/StepButton';
+import '@material-ui/core/StepLabel';
+import '../next/components/TaskSteps/StepIcon.esm.js';
+import 'react-use/esm/useInterval';
+import 'luxon';
+import 'humanize-duration';
+import '../next/components/TaskSteps/TaskBorder.esm.js';
+import '../next/components/TaskLogStream/TaskLogStream.esm.js';
+import '../next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js';
+import '../next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.esm.js';
+import '../next/components/ScaffolderField/ScaffolderField.esm.js';
+import '@backstage/plugin-scaffolder-react';
+import '@material-ui/core/TextField';
+import 'lodash/debounce';
+import 'qs';
+import 'react-use/esm/useAsync';
+import '../api/ref.esm.js';
+import 'lodash/cloneDeep';
+import '../next/blueprints/FormFieldBlueprint.esm.js';
 import { FIELD_EXTENSION_WRAPPER_KEY, FIELD_EXTENSION_KEY } from '../extensions/keys.esm.js';
 
 const useCustomFieldExtensions = (outlet) => {
-  return useElementFilter(
+  const formFieldsApi = useApi(formFieldsApiRef);
+  const [{ result: blueprintFields }, methods] = useAsync(
+    formFieldsApi.getFormFields,
+    []
+  );
+  useMountEffect(methods.execute);
+  const outletFields = useElementFilter(
     outlet,
     (elements) => elements.selectByComponentData({
       key: FIELD_EXTENSION_WRAPPER_KEY
@@ -10,6 +58,15 @@ const useCustomFieldExtensions = (outlet) => {
       key: FIELD_EXTENSION_KEY
     })
   );
+  const blueprintsToLegacy = blueprintFields?.map(
+    (field) => ({
+      component: field.component,
+      name: field.name,
+      validation: field.validation,
+      schema: field.schema?.schema
+    })
+  );
+  return [...blueprintsToLegacy, ...outletFields];
 };
 
 export { useCustomFieldExtensions };

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 { useElementFilter } from '@backstage/core-plugin-api';\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  TComponentDataType = FieldExtensionOptions,\n>(\n  outlet: React.ReactNode,\n) => {\n  return 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"],"names":[],"mappings":";;;AA0Ba,MAAA,wBAAA,GAA2B,CAGtC,MACG,KAAA;AACH,EAAO,OAAA,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KAC9B,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA;AAAA,KACN,EACA,iBAAsC,CAAA;AAAA,MACrC,GAAK,EAAA;AAAA,KACN;AAAA,GACL;AACF;;;;"}
+{"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 }, methods] = useAsync(\n    formFieldsApi.getFormFields,\n    [],\n  );\n  useMountEffect(methods.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,EAAA,MAAM,CAAC,EAAE,MAAA,EAAQ,eAAgB,EAAA,EAAG,OAAO,CAAI,GAAA,QAAA;AAAA,IAC7C,aAAc,CAAA,aAAA;AAAA,IACd;AAAC,GACH;AACA,EAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAG9B,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/next/api/FormFieldsApi.esm.js

@@ -0,0 +1,40 @@
+import { ApiBlueprint, createExtensionInput, createApiFactory } from '@backstage/frontend-plugin-api';
+import { formFieldsApiRef } from './ref.esm.js';
+import { FormFieldBlueprint } from '../blueprints/FormFieldBlueprint.esm.js';
+import { OpaqueFormField } from '../../packages/scaffolder-internal/src/wiring/InternalFormField.esm.js';
+
+class DefaultScaffolderFormFieldsApi {
+  constructor(formFieldLoaders = []) {
+    this.formFieldLoaders = formFieldLoaders;
+  }
+  async getFormFields() {
+    const formFields = await Promise.all(
+      this.formFieldLoaders.map((loader) => loader())
+    );
+    const internalFormFields = formFields.map(OpaqueFormField.toInternal);
+    return internalFormFields;
+  }
+}
+const formFieldsApi = ApiBlueprint.makeWithOverrides({
+  name: "form-fields",
+  inputs: {
+    formFields: createExtensionInput([
+      FormFieldBlueprint.dataRefs.formFieldLoader
+    ])
+  },
+  factory(originalFactory, { inputs }) {
+    const formFieldLoaders = inputs.formFields.map(
+      (e) => e.get(FormFieldBlueprint.dataRefs.formFieldLoader)
+    );
+    return originalFactory({
+      factory: createApiFactory({
+        api: formFieldsApiRef,
+        deps: {},
+        factory: () => new DefaultScaffolderFormFieldsApi(formFieldLoaders)
+      })
+    });
+  }
+});
+
+export { formFieldsApi };
+//# sourceMappingURL=FormFieldsApi.esm.js.map

package/dist/next/api/FormFieldsApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldsApi.esm.js","sources":["../../../src/next/api/FormFieldsApi.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 */\n\nimport {\n  ApiBlueprint,\n  createApiFactory,\n  createExtensionInput,\n} from '@backstage/frontend-plugin-api';\nimport { formFieldsApiRef } from './ref';\nimport { ScaffolderFormFieldsApi } from './types';\nimport { FormFieldBlueprint } from '../blueprints';\nimport { FormField, OpaqueFormField } from '@internal/scaffolder';\n\nclass DefaultScaffolderFormFieldsApi implements ScaffolderFormFieldsApi {\n  constructor(\n    private readonly formFieldLoaders: Array<() => Promise<FormField>> = [],\n  ) {}\n\n  async getFormFields() {\n    const formFields = await Promise.all(\n      this.formFieldLoaders.map(loader => loader()),\n    );\n\n    const internalFormFields = formFields.map(OpaqueFormField.toInternal);\n\n    return internalFormFields;\n  }\n}\n\n/** @alpha */\nexport const formFieldsApi = ApiBlueprint.makeWithOverrides({\n  name: 'form-fields',\n  inputs: {\n    formFields: createExtensionInput([\n      FormFieldBlueprint.dataRefs.formFieldLoader,\n    ]),\n  },\n  factory(originalFactory, { inputs }) {\n    const formFieldLoaders = inputs.formFields.map(e =>\n      e.get(FormFieldBlueprint.dataRefs.formFieldLoader),\n    );\n\n    return originalFactory({\n      factory: createApiFactory({\n        api: formFieldsApiRef,\n        deps: {},\n        factory: () => new DefaultScaffolderFormFieldsApi(formFieldLoaders),\n      }),\n    });\n  },\n});\n"],"names":[],"mappings":";;;;;AA0BA,MAAM,8BAAkE,CAAA;AAAA,EACtE,WAAA,CACmB,gBAAoD,GAAA,EACrE,EAAA;AADiB,IAAA,IAAA,CAAA,gBAAA,GAAA,gBAAA;AAAA;AAChB,EAEH,MAAM,aAAgB,GAAA;AACpB,IAAM,MAAA,UAAA,GAAa,MAAM,OAAQ,CAAA,GAAA;AAAA,MAC/B,IAAK,CAAA,gBAAA,CAAiB,GAAI,CAAA,CAAA,MAAA,KAAU,QAAQ;AAAA,KAC9C;AAEA,IAAA,MAAM,kBAAqB,GAAA,UAAA,CAAW,GAAI,CAAA,eAAA,CAAgB,UAAU,CAAA;AAEpE,IAAO,OAAA,kBAAA;AAAA;AAEX;AAGa,MAAA,aAAA,GAAgB,aAAa,iBAAkB,CAAA;AAAA,EAC1D,IAAM,EAAA,aAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,YAAY,oBAAqB,CAAA;AAAA,MAC/B,mBAAmB,QAAS,CAAA;AAAA,KAC7B;AAAA,GACH;AAAA,EACA,OAAQ,CAAA,eAAA,EAAiB,EAAE,MAAA,EAAU,EAAA;AACnC,IAAM,MAAA,gBAAA,GAAmB,OAAO,UAAW,CAAA,GAAA;AAAA,MAAI,CAC7C,CAAA,KAAA,CAAA,CAAE,GAAI,CAAA,kBAAA,CAAmB,SAAS,eAAe;AAAA,KACnD;AAEA,IAAA,OAAO,eAAgB,CAAA;AAAA,MACrB,SAAS,gBAAiB,CAAA;AAAA,QACxB,GAAK,EAAA,gBAAA;AAAA,QACL,MAAM,EAAC;AAAA,QACP,OAAS,EAAA,MAAM,IAAI,8BAAA,CAA+B,gBAAgB;AAAA,OACnE;AAAA,KACF,CAAA;AAAA;AAEL,CAAC;;;;"}

package/dist/next/api/ref.esm.js

@@ -0,0 +1,8 @@
+import { createApiRef } from '@backstage/frontend-plugin-api';
+
+const formFieldsApiRef = createApiRef({
+  id: "plugin.scaffolder.form-fields"
+});
+
+export { formFieldsApiRef };
+//# sourceMappingURL=ref.esm.js.map

package/dist/next/api/ref.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref.esm.js","sources":["../../../src/next/api/ref.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 */\n\nimport { createApiRef } from '@backstage/frontend-plugin-api';\nimport { ScaffolderFormFieldsApi } from './types';\n\n/** @alpha */\nexport const formFieldsApiRef = createApiRef<ScaffolderFormFieldsApi>({\n  id: 'plugin.scaffolder.form-fields',\n});\n"],"names":[],"mappings":";;AAoBO,MAAM,mBAAmB,YAAsC,CAAA;AAAA,EACpE,EAAI,EAAA;AACN,CAAC;;;;"}

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

@@ -1,6 +1,7 @@
 import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
 import TextField from '@material-ui/core/TextField';
-import React from 'react';
+import React, { useState, useMemo } from 'react';
+import debounce from 'lodash/debounce';
 
 const SecretWidget = (props) => {
   const { setSecrets, secrets } = useTemplateSecrets();
@@ -11,17 +12,27 @@ const SecretWidget = (props) => {
     required,
     disabled
   } = props;
+  const [localValue, setLocalValue] = useState(secrets[name] ?? "");
+  const debouncedSetSecrets = useMemo(
+    () => debounce((value) => {
+      setSecrets({ [name]: value });
+    }, 300),
+    [setSecrets, name]
+  );
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    onChange(Array(newValue.length).fill("*").join(""));
+    debouncedSetSecrets(newValue);
+  };
   return /* @__PURE__ */ React.createElement(
     TextField,
     {
       id: title,
       label: title,
       "aria-describedby": title,
-      onChange: (e) => {
-        onChange(Array(e.target.value.length).fill("*").join(""));
-        setSecrets({ [name]: e.target.value });
-      },
-      value: secrets[name] ?? "",
+      onChange: handleChange,
+      value: localValue,
       type: "password",
       autoComplete: "off",
       required,

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

@@ -1 +1 @@
-{"version":3,"file":"SecretWidget.esm.js","sources":["../../../../src/next/components/SecretWidget/SecretWidget.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 { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';\nimport TextField from '@material-ui/core/TextField';\nimport React from 'react';\n\n/**\n * Secret Widget for overriding the default password input widget\n * @alpha\n */\nexport const SecretWidget = (\n  props: Pick<\n    WidgetProps,\n    'name' | 'onChange' | 'schema' | 'required' | 'disabled'\n  >,\n) => {\n  const { setSecrets, secrets } = useTemplateSecrets();\n  const {\n    name,\n    onChange,\n    schema: { title, minLength, maxLength },\n    required,\n    disabled,\n  } = props;\n\n  return (\n    <TextField\n      id={title}\n      label={title}\n      aria-describedby={title}\n      onChange={e => {\n        onChange(Array(e.target.value.length).fill('*').join(''));\n        setSecrets({ [name]: e.target.value });\n      }}\n      value={secrets[name] ?? ''}\n      type=\"password\"\n      autoComplete=\"off\"\n      required={required}\n      disabled={disabled}\n      inputProps={{\n        minLength,\n        maxLength,\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAyBa,MAAA,YAAA,GAAe,CAC1B,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,UAAA,EAAY,OAAQ,EAAA,GAAI,kBAAmB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAQ,EAAA,EAAE,KAAO,EAAA,SAAA,EAAW,SAAU,EAAA;AAAA,IACtC,QAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EACE,uBAAA,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,KAAA,CAAM,CAAE,CAAA,MAAA,CAAO,KAAM,CAAA,MAAM,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAE,IAAK,CAAA,EAAE,CAAC,CAAA;AACxD,QAAA,UAAA,CAAW,EAAE,CAAC,IAAI,GAAG,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,OACvC;AAAA,MACA,KAAA,EAAO,OAAQ,CAAA,IAAI,CAAK,IAAA,EAAA;AAAA,MACxB,IAAK,EAAA,UAAA;AAAA,MACL,YAAa,EAAA,KAAA;AAAA,MACb,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAY,EAAA;AAAA,QACV,SAAA;AAAA,QACA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SecretWidget.esm.js","sources":["../../../../src/next/components/SecretWidget/SecretWidget.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 { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';\nimport TextField from '@material-ui/core/TextField';\nimport React, { useMemo, useState } from 'react';\nimport debounce from 'lodash/debounce';\n\n/**\n * Secret Widget for overriding the default password input widget\n * @alpha\n */\nexport const SecretWidget = (\n  props: Pick<\n    WidgetProps,\n    'name' | 'onChange' | 'schema' | 'required' | 'disabled'\n  >,\n) => {\n  const { setSecrets, secrets } = useTemplateSecrets();\n  const {\n    name,\n    onChange,\n    schema: { title, minLength, maxLength },\n    required,\n    disabled,\n  } = props;\n\n  const [localValue, setLocalValue] = useState(secrets[name] ?? '');\n\n  // Memoize the debounced function so it persists across re-renders\n  const debouncedSetSecrets = useMemo(\n    () =>\n      debounce((value: string) => {\n        setSecrets({ [name]: value });\n      }, 300),\n    [setSecrets, name],\n  );\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setLocalValue(newValue);\n    onChange(Array(newValue.length).fill('*').join(''));\n    debouncedSetSecrets(newValue);\n  };\n\n  return (\n    <TextField\n      id={title}\n      label={title}\n      aria-describedby={title}\n      onChange={handleChange}\n      value={localValue}\n      type=\"password\"\n      autoComplete=\"off\"\n      required={required}\n      disabled={disabled}\n      inputProps={{\n        minLength,\n        maxLength,\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA0Ba,MAAA,YAAA,GAAe,CAC1B,KAIG,KAAA;AACH,EAAA,MAAM,EAAE,UAAA,EAAY,OAAQ,EAAA,GAAI,kBAAmB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAQ,EAAA,EAAE,KAAO,EAAA,SAAA,EAAW,SAAU,EAAA;AAAA,IACtC,QAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,CAAC,YAAY,aAAa,CAAA,GAAI,SAAS,OAAQ,CAAA,IAAI,KAAK,EAAE,CAAA;AAGhE,EAAA,MAAM,mBAAsB,GAAA,OAAA;AAAA,IAC1B,MACE,QAAS,CAAA,CAAC,KAAkB,KAAA;AAC1B,MAAA,UAAA,CAAW,EAAE,CAAC,IAAI,GAAG,OAAO,CAAA;AAAA,OAC3B,GAAG,CAAA;AAAA,IACR,CAAC,YAAY,IAAI;AAAA,GACnB;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,CAA2C,KAAA;AAC/D,IAAM,MAAA,QAAA,GAAW,EAAE,MAAO,CAAA,KAAA;AAC1B,IAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,IAAS,QAAA,CAAA,KAAA,CAAM,SAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAE,IAAK,CAAA,EAAE,CAAC,CAAA;AAClD,IAAA,mBAAA,CAAoB,QAAQ,CAAA;AAAA,GAC9B;AAEA,EACE,uBAAA,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,QAAU,EAAA,YAAA;AAAA,MACV,KAAO,EAAA,UAAA;AAAA,MACP,IAAK,EAAA,UAAA;AAAA,MACL,YAAa,EAAA,KAAA;AAAA,MACb,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAY,EAAA;AAAA,QACV,SAAA;AAAA,QACA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardLink.esm.js","sources":["../../../../src/next/components/TemplateCard/CardLink.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 { IconComponent } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React from 'react';\n\ninterface CardLinkProps {\n  icon: IconComponent;\n  text: string;\n  url: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  linkText: {\n    display: 'inline-flex',\n    alignItems: 'center',\n  },\n}));\n\nexport const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => {\n  const styles = useStyles();\n\n  return (\n    <div className={styles.linkText}>\n      <Icon fontSize=\"small\" />\n      <Link style={{ marginLeft: '8px' }} to={url}>\n        {text || url}\n      </Link>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA2BA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,aAAA;AAAA,IACT,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,WAAW,CAAC,EAAE,MAAM,IAAM,EAAA,IAAA,EAAM,KAAyB,KAAA;AACpE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,4BACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,UAAS,OAAQ,EAAA,CAAA,sCACtB,IAAK,EAAA,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,KAAA,IAAS,EAAI,EAAA,GAAA,EAAA,EACrC,IAAQ,IAAA,GACX,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CardLink.esm.js","sources":["../../../../src/next/components/TemplateCard/CardLink.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 { IconComponent } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React from 'react';\n\nexport interface CardLinkProps {\n  icon: IconComponent;\n  text: string;\n  url: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  linkText: {\n    display: 'inline-flex',\n    alignItems: 'center',\n  },\n}));\n\nexport const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => {\n  const styles = useStyles();\n\n  return (\n    <div className={styles.linkText}>\n      <Icon fontSize=\"small\" />\n      <Link style={{ marginLeft: '8px' }} to={url}>\n        {text || url}\n      </Link>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA2BA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,aAAA;AAAA,IACT,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,WAAW,CAAC,EAAE,MAAM,IAAM,EAAA,IAAA,EAAM,KAAyB,KAAA;AACpE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,4BACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,UAAS,OAAQ,EAAA,CAAA,sCACtB,IAAK,EAAA,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,KAAA,IAAS,EAAI,EAAA,GAAA,EAAA,EACrC,IAAQ,IAAA,GACX,CACF,CAAA;AAEJ;;;;"}

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

@@ -1,67 +1,31 @@
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
-import { MarkdownContent, UserIcon } from '@backstage/core-components';
-import { useAnalytics, useApp } from '@backstage/core-plugin-api';
-import { getEntityRelations, EntityRefLinks } from '@backstage/plugin-catalog-react';
-import Box from '@material-ui/core/Box';
+import { useAnalytics } from '@backstage/core-plugin-api';
+import { getEntityRelations } from '@backstage/plugin-catalog-react';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
-import Chip from '@material-ui/core/Chip';
 import Divider from '@material-ui/core/Divider';
-import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import LanguageIcon from '@material-ui/icons/Language';
 import React, { useCallback } from 'react';
 import { CardHeader } from './CardHeader.esm.js';
-import { CardLink } from './CardLink.esm.js';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';
+import { TemplateCardContent } from './TemplateCardContent.esm.js';
+import { TemplateCardTags } from './TemplateCardTags.esm.js';
+import { TemplateCardLinks } from './TemplateCardLinks.esm.js';
+import { TemplateCardActions } from './TemplateCardActions.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  box: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    display: "-webkit-box",
-    "-webkit-line-clamp": 10,
-    "-webkit-box-orient": "vertical"
-  },
-  markdown: {
-    /** to make the styles for React Markdown not leak into the description */
-    "& :first-child": {
-      margin: 0
-    }
-  },
-  label: {
-    color: theme.palette.text.secondary,
-    textTransform: "uppercase",
-    fontWeight: "bold",
-    letterSpacing: 0.5,
-    lineHeight: 1,
-    fontSize: "0.75rem"
-  },
-  footer: {
-    display: "flex",
-    justifyContent: "space-between",
-    flex: 1,
-    alignItems: "center"
-  },
-  ownedBy: {
-    display: "flex",
-    alignItems: "center",
-    flex: 1,
-    color: theme.palette.link
-  }
+const useStyles = makeStyles(() => ({
+  actionContainer: { padding: "16px", flex: 1, alignItems: "flex-end" }
 }));
 const TemplateCard = (props) => {
-  const { onSelected, template } = props;
+  const { additionalLinks, onSelected, template } = props;
   const styles = useStyles();
   const analytics = useAnalytics();
   const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
-  const app = useApp();
-  const iconResolver = (key) => key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;
   const hasTags = !!template.metadata.tags?.length;
-  const hasLinks = !!props.additionalLinks?.length || !!template.metadata.links?.length;
+  const hasLinks = !!additionalLinks?.length || !!template.metadata.links?.length;
   const displayDefaultDivider = !hasTags && !hasLinks;
   const { allowed: canCreateTask } = usePermission({
     permission: taskCreatePermission
@@ -70,47 +34,27 @@ const TemplateCard = (props) => {
     analytics.captureEvent("click", `Template has been opened`);
     onSelected?.(template);
   }, [analytics, onSelected, template]);
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { template }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Box, { className: styles.box }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { template, "data-testid": "template-card-header" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2, "data-testid": "template-card-content" }, /* @__PURE__ */ React.createElement(TemplateCardContent, { template }), displayDefaultDivider && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator" })), hasTags && /* @__PURE__ */ React.createElement(TemplateCardTags, { template }), hasLinks && /* @__PURE__ */ React.createElement(
+    TemplateCardLinks,
     {
-      className: styles.markdown,
-      content: template.metadata.description ?? "No description"
+      template,
+      additionalLinks
     }
-  ))), displayDefaultDivider && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator" })), hasTags && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator--tags" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, template.metadata.tags?.map((tag) => /* @__PURE__ */ React.createElement(Grid, { key: `grid-${tag}`, item: true }, /* @__PURE__ */ React.createElement(
-    Chip,
+  ))), /* @__PURE__ */ React.createElement(
+    CardActions,
     {
-      style: { margin: 0 },
-      size: "small",
-      label: tag,
-      key: tag
-    }
-  )))))), hasLinks && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator--links" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, props.additionalLinks?.map(({ icon, text, url }, index) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6, key: index }, /* @__PURE__ */ React.createElement(CardLink, { icon, text, url }))), template.metadata.links?.map(
-    ({ url, icon, title }, index) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6, key: index }, /* @__PURE__ */ React.createElement(
-      CardLink,
+      className: styles.actionContainer,
+      "data-testid": "template-card-actions"
+    },
+    /* @__PURE__ */ React.createElement(
+      TemplateCardActions,
       {
-        icon: iconResolver(icon),
-        text: title || url,
-        url
+        canCreateTask,
+        handleChoose,
+        ownedByRelations
       }
-    ))
-  )))))), /* @__PURE__ */ React.createElement(CardActions, { style: { padding: "16px", flex: 1, alignItems: "flex-end" } }, /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement("div", { className: styles.ownedBy }, ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UserIcon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(
-    EntityRefLinks,
-    {
-      style: { marginLeft: "8px" },
-      entityRefs: ownedByRelations,
-      defaultKind: "Group",
-      hideIcons: true
-    }
-  ))), canCreateTask ? /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "small",
-      variant: "outlined",
-      color: "primary",
-      onClick: handleChoose
-    },
-    "Choose"
-  ) : null)));
+    )
+  ));
 };
 
 export { TemplateCard };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateCard.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCard.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 { RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport { MarkdownContent, UserIcon } from '@backstage/core-components';\nimport {\n  IconComponent,\n  useAnalytics,\n  useApp,\n} from '@backstage/core-plugin-api';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Box from '@material-ui/core/Box';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Chip from '@material-ui/core/Chip';\nimport Divider from '@material-ui/core/Divider';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport LanguageIcon from '@material-ui/icons/Language';\nimport React, { useCallback } from 'react';\nimport { CardHeader } from './CardHeader';\nimport { CardLink } from './CardLink';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';\n\nconst useStyles = makeStyles<Theme>(theme => ({\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  label: {\n    color: theme.palette.text.secondary,\n    textTransform: 'uppercase',\n    fontWeight: 'bold',\n    letterSpacing: 0.5,\n    lineHeight: 1,\n    fontSize: '0.75rem',\n  },\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}));\n\n/**\n * The Props for the {@link TemplateCard} component\n * @alpha\n */\nexport interface TemplateCardProps {\n  template: TemplateEntityV1beta3;\n  additionalLinks?: {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n\n  onSelected?: (template: TemplateEntityV1beta3) => void;\n}\n\n/**\n * The `TemplateCard` component that is rendered in a list for each template\n * @alpha\n */\nexport const TemplateCard = (props: TemplateCardProps) => {\n  const { onSelected, template } = props;\n  const styles = useStyles();\n  const analytics = useAnalytics();\n  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);\n  const app = useApp();\n  const iconResolver = (key?: string): IconComponent =>\n    key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;\n  const hasTags = !!template.metadata.tags?.length;\n  const hasLinks =\n    !!props.additionalLinks?.length || !!template.metadata.links?.length;\n  const displayDefaultDivider = !hasTags && !hasLinks;\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n  const handleChoose = useCallback(() => {\n    analytics.captureEvent('click', `Template has been opened`);\n    onSelected?.(template);\n  }, [analytics, onSelected, template]);\n\n  return (\n    <Card>\n      <CardHeader template={template} />\n      <CardContent>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <Box className={styles.box}>\n              <MarkdownContent\n                className={styles.markdown}\n                content={template.metadata.description ?? 'No description'}\n              />\n            </Box>\n          </Grid>\n          {displayDefaultDivider && (\n            <Grid item xs={12}>\n              <Divider data-testid=\"template-card-separator\" />\n            </Grid>\n          )}\n          {hasTags && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--tags\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {template.metadata.tags?.map(tag => (\n                    <Grid key={`grid-${tag}`} item>\n                      <Chip\n                        style={{ margin: 0 }}\n                        size=\"small\"\n                        label={tag}\n                        key={tag}\n                      />\n                    </Grid>\n                  ))}\n                </Grid>\n              </Grid>\n            </>\n          )}\n          {hasLinks && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--links\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {props.additionalLinks?.map(({ icon, text, url }, index) => (\n                    <Grid className={styles.linkText} item xs={6} key={index}>\n                      <CardLink icon={icon} text={text} url={url} />\n                    </Grid>\n                  ))}\n                  {template.metadata.links?.map(\n                    ({ url, icon, title }, index) => (\n                      <Grid className={styles.linkText} item xs={6} key={index}>\n                        <CardLink\n                          icon={iconResolver(icon)}\n                          text={title || url}\n                          url={url}\n                        />\n                      </Grid>\n                    ),\n                  )}\n                </Grid>\n              </Grid>\n            </>\n          )}\n        </Grid>\n      </CardContent>\n      <CardActions style={{ padding: '16px', flex: 1, alignItems: 'flex-end' }}>\n        <div className={styles.footer}>\n          <div className={styles.ownedBy}>\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              onClick={handleChoose}\n            >\n              Choose\n            </Button>\n          ) : null}\n        </div>\n      </CardActions>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateCard.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCard.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 { RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport { IconComponent, useAnalytics } from '@backstage/core-plugin-api';\nimport { getEntityRelations } from '@backstage/plugin-catalog-react';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport React, { useCallback } from 'react';\nimport { CardHeader } from './CardHeader';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';\nimport { TemplateCardContent } from './TemplateCardContent';\nimport { TemplateCardTags } from './TemplateCardTags';\nimport { TemplateCardLinks } from './TemplateCardLinks';\nimport { TemplateCardActions } from './TemplateCardActions';\n\nconst useStyles = makeStyles<Theme>(() => ({\n  actionContainer: { padding: '16px', flex: 1, alignItems: 'flex-end' },\n}));\n\n/**\n * The Props for the {@link TemplateCard} component\n * @alpha\n */\nexport interface TemplateCardProps {\n  template: TemplateEntityV1beta3;\n  additionalLinks?: {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n  onSelected?: (template: TemplateEntityV1beta3) => void;\n}\n\n/**\n * The `TemplateCard` component that is rendered in a list for each template\n * @alpha\n */\nexport const TemplateCard = (props: TemplateCardProps) => {\n  const { additionalLinks, onSelected, template } = props;\n  const styles = useStyles();\n  const analytics = useAnalytics();\n  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);\n  const hasTags = !!template.metadata.tags?.length;\n  const hasLinks =\n    !!additionalLinks?.length || !!template.metadata.links?.length;\n  const displayDefaultDivider = !hasTags && !hasLinks;\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n  const handleChoose = useCallback(() => {\n    analytics.captureEvent('click', `Template has been opened`);\n    onSelected?.(template);\n  }, [analytics, onSelected, template]);\n\n  return (\n    <Card>\n      <CardHeader template={template} data-testid=\"template-card-header\" />\n      <CardContent>\n        <Grid container spacing={2} data-testid=\"template-card-content\">\n          <TemplateCardContent template={template} />\n          {displayDefaultDivider && (\n            <Grid item xs={12}>\n              <Divider data-testid=\"template-card-separator\" />\n            </Grid>\n          )}\n          {hasTags && <TemplateCardTags template={template} />}\n          {hasLinks && (\n            <TemplateCardLinks\n              template={template}\n              additionalLinks={additionalLinks}\n            />\n          )}\n        </Grid>\n      </CardContent>\n      <CardActions\n        className={styles.actionContainer}\n        data-testid=\"template-card-actions\"\n      >\n        <TemplateCardActions\n          canCreateTask={canCreateTask}\n          handleChoose={handleChoose}\n          ownedByRelations={ownedByRelations}\n        />\n      </CardActions>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmCA,MAAM,SAAA,GAAY,WAAkB,OAAO;AAAA,EACzC,iBAAiB,EAAE,OAAA,EAAS,QAAQ,IAAM,EAAA,CAAA,EAAG,YAAY,UAAW;AACtE,CAAE,CAAA,CAAA;AAoBW,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,eAAA,EAAiB,UAAY,EAAA,QAAA,EAAa,GAAA,KAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,gBAAA,GAAmB,kBAAmB,CAAA,QAAA,EAAU,iBAAiB,CAAA;AACvE,EAAA,MAAM,OAAU,GAAA,CAAC,CAAC,QAAA,CAAS,SAAS,IAAM,EAAA,MAAA;AAC1C,EAAM,MAAA,QAAA,GACJ,CAAC,CAAC,eAAA,EAAiB,UAAU,CAAC,CAAC,QAAS,CAAA,QAAA,CAAS,KAAO,EAAA,MAAA;AAC1D,EAAM,MAAA,qBAAA,GAAwB,CAAC,OAAA,IAAW,CAAC,QAAA;AAE3C,EAAA,MAAM,EAAE,OAAA,EAAS,aAAc,EAAA,GAAI,aAAc,CAAA;AAAA,IAC/C,UAAY,EAAA;AAAA,GACb,CAAA;AACD,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAU,SAAA,CAAA,YAAA,CAAa,SAAS,CAA0B,wBAAA,CAAA,CAAA;AAC1D,IAAA,UAAA,GAAa,QAAQ,CAAA;AAAA,GACpB,EAAA,CAAC,SAAW,EAAA,UAAA,EAAY,QAAQ,CAAC,CAAA;AAEpC,EAAA,2CACG,IACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,QAAoB,EAAA,aAAA,EAAY,wBAAuB,CACnE,kBAAA,KAAA,CAAA,aAAA,CAAC,WACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CAAG,EAAA,aAAA,EAAY,2CACrC,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,QAAoB,EAAA,CAAA,EACxC,yCACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,sBACZ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,aAAY,EAAA,yBAAA,EAA0B,CACjD,CAED,EAAA,OAAA,wCAAY,gBAAiB,EAAA,EAAA,QAAA,EAAoB,GACjD,QACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA;AAAA;AAAA,GAGN,CACF,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,eAAA;AAAA,MAClB,aAAY,EAAA;AAAA,KAAA;AAAA,oBAEZ,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA;AAAA;AACF,GAEJ,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,57 @@
+import { UserIcon } from '@backstage/core-components';
+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';
+
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    display: "flex",
+    justifyContent: "space-between",
+    flex: 1,
+    alignItems: "center"
+  },
+  ownedBy: {
+    display: "flex",
+    alignItems: "center",
+    flex: 1,
+    color: theme.palette.link
+  },
+  actionContainer: { padding: "16px", flex: 1, alignItems: "flex-end" }
+}));
+const TemplateCardActions = ({
+  canCreateTask,
+  handleChoose,
+  ownedByRelations
+}) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ React.createElement("div", { className: styles.footer, "data-testid": "template-card-actions--footer" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: styles.ownedBy,
+      "data-testid": "template-card-actions--ownedby"
+    },
+    ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UserIcon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(
+      EntityRefLinks,
+      {
+        style: { marginLeft: "8px" },
+        entityRefs: ownedByRelations,
+        defaultKind: "Group",
+        hideIcons: true
+      }
+    ))
+  ), canCreateTask ? /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "small",
+      variant: "outlined",
+      color: "primary",
+      "data-testid": "template-card-actions--create",
+      onClick: handleChoose
+    },
+    "Choose"
+  ) : null);
+};
+
+export { TemplateCardActions };
+//# sourceMappingURL=TemplateCardActions.esm.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,34 @@
+import { MarkdownContent } from '@backstage/core-components';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import React from 'react';
+
+const useStyles = makeStyles(() => ({
+  box: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    "-webkit-line-clamp": 10,
+    "-webkit-box-orient": "vertical"
+  },
+  markdown: {
+    /** to make the styles for React Markdown not leak into the description */
+    "& :first-child": {
+      margin: 0
+    }
+  }
+}));
+const TemplateCardContent = ({ template }) => {
+  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"
+    }
+  )));
+};
+
+export { TemplateCardContent };
+//# sourceMappingURL=TemplateCardContent.esm.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,48 @@
+import { useApp } from '@backstage/core-plugin-api';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import LanguageIcon from '@material-ui/icons/Language';
+import React from 'react';
+import { CardLink } from './CardLink.esm.js';
+
+const useStyles = makeStyles({});
+const TemplateCardLinks = ({
+  template,
+  additionalLinks
+}) => {
+  const styles = useStyles();
+  const app = useApp();
+  const iconResolver = (key) => key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator--links" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2, "data-testid": "template-card-links" }, additionalLinks?.map(({ icon, text, url }, index) => /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      className: styles.linkText,
+      item: true,
+      xs: 6,
+      key: index,
+      "data-testid": "template-card-links--item"
+    },
+    /* @__PURE__ */ React.createElement(CardLink, { icon, text, url })
+  )), template.metadata.links?.map(({ url, icon, title }, index) => /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      className: styles.linkText,
+      item: true,
+      xs: 6,
+      key: index,
+      "data-testid": "template-card-links--metalink"
+    },
+    /* @__PURE__ */ React.createElement(
+      CardLink,
+      {
+        icon: iconResolver(icon),
+        text: title || url,
+        url
+      }
+    )
+  )))));
+};
+
+export { TemplateCardLinks };
+//# sourceMappingURL=TemplateCardLinks.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateCardLinks.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCardLinks.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 { IconComponent, useApp } from '@backstage/core-plugin-api';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport LanguageIcon from '@material-ui/icons/Language';\nimport React from 'react';\nimport { CardLink } from './CardLink';\n\nconst useStyles = makeStyles<Theme>({});\n\n/**\n * The Props for the {@link TemplateCardLinks} component\n * @alpha\n */\nexport interface TemplateCardLinksProps {\n  template: TemplateEntityV1beta3;\n  additionalLinks?: {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n}\nexport const TemplateCardLinks = ({\n  template,\n  additionalLinks,\n}: TemplateCardLinksProps) => {\n  const styles = useStyles();\n  const app = useApp();\n  const iconResolver = (key?: string): IconComponent =>\n    key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;\n  return (\n    <>\n      <Grid item xs={12}>\n        <Divider data-testid=\"template-card-separator--links\" />\n      </Grid>\n      <Grid item xs={12}>\n        <Grid container spacing={2} data-testid=\"template-card-links\">\n          {additionalLinks?.map(({ icon, text, url }, index) => (\n            <Grid\n              className={styles.linkText}\n              item\n              xs={6}\n              key={index}\n              data-testid=\"template-card-links--item\"\n            >\n              <CardLink icon={icon} text={text} url={url} />\n            </Grid>\n          ))}\n          {template.metadata.links?.map(({ url, icon, title }, index) => (\n            <Grid\n              className={styles.linkText}\n              item\n              xs={6}\n              key={index}\n              data-testid=\"template-card-links--metalink\"\n            >\n              <CardLink\n                icon={iconResolver(icon)}\n                text={title || url}\n                url={url}\n              />\n            </Grid>\n          ))}\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,SAAA,GAAY,UAAkB,CAAA,EAAE,CAAA;AAc/B,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAM,MAAA,YAAA,GAAe,CAAC,GACpB,KAAA,GAAA,GAAM,IAAI,aAAc,CAAA,GAAG,KAAK,YAAe,GAAA,YAAA;AACjD,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,eAAY,gCAAiC,EAAA,CACxD,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,sCACZ,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,OAAA,EAAS,GAAG,aAAY,EAAA,qBAAA,EAAA,EACrC,eAAiB,EAAA,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,IAAM,EAAA,GAAA,IAAO,KAC1C,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB,IAAI,EAAA,IAAA;AAAA,MACJ,EAAI,EAAA,CAAA;AAAA,MACJ,GAAK,EAAA,KAAA;AAAA,MACL,aAAY,EAAA;AAAA,KAAA;AAAA,oBAEX,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,IAAY,EAAA,IAAA,EAAY,GAAU,EAAA;AAAA,GAE/C,CAAA,EACA,QAAS,CAAA,QAAA,CAAS,KAAO,EAAA,GAAA,CAAI,CAAC,EAAE,GAAK,EAAA,IAAA,EAAM,KAAM,EAAA,EAAG,KACnD,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB,IAAI,EAAA,IAAA;AAAA,MACJ,EAAI,EAAA,CAAA;AAAA,MACJ,GAAK,EAAA,KAAA;AAAA,MACL,aAAY,EAAA;AAAA,KAAA;AAAA,oBAEZ,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,aAAa,IAAI,CAAA;AAAA,QACvB,MAAM,KAAS,IAAA,GAAA;AAAA,QACf;AAAA;AAAA;AACF,GAEH,CACH,CACF,CACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,26 @@
+import Chip from '@material-ui/core/Chip';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import React from 'react';
+
+const TemplateCardTags = ({ template }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator--tags" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2, "data-testid": "template-card-tags" }, template.metadata.tags?.map((tag) => /* @__PURE__ */ React.createElement(
+  Grid,
+  {
+    key: `grid-${tag}`,
+    item: true,
+    "data-testid": `template-card-tag-item-${tag}`
+  },
+  /* @__PURE__ */ React.createElement(
+    Chip,
+    {
+      style: { margin: 0 },
+      size: "small",
+      "data-testid": `template-card-tag-chip-${tag}`,
+      label: tag,
+      key: tag
+    }
+  )
+)))));
+
+export { TemplateCardTags };
+//# sourceMappingURL=TemplateCardTags.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateCardTags.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCardTags.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 type { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Chip from '@material-ui/core/Chip';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport React from 'react';\n\n/**\n * The Props for the {@link TemplateCardTags} component\n * @alpha\n */\nexport interface TemplateCardTagsProps {\n  template: TemplateEntityV1beta3;\n}\nexport const TemplateCardTags = ({ template }: TemplateCardTagsProps) => (\n  <>\n    <Grid item xs={12}>\n      <Divider data-testid=\"template-card-separator--tags\" />\n    </Grid>\n    <Grid item xs={12}>\n      <Grid container spacing={2} data-testid=\"template-card-tags\">\n        {template.metadata.tags?.map(tag => (\n          <Grid\n            key={`grid-${tag}`}\n            item\n            data-testid={`template-card-tag-item-${tag}`}\n          >\n            <Chip\n              style={{ margin: 0 }}\n              size=\"small\"\n              data-testid={`template-card-tag-chip-${tag}`}\n              label={tag}\n              key={tag}\n            />\n          </Grid>\n        ))}\n      </Grid>\n    </Grid>\n  </>\n);\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,mBAAmB,CAAC,EAAE,QAAS,EAAA,+EAEvC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,aAAA,EAAY,iCAAgC,CACvD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,OAAS,EAAA,CAAA,EAAG,eAAY,oBACrC,EAAA,EAAA,QAAA,CAAS,QAAS,CAAA,IAAA,EAAM,IAAI,CAC3B,GAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACC,GAAA,EAAK,QAAQ,GAAG,CAAA,CAAA;AAAA,IAChB,IAAI,EAAA,IAAA;AAAA,IACJ,aAAA,EAAa,0BAA0B,GAAG,CAAA;AAAA,GAAA;AAAA,kBAE1C,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,MACnB,IAAK,EAAA,OAAA;AAAA,MACL,aAAA,EAAa,0BAA0B,GAAG,CAAA,CAAA;AAAA,MAC1C,KAAO,EAAA,GAAA;AAAA,MACP,GAAK,EAAA;AAAA;AAAA;AAET,CACD,CACH,CACF,CACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.14.2-next.1",
+  "version": "1.14.2",
   "description": "A frontend library that helps other Backstage plugins interact with the Scaffolder",
   "backstage": {
     "role": "web-library",
@@ -66,17 +66,17 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "1.9.0-next.1",
-    "@backstage/catalog-model": "1.7.1",
-    "@backstage/core-components": "0.16.2-next.1",
-    "@backstage/core-plugin-api": "1.10.1",
-    "@backstage/frontend-plugin-api": "0.9.3-next.1",
-    "@backstage/plugin-catalog-react": "1.14.3-next.1",
-    "@backstage/plugin-permission-react": "0.4.28",
-    "@backstage/plugin-scaffolder-common": "1.5.8-next.0",
-    "@backstage/theme": "0.6.3-next.0",
-    "@backstage/types": "1.2.0",
-    "@backstage/version-bridge": "1.0.10",
+    "@backstage/catalog-client": "^1.9.0",
+    "@backstage/catalog-model": "^1.7.2",
+    "@backstage/core-components": "^0.16.2",
+    "@backstage/core-plugin-api": "^1.10.2",
+    "@backstage/frontend-plugin-api": "^0.9.3",
+    "@backstage/plugin-catalog-react": "^1.15.0",
+    "@backstage/plugin-permission-react": "^0.4.29",
+    "@backstage/plugin-scaffolder-common": "^1.5.8",
+    "@backstage/theme": "^0.6.3",
+    "@backstage/types": "^1.2.0",
+    "@backstage/version-bridge": "^1.0.10",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -102,12 +102,12 @@
     "zod-to-json-schema": "^3.20.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.29.3-next.1",
-    "@backstage/core-app-api": "1.15.3-next.0",
-    "@backstage/plugin-catalog": "1.25.2-next.1",
-    "@backstage/plugin-catalog-common": "1.1.1",
-    "@backstage/plugin-permission-common": "0.8.2",
-    "@backstage/test-utils": "1.7.3-next.0",
+    "@backstage/cli": "^0.29.4",
+    "@backstage/core-app-api": "^1.15.3",
+    "@backstage/plugin-catalog": "^1.26.0",
+    "@backstage/plugin-catalog-common": "^1.1.2",
+    "@backstage/plugin-permission-common": "^0.8.3",
+    "@backstage/test-utils": "^1.7.3",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",