From 3400190663cab1bab52f52bf15d0c967d42517b0 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 11 Mar 2022 18:17:48 +0100 Subject: [PATCH] chore: starting to build some things for the wizard page component Signed-off-by: blam Signed-off-by: blam --- plugins/scaffolder/src/next/Router/Router.tsx | 4 +- .../TemplateCard/TemplateCard.tsx | 19 +++-- .../TemplateListPage/TemplateListPage.tsx | 8 +- .../TemplateWizardPage/TemplateWizardPage.tsx | 75 +++++++++++++++++-- plugins/scaffolder/src/routes.ts | 6 ++ plugins/scaffolder/src/types.ts | 2 + 6 files changed, 95 insertions(+), 19 deletions(-) diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx index 68bf9fa9e4..fb5769e4e4 100644 --- a/plugins/scaffolder/src/next/Router/Router.tsx +++ b/plugins/scaffolder/src/next/Router/Router.tsx @@ -28,7 +28,7 @@ import { import { useElementFilter } from '@backstage/core-plugin-api'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { TemplateGroupFilter } from '../TemplateListPage/TemplateGroups'; -import { selectedTemplateRouteRef } from '../../routes'; +import { nextSelectedTemplateRouteRef } from '../../routes'; /** * The Props for the Scaffolder Router @@ -87,7 +87,7 @@ export const Router = (props: PropsWithChildren) => { /> diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx index 874c20a9ac..10039115e0 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx @@ -36,7 +36,7 @@ import { getEntityRelations, } from '@backstage/plugin-catalog-react'; import { useRouteRef } from '@backstage/core-plugin-api'; -import { selectedTemplateRouteRef } from '../../../routes'; +import { nextSelectedTemplateRouteRef } from '../../../routes'; import { BackstageTheme } from '@backstage/theme'; const useStyles = makeStyles(theme => ({ @@ -46,10 +46,11 @@ const useStyles = makeStyles(theme => ({ display: '-webkit-box', '-webkit-line-clamp': 10, '-webkit-box-orient': 'vertical', + }, + markdown: { /** to make the styles for React Markdown not leak into the description */ - '& p:first-child': { + '& :first-child': { marginTop: 0, - marginBottom: theme.spacing(2), }, }, label: { @@ -94,9 +95,14 @@ export const TemplateCard = (props: TemplateCardProps) => { const { template } = props; const styles = useStyles(); const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY); - const templateRoute = useRouteRef(selectedTemplateRouteRef); - const { name, namespace } = parseEntityRef(stringifyEntityRef(template)); - const href = templateRoute({ templateName: name, namespace: namespace }); + const templateRoute = useRouteRef(nextSelectedTemplateRouteRef); + const { name, namespace } = parseEntityRef( + stringifyEntityRef(props.template), + ); + const href = templateRoute({ + templateName: name, + namespace: namespace, + }); return ( @@ -104,6 +110,7 @@ export const TemplateCard = (props: TemplateCardProps) => { diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index 1b18dce805..775c6c0318 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx @@ -56,11 +56,11 @@ export const TemplateListPage = (props: TemplateListPageProps) => { return ( - +
diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx index f2da12930a..1a57a438c6 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx +++ b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx @@ -14,24 +14,85 @@ * limitations under the License. */ import React from 'react'; -import { Page, Header, Lifecycle } from '@backstage/core-components'; +import { + Page, + Header, + Content, + Progress, + InfoCard, + MarkdownContent, +} from '@backstage/core-components'; import { FieldExtensionOptions } from '../../extensions'; +import { useParams } from 'react-router'; +import { stringifyEntityRef } from '@backstage/catalog-model'; +import { useApi } from '@backstage/core-plugin-api'; +import { scaffolderApiRef } from '../../api'; +import useAsync from 'react-use/lib/useAsync'; +import { makeStyles } from '@material-ui/core'; +import { BackstageTheme } from '@backstage/theme'; export interface TemplateWizardPageProps { customFieldExtensions: FieldExtensionOptions[]; } +const useStyles = makeStyles(theme => ({ + markdown: { + /** to make the styles for React Markdown not leak into the description */ + '& :first-child': { + marginTop: 0, + }, + '& :last-child': { + marginBottom: 0, + }, + }, +})); + +const useTemplateParameterSchema = (templateRef: string) => { + const scaffolderApi = useApi(scaffolderApiRef); + const { value, loading, error } = useAsync( + () => scaffolderApi.getTemplateParameterSchema(templateRef), + [scaffolderApi, templateRef], + ); + + return { manifest: value, loading, error }; +}; + export const TemplateWizardPage = (_props: TemplateWizardPageProps) => { + const styles = useStyles(); + const { templateName, namespace } = useParams(); + const { loading, manifest, error } = useTemplateParameterSchema( + stringifyEntityRef({ + kind: 'Template', + namespace, + name: templateName, + }), + ); + return ( - +
- Create a New Component - - } + title="Create a new component" + subtitle="Create new software components using standard templates in your organization" /> + + {loading && } + {manifest && ( + + } + noPadding + titleTypographyProps={{ component: 'h2' }} + > + asd + + )} + ); }; diff --git a/plugins/scaffolder/src/routes.ts b/plugins/scaffolder/src/routes.ts index 8d6875e351..19a959585d 100644 --- a/plugins/scaffolder/src/routes.ts +++ b/plugins/scaffolder/src/routes.ts @@ -43,6 +43,12 @@ export const selectedTemplateRouteRef = createSubRouteRef({ path: '/templates/:namespace/:templateName', }); +export const nextSelectedTemplateRouteRef = createSubRouteRef({ + id: 'scaffolder/next/selected-template', + parent: rootRouteRef, + path: '/templates/:namespace/:templateName', +}); + export const scaffolderTaskRouteRef = createSubRouteRef({ id: 'scaffolder/task', parent: rootRouteRef, diff --git a/plugins/scaffolder/src/types.ts b/plugins/scaffolder/src/types.ts index 710af6ad23..d814119398 100644 --- a/plugins/scaffolder/src/types.ts +++ b/plugins/scaffolder/src/types.ts @@ -79,8 +79,10 @@ export type ScaffolderTaskOutput = { */ export type TemplateParameterSchema = { title: string; + description?: string; steps: Array<{ title: string; + description?: string; schema: JsonObject; }>; };