Expose styles for TemplateEditor, TemplateFormPreviewer and CustomFieldExplorer

Signed-off-by: Carl-Erik Bergström <cbergstrom@spotify.com>

.changeset/few-icons-end.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': minor
+---
+
+Expose styles for TemplateEditor, TemplateFormPreviewer and CustomFieldExplorer

plugins/scaffolder/api-report-alpha.md

@@ -110,6 +110,28 @@ export type FormProps = Pick<
   'transformErrors' | 'noHtml5Validate'
 >;
 
+// @public (undocumented)
+export type ScaffolderCustomFieldExplorerClassKey =
+  | 'root'
+  | 'controls'
+  | 'fieldForm'
+  | 'preview';
+
+// @public (undocumented)
+export type ScaffolderTemplateEditorClassKey =
+  | 'root'
+  | 'browser'
+  | 'editor'
+  | 'preview'
+  | 'results';
+
+// @public (undocumented)
+export type ScaffolderTemplateFormPreviewerClassKey =
+  | 'root'
+  | 'controls'
+  | 'textArea'
+  | 'preview';
+
 // @alpha (undocumented)
 export const scaffolderTranslationRef: TranslationRef<
   'scaffolder',
@@ -206,10 +228,10 @@ export const scaffolderTranslationRef: TranslationRef<
     readonly 'templateEditorPage.dryRunResultsView.tab.log': 'Log';
     readonly 'templateEditorPage.dryRunResultsView.tab.files': 'Files';
     readonly 'templateEditorPage.taskStatusStepper.skippedStepTitle': 'Skipped';
-    readonly 'templateEditorPage.customFieldExplorer.selectFieldLabel': 'Choose Custom Field Extension';
+    readonly 'templateEditorPage.customFieldExplorer.preview.title': 'Example Template Spec';
     readonly 'templateEditorPage.customFieldExplorer.fieldForm.title': 'Field Options';
     readonly 'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle': 'Apply';
-    readonly 'templateEditorPage.customFieldExplorer.preview.title': 'Example Template Spec';
+    readonly 'templateEditorPage.customFieldExplorer.selectFieldLabel': 'Choose Custom Field Extension';
     readonly 'templateEditorPage.templateEditorBrowser.closeConfirmMessage': 'Are you sure? Unsaved changes will be lost';
     readonly 'templateEditorPage.templateEditorBrowser.saveIconTooltip': 'Save all files';
     readonly 'templateEditorPage.templateEditorBrowser.reloadIconTooltip': 'Reload directory';

plugins/scaffolder/src/alpha.tsx

@@ -49,6 +49,9 @@ export {
   type FormProps,
   type TemplateListPageProps,
   type TemplateWizardPageProps,
+  type ScaffolderCustomFieldExplorerClassKey,
+  type ScaffolderTemplateEditorClassKey,
+  type ScaffolderTemplateFormPreviewerClassKey,
 } from './next';
 
 export { scaffolderTranslationRef } from './translation';

plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx

