chore: added some deprecations and fixing some import structure

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/api-report.md

@@ -20,9 +20,9 @@ import { FieldValidation } from '@rjsf/core';
 import { IconButton } from '@material-ui/core';
 import { JsonObject } from '@backstage/types';
 import { JSONSchema7 } from 'json-schema';
+import { JsonValue } from '@backstage/types';
 import { Observable } from '@backstage/types';
 import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { ScmIntegrationRegistry } from '@backstage/integration';
 import { TaskSpec } from '@backstage/plugin-scaffolder-common';
@@ -238,6 +238,31 @@ export interface RepoUrlPickerUiOptions {
   };
 }
 
+// Warning: (ae-missing-release-tag) "RouterProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type RouterProps = {
+  TemplateCardComponent?:
+    | ComponentType<{
+        template: TemplateEntityV1beta2;
+      }>
+    | undefined;
+  TaskPageComponent?: ComponentType<{}>;
+  components?: {
+    TemplateCardComponent?:
+      | ComponentType<{
+          template: TemplateEntityV1beta2;
+        }>
+      | undefined;
+    TaskPageComponent?: ComponentType<{}>;
+  };
+  groups?: Array<{
+    title?: string;
+    titleComponent?: React_2.ReactNode;
+    filter: (entity: Entity) => boolean;
+  }>;
+};
+
 // @public
 export interface ScaffolderApi {
   // (undocumented)
@@ -316,25 +341,7 @@ export interface ScaffolderGetIntegrationsListResponse {
 // Warning: (ae-missing-release-tag) "ScaffolderPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const ScaffolderPage: ({
-  TemplateCardComponent,
-  TaskPageComponent,
-  groups,
-}: {
-  TemplateCardComponent?:
-    | ComponentType<{
-        template: TemplateEntityV1beta2;
-      }>
-    | undefined;
-  TaskPageComponent?: ComponentType<{}> | undefined;
-  groups?:
-    | {
-        title?: string | undefined;
-        titleComponent?: ReactNode;
-        filter: (entity: Entity) => boolean;
-      }[]
-    | undefined;
-}) => JSX.Element;
+export const ScaffolderPage: (props: RouterProps) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "scaffolderPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -357,7 +364,7 @@ export interface ScaffolderScaffoldOptions {
   // (undocumented)
   templateRef: string;
   // (undocumented)
-  values: Record<string, any>;
+  values: Record<string, JsonValue>;
 }
 
 // Warning: (ae-missing-release-tag) "ScaffolderScaffoldResponse" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/scaffolder/src/components/Router.tsx

@@ -32,11 +32,20 @@ import {
 } from '../extensions';
 import { useElementFilter } from '@backstage/core-plugin-api';
 
-type RouterProps = {
+export type RouterProps = {
+  /** @deprecated use components.TemplateCardComponent instead */
   TemplateCardComponent?:
     | ComponentType<{ template: TemplateEntityV1beta2 }>
     | undefined;
+  /** @deprecated use component.TaskPageComponent instead */
   TaskPageComponent?: ComponentType<{}>;
+
+  components?: {
+    TemplateCardComponent?:
+      | ComponentType<{ template: TemplateEntityV1beta2 }>
+      | undefined;
+    TaskPageComponent?: ComponentType<{}>;
+  };
   groups?: Array<{
     title?: string;
     titleComponent?: React.ReactNode;
@@ -44,13 +53,26 @@ type RouterProps = {
   }>;
 };
 
-export const Router = ({
-  TemplateCardComponent,
-  TaskPageComponent,
-  groups,
-}: RouterProps) => {
+export const Router = (props: RouterProps) => {
+  const {
+    TemplateCardComponent: legacyTemplateCardComponent,
+    TaskPageComponent: legacyTaskPageComponent,
+    groups,
+    components = {},
+  } = props;
+
+  if (legacyTemplateCardComponent || legacyTaskPageComponent) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "DEPRECATION: 'TemplateCardComponent' and 'TaskPageComponent' are deprecated when calling the 'ScaffolderPage'. Use 'components' instead.",
+    );
+  }
+
+  const { TemplateCardComponent, TaskPageComponent } = components;
+
   const outlet = useOutlet();
-  const TaskPageElement = TaskPageComponent || TaskPage;
+  const TaskPageElement =
+    TaskPageComponent ?? legacyTaskPageComponent ?? TaskPage;
 
   const customFieldExtensions = useElementFilter(outlet, elements =>
     elements
@@ -78,8 +100,10 @@ export const Router = ({
         path="/"
         element={
           <ScaffolderPage
-            TemplateCardComponent={TemplateCardComponent}
             groups={groups}
+            TemplateCardComponent={
+              TemplateCardComponent ?? legacyTemplateCardComponent
+            }
           />
         }
       />

plugins/scaffolder/src/components/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2022 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.
+ */
+export * from './fields';
+export type { RepoUrlPickerUiOptions } from './fields';
+export { FavouriteTemplate } from './FavouriteTemplate';
+export { TemplateList } from './TemplateList';
+export type { TemplateListProps } from './TemplateList';
+export { TemplateTypePicker } from './TemplateTypePicker';
+export * from './secrets';
+export { TaskPage } from './TaskPage';
+export type { RouterProps } from './Router';

plugins/scaffolder/src/extensions/index.tsx

@@ -49,6 +49,7 @@ export function createScaffolderFieldExtension<
 }
 
 export const ScaffolderFieldExtensions: React.ComponentType = () => null;
+
 attachComponentData(
   ScaffolderFieldExtensions,
   FIELD_EXTENSION_WRAPPER_KEY,

plugins/scaffolder/src/index.ts

@@ -55,12 +55,5 @@ export {
   ScaffolderPage,
   scaffolderPlugin,
 } from './plugin';
-export * from './components/fields';
-export type { RepoUrlPickerUiOptions } from './components/fields';
-export { FavouriteTemplate } from './components/FavouriteTemplate';
-export { TemplateList } from './components/TemplateList';
-export type { TemplateListProps } from './components/TemplateList';
-export { TemplateTypePicker } from './components/TemplateTypePicker';
-export * from './components/secrets';
-export { TaskPage } from './components/TaskPage';
+export * from './components';
 export type { TaskPageProps } from './components/TaskPage';

plugins/scaffolder/src/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { TaskSpec } from '@backstage/plugin-scaffolder-common';
-import { JsonObject, Observable } from '@backstage/types';
+import { JsonObject, JsonValue, Observable } from '@backstage/types';
 import { JSONSchema7 } from 'json-schema';
 
 export type ScaffolderTaskStatus =
@@ -82,7 +82,7 @@ export type LogEvent = {
 
 export interface ScaffolderScaffoldOptions {
   templateRef: string;
-  values: Record<string, any>;
+  values: Record<string, JsonValue>;
   secrets?: Record<string, string>;
 }