EmbeddedScaffolderWorkflow component

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>

packages/app/src/components/EmbeddedScaffolderWorkflow/EmbeddedScaffolderWorkflow.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+import React, { useState, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import {
+  TemplateContent,
+  useGetCustomFields,
+} from '@backstage/plugin-scaffolder';
+import { Button } from '@material-ui/core';
+import type { JsonValue } from '@backstage/types';
+import { FormProps } from '@backstage/plugin-scaffolder-react';
+
+interface WorkflowProps {
+  frontPage: ReactNode;
+  namespace: string;
+  templateName: string;
+  customExtensionsElement?: React.ReactNode;
+  initialFormState?: Record<string, JsonValue>;
+  onComplete: (values: Record<string, JsonValue>) => Promise<void>;
+  onError(error: Error | undefined): JSX.Element | null;
+  FormProps: FormProps
+}
+
+export function EmbeddedScaffolderWorkflow({
+  namespace,
+  templateName,
+  customExtensionsElement = <></>,
+  frontPage,
+  onComplete,
+  onError,
+}: WorkflowProps): JSX.Element {
+  const [showTemplateContent, setShowTemplateContent] = useState(false);
+  const fieldExtensions = useGetCustomFields(customExtensionsElement);
+
+  const showContent = !showTemplateContent;
+
+  const startTemplate = useCallback(() => setShowTemplateContent(true), []);
+
+  return (
+    <>
+      {showContent && (
+        <>
+          {frontPage}
+          <Button variant="contained" onClick={startTemplate}>
+            SETUP
+          </Button>
+        </>
+      )}
+      {showTemplateContent && (
+        <TemplateContent
+          namespace={namespace}
+          templateName={templateName}
+          onComplete={onComplete}
+          onError={onError}
+          customFieldExtensions={fieldExtensions}
+          initialFormState={{
+            name: 'prefilled-name',
+            description: 'prefilled description',
+            owner: 'acme-corp',
+            repoUrl: 'github.com?owner=component&repo=component',
+          }}
+        />
+      )}
+    </>
+  );
+}

packages/app/src/components/SecurityTab/SecurityTab.tsx

@@ -15,22 +15,11 @@
  */
 
 import React from 'react';
-import {
-  TemplateContent,
-  useGetCustomFields,
-} from '@backstage/plugin-scaffolder';
+import { EmbeddedScaffolderWorkflow } from '../EmbeddedScaffolderWorkflow/EmbeddedScaffolderWorkflow';
 
-interface SecurityTabProps {
-  namespace: string;
-  templateName: string;
-  customExtensionsElement?: React.ReactNode;
-}
+interface SecurityTabProps {}
 
-export function SecurityTab({
-  namespace,
-  templateName,
-  customExtensionsElement = <></>,
-}: SecurityTabProps): JSX.Element | null {
+export function SecurityTab({}: SecurityTabProps): JSX.Element | null {
   // eslint-disable-next-line no-alert
   const onComplete = async () => alert('success!!!!');
 
@@ -38,21 +27,25 @@ export function SecurityTab({
     <h2>{error?.message ?? 'Houston we have a problem.'}</h2>
   );
 
-  const fieldExtensions = useGetCustomFields(customExtensionsElement);
-
   return (
-    <TemplateContent
-      namespace={namespace}
-      templateName={templateName}
+    <EmbeddedScaffolderWorkflow
       onComplete={onComplete}
       onError={onError}
-      customFieldExtensions={fieldExtensions}
-      initialFormState={{
-        name: 'prefilled-name',
-        description: 'prefilled description',
-        owner: 'acme-corp',
-        repoUrl: 'github.com?owner=component&repo=component',
-      }}
+      namespace="default"
+      templateName="docs-template"
+      frontPage={
+        <>
+          <h1>Security Insights</h1>
+          <p>
+            Security insights actionable advice to improve security posture of
+            your application
+          </p>
+          <p>
+            You must complete on-boarding process to activate security insights
+            on this project.
+          </p>
+        </>
+      }
     />
   );
 }

packages/app/src/components/catalog/EntityPage.tsx

@@ -404,7 +404,7 @@ const overviewContent = (
 
 const securityContent = (
   <EntityLayout.Route path="/security" title="Security" if={showSecurityTab}>
-    <SecurityTab namespace="default" templateName="docs-template" />
+    <SecurityTab />
   </EntityLayout.Route>
 );
 

plugins/scaffolder/src/next/TemplateWizardContent/TemplateWizardContent.tsx

@@ -16,25 +16,23 @@
 import React, { useEffect } from 'react';
 import {
   Content,
-  Header,
   InfoCard,
   MarkdownContent,
-  Page,
   Progress,
 } from '@backstage/core-components';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { useTemplateParameterSchema } from '../TemplateWizardPage/TemplateWizardPage';
-import { NextFieldExtensionOptions } from '../../extensions';
 import type { ErrorTransformer } from '@rjsf/utils';
 import type { JsonValue } from '@backstage/types';
 import { makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
-import { Stepper } from '../TemplateWizardPage/Stepper';
 import {
-  SecretsContext,
   SecretsContextProvider,
-} from '../../components/secrets/SecretsContext';
+  Stepper,
+  type NextFieldExtensionOptions,
+} from '@backstage/plugin-scaffolder-react';
+import { type FormProps } from '@backstage/plugin-scaffolder-react';
 
 const useStyles = makeStyles<BackstageTheme>(() => ({
   markdown: {
@@ -56,6 +54,7 @@ export interface TemplateWizardContentProps {
   onComplete: (values: Record<string, JsonValue>) => Promise<void>;
   onError(error: Error | undefined): JSX.Element | null;
   initialFormState?: Record<string, JsonValue>;
+  FormProps?: FormProps;
 }
 
 export const TemplateWizardContent = (
@@ -83,37 +82,29 @@ export const TemplateWizardContent = (
   }
 
   return (
-    <Page themeId="website">
-      <Header
-        pageTitleOverride="Create a new component"
-        title="Create a new component"
-        subtitle="Create new software components using standard templates in your organization"
-      />
-      <Content>
-        {loading && <Progress />}
-        {manifest && (
-          <InfoCard
-            title={manifest.title}
-            subheader={
-              <MarkdownContent
-                className={styles.markdown}
-                content={manifest.description ?? 'No description'}
-              />
-            }
-            noPadding
-            titleTypographyProps={{ component: 'h2' }}
-          >
-            <Stepper
-              manifest={manifest}
-              extensions={props.customFieldExtensions}
-              onComplete={props.onComplete}
-              transformErrors={props.transformErrors}
-              initialFormState={props.initialFormState}
+    <Content>
+      {loading && <Progress />}
+      {manifest && (
+        <InfoCard
+          title={manifest.title}
+          subheader={
+            <MarkdownContent
+              className={styles.markdown}
+              content={manifest.description ?? 'No description'}
             />
-          </InfoCard>
-        )}
-      </Content>
-    </Page>
+          }
+          noPadding
+          titleTypographyProps={{ component: 'h2' }}
+        >
+          <Stepper
+            manifest={manifest}
+            extensions={props.customFieldExtensions}
+            onComplete={props.onComplete}
+            FormProps={props.FormProps}
+          />
+        </InfoCard>
+      )}
+    </Content>
   );
 };
 

plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx

@@ -33,6 +33,7 @@ import { FormProps } from '../types';
 import { nextRouteRef } from '../routes';
 import { scaffolderTaskRouteRef, selectedTemplateRouteRef } from '../../routes';
 import { TemplateWizardContent } from '../TemplateWizardContent/TemplateWizardContent';
+import { Header, Page } from '@backstage/core-components';
 
 type TemplateWizardPageProps = {
   customFieldExtensions: NextFieldExtensionOptions<any, any>[];
@@ -85,6 +86,7 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
         onComplete={onComplete}
         onError={onError}
         customFieldExtensions={props.customFieldExtensions}
+        FormProps={props.FormProps}
       />
     </AnalyticsContext>
   );