Merge pull request #9855 from backstage/blam/fix-scaffolder-ui-schema-props

🧹 Removing the component exports for `CustomFieldExtensions` in `plugin-scaffolder`

.changeset/swift-roses-hug.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': minor
+---
+
+**BREAKING**: Removing the exports of the raw components that back the `CustomFieldExtensions`.

plugins/scaffolder/api-report.md

@@ -28,15 +28,13 @@ import { ScmIntegrationRegistry } from '@backstage/integration';
 import { TaskSpec } from '@backstage/plugin-scaffolder-common';
 import { TemplateEntityV1beta2 } from '@backstage/plugin-scaffolder-common';
 
-// Warning: (ae-missing-release-tag) "createScaffolderFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export function createScaffolderFieldExtension<
   TReturnValue = unknown,
   TInputProps = unknown,
 >(
   options: FieldExtensionOptions<TReturnValue, TInputProps>,
-): Extension<() => null>;
+): Extension<FieldExtensionComponent<TReturnValue, TInputProps>>;
 
 // @public
 export type CustomFieldValidator<TFieldReturnValue> = (
@@ -50,19 +48,18 @@ export type CustomFieldValidator<TFieldReturnValue> = (
 // Warning: (ae-missing-release-tag) "EntityNamePickerFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const EntityNamePickerFieldExtension: () => null;
-
-// Warning: (ae-missing-release-tag) "EntityPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public
-export const EntityPicker: (
-  props: FieldExtensionComponentProps<string, EntityPickerUiOptions>,
-) => JSX.Element;
+export const EntityNamePickerFieldExtension: FieldExtensionComponent<
+  string,
+  {}
+>;
 
 // Warning: (ae-missing-release-tag) "EntityPickerFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const EntityPickerFieldExtension: () => null;
+export const EntityPickerFieldExtension: FieldExtensionComponent<
+  string,
+  EntityPickerUiOptions
+>;
 
 // Warning: (ae-missing-release-tag) "EntityPickerUiOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -76,15 +73,11 @@ export interface EntityPickerUiOptions {
   defaultKind?: string;
 }
 
-// Warning: (ae-missing-release-tag) "EntityTagsPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
-export const EntityTagsPicker: (
-  props: FieldExtensionComponentProps<string[], EntityTagsPickerUiOptions>,
-) => JSX.Element;
-
-// @public
-export const EntityTagsPickerFieldExtension: () => null;
+export const EntityTagsPickerFieldExtension: FieldExtensionComponent<
+  string[],
+  EntityTagsPickerUiOptions
+>;
 
 // Warning: (ae-missing-release-tag) "EntityTagsPickerUiOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -100,6 +93,9 @@ export interface EntityTagsPickerUiOptions {
 // @public
 export const FavouriteTemplate: (props: Props) => JSX.Element;
 
+// @public
+export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null;
+
 // @public
 export interface FieldExtensionComponentProps<
   TFieldReturnValue,
@@ -114,10 +110,12 @@ export interface FieldExtensionComponentProps<
 // @public
 export type FieldExtensionOptions<
   TFieldReturnValue = unknown,
-  TProps = FieldProps<TFieldReturnValue>,
+  TInputProps = unknown,
 > = {
   name: string;
-  component: (props: TProps) => JSX.Element | null;
+  component: (
+    props: FieldExtensionComponentProps<TFieldReturnValue, TInputProps>,
+  ) => JSX.Element | null;
   validation?: CustomFieldValidator<TFieldReturnValue>;
 };
 
@@ -153,17 +151,13 @@ export type LogEvent = {
   taskId: string;
 };
 
-// Warning: (ae-missing-release-tag) "OwnedEntityPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public
-export const OwnedEntityPicker: (
-  props: FieldExtensionComponentProps<string, OwnedEntityPickerUiOptions>,
-) => JSX.Element;
-
 // Warning: (ae-missing-release-tag) "OwnedEntityPickerFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const OwnedEntityPickerFieldExtension: () => null;
+export const OwnedEntityPickerFieldExtension: FieldExtensionComponent<
+  string,
+  OwnedEntityPickerUiOptions
+>;
 
 // Warning: (ae-missing-release-tag) "OwnedEntityPickerUiOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -175,17 +169,13 @@ export interface OwnedEntityPickerUiOptions {
   defaultKind?: string;
 }
 
-// Warning: (ae-missing-release-tag) "OwnerPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public
-export const OwnerPicker: (
-  props: FieldExtensionComponentProps<string, OwnerPickerUiOptions>,
-) => JSX.Element;
-
 // Warning: (ae-missing-release-tag) "OwnerPickerFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const OwnerPickerFieldExtension: () => null;
+export const OwnerPickerFieldExtension: FieldExtensionComponent<
+  string,
+  OwnerPickerUiOptions
+>;
 
 // Warning: (ae-missing-release-tag) "OwnerPickerUiOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -206,17 +196,13 @@ export const repoPickerValidation: (
   },
 ) => void;
 
