paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

Merge pull request #16949 from minkimcello/mk/move-scaf-comps

Browse Source 
Relocate some UI components into `scaffolder-react`
This commit is contained in:
Ben Lambert
2023-03-21 08:47:28 +01:00
committed by GitHub
parent 2c944c823d 2cfd03d737
commit ab69d13542
11 changed files with 179 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/thick-forks-prove.md
+7
View File
@@ -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`
.changeset/thin-spoons-prove.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-scaffolder-react': minor
---
To offer better customization options, `ScaffolderPageContextMenu` takes callbacks as props instead of booleans
plugins/scaffolder-react/alpha-api-report.md
+15
View File
@@ -132,6 +132,18 @@ export type ReviewStateProps = {
formState: JsonObject;
};
// @alpha (undocumented)
export function ScaffolderPageContextMenu(
props: ScaffolderPageContextMenuProps,
): JSX.Element | null;
// @alpha (undocumented)
export type ScaffolderPageContextMenuProps = {
onEditorClicked?: () => void;
onActionsClicked?: () => void;
onTasksClicked?: () => void;
};
// @alpha
export const Stepper: (stepperProps: StepperProps) => JSX.Element;
@@ -190,6 +202,9 @@ export interface TemplateCardProps {
template: TemplateEntityV1beta3;
}
// @alpha
export const TemplateCategoryPicker: () => JSX.Element | null;
// @alpha
export const TemplateGroup: (props: TemplateGroupProps) => JSX.Element;
plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx → plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx
+20 -27
View File
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import { useRouteRef } 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,12 +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';
import {
actionsRouteRef,
editRouteRef,
scaffolderListTaskRouteRef,
} from '../../routes';
const useStyles = makeStyles((theme: BackstageTheme) => ({
button: {
@@ -41,26 +34,26 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
},
}));
/**
* @alpha
*/
export type ScaffolderPageContextMenuProps = {
editor?: boolean;
actions?: boolean;
tasks?: boolean;
onEditorClicked?: () => void;
onActionsClicked?: () => void;
onTasksClicked?: () => void;
};
export function ContextMenu(props: ScaffolderPageContextMenuProps) {
/**
* @alpha
*/
export function ScaffolderPageContextMenu(
props: ScaffolderPageContextMenuProps,
) {
const { onEditorClicked, onActionsClicked, onTasksClicked } = props;
const classes = useStyles();
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
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 (!onEditorClicked && !onActionsClicked) {
return null;
}
@@ -93,24 +86,24 @@ export function ContextMenu(props: ScaffolderPageContextMenuProps) {
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<MenuList>
{showEditor && (
<MenuItem onClick={() => navigate(editLink())}>
{onEditorClicked && (
<MenuItem onClick={onEditorClicked}>
<ListItemIcon>
<Edit fontSize="small" />
</ListItemIcon>
<ListItemText primary="Template Editor" />
</MenuItem>
)}
{showActions && (
<MenuItem onClick={() => navigate(actionsLink())}>
{onActionsClicked && (
<MenuItem onClick={onActionsClicked}>
<ListItemIcon>
<Description fontSize="small" />
</ListItemIcon>
<ListItemText primary="Installed Actions" />
</MenuItem>
)}
{showTasks && (
<MenuItem onClick={() => navigate(tasksLink())}>
{onTasksClicked && (
<MenuItem onClick={onTasksClicked}>
<ListItemIcon>
<List fontSize="small" />
</ListItemIcon>
plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/index.ts
+19
View File
@@ -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';
plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.test.tsx → plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx
+8 -8
View File
@@ -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(
<TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
<CategoryPicker />
<TemplateCategoryPicker />
</TestApiProvider>,
);
@@ -56,7 +56,7 @@ describe('CategoryPicker', () => {
const { findByTestId } = await renderInTestApp(
<TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
<CategoryPicker />
<TemplateCategoryPicker />
</TestApiProvider>,
);
@@ -70,7 +70,7 @@ describe('CategoryPicker', () => {
const { queryByText } = await renderInTestApp(
<TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
<CategoryPicker />
<TemplateCategoryPicker />
</TestApiProvider>,
);
@@ -86,7 +86,7 @@ describe('CategoryPicker', () => {
const { getByRole } = await renderInTestApp(
<TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
<CategoryPicker />
<TemplateCategoryPicker />
</TestApiProvider>,
);
@@ -108,7 +108,7 @@ describe('CategoryPicker', () => {
const { getByRole } = await renderInTestApp(
<TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
<CategoryPicker />
<TemplateCategoryPicker />
</TestApiProvider>,
);
@@ -139,7 +139,7 @@ describe('CategoryPicker', () => {
const { getByRole } = await renderInTestApp(
<TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
<CategoryPicker />
<TemplateCategoryPicker />
</TestApiProvider>,
);
plugins/scaffolder/src/next/TemplateListPage/CategoryPicker.tsx → plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx
+3 -1
View File
@@ -37,8 +37,10 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
/**
* 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();
plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/index.ts
+16
View File
@@ -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';
plugins/scaffolder-react/src/next/components/index.ts
+2
View File
@@ -22,3 +22,5 @@ export * from './TemplateOutputs';
export * from './Form';
export * from './TaskSteps';
export * from './TaskLogStream';
export * from './TemplateCategoryPicker';
export * from './ScaffolderPageContextMenu';
plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
+50
View File
@@ -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(
<TestApiProvider
apis={[
[catalogApiRef, mockCatalogApi],
[
starredEntitiesApiRef,
new DefaultStarredEntitiesApi({
storageApi: MockStorageApi.create(),
}),
],
[permissionApiRef, {}],
]}
>
<TemplateListPage />
</TestApiProvider>,
{ mountedRoutes: { '/': rootRouteRef } },
);
expect(queryByTestId('menu-button')).toBeInTheDocument();
});
it('should not render if context menu props are set to false', async () => {
const { queryByTestId } = await renderInTestApp(
<TestApiProvider
apis={[
[catalogApiRef, mockCatalogApi],
[
starredEntitiesApiRef,
new DefaultStarredEntitiesApi({
storageApi: MockStorageApi.create(),
}),
],
[permissionApiRef, {}],
]}
>
<TemplateListPage
contextMenu={{
editor: false,
actions: false,
tasks: false,
}}
/>
</TestApiProvider>,
{ mountedRoutes: { '/': rootRouteRef } },
);
expect(queryByTestId('menu-button')).not.toBeInTheDocument();
});
});
});
plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
+34 -6
View File
@@ -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,
@@ -32,12 +34,19 @@ import {
CatalogFilterLayout,
UserListPicker,
} from '@backstage/plugin-catalog-react';
import { CategoryPicker } from './CategoryPicker';
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<{
@@ -74,11 +83,30 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
groups: givenGroups = [],
templateFilter,
} = props;
const navigate = useNavigate();
const editorLink = useRouteRef(editRouteRef);
const actionsLink = useRouteRef(actionsRouteRef);
const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
const groups = givenGroups.length
? createGroupsWithOther(givenGroups)
: [defaultGroup];
const scaffolderPageContextMenuProps = {
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 (
<EntityListProvider>
<Page themeId="website">
@@ -87,7 +115,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
title="Create a new component"
subtitle="Create new software components using standard templates in your organization"
>
<ContextMenu {...props.contextMenu} />
<ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />
</Header>
<Content>
<ContentHeader title="Available Templates">
@@ -110,7 +138,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
initialFilter="all"
availableFilters={['all', 'starred']}
/>
<CategoryPicker />
<TemplateCategoryPicker />
<EntityTagPicker />
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>