From 91518a253f5eaac7c993093f69bfa5f1482f8576 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 23 Dec 2020 17:56:01 +0100 Subject: [PATCH 1/5] dev-utils: add .registerPage for use with extensions Co-authored-by: blam --- packages/dev-utils/src/devApp/render.tsx | 43 ++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx index 86a8b2f7cb..b14fbbf776 100644 --- a/packages/dev-utils/src/devApp/render.tsx +++ b/packages/dev-utils/src/devApp/render.tsx @@ -29,9 +29,25 @@ import { AlertDisplay, OAuthRequestDialog, AnyApiFactory, + IconComponent, + BackstageRoutes, + attachComponentData, } from '@backstage/core'; import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied'; -import { Routes } from 'react-router'; +import { Outlet } from 'react-router'; + +const GatheringRoute: (props: { + path: string; + children: JSX.Element; +}) => JSX.Element = () => ; + +attachComponentData(GatheringRoute, 'core.gatherMountPoints', true); + +type RegisterPageOptions = { + element: JSX.Element; + title?: string; + icon?: IconComponent; +}; // TODO(rugvip): export proper plugin type from core that isn't the plugin class type BackstagePlugin = ReturnType; @@ -44,6 +60,8 @@ class DevAppBuilder { private readonly plugins = new Array(); private readonly apis = new Array(); private readonly rootChildren = new Array(); + private readonly routes = new Array(); + private readonly sidebarItems = new Array(); /** * Register one or more plugins to render in the dev app @@ -75,6 +93,21 @@ class DevAppBuilder { return this; } + addPage({ element, title, icon }: RegisterPageOptions): DevAppBuilder { + const path = `/page-${this.routes.length + 1}`; + this.sidebarItems.push( + , + ); + this.routes.push( + , + ); + return this; + } /** * Build a DevApp component using the resources registered so far */ @@ -100,7 +133,10 @@ class DevAppBuilder { {sidebar} - {deprecatedAppRoutes} + + {this.routes} + {deprecatedAppRoutes} + @@ -166,6 +202,7 @@ class DevAppBuilder { return ( + {this.sidebarItems} {sidebarItems} ); @@ -199,7 +236,7 @@ class DevAppBuilder { // this to provide their own plugin dev wrappers. /** - * Creates a dev app for rendering one or more plugins and exposing the touchpoints of the plugin. + * Creates a dev app for rendering one or more plugins and exposing the touch points of the plugin. */ export function createDevApp() { return new DevAppBuilder(); From 4f467143c32cc0dac3d17a60dd1d8f25c3c24773 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 23 Dec 2020 17:56:43 +0100 Subject: [PATCH 2/5] dev-utils: use dev index module as root for hot reloading Co-authored-by: blam --- packages/dev-utils/src/devApp/render.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx index b14fbbf776..f15a4c4078 100644 --- a/packages/dev-utils/src/devApp/render.tsx +++ b/packages/dev-utils/src/devApp/render.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { hot } from 'react-hot-loader/root'; +import { hot } from 'react-hot-loader'; import React, { ComponentType, ReactNode } from 'react'; import ReactDOM from 'react-dom'; import BookmarkIcon from '@material-ui/icons/Bookmark'; @@ -150,7 +150,12 @@ class DevAppBuilder { * Build and render directory to #root element, with react hot loading. */ render(): void { - const DevApp = hot(this.build()); + const hotModule = + require.cache['./dev/index.tsx'] ?? + require.cache['./dev/index.ts'] ?? + module; + + const DevApp = hot(hotModule)(this.build()); const paths = this.findPluginPaths(this.plugins); From 36ffbd71b705de38ca864c5946abcbc72cf04bc7 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 23 Dec 2020 17:57:55 +0100 Subject: [PATCH 3/5] dev-utils: add EntityGridItem for easily displaying various entity cards Co-authored-by: blam --- packages/dev-utils/package.json | 2 ++ .../EntityGridItem/EntityGridItem.tsx | 31 +++++++++++++++++++ .../src/components/EntityGridItem/index.ts | 17 ++++++++++ packages/dev-utils/src/components/index.ts | 17 ++++++++++ packages/dev-utils/src/index.ts | 2 ++ 5 files changed, 69 insertions(+) create mode 100644 packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx create mode 100644 packages/dev-utils/src/components/EntityGridItem/index.ts create mode 100644 packages/dev-utils/src/components/index.ts diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json index d52e14a728..1e0304a5a9 100644 --- a/packages/dev-utils/package.json +++ b/packages/dev-utils/package.json @@ -30,6 +30,8 @@ }, "dependencies": { "@backstage/core": "^0.4.0", + "@backstage/catalog-model": "^0.6.0", + "@backstage/plugin-catalog": "^0.2.8", "@backstage/test-utils": "^0.1.5", "@backstage/theme": "^0.2.2", "@material-ui/core": "^4.11.0", diff --git a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx new file mode 100644 index 0000000000..a83d1d2ffc --- /dev/null +++ b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx @@ -0,0 +1,31 @@ +/* + * Copyright 2020 Spotify AB + * + * 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 from 'react'; +import { Grid, GridProps } from '@material-ui/core'; +import { Entity } from '@backstage/catalog-model'; +import { EntityProvider } from '@backstage/plugin-catalog'; + +export const EntityGridItem = ({ + entity, + ...rest +}: Omit & { entity: Entity }): JSX.Element => { + return ( + + + + ); +}; diff --git a/packages/dev-utils/src/components/EntityGridItem/index.ts b/packages/dev-utils/src/components/EntityGridItem/index.ts new file mode 100644 index 0000000000..e0f07b13ba --- /dev/null +++ b/packages/dev-utils/src/components/EntityGridItem/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * 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 { EntityGridItem } from './EntityGridItem'; diff --git a/packages/dev-utils/src/components/index.ts b/packages/dev-utils/src/components/index.ts new file mode 100644 index 0000000000..34224f09fd --- /dev/null +++ b/packages/dev-utils/src/components/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * 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 * from './EntityGridItem'; diff --git a/packages/dev-utils/src/index.ts b/packages/dev-utils/src/index.ts index c05e67ddbc..97add5dd86 100644 --- a/packages/dev-utils/src/index.ts +++ b/packages/dev-utils/src/index.ts @@ -13,4 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +export * from './components'; export * from './devApp'; From 920b5a4f54433bc7fa4b6a39075918e72d7e2d84 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 23 Dec 2020 18:17:50 +0100 Subject: [PATCH 4/5] dev-utils: add a small label with the entity name to EntityGridItems --- .../EntityGridItem/EntityGridItem.tsx | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx index a83d1d2ffc..077a8f85e8 100644 --- a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx +++ b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx @@ -15,17 +15,35 @@ */ import React from 'react'; -import { Grid, GridProps } from '@material-ui/core'; +import { Grid, GridProps, makeStyles } from '@material-ui/core'; import { Entity } from '@backstage/catalog-model'; import { EntityProvider } from '@backstage/plugin-catalog'; +import { BackstageTheme } from '@backstage/theme'; + +const useStyles = makeStyles(theme => ({ + root: ({ entity }) => ({ + position: 'relative', + + '&::before': { + content: `"${entity.metadata.name}"`, + top: -theme.typography.fontSize + 4, + display: 'block', + position: 'absolute', + color: theme.palette.textSubtle, + }, + }), +})); export const EntityGridItem = ({ entity, + classes, ...rest }: Omit & { entity: Entity }): JSX.Element => { + const itemClasses = useStyles({ entity }); + return ( - + ); }; From 696b8ce74a864d37106d637f7b3554bd39d6d9ed Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 23 Dec 2020 18:46:42 +0100 Subject: [PATCH 5/5] Create loud-days-breathe.md --- .changeset/loud-days-breathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/loud-days-breathe.md diff --git a/.changeset/loud-days-breathe.md b/.changeset/loud-days-breathe.md new file mode 100644 index 0000000000..f8eb561f31 --- /dev/null +++ b/.changeset/loud-days-breathe.md @@ -0,0 +1,5 @@ +--- +'@backstage/dev-utils': patch +--- + +Add new `addPage` method for use with extensions, as well as an `EntityGridItem` to easily create different test cases for entity overview cards.