From 270d15ad071a7cc1800af4c17988fb80cf792df9 Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Thu, 26 Sep 2024 09:40:57 +0200 Subject: [PATCH 1/7] scaffolder: Rework manage templates page Signed-off-by: Johan Haals --- plugins/scaffolder/report-alpha.api.md | 6 +- .../TemplateEditorIntro.tsx | 246 +++++++++--------- .../TemplateEditorPage/TemplateEditorPage.tsx | 18 +- plugins/scaffolder/src/translation.ts | 4 +- 4 files changed, 133 insertions(+), 141 deletions(-) diff --git a/plugins/scaffolder/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md index 4319362ef9..cb939c2e84 100644 --- a/plugins/scaffolder/report-alpha.api.md +++ b/plugins/scaffolder/report-alpha.api.md @@ -274,9 +274,13 @@ export const scaffolderTranslationRef: TranslationRef< readonly 'ongoingTask.showLogsButtonTitle': 'Show Logs'; readonly 'templateEditorForm.stepper.emptyText': 'There are no spec parameters in the template to preview.'; readonly 'templateTypePicker.title': 'Categories'; +<<<<<<< HEAD:plugins/scaffolder/report-alpha.api.md readonly 'templateFormPage.title': 'Template Form Playground'; readonly 'templateFormPage.subtitle': 'Edit, preview, and try out templates and template forms'; readonly 'templateEditorPage.title': 'Template Editor'; +======= + readonly 'templateEditorPage.title': 'Manage Templates'; +>>>>>>> 0d22ec434749 (scaffolder: Rework manage templates page):plugins/scaffolder/api-report-alpha.md readonly 'templateEditorPage.subtitle': 'Edit, preview, and try out templates and template forms'; readonly 'templateEditorPage.dryRunResults.title': 'Dry-run results'; readonly 'templateEditorPage.dryRunResultsList.title': 'Result {{resultId}}'; @@ -302,7 +306,7 @@ export const scaffolderTranslationRef: TranslationRef< readonly 'templateEditorPage.templateEditorIntro.createLocal.title': 'Create New Template'; readonly 'templateEditorPage.templateEditorIntro.createLocal.description': 'Create a local template directory, allowing you to both edit and try executing your own template.'; readonly 'templateEditorPage.templateEditorIntro.createLocal.unsupportedTooltip': 'Only supported in some Chromium-based browsers'; - readonly 'templateEditorPage.templateEditorIntro.formEditor.title': 'Edit Template Form'; + readonly 'templateEditorPage.templateEditorIntro.formEditor.title': 'Template playground'; readonly 'templateEditorPage.templateEditorIntro.formEditor.description': 'Preview and edit a template form, either using a sample template or by loading a template from the catalog.'; readonly 'templateEditorPage.templateEditorIntro.fieldExplorer.title': 'Custom Field Explorer'; readonly 'templateEditorPage.templateEditorIntro.fieldExplorer.description': 'View and play around with available installed custom field extensions.'; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx index c65ef569a6..e5edd2cbd5 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx @@ -18,30 +18,63 @@ import React from 'react'; import Card from '@material-ui/core/Card'; import CardActionArea from '@material-ui/core/CardActionArea'; import CardContent from '@material-ui/core/CardContent'; -import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; -import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import { makeStyles } from '@material-ui/core/styles'; import { WebFileSystemAccess } from '../../../lib/filesystem'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { scaffolderTranslationRef } from '../../../translation'; +import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder'; +import ListAltIcon from '@material-ui/icons/ListAlt'; +import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; +import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import CardMedia from '@material-ui/core/CardMedia'; +import PublishIcon from '@material-ui/icons/Publish'; +import SvgIcon from '@material-ui/core/SvgIcon'; +import Tooltip from '@material-ui/core/Tooltip'; const useStyles = makeStyles(theme => ({ + gridRoot: { + display: 'flex', + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + cardGrid: { + display: 'grid', + maxWidth: 1000, + gridTemplateColumns: '1fr 1fr', + gridAutoRows: '1fr 1fr', + gap: '1rem', + [theme.breakpoints.down('sm')]: { + gridAutoFlow: 'row', + }, + }, + card: { + display: 'grid', + gridTemplateColumns: 'auto 1fr', + gridTemplateRows: '1fr', + alignItems: 'center', + margin: theme.spacing(0, 1), + marginTop: theme.spacing(2), + padding: theme.spacing(2), + }, + icon: { + justifySelf: 'center', + paddingTop: theme.spacing(1), + fontSize: 48, + }, introText: { textAlign: 'center', marginTop: theme.spacing(2), }, - card: { - position: 'relative', - maxWidth: 340, - marginTop: theme.spacing(4), - margin: theme.spacing(0, 2), - }, infoIcon: { position: 'absolute', top: theme.spacing(1), right: theme.spacing(1), }, + cardContent: { + padding: theme.spacing(1), + }, })); interface EditorIntroProps { @@ -51,142 +84,109 @@ interface EditorIntroProps { ) => void; } -export function TemplateEditorIntro(props: EditorIntroProps) { - const classes = useStyles(); - const supportsLoad = WebFileSystemAccess.isSupported(); +function ActionCard(props: { + title: string; + description: string; + Icon: typeof SvgIcon; + action?: React.MouseEventHandler; + requireLoad?: boolean; +}) { + const supportsLoad = props.requireLoad + ? WebFileSystemAccess.isSupported() + : true; const { t } = useTranslationRef(scaffolderTranslationRef); - const cardLoadLocal = ( - - props.onSelect?.('local')} - > - - - {t('templateEditorPage.templateEditorIntro.loadLocal.title')} - - - {t('templateEditorPage.templateEditorIntro.loadLocal.description')} - - - + const classes = useStyles(); + const { Icon, title, description, action } = props; + return ( + {!supportsLoad && ( -
- - - -
+ + + )} - - ); - const cardCreateLocal = ( - - props.onSelect?.('create-template')} - > - + + + + + - {t('templateEditorPage.templateEditorIntro.createLocal.title')} - - - {t( - 'templateEditorPage.templateEditorIntro.createLocal.description', - )} + {title} - - - {!supportsLoad && ( -
- - - -
- )} - - ); - - const cardFormEditor = ( - - props.onSelect?.('form')}> - - - {t('templateEditorPage.templateEditorIntro.formEditor.title')} - - - {t('templateEditorPage.templateEditorIntro.formEditor.description')} - - - - - ); - - const cardFieldExplorer = ( - - props.onSelect?.('field-explorer')}> - - - {t('templateEditorPage.templateEditorIntro.fieldExplorer.title')} - - - {t( - 'templateEditorPage.templateEditorIntro.fieldExplorer.description', - )} + + {description} ); +} +export function TemplateEditorIntro(props: EditorIntroProps) { + const classes = useStyles(); + const { t } = useTranslationRef(scaffolderTranslationRef); return (
{t('templateEditorPage.templateEditorIntro.title')} -
- {supportsLoad && cardLoadLocal} - {supportsLoad && cardCreateLocal} - {cardFormEditor} - {!supportsLoad && cardLoadLocal} - {cardFieldExplorer} +
+
+ props.onSelect?.('local')} + /> + props.onSelect?.('create-template')} + Icon={CreateNewFolderIcon} + /> + + props.onSelect?.('field-explorer')} + /> + + props.onSelect?.('form')} + /> +
); diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx index 8d71db2551..90737393f9 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx +++ b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx @@ -19,15 +19,12 @@ import { Content, Header, Page } from '@backstage/core-components'; import { WebFileSystemAccess } from '../../../lib/filesystem'; import { TemplateEditorIntro } from './TemplateEditorIntro'; -import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha'; import { useNavigate } from 'react-router-dom'; import { useRouteRef } from '@backstage/core-plugin-api'; import { - actionsRouteRef, editorRouteRef, customFieldsRouteRef, rootRouteRef, - scaffolderListTaskRouteRef, templateFormRouteRef, } from '../../../routes'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; @@ -37,29 +34,20 @@ import { createExampleTemplate } from '../../../lib/filesystem/createExampleTemp export function TemplateEditorPage() { const navigate = useNavigate(); - const actionsLink = useRouteRef(actionsRouteRef); - const tasksLink = useRouteRef(scaffolderListTaskRouteRef); const createLink = useRouteRef(rootRouteRef); const editorLink = useRouteRef(editorRouteRef); const customFieldsLink = useRouteRef(customFieldsRouteRef); const templateFormLink = useRouteRef(templateFormRouteRef); const { t } = useTranslationRef(scaffolderTranslationRef); - const scaffolderPageContextMenuProps = { - onEditorClicked: undefined, - onActionsClicked: () => navigate(actionsLink()), - onTasksClicked: () => navigate(tasksLink()), - onCreateClicked: () => navigate(createLink()), - }; - return (
- -
+ /> { diff --git a/plugins/scaffolder/src/translation.ts b/plugins/scaffolder/src/translation.ts index ba39c80b7c..11c13194ce 100644 --- a/plugins/scaffolder/src/translation.ts +++ b/plugins/scaffolder/src/translation.ts @@ -199,7 +199,7 @@ export const scaffolderTranslationRef = createTranslationRef({ subtitle: 'Edit, preview, and try out templates and template forms', }, templateEditorPage: { - title: 'Template Editor', + title: 'Manage Templates', subtitle: 'Edit, preview, and try out templates and template forms', dryRunResults: { title: 'Dry-run results', @@ -253,7 +253,7 @@ export const scaffolderTranslationRef = createTranslationRef({ unsupportedTooltip: 'Only supported in some Chromium-based browsers', }, formEditor: { - title: 'Edit Template Form', + title: 'Template playground', description: 'Preview and edit a template form, either using a sample template or by loading a template from the catalog.', }, From af28af9021559f86e4e5200c1adea4c6adb90e6d Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Thu, 26 Sep 2024 15:00:50 +0200 Subject: [PATCH 2/7] scaffolder: rename to manage templates in context menu Signed-off-by: Johan Haals --- .../ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index 2239c86e06..12ca4135f0 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -105,7 +105,7 @@ export function ScaffolderPageContextMenu( - + )} {onActionsClicked && ( From c433ae9af6d1f10e2a4c888adff0d6b35415d312 Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Thu, 26 Sep 2024 15:02:52 +0200 Subject: [PATCH 3/7] add changeset Signed-off-by: Johan Haals --- .changeset/gold-pots-end.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gold-pots-end.md diff --git a/.changeset/gold-pots-end.md b/.changeset/gold-pots-end.md new file mode 100644 index 0000000000..cebf900b73 --- /dev/null +++ b/.changeset/gold-pots-end.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': minor +--- + +Improve the layout of the manage templates page. From 6fe77e49a13ee8b0140b6c94c5864fdb92d308d8 Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Fri, 27 Sep 2024 10:04:57 +0200 Subject: [PATCH 4/7] fix api report Signed-off-by: Johan Haals --- plugins/scaffolder/report-alpha.api.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/plugins/scaffolder/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md index cb939c2e84..2a90efc0ba 100644 --- a/plugins/scaffolder/report-alpha.api.md +++ b/plugins/scaffolder/report-alpha.api.md @@ -274,13 +274,9 @@ export const scaffolderTranslationRef: TranslationRef< readonly 'ongoingTask.showLogsButtonTitle': 'Show Logs'; readonly 'templateEditorForm.stepper.emptyText': 'There are no spec parameters in the template to preview.'; readonly 'templateTypePicker.title': 'Categories'; -<<<<<<< HEAD:plugins/scaffolder/report-alpha.api.md readonly 'templateFormPage.title': 'Template Form Playground'; readonly 'templateFormPage.subtitle': 'Edit, preview, and try out templates and template forms'; - readonly 'templateEditorPage.title': 'Template Editor'; -======= readonly 'templateEditorPage.title': 'Manage Templates'; ->>>>>>> 0d22ec434749 (scaffolder: Rework manage templates page):plugins/scaffolder/api-report-alpha.md readonly 'templateEditorPage.subtitle': 'Edit, preview, and try out templates and template forms'; readonly 'templateEditorPage.dryRunResults.title': 'Dry-run results'; readonly 'templateEditorPage.dryRunResultsList.title': 'Result {{resultId}}'; From d08e6773695e0313b7a312a60223fd8420d2cc34 Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Fri, 27 Sep 2024 10:19:20 +0200 Subject: [PATCH 5/7] update changeset Signed-off-by: Johan Haals --- .changeset/gold-pots-end.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gold-pots-end.md b/.changeset/gold-pots-end.md index cebf900b73..38aa750d0b 100644 --- a/.changeset/gold-pots-end.md +++ b/.changeset/gold-pots-end.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder': minor --- -Improve the layout of the manage templates page. +Improved the layout of the manage templates page(/edit) by adding icons and descriptions that better describe what each page is for. Updated the header menu to link back to the scaffolder create page. From 62a42293e98e3dc772cb50aaaabf4239f485944c Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Fri, 27 Sep 2024 13:26:45 +0200 Subject: [PATCH 6/7] Update .changeset/gold-pots-end.md Signed-off-by: Johan Haals Co-authored-by: Patrik Oldsberg Signed-off-by: Johan Haals --- .changeset/gold-pots-end.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gold-pots-end.md b/.changeset/gold-pots-end.md index 38aa750d0b..e7291fc3ad 100644 --- a/.changeset/gold-pots-end.md +++ b/.changeset/gold-pots-end.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder': minor --- -Improved the layout of the manage templates page(/edit) by adding icons and descriptions that better describe what each page is for. Updated the header menu to link back to the scaffolder create page. +Improved the layout of the manage templates page (`/edit`) by adding icons and descriptions that better describe what each page is for. Updated the header menu to link back to the scaffolder create page. From d851b5ba4ff6c3388a5fb60d2f062b41f58262cf Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Fri, 27 Sep 2024 13:27:11 +0200 Subject: [PATCH 7/7] add changeset Signed-off-by: Johan Haals --- .changeset/rich-needles-collect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rich-needles-collect.md diff --git a/.changeset/rich-needles-collect.md b/.changeset/rich-needles-collect.md new file mode 100644 index 0000000000..dab36e9543 --- /dev/null +++ b/.changeset/rich-needles-collect.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': minor +--- + +Renamed Template Editor to Manage Templates.