Merge branch 'master' of github.com:backstage/backstage into blam/isomorphic-git

* 'master' of github.com:backstage/backstage: (23 commits)
  cli: fix windows tests
  Introduce slight bias towards positive trend in cost insights mock data
  core-api: rename BackstageRoutes to FlatRoutes
  Update plugins/catalog/src/hooks/useEntity.ts
  Fix parameter name in docstring for duration#inclusiveStartDateOf
  Adjust test
  Add changeset
  fix: token expiration in s, not ms
  Create loud-days-breathe.md
  Create polite-glasses-occur.md
  dev-utils: add a small label with the entity name to EntityGridItems
  dev-utils: add EntityGridItem for easily displaying various entity cards
  dev-utils: use dev index module as root for hot reloading
  dev-utils: add .registerPage for use with extensions
  catalog: rename EntityProvider to EntityLoaderProvider, and add new EntityProvider
  reduce close timeout to 100 ms
  changeset: add changeset for core-api RouteRef deprecations
  core-api: use typescript workaround for using private constructor instead of a runtime one
  core-api: deprecate RouteRef path and remove deprecated createSubRoute
  delay window close by 200 ms
  ...
This commit is contained in:
blam
2020-12-28 17:39:15 +01:00
30 changed files with 303 additions and 89 deletions
@@ -14,20 +14,27 @@
* limitations under the License.
*/
import * as os from 'os';
import * as path from 'path';
import { LinkedPackageResolvePlugin } from './LinkedPackageResolvePlugin';
describe('LinkedPackageResolvePlugin', () => {
const root = os.platform() === 'win32' ? 'C:\\root' : '/root';
it('should re-write paths for external packages', () => {
const plugin = new LinkedPackageResolvePlugin('/root/repo/node_modules', [
{
name: 'a',
location: '/root/external-a',
},
{
name: '@s/b',
location: '/root/external-b',
},
]);
const plugin = new LinkedPackageResolvePlugin(
path.resolve(root, 'repo/node_modules'),
[
{
name: 'a',
location: path.resolve(root, 'external-a'),
},
{
name: '@s/b',
location: path.resolve(root, 'external-b'),
},
],
);
const tapAsync = jest.fn();
const doResolve = jest.fn();
@@ -50,10 +57,10 @@ describe('LinkedPackageResolvePlugin', () => {
const callbackX = jest.fn();
tap(
{
request: '/root/repo/package/x/src/module.ts',
path: '/root/repo/package/x/src',
request: path.resolve(root, 'repo/package/x/src/module.ts'),
path: path.resolve(root, 'repo/package/x/src'),
context: {
issuer: '/root/repo/package/x/src/index.ts',
issuer: path.resolve(root, 'repo/package/x/src/index.ts'),
},
},
'some-context',
@@ -81,10 +88,10 @@ describe('LinkedPackageResolvePlugin', () => {
const callbackA = jest.fn();
tap(
{
request: '/root/external-a/src/module.ts',
path: '/root/external-a/src',
request: path.resolve(root, 'external-a/src/module.ts'),
path: path.resolve(root, 'external-a/src'),
context: {
issuer: '/root/external-a/src/index.ts',
issuer: path.resolve(root, 'external-a/src/index.ts'),
},
},
'some-context',
@@ -95,13 +102,16 @@ describe('LinkedPackageResolvePlugin', () => {
expect(doResolve).toHaveBeenCalledWith(
resolver.hooks.resolve,
{
request: '/root/external-a/src/module.ts',
path: '/root/repo/node_modules/a/src',
request: path.resolve(root, 'external-a/src/module.ts'),
path: path.resolve(root, 'repo/node_modules/a/src'),
context: {
issuer: '/root/repo/node_modules/a/src/index.ts',
issuer: path.resolve(root, 'repo/node_modules/a/src/index.ts'),
},
},
'resolve /root/external-a/src/module.ts in /root/repo/node_modules/a',
`resolve ${path.resolve(
root,
'external-a/src/module.ts',
)} in ${path.resolve(root, 'repo/node_modules/a')}`,
'some-context',
callbackA,
);
@@ -110,8 +120,8 @@ describe('LinkedPackageResolvePlugin', () => {
const callbackB = jest.fn();
tap(
{
request: '/root/external-b/src/module.ts',
path: '/root/external-b/src',
request: path.resolve(root, 'external-b/src/module.ts'),
path: path.resolve(root, 'external-b/src'),
context: {
issuer: false,
},
@@ -124,13 +134,16 @@ describe('LinkedPackageResolvePlugin', () => {
expect(doResolve).toHaveBeenLastCalledWith(
resolver.hooks.resolve,
{
request: '/root/external-b/src/module.ts',
path: '/root/repo/node_modules/@s/b/src',
request: path.resolve(root, 'external-b/src/module.ts'),
path: path.resolve(root, 'repo/node_modules/@s/b/src'),
context: {
issuer: false,
},
},
'resolve /root/external-b/src/module.ts in /root/repo/node_modules/@s/b',
`resolve ${path.resolve(
root,
'external-b/src/module.ts',
)} in ${path.resolve(root, 'repo/node_modules/@s/b')}`,
'some-context',
callbackB,
);
@@ -66,13 +66,11 @@ function createRoutesFromChildren(children: ReactNode): RouteObject[] {
});
}
type BackstageRoutesProps = {
type FlatRoutesProps = {
children: ReactNode;
};
export const BackstageRoutes = (
props: BackstageRoutesProps,
): JSX.Element | null => {
export const FlatRoutes = (props: FlatRoutesProps): JSX.Element | null => {
const routes = createRoutesFromChildren(props.children);
return useRoutes(routes);
};
+3 -19
View File
@@ -25,25 +25,15 @@ export class AbsoluteRouteRef<Params extends { [param in string]: string }> {
// TODO(Rugvip): Remove this, routes are looked up via the registry instead
get path() {
return this.config.path;
return this.config.path ?? '';
}
get title() {
return this.config.title;
}
/**
* This function should not be used, create a separate RouteRef instead
* @deprecated
*/
createSubRoute(): any {
throw new Error(
'This method should not be called, create a separate RouteRef instead',
);
}
toString() {
return `routeRef{path=${this.path}}`;
return `routeRef{title=${this.title}}`;
}
}
@@ -54,13 +44,7 @@ export function createRouteRef<
return new AbsoluteRouteRef<Params>(config);
}
const create = Symbol('create-external-route-ref');
export class ExternalRouteRef {
static [create]() {
return new ExternalRouteRef();
}
private constructor() {}
toString() {
@@ -69,5 +53,5 @@ export class ExternalRouteRef {
}
export function createExternalRouteRef(): ExternalRouteRef {
return ExternalRouteRef[create]();
return new ((ExternalRouteRef as unknown) as { new (): ExternalRouteRef })();
}
+1 -1
View File
@@ -21,6 +21,6 @@ export type {
ConcreteRoute,
MutableRouteRef,
} from './types';
export { BackstageRoutes } from './BackstageRoutes';
export { FlatRoutes } from './FlatRoutes';
export { createRouteRef } from './RouteRef';
export { useRouteRef } from './hooks';
+3 -6
View File
@@ -19,14 +19,10 @@ import { IconComponent } from '../icons';
// @ts-ignore, we're just embedding the Params type for usage in other places
export type RouteRef<Params extends { [param in string]: string } = {}> = {
// TODO(Rugvip): Remove path, look up via registry instead
/** @deprecated paths are no longer accessed directly from RouteRefs, use useRouteRef instead */
path: string;
icon?: IconComponent;
title: string;
/**
* This function should not be used, create a separate RouteRef instead
* @deprecated
*/
createSubRoute(): any;
};
export type AnyRouteRef = RouteRef<any>;
@@ -51,7 +47,8 @@ export type MutableRouteRef = RouteRef<{}>;
export type RouteRefConfig<Params extends { [param in string]: string }> = {
params?: Array<keyof Params>;
path: string;
/** @deprecated Route refs no longer decide their own path */
path?: string;
icon?: IconComponent;
title: string;
};
+2
View File
@@ -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",
@@ -0,0 +1,49 @@
/*
* 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, 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<BackstageTheme, { entity: Entity }>(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<GridProps, 'item' | 'container'> & { entity: Entity }): JSX.Element => {
const itemClasses = useStyles({ entity });
return (
<EntityProvider entity={entity}>
<Grid classes={{ root: itemClasses.root, ...classes }} {...rest} item />
</EntityProvider>
);
};
@@ -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';
@@ -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';
+47 -5
View File
@@ -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';
@@ -29,9 +29,25 @@ import {
AlertDisplay,
OAuthRequestDialog,
AnyApiFactory,
IconComponent,
FlatRoutes,
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 = () => <Outlet />;
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<typeof createPlugin>;
@@ -44,6 +60,8 @@ class DevAppBuilder {
private readonly plugins = new Array<BackstagePlugin>();
private readonly apis = new Array<AnyApiFactory>();
private readonly rootChildren = new Array<ReactNode>();
private readonly routes = new Array<JSX.Element>();
private readonly sidebarItems = new Array<JSX.Element>();
/**
* 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(
<SidebarItem
key={path}
to={path}
text={title ?? path}
icon={icon ?? BookmarkIcon}
/>,
);
this.routes.push(
<GatheringRoute key={path} path={path} children={element} />,
);
return this;
}
/**
* Build a DevApp component using the resources registered so far
*/
@@ -100,7 +133,10 @@ class DevAppBuilder {
<AppRouter>
<SidebarPage>
{sidebar}
<Routes>{deprecatedAppRoutes}</Routes>
<FlatRoutes>
{this.routes}
{deprecatedAppRoutes}
</FlatRoutes>
</SidebarPage>
</AppRouter>
</AppProvider>
@@ -114,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);
@@ -166,6 +207,7 @@ class DevAppBuilder {
return (
<Sidebar>
<SidebarSpacer />
{this.sidebarItems}
{sidebarItems}
</Sidebar>
);
@@ -199,7 +241,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();
+2
View File
@@ -13,4 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './components';
export * from './devApp';
@@ -14,6 +14,8 @@
* limitations under the License.
*/
import mockFs from 'mock-fs';
import * as os from 'os';
import * as path from 'path';
import { getFileTreeRecursively, getHeadersForFileExtension } from './helpers';
describe('getHeadersForFileExtension', () => {
@@ -39,9 +41,11 @@ describe('getHeadersForFileExtension', () => {
});
describe('getFileTreeRecursively', () => {
const root = os.platform() === 'win32' ? 'C:\\rootDir' : '/rootDir';
beforeEach(() => {
mockFs({
'/rootDir': {
[root]: {
file1: '',
subDirA: {
file2: '',
@@ -57,9 +61,9 @@ describe('getFileTreeRecursively', () => {
});
it('returns complete file tree of a path', async () => {
const fileList = await getFileTreeRecursively('/rootDir');
const fileList = await getFileTreeRecursively(root);
expect(fileList.length).toBe(2);
expect(fileList).toContain('/rootDir/file1');
expect(fileList).toContain('/rootDir/subDirA/file2');
expect(fileList).toContain(path.resolve(root, 'file1'));
expect(fileList).toContain(path.resolve(root, 'subDirA/file2'));
});
});