-// Warning: (ae-missing-release-tag) "RepoUrlPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public
-export const RepoUrlPicker: (
-  props: FieldExtensionComponentProps<string, RepoUrlPickerUiOptions>,
-) => JSX.Element;
-
 // Warning: (ae-missing-release-tag) "RepoUrlPickerFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const RepoUrlPickerFieldExtension: () => null;
+export const RepoUrlPickerFieldExtension: FieldExtensionComponent<
+  string,
+  RepoUrlPickerUiOptions
+>;
 
 // Warning: (ae-missing-release-tag) "RepoUrlPickerUiOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -313,9 +299,7 @@ export class ScaffolderClient implements ScaffolderApi {
   streamLogs(options: ScaffolderStreamLogsOptions): Observable<LogEvent>;
 }
 
-// Warning: (ae-missing-release-tag) "ScaffolderFieldExtensions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export const ScaffolderFieldExtensions: React_2.ComponentType;
 
 // Warning: (ae-missing-release-tag) "ScaffolderGetIntegrationsListOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -109,7 +109,7 @@ export const createValidator = (
 export const TemplatePage = ({
   customFieldExtensions = [],
 }: {
-  customFieldExtensions?: FieldExtensionOptions[];
+  customFieldExtensions?: FieldExtensionOptions<any, any>[];
 }) => {
   const apiHolder = useApiHolder();
   const secretsContext = useContext(SecretsContext);

plugins/scaffolder/src/components/fields/EntityNamePicker/index.ts

@@ -13,5 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { EntityNamePicker } from './EntityNamePicker';
 export { entityNamePickerValidation } from './validation';

plugins/scaffolder/src/components/fields/EntityPicker/index.ts

@@ -13,5 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { EntityPicker } from './EntityPicker';
 export type { EntityPickerUiOptions } from './EntityPicker';

plugins/scaffolder/src/components/fields/EntityTagsPicker/index.ts

@@ -13,5 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { EntityTagsPicker } from './EntityTagsPicker';
 export type { EntityTagsPickerUiOptions } from './EntityTagsPicker';

plugins/scaffolder/src/components/fields/OwnedEntityPicker/index.ts

@@ -13,5 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { OwnedEntityPicker } from './OwnedEntityPicker';
 export type { OwnedEntityPickerUiOptions } from './OwnedEntityPicker';

plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { EntityPicker } from '../EntityPicker';
+import { EntityPicker } from '../EntityPicker/EntityPicker';
 import { FieldExtensionComponentProps } from '../../../extensions';
 
 export interface OwnerPickerUiOptions {

plugins/scaffolder/src/components/fields/OwnerPicker/index.ts

@@ -13,5 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { OwnerPicker } from './OwnerPicker';
 export type { OwnerPickerUiOptions } from './OwnerPicker';

plugins/scaffolder/src/components/fields/RepoUrlPicker/index.ts

@@ -13,6 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { RepoUrlPicker } from './RepoUrlPicker';
 export type { RepoUrlPickerUiOptions } from './RepoUrlPicker';
 export { repoPickerValidation } from './validation';

plugins/scaffolder/src/extensions/default.ts

@@ -13,46 +13,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { EntityPicker } from '../components/fields/EntityPicker';
-import {
-  EntityNamePicker,
-  entityNamePickerValidation,
-} from '../components/fields/EntityNamePicker';
-import { EntityTagsPicker } from '../components/fields/EntityTagsPicker';
-import { OwnerPicker } from '../components/fields/OwnerPicker';
-import {
-  repoPickerValidation,
-  RepoUrlPicker,
-} from '../components/fields/RepoUrlPicker';
-import { FieldExtensionOptions } from './types';
-import { OwnedEntityPicker } from '../components/fields/OwnedEntityPicker';
+import { EntityPicker } from '../components/fields/EntityPicker/EntityPicker';
+import { EntityNamePicker } from '../components/fields/EntityNamePicker/EntityNamePicker';
+import { entityNamePickerValidation } from '../components/fields/EntityNamePicker/validation';
+import { EntityTagsPicker } from '../components/fields/EntityTagsPicker/EntityTagsPicker';
+import { OwnerPicker } from '../components/fields/OwnerPicker/OwnerPicker';
+import { RepoUrlPicker } from '../components/fields/RepoUrlPicker/RepoUrlPicker';
+import { repoPickerValidation } from '../components/fields/RepoUrlPicker/validation';
+import { OwnedEntityPicker } from '../components/fields/OwnedEntityPicker/OwnedEntityPicker';
 
-export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS: FieldExtensionOptions<any>[] =
-  [
-    {
-      component: EntityPicker,
-      name: 'EntityPicker',
-    },
-    {
-      component: EntityNamePicker,
-      name: 'EntityNamePicker',
-      validation: entityNamePickerValidation,
-    },
-    {
-      component: EntityTagsPicker,
-      name: 'EntityTagsPicker',
-    },
-    {
-      component: RepoUrlPicker,
-      name: 'RepoUrlPicker',
-      validation: repoPickerValidation,
-    },
-    {
-      component: OwnerPicker,
-      name: 'OwnerPicker',
-    },
-    {
-      component: OwnedEntityPicker,
-      name: 'OwnedEntityPicker',
-    },
-  ];
+export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
+  {
+    component: EntityPicker,
+    name: 'EntityPicker',
+  },
+  {
+    component: EntityNamePicker,
+    name: 'EntityNamePicker',
+    validation: entityNamePickerValidation,
+  },
+  {
+    component: EntityTagsPicker,
+    name: 'EntityTagsPicker',
+  },
+  {
+    component: RepoUrlPicker,
+    name: 'RepoUrlPicker',
+    validation: repoPickerValidation,
+  },
+  {
+    component: OwnerPicker,
+    name: 'OwnerPicker',
+  },
+  {
+    component: OwnedEntityPicker,
+    name: 'OwnedEntityPicker',
+  },
+];

plugins/scaffolder/src/extensions/index.tsx

@@ -25,14 +25,24 @@ import { Extension, attachComponentData } from '@backstage/core-plugin-api';
 export const FIELD_EXTENSION_WRAPPER_KEY = 'scaffolder.extensions.wrapper.v1';
 export const FIELD_EXTENSION_KEY = 'scaffolder.extensions.field.v1';
 
+/**
+ * A type used to wrap up the FieldExtension to embed the ReturnValue and the InputProps
+ *
+ * @public
+ */
+export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null;
+
+/**
+ * Method for creating field extensions that can be used in the scaffolder
+ * frontend form.
+ * @public
+ */
 export function createScaffolderFieldExtension<
   TReturnValue = unknown,
   TInputProps = unknown,
 >(
   options: FieldExtensionOptions<TReturnValue, TInputProps>,
-  // TODO: need know how to embed these types nicely so the api report looks nice.
-  // then we can remove the export of the components
-): Extension<() => null> {
+): Extension<FieldExtensionComponent<TReturnValue, TInputProps>> {
   return {
     expose() {
       const FieldExtensionDataHolder: any = () => null;
@@ -48,6 +58,11 @@ export function createScaffolderFieldExtension<
   };
 }
 
+/**
+ * The Wrapping component for defining fields extensions inside
+ *
+ * @public
+ */
 export const ScaffolderFieldExtensions: React.ComponentType =
   (): JSX.Element | null => null;
 

plugins/scaffolder/src/extensions/types.ts

@@ -35,10 +35,12 @@ export type CustomFieldValidator<TFieldReturnValue> = (
  */
 export type FieldExtensionOptions<
   TFieldReturnValue = unknown,
-  TProps = FieldProps<TFieldReturnValue>,
+  TInputProps = unknown,
 > = {
   name: string;
-  component: (props: TProps) => JSX.Element | null;
+  component: (
+    props: FieldExtensionComponentProps<TFieldReturnValue, TInputProps>,
+  ) => JSX.Element | null;
   validation?: CustomFieldValidator<TFieldReturnValue>;
 };
 

plugins/scaffolder/src/index.ts

@@ -44,6 +44,7 @@ export type {
   CustomFieldValidator,
   FieldExtensionOptions,
   FieldExtensionComponentProps,
+  FieldExtensionComponent,
 } from './extensions';
 export {
   EntityPickerFieldExtension,

plugins/scaffolder/src/plugin.ts

@@ -16,16 +16,12 @@
 
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 import { scaffolderApiRef, ScaffolderClient } from './api';
-import { EntityPicker } from './components/fields/EntityPicker';
-import {
-  entityNamePickerValidation,
-  EntityNamePicker,
-} from './components/fields/EntityNamePicker';
-import { OwnerPicker } from './components/fields/OwnerPicker';
-import {
-  repoPickerValidation,
-  RepoUrlPicker,
-} from './components/fields/RepoUrlPicker';
+import { EntityPicker } from './components/fields/EntityPicker/EntityPicker';
+import { entityNamePickerValidation } from './components/fields/EntityNamePicker';
+import { EntityNamePicker } from './components/fields/EntityNamePicker/EntityNamePicker';
+import { OwnerPicker } from './components/fields/OwnerPicker/OwnerPicker';
+import { repoPickerValidation } from './components/fields/RepoUrlPicker';
+import { RepoUrlPicker } from './components/fields/RepoUrlPicker/RepoUrlPicker';
 import { createScaffolderFieldExtension } from './extensions';
 import { registerComponentRouteRef, rootRouteRef } from './routes';
 import {
@@ -35,8 +31,8 @@ import {
   discoveryApiRef,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
-import { OwnedEntityPicker } from './components/fields/OwnedEntityPicker';
-import { EntityTagsPicker } from './components/fields/EntityTagsPicker';
+import { OwnedEntityPicker } from './components/fields/OwnedEntityPicker/OwnedEntityPicker';
+import { EntityTagsPicker } from './components/fields/EntityTagsPicker/EntityTagsPicker';
 
 export const scaffolderPlugin = createPlugin({
   id: 'scaffolder',