feat(TemplatePreviewPage): implement a view for previewing template f…

…orm UIs

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/ten-otters-act.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Implement a template preview page (`/create/preview`) to test creating form UIs

packages/app/src/App.tsx

@@ -79,6 +79,7 @@ import { entityPage } from './components/catalog/EntityPage';
 import { homePage } from './components/home/HomePage';
 import { Root } from './components/Root';
 import { LowerCaseValuePickerFieldExtension } from './components/scaffolder/customScaffolderExtensions';
+import { defaultPreviewTemplate } from './components/scaffolder/defaultPreviewTemplate';
 import { searchPage } from './components/search/SearchPage';
 import { providers } from './identityProviders';
 import * as plugins from './plugins';
@@ -179,6 +180,7 @@ const routes = (
       path="/create"
       element={
         <ScaffolderPage
+          defaultPreviewTemplate={defaultPreviewTemplate}
           groups={[
             {
               title: 'Recommended',

packages/app/src/components/scaffolder/defaultPreviewTemplate.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 const defaultPreviewTemplate = `# Edit the template parameters below to see how they will render in the scaffolder form UI
+parameters:
+  - title: Fill in some steps
+    required:
+      - name
+    properties:
+      name:
+        title: Name
+        type: string
+        description: Unique name of the component
+      owner:
+        title: Owner
+        type: string
+        description: Owner of the component
+        ui:field: OwnerPicker
+        ui:options:
+          allowedKinds:
+            - Group
+  - title: Choose a location
+    required:
+      - repoUrl
+    properties:
+      repoUrl:
+        title: Repository Location
+        type: string
+        ui:field: RepoUrlPicker
+        ui:options:
+          allowedHosts:
+            - github.com
+  - title: Custom Fields
+    required:
+      - lowerCaseValue
+    properties:
+      lowerCaseValue:
+        title: Lower Cased Value
+        type: string
+        ui:field: LowerCaseValuePicker
+`;

plugins/scaffolder/api-report.md

@@ -200,6 +200,7 @@ export type RouterProps = {
     titleComponent?: React_2.ReactNode;
     filter: (entity: Entity) => boolean;
   }>;
+  defaultPreviewTemplate?: string;
 };
 
 // @public

plugins/scaffolder/package.json

@@ -34,7 +34,6 @@
     "clean": "backstage-cli package clean"
   },
   "dependencies": {
-    "@types/json-schema": "^7.0.9",
     "@backstage/catalog-client": "^0.9.0",
     "@backstage/catalog-model": "^0.13.0",
     "@backstage/config": "^0.1.15",
@@ -49,11 +48,16 @@
     "@backstage/plugin-scaffolder-common": "^0.3.0",
     "@backstage/theme": "^0.2.15",
     "@backstage/types": "^0.1.3",
+    "@codemirror/legacy-modes": "^0.19.0",
+    "@codemirror/panel": "^0.19.1",
+    "@codemirror/stream-parser": "^0.19.6",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "@rjsf/core": "^3.2.1",
     "@rjsf/material-ui": "^3.2.1",
+    "@types/json-schema": "^7.0.9",
+    "@uiw/react-codemirror": "^4.5.1",
     "classnames": "^2.2.6",
     "git-url-parse": "^11.6.0",
     "humanize-duration": "^3.25.1",
@@ -66,6 +70,7 @@
     "react-router-dom": "6.0.0-beta.0",
     "react-use": "^17.2.4",
     "use-immer": "^0.6.0",
+    "yaml": "^1.9.2",
     "zen-observable": "^0.8.15"
   },
   "peerDependencies": {

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -51,7 +51,7 @@ type Props = {
   formData: Record<string, any>;
   onChange: (e: IChangeEvent) => void;
   onReset: () => void;
-  onFinish: () => Promise<void>;
+  onFinish?: () => Promise<void>;
   widgets?: FormProps<any>['widgets'];
   fields?: FormProps<any>['fields'];
 };
@@ -163,6 +163,10 @@ export const MultistepJsonForm = (props: Props) => {
   };
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
   const handleCreate = async () => {
+    if (!onFinish) {
+      return;
+    }
+
     setDisableButtons(true);
     try {
       await onFinish();
@@ -232,7 +236,7 @@ export const MultistepJsonForm = (props: Props) => {
               variant="contained"
               color="primary"
               onClick={handleCreate}
-              disabled={disableButtons}
+              disabled={!onFinish || disableButtons}
             >
               Create
             </Button>

plugins/scaffolder/src/components/Router.tsx

@@ -23,6 +23,7 @@ import { TemplatePage } from './TemplatePage';
 import { TaskPage } from './TaskPage';
 import { ActionsPage } from './ActionsPage';
 import { SecretsContextProvider } from './secrets/SecretsContext';
+import { TemplatePreviewPage } from './TemplatePreviewPage';
 
 import {
   FieldExtensionOptions,
@@ -48,6 +49,7 @@ export type RouterProps = {
     titleComponent?: React.ReactNode;
     filter: (entity: Entity) => boolean;
   }>;
+  defaultPreviewTemplate?: string;
 };
 
 /**
@@ -56,7 +58,7 @@ export type RouterProps = {
  * @public
  */
 export const Router = (props: RouterProps) => {
-  const { groups, components = {} } = props;
+  const { groups, components = {}, defaultPreviewTemplate } = props;
 
   const { TemplateCardComponent, TaskPageComponent } = components;
 
@@ -104,6 +106,17 @@ export const Router = (props: RouterProps) => {
       />
       <Route path="/tasks/:taskId" element={<TaskPageElement />} />
       <Route path="/actions" element={<ActionsPage />} />
+      <Route
+        path="/preview"
+        element={
+          <SecretsContextProvider>
+            <TemplatePreviewPage
+              defaultPreviewTemplate={defaultPreviewTemplate}
+              customFieldExtensions={fieldExtensions}
+            />
+          </SecretsContextProvider>
+        }
+      />
     </Routes>
   );
 };

plugins/scaffolder/src/components/TemplatePage/index.ts

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