From 7d51e8cb0ada97a4b03f284a19529dd8bf7d9541 Mon Sep 17 00:00:00 2001 From: Min Kim Date: Fri, 17 Mar 2023 15:25:57 -0400 Subject: [PATCH 1/5] Move `CategoryPicker` to scaffolder-react Signed-off-by: Min Kim --- plugins/scaffolder-react/alpha-api-report.md | 3 +++ .../TemplateCategoryPicker.test.tsx} | 16 ++++++++-------- .../TemplateCategoryPicker.tsx} | 4 +++- .../components/TemplateCategoryPicker/index.ts | 16 ++++++++++++++++ .../src/next/components/index.ts | 1 + .../next/TemplateListPage/TemplateListPage.tsx | 5 +++-- 6 files changed, 34 insertions(+), 11 deletions(-) rename plugins/{scaffolder/src/next/TemplateListPage/CategoryPicker.test.tsx => scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx} (93%) rename plugins/{scaffolder/src/next/TemplateListPage/CategoryPicker.tsx => scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx} (97%) create mode 100644 plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/index.ts diff --git a/plugins/scaffolder-react/alpha-api-report.md b/plugins/scaffolder-react/alpha-api-report.md index 35029cb796..8d3b593816 100644 --- a/plugins/scaffolder-react/alpha-api-report.md +++ b/plugins/scaffolder-react/alpha-api-report.md @@ -190,6 +190,9 @@ export interface TemplateCardProps { template: TemplateEntityV1beta3; } +// @alpha +export const TemplateCategoryPicker: () => JSX.Element | null; + // @alpha export const TemplateGroup: (props: TemplateGroupProps) => JSX.Element; diff --git a/plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx similarity index 93% rename from plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.test.tsx rename to plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx index f02ca51354..ce6e342809 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { useEntityTypeFilter } from '@backstage/plugin-catalog-react'; -import { CategoryPicker } from './CategoryPicker'; +import { TemplateCategoryPicker } from './TemplateCategoryPicker'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { alertApiRef } from '@backstage/core-plugin-api'; import { fireEvent } from '@testing-library/react'; @@ -25,7 +25,7 @@ jest.mock('@backstage/plugin-catalog-react', () => ({ useEntityTypeFilter: jest.fn(), })); -describe('CategoryPicker', () => { +describe('TemplateCategoryPicker', () => { const mockAlertApi = { post: jest.fn() }; beforeEach(() => { @@ -39,7 +39,7 @@ describe('CategoryPicker', () => { await renderInTestApp( - + , ); @@ -56,7 +56,7 @@ describe('CategoryPicker', () => { const { findByTestId } = await renderInTestApp( - + , ); @@ -70,7 +70,7 @@ describe('CategoryPicker', () => { const { queryByText } = await renderInTestApp( - + , ); @@ -86,7 +86,7 @@ describe('CategoryPicker', () => { const { getByRole } = await renderInTestApp( - + , ); @@ -108,7 +108,7 @@ describe('CategoryPicker', () => { const { getByRole } = await renderInTestApp( - + , ); @@ -139,7 +139,7 @@ describe('CategoryPicker', () => { const { getByRole } = await renderInTestApp( - + , ); diff --git a/plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx similarity index 97% rename from plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.tsx rename to plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx index 483751f2e2..5d7021bc8c 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx @@ -37,8 +37,10 @@ const checkedIcon = ; /** * The Category Picker that is rendered on the left side for picking * categories and filtering the template list. + * + * @alpha */ -export const CategoryPicker = () => { +export const TemplateCategoryPicker = () => { const alertApi = useApi(alertApiRef); const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter(); diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/index.ts b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/index.ts new file mode 100644 index 0000000000..cf41f3f7f9 --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2023 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 { TemplateCategoryPicker } from './TemplateCategoryPicker'; diff --git a/plugins/scaffolder-react/src/next/components/index.ts b/plugins/scaffolder-react/src/next/components/index.ts index 083d88927e..f63faa9e41 100644 --- a/plugins/scaffolder-react/src/next/components/index.ts +++ b/plugins/scaffolder-react/src/next/components/index.ts @@ -22,3 +22,4 @@ export * from './TemplateOutputs'; export * from './Form'; export * from './TaskSteps'; export * from './TaskLogStream'; +export * from './TemplateCategoryPicker'; diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index 0af20db6c9..74d6e07c52 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx @@ -32,7 +32,8 @@ import { CatalogFilterLayout, UserListPicker, } from '@backstage/plugin-catalog-react'; -import { CategoryPicker } from './CategoryPicker'; +import { TemplateCategoryPicker } from '@backstage/plugin-scaffolder-react/alpha'; + import { RegisterExistingButton } from './RegisterExistingButton'; import { useRouteRef } from '@backstage/core-plugin-api'; import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups'; @@ -110,7 +111,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => { initialFilter="all" availableFilters={['all', 'starred']} /> - + From 7b315f5917a9d8831b8774aa6e799821374595b3 Mon Sep 17 00:00:00 2001 From: Min Kim Date: Mon, 20 Mar 2023 11:38:50 -0400 Subject: [PATCH 2/5] Move and rename `ContextMenu` to -react/`ScaffolderPageContextMenu` Signed-off-by: Min Kim --- .../ScaffolderPageContextMenu.tsx} | 39 +++++++------------ .../ScaffolderPageContextMenu/index.ts | 19 +++++++++ .../src/next/components/index.ts | 1 + .../TemplateListPage/TemplateListPage.tsx | 24 ++++++++++-- 4 files changed, 55 insertions(+), 28 deletions(-) rename plugins/{scaffolder/src/next/TemplateListPage/ContextMenu.tsx => scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx} (77%) create mode 100644 plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts diff --git a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx similarity index 77% rename from plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx rename to plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index c3c2abc39f..0194137521 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { useRouteRef } from '@backstage/core-plugin-api'; +import { RouteFunc, AnyParams } from '@backstage/core-plugin-api'; import { BackstageTheme } from '@backstage/theme'; import IconButton from '@material-ui/core/IconButton'; import ListItemIcon from '@material-ui/core/ListItemIcon'; @@ -29,11 +29,6 @@ import List from '@material-ui/icons/List'; import MoreVert from '@material-ui/icons/MoreVert'; import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { - actionsRouteRef, - editRouteRef, - scaffolderListTaskRouteRef, -} from '../../routes'; const useStyles = makeStyles((theme: BackstageTheme) => ({ button: { @@ -42,25 +37,21 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ })); export type ScaffolderPageContextMenuProps = { - editor?: boolean; - actions?: boolean; - tasks?: boolean; + editor?: RouteFunc; + actions?: RouteFunc; + tasks?: RouteFunc; }; -export function ContextMenu(props: ScaffolderPageContextMenuProps) { +export function ScaffolderPageContextMenu( + props: ScaffolderPageContextMenuProps, +) { + const { editor, actions, tasks } = props; const classes = useStyles(); const [anchorEl, setAnchorEl] = useState(); - const editLink = useRouteRef(editRouteRef); - const actionsLink = useRouteRef(actionsRouteRef); - const tasksLink = useRouteRef(scaffolderListTaskRouteRef); const navigate = useNavigate(); - const showEditor = props.editor !== false; - const showActions = props.actions !== false; - const showTasks = props.tasks !== false; - - if (!showEditor && !showActions) { + if (!editor && !actions) { return null; } @@ -93,24 +84,24 @@ export function ContextMenu(props: ScaffolderPageContextMenuProps) { transformOrigin={{ vertical: 'top', horizontal: 'right' }} > - {showEditor && ( - navigate(editLink())}> + {editor && ( + navigate(editor())}> )} - {showActions && ( - navigate(actionsLink())}> + {actions && ( + navigate(actions())}> )} - {showTasks && ( - navigate(tasksLink())}> + {tasks && ( + navigate(tasks())}> diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts new file mode 100644 index 0000000000..ae6774a1e6 --- /dev/null +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts @@ -0,0 +1,19 @@ +/* + * 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 { + ScaffolderPageContextMenu, + type ScaffolderPageContextMenuProps, +} from './ScaffolderPageContextMenu'; diff --git a/plugins/scaffolder-react/src/next/components/index.ts b/plugins/scaffolder-react/src/next/components/index.ts index f63faa9e41..a38b0689d5 100644 --- a/plugins/scaffolder-react/src/next/components/index.ts +++ b/plugins/scaffolder-react/src/next/components/index.ts @@ -23,3 +23,4 @@ export * from './Form'; export * from './TaskSteps'; export * from './TaskLogStream'; export * from './TemplateCategoryPicker'; +export * from './ScaffolderPageContextMenu'; diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index 74d6e07c52..dc5d75d034 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx @@ -32,13 +32,20 @@ import { CatalogFilterLayout, UserListPicker, } from '@backstage/plugin-catalog-react'; -import { TemplateCategoryPicker } from '@backstage/plugin-scaffolder-react/alpha'; +import { + ScaffolderPageContextMenu, + TemplateCategoryPicker, +} from '@backstage/plugin-scaffolder-react/alpha'; import { RegisterExistingButton } from './RegisterExistingButton'; import { useRouteRef } from '@backstage/core-plugin-api'; import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups'; -import { registerComponentRouteRef } from '../../routes'; -import { ContextMenu } from './ContextMenu'; +import { + actionsRouteRef, + editRouteRef, + registerComponentRouteRef, + scaffolderListTaskRouteRef, +} from '../../routes'; export type TemplateListPageProps = { TemplateCardComponent?: React.ComponentType<{ @@ -75,11 +82,20 @@ export const TemplateListPage = (props: TemplateListPageProps) => { groups: givenGroups = [], templateFilter, } = props; + const editorLink = useRouteRef(editRouteRef); + const actionsLink = useRouteRef(actionsRouteRef); + const tasksLink = useRouteRef(scaffolderListTaskRouteRef); const groups = givenGroups.length ? createGroupsWithOther(givenGroups) : [defaultGroup]; + const scaffolderPageContextMenuProps = { + editor: props?.contextMenu?.editor !== false ? editorLink : undefined, + actions: props?.contextMenu?.actions !== false ? actionsLink : undefined, + tasks: props?.contextMenu?.tasks !== false ? tasksLink : undefined, + }; + return ( @@ -88,7 +104,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => { title="Create a new component" subtitle="Create new software components using standard templates in your organization" > - + From 0606d5bf783ee869a25883346ce079970d584193 Mon Sep 17 00:00:00 2001 From: Min Kim Date: Mon, 20 Mar 2023 13:15:15 -0400 Subject: [PATCH 3/5] Add router tests for the new scaffolder context menu Signed-off-by: Min Kim --- .../TemplateListPage.test.tsx | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx index d5a76d2a47..ee36d876cf 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx @@ -135,4 +135,54 @@ describe('TemplateListPage', () => { expect(getByText('Tags')).toBeInTheDocument(); }); + + describe('scaffolder page context menu', () => { + it('should render if context menu props are not set to false', async () => { + const { queryByTestId } = await renderInTestApp( + + + , + { mountedRoutes: { '/': rootRouteRef } }, + ); + expect(queryByTestId('menu-button')).toBeInTheDocument(); + }); + + it('should not render if context menu props are set to false', async () => { + const { queryByTestId } = await renderInTestApp( + + + , + { mountedRoutes: { '/': rootRouteRef } }, + ); + expect(queryByTestId('menu-button')).not.toBeInTheDocument(); + }); + }); }); From 259d3407b9b44b273a9e47e535ea6b3a94280f4c Mon Sep 17 00:00:00 2001 From: Min Kim Date: Mon, 20 Mar 2023 13:24:11 -0400 Subject: [PATCH 4/5] Add changesets and update api report Signed-off-by: Min Kim --- .changeset/thick-forks-prove.md | 7 +++++++ plugins/scaffolder-react/alpha-api-report.md | 14 ++++++++++++++ .../ScaffolderPageContextMenu.tsx | 6 ++++++ 3 files changed, 27 insertions(+) create mode 100644 .changeset/thick-forks-prove.md diff --git a/.changeset/thick-forks-prove.md b/.changeset/thick-forks-prove.md new file mode 100644 index 0000000000..5025852e79 --- /dev/null +++ b/.changeset/thick-forks-prove.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-scaffolder-react': minor +'@backstage/plugin-scaffolder': minor +--- + +Move `CategoryPicker` from `scaffolder` into `scaffolder-react` +Move `ContextMenu` into `scaffolder-react` and rename it to `ScaffolderPageContextMenu` diff --git a/plugins/scaffolder-react/alpha-api-report.md b/plugins/scaffolder-react/alpha-api-report.md index 8d3b593816..6eeb80d927 100644 --- a/plugins/scaffolder-react/alpha-api-report.md +++ b/plugins/scaffolder-react/alpha-api-report.md @@ -5,6 +5,7 @@ ```ts /// +import { AnyParams } from '@backstage/core-plugin-api'; import { ApiHolder } from '@backstage/core-plugin-api'; import { ComponentType } from 'react'; import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react'; @@ -22,6 +23,7 @@ import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RJSFSchema } from '@rjsf/utils'; +import { RouteFunc } from '@backstage/core-plugin-api'; import { ScaffolderStep } from '@backstage/plugin-scaffolder-react'; import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react'; import { SetStateAction } from 'react'; @@ -132,6 +134,18 @@ export type ReviewStateProps = { formState: JsonObject; }; +// @alpha (undocumented) +export function ScaffolderPageContextMenu( + props: ScaffolderPageContextMenuProps, +): JSX.Element | null; + +// @alpha (undocumented) +export type ScaffolderPageContextMenuProps = { + editor?: RouteFunc; + actions?: RouteFunc; + tasks?: RouteFunc; +}; + // @alpha export const Stepper: (stepperProps: StepperProps) => JSX.Element; diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index 0194137521..0e5bc3b6a9 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -36,12 +36,18 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ }, })); +/** + * @alpha + */ export type ScaffolderPageContextMenuProps = { editor?: RouteFunc; actions?: RouteFunc; tasks?: RouteFunc; }; +/** + * @alpha + */ export function ScaffolderPageContextMenu( props: ScaffolderPageContextMenuProps, ) { From 2cfd03d7376a528e3574e2203f2f1f71ea47f202 Mon Sep 17 00:00:00 2001 From: Min Kim Date: Mon, 20 Mar 2023 14:39:20 -0400 Subject: [PATCH 5/5] Update `ScaffolderPageContextMenu` props to take callbacks Signed-off-by: Min Kim --- .changeset/thin-spoons-prove.md | 5 ++++ plugins/scaffolder-react/alpha-api-report.md | 8 +++--- .../ScaffolderPageContextMenu.tsx | 26 ++++++++----------- .../TemplateListPage/TemplateListPage.tsx | 19 +++++++++++--- 4 files changed, 34 insertions(+), 24 deletions(-) create mode 100644 .changeset/thin-spoons-prove.md diff --git a/.changeset/thin-spoons-prove.md b/.changeset/thin-spoons-prove.md new file mode 100644 index 0000000000..a9bf3052f5 --- /dev/null +++ b/.changeset/thin-spoons-prove.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': minor +--- + +To offer better customization options, `ScaffolderPageContextMenu` takes callbacks as props instead of booleans diff --git a/plugins/scaffolder-react/alpha-api-report.md b/plugins/scaffolder-react/alpha-api-report.md index 6eeb80d927..c51f7ba518 100644 --- a/plugins/scaffolder-react/alpha-api-report.md +++ b/plugins/scaffolder-react/alpha-api-report.md @@ -5,7 +5,6 @@ ```ts /// -import { AnyParams } from '@backstage/core-plugin-api'; import { ApiHolder } from '@backstage/core-plugin-api'; import { ComponentType } from 'react'; import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react'; @@ -23,7 +22,6 @@ import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RJSFSchema } from '@rjsf/utils'; -import { RouteFunc } from '@backstage/core-plugin-api'; import { ScaffolderStep } from '@backstage/plugin-scaffolder-react'; import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react'; import { SetStateAction } from 'react'; @@ -141,9 +139,9 @@ export function ScaffolderPageContextMenu( // @alpha (undocumented) export type ScaffolderPageContextMenuProps = { - editor?: RouteFunc; - actions?: RouteFunc; - tasks?: RouteFunc; + onEditorClicked?: () => void; + onActionsClicked?: () => void; + onTasksClicked?: () => void; }; // @alpha diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index 0e5bc3b6a9..fc3c0249a0 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { RouteFunc, AnyParams } from '@backstage/core-plugin-api'; import { BackstageTheme } from '@backstage/theme'; import IconButton from '@material-ui/core/IconButton'; import ListItemIcon from '@material-ui/core/ListItemIcon'; @@ -28,7 +27,6 @@ import Edit from '@material-ui/icons/Edit'; import List from '@material-ui/icons/List'; import MoreVert from '@material-ui/icons/MoreVert'; import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; const useStyles = makeStyles((theme: BackstageTheme) => ({ button: { @@ -40,9 +38,9 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ * @alpha */ export type ScaffolderPageContextMenuProps = { - editor?: RouteFunc; - actions?: RouteFunc; - tasks?: RouteFunc; + onEditorClicked?: () => void; + onActionsClicked?: () => void; + onTasksClicked?: () => void; }; /** @@ -51,13 +49,11 @@ export type ScaffolderPageContextMenuProps = { export function ScaffolderPageContextMenu( props: ScaffolderPageContextMenuProps, ) { - const { editor, actions, tasks } = props; + const { onEditorClicked, onActionsClicked, onTasksClicked } = props; const classes = useStyles(); const [anchorEl, setAnchorEl] = useState(); - const navigate = useNavigate(); - - if (!editor && !actions) { + if (!onEditorClicked && !onActionsClicked) { return null; } @@ -90,24 +86,24 @@ export function ScaffolderPageContextMenu( transformOrigin={{ vertical: 'top', horizontal: 'right' }} > - {editor && ( - navigate(editor())}> + {onEditorClicked && ( + )} - {actions && ( - navigate(actions())}> + {onActionsClicked && ( + )} - {tasks && ( - navigate(tasks())}> + {onTasksClicked && ( + diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx index dc5d75d034..424293665b 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; +import { useNavigate } from 'react-router-dom'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; +import { useRouteRef } from '@backstage/core-plugin-api'; import { Content, @@ -38,7 +40,6 @@ import { } from '@backstage/plugin-scaffolder-react/alpha'; import { RegisterExistingButton } from './RegisterExistingButton'; -import { useRouteRef } from '@backstage/core-plugin-api'; import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups'; import { actionsRouteRef, @@ -82,6 +83,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => { groups: givenGroups = [], templateFilter, } = props; + const navigate = useNavigate(); const editorLink = useRouteRef(editRouteRef); const actionsLink = useRouteRef(actionsRouteRef); const tasksLink = useRouteRef(scaffolderListTaskRouteRef); @@ -91,9 +93,18 @@ export const TemplateListPage = (props: TemplateListPageProps) => { : [defaultGroup]; const scaffolderPageContextMenuProps = { - editor: props?.contextMenu?.editor !== false ? editorLink : undefined, - actions: props?.contextMenu?.actions !== false ? actionsLink : undefined, - tasks: props?.contextMenu?.tasks !== false ? tasksLink : undefined, + onEditorClicked: + props?.contextMenu?.editor !== false + ? () => navigate(editorLink()) + : undefined, + onActionsClicked: + props?.contextMenu?.actions !== false + ? () => navigate(actionsLink()) + : undefined, + onTasksClicked: + props?.contextMenu?.tasks !== false + ? () => navigate(tasksLink()) + : undefined, }; return (