@@ -36,31 +36,41 @@ import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../translation';
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    gridArea: 'pageContent',
-    display: 'grid',
-    gridTemplateAreas: `
+/** @public */
+export type ScaffolderCustomFieldExplorerClassKey =
+  | 'root'
+  | 'controls'
+  | 'fieldForm'
+  | 'preview';
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      gridArea: 'pageContent',
+      display: 'grid',
+      gridTemplateAreas: `
       "controls controls"
       "fieldForm preview"
     `,
-    gridTemplateRows: 'auto 1fr',
-    gridTemplateColumns: '1fr 1fr',
-  },
-  controls: {
-    gridArea: 'controls',
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    alignItems: 'center',
-    margin: theme.spacing(1),
-  },
-  fieldForm: {
-    gridArea: 'fieldForm',
-  },
-  preview: {
-    gridArea: 'preview',
-  },
-}));
+      gridTemplateRows: 'auto 1fr',
+      gridTemplateColumns: '1fr 1fr',
+    },
+    controls: {
+      gridArea: 'controls',
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      alignItems: 'center',
+      margin: theme.spacing(1),
+    },
+    fieldForm: {
+      gridArea: 'fieldForm',
+    },
+    preview: {
+      gridArea: 'preview',
+    },
+  }),
+  { name: 'ScaffolderCustomFieldExplorer' },
+);
 
 export const CustomFieldExplorer = ({
   customFieldExtensions = [],

plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditor.tsx

@@ -28,35 +28,45 @@ import { TemplateEditorTextArea } from './TemplateEditorTextArea';
 import { TemplateEditorForm } from './TemplateEditorForm';
 import { DryRunResults } from './DryRunResults';
 
-const useStyles = makeStyles({
-  // Reset and fix sizing to make sure scrolling behaves correctly
-  root: {
-    gridArea: 'pageContent',
+/** @public */
+export type ScaffolderTemplateEditorClassKey =
+  | 'root'
+  | 'browser'
+  | 'editor'
+  | 'preview'
+  | 'results';
 
-    display: 'grid',
-    gridTemplateAreas: `
+const useStyles = makeStyles(
+  {
+    // Reset and fix sizing to make sure scrolling behaves correctly
+    root: {
+      gridArea: 'pageContent',
+      display: 'grid',
+      gridTemplateAreas: `
       "browser editor preview"
       "results results results"
     `,
-    gridTemplateColumns: '1fr 3fr 2fr',
-    gridTemplateRows: '1fr auto',
+      gridTemplateColumns: '1fr 3fr 2fr',
+      gridTemplateRows: '1fr auto',
+    },
+    browser: {
+      gridArea: 'browser',
+      overflow: 'auto',
+    },
+    editor: {
+      gridArea: 'editor',
+      overflow: 'auto',
+    },
+    preview: {
+      gridArea: 'preview',
+      overflow: 'auto',
+    },
+    results: {
+      gridArea: 'results',
+    },
   },
-  browser: {
-    gridArea: 'browser',
-    overflow: 'auto',
-  },
-  editor: {
-    gridArea: 'editor',
-    overflow: 'auto',
-  },
-  preview: {
-    gridArea: 'preview',
-    overflow: 'auto',
-  },
-  results: {
-    gridArea: 'results',
-  },
-});
+  { name: 'ScaffolderTemplateEditor' },
+);
 
 export const TemplateEditor = (props: {
   directory: TemplateDirectoryAccess;

plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -84,31 +84,41 @@ type TemplateOption = {
   value: Entity;
 };
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    gridArea: 'pageContent',
-    display: 'grid',
-    gridTemplateAreas: `
+/** @public */
+export type ScaffolderTemplateFormPreviewerClassKey =
+  | 'root'
+  | 'controls'
+  | 'textArea'
+  | 'preview';
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      gridArea: 'pageContent',
+      display: 'grid',
+      gridTemplateAreas: `
       "controls controls"
       "textArea preview"
     `,
-    gridTemplateRows: 'auto 1fr',
-    gridTemplateColumns: '1fr 1fr',
-  },
-  controls: {
-    gridArea: 'controls',
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    alignItems: 'center',
-    margin: theme.spacing(1),
-  },
-  textArea: {
-    gridArea: 'textArea',
-  },
-  preview: {
-    gridArea: 'preview',
-  },
-}));
+      gridTemplateRows: 'auto 1fr',
+      gridTemplateColumns: '1fr 1fr',
+    },
+    controls: {
+      gridArea: 'controls',
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      alignItems: 'center',
+      margin: theme.spacing(1),
+    },
+    textArea: {
+      gridArea: 'textArea',
+    },
+    preview: {
+      gridArea: 'preview',
+    },
+  }),
+  { name: 'ScaffolderTemplateFormPreviewer' },
+);
 
 export const TemplateFormPreviewer = ({
   defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,

plugins/scaffolder/src/next/TemplateEditorPage/index.ts

@@ -15,3 +15,6 @@
  */
 
 export { TemplateEditorPage } from './TemplateEditorPage';
+export type { ScaffolderCustomFieldExplorerClassKey } from './CustomFieldExplorer';
+export type { ScaffolderTemplateEditorClassKey } from './TemplateEditor';
+export type { ScaffolderTemplateFormPreviewerClassKey } from './TemplateFormPreviewer';

plugins/scaffolder/src/next/index.ts

@@ -13,6 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export type {
+  ScaffolderCustomFieldExplorerClassKey,
+  ScaffolderTemplateEditorClassKey,
+  ScaffolderTemplateFormPreviewerClassKey,
+} from './TemplateEditorPage';
 export * from './TemplateListPage';
 export * from './TemplateWizardPage';
 export * from './types';

plugins/scaffolder/src/overridableComponents.ts

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+import { Overrides } from '@material-ui/core/styles/overrides';
+import { StyleRules } from '@material-ui/core/styles/withStyles';
+import { ScaffolderTemplateEditorClassKey } from './next/TemplateEditorPage/TemplateEditor';
+import { ScaffolderTemplateFormPreviewerClassKey } from './next/TemplateEditorPage/TemplateFormPreviewer';
+import { ScaffolderCustomFieldExplorerClassKey } from './next/TemplateEditorPage/CustomFieldExplorer';
+
+/** @public */
+export type ScaffolderReactComponentsNameToClassKey = {
+  ScaffolderTemplateEditor: ScaffolderTemplateEditorClassKey;
+  ScaffolderTemplateFormPreviewer: ScaffolderTemplateFormPreviewerClassKey;
+  ScaffolderCustomFieldExplorer: ScaffolderCustomFieldExplorerClassKey;
+};
+
+/** @public */
+export type BackstageOverrides = Overrides & {
+  [Name in keyof ScaffolderReactComponentsNameToClassKey]?: Partial<
+    StyleRules<ScaffolderReactComponentsNameToClassKey[Name]>
+  >;
+};
+
+declare module '@backstage/theme' {
+  interface OverrideComponentNameToClassKeys
+    extends ScaffolderReactComponentsNameToClassKey {}
+}