From 4fdb1def391fb1c3471145da01dd1262d685d821 Mon Sep 17 00:00:00 2001 From: blam Date: Sun, 7 Jun 2020 03:07:46 +0200 Subject: [PATCH 01/63] chore(react-router-v6): starting to move things to react-router-v6 --- packages/app/package.json | 3 +- .../default-app/packages/app/package.json.hbs | 102 ++++++++-------- .../plugins/welcome/package.json.hbs | 74 ++++++------ packages/core-api/package.json | 2 +- packages/core-api/src/app/App.tsx | 20 ++-- packages/core/package.json | 5 +- .../core/src/layout/ErrorPage/ErrorPage.tsx | 4 +- packages/dev-utils/package.json | 4 +- packages/test-utils/package.json | 4 +- plugins/catalog/package.json | 4 +- plugins/circleci/package.json | 4 +- plugins/circleci/src/components/App.tsx | 23 ++-- plugins/graphiql/package.json | 2 +- plugins/home-page/package.json | 2 +- plugins/lighthouse/package.json | 2 +- .../src/components/AuditList/index.test.tsx | 8 +- .../src/components/AuditList/index.tsx | 4 +- .../src/components/CreateAudit/index.test.tsx | 8 +- .../src/components/CreateAudit/index.tsx | 12 +- plugins/register-component/package.json | 4 +- plugins/scaffolder/package.json | 2 +- plugins/welcome/package.json | 2 +- yarn.lock | 109 ++++-------------- 23 files changed, 167 insertions(+), 237 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 15681d0548..6b5c5b4e78 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -22,7 +22,7 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-hot-loader": "^4.12.21", - "react-router-dom": "^5.2.0", + "react-router-dom": "6.0.0-alpha.5", "react-use": "^14.2.0", "zen-observable": "^0.8.15" }, @@ -34,7 +34,6 @@ "@types/jest": "^25.2.2", "@types/jquery": "^3.3.34", "@types/node": "^12.0.0", - "@types/react-router-dom": "^5.1.3", "@types/zen-observable": "^0.8.0", "cross-env": "^7.0.0", "cypress": "^4.2.0", diff --git a/packages/cli/templates/default-app/packages/app/package.json.hbs b/packages/cli/templates/default-app/packages/app/package.json.hbs index 2c35dee754..46e27c5b91 100644 --- a/packages/cli/templates/default-app/packages/app/package.json.hbs +++ b/packages/cli/templates/default-app/packages/app/package.json.hbs @@ -1,53 +1,53 @@ { - "name": "app", - "version": "0.0.0", - "private": true, - "dependencies": { - "@material-ui/core": "^4.9.1", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "4.0.0-alpha.45", - "@backstage/cli": "^{{version}}", - "@backstage/core": "^{{version}}", - "@backstage/theme": "^{{version}}", - "plugin-welcome": "0.0.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-router-dom": "^5.2.0", - "react-use": "^14.2.0" - }, - "devDependencies": { - "@testing-library/jest-dom": "^5.7.0", - "@testing-library/react": "^9.3.2", - "@testing-library/user-event": "^10.2.4", - "@types/jest": "^25.2.2", - "@types/node": "^12.0.0", - "@types/react-router-dom": "^5.1.3", - "@types/testing-library__jest-dom": "^5.0.4", - "cross-env": "^7.0.0", - "cypress": "^4.2.0", - "eslint-plugin-cypress": "^2.10.3", - "start-server-and-test": "^1.10.11" - }, - "scripts": { - "start": "backstage-cli app:serve", - "bundle": "backstage-cli app:build", - "test": "backstage-cli test", - "lint": "backstage-cli lint", - "test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev", - "test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run", - "cy:dev": "cypress open", - "cy:run": "cypress run" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } +"name": "app", +"version": "0.0.0", +"private": true, +"dependencies": { +"@material-ui/core": "^4.9.1", +"@material-ui/icons": "^4.9.1", +"@material-ui/lab": "4.0.0-alpha.45", +"@backstage/cli": "^{{version}}", +"@backstage/core": "^{{version}}", +"@backstage/theme": "^{{version}}", +"plugin-welcome": "0.0.0", +"react": "^16.13.1", +"react-dom": "^16.13.1", +"react-router-dom": "6.0.0-alpha.5", +"react-use": "^14.2.0" +}, +"devDependencies": { +"@testing-library/jest-dom": "^5.7.0", +"@testing-library/react": "^9.3.2", +"@testing-library/user-event": "^10.2.4", +"@types/jest": "^25.2.2", +"@types/node": "^12.0.0", +"@types/react-router-dom": "6.0.0-alpha.5", +"@types/testing-library__jest-dom": "^5.0.4", +"cross-env": "^7.0.0", +"cypress": "^4.2.0", +"eslint-plugin-cypress": "^2.10.3", +"start-server-and-test": "^1.10.11" +}, +"scripts": { +"start": "backstage-cli app:serve", +"bundle": "backstage-cli app:build", +"test": "backstage-cli test", +"lint": "backstage-cli lint", +"test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev", +"test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run", +"cy:dev": "cypress open", +"cy:run": "cypress run" +}, +"browserslist": { +"production": [ +">0.2%", +"not dead", +"not op_mini all" +], +"development": [ +"last 1 chrome version", +"last 1 firefox version", +"last 1 safari version" +] +} } diff --git a/packages/cli/templates/default-app/plugins/welcome/package.json.hbs b/packages/cli/templates/default-app/plugins/welcome/package.json.hbs index b18839bab6..42676f56ee 100644 --- a/packages/cli/templates/default-app/plugins/welcome/package.json.hbs +++ b/packages/cli/templates/default-app/plugins/welcome/package.json.hbs @@ -1,39 +1,39 @@ { - "name": "plugin-welcome", - "version": "0.0.0", - "main": "dist/index.esm.js", - "main:src": "src/index.ts", - "types": "src/index.ts", - "private": true, - "scripts": { - "build": "backstage-cli plugin:build", - "start": "backstage-cli plugin:serve", - "lint": "backstage-cli lint", - "test": "backstage-cli test", - "diff": "backstage-cli plugin:diff", - "prepack": "backstage-cli prepack", - "postpack": "backstage-cli postpack", - "clean": "backstage-cli clean" - }, - "dependencies": { - "@backstage/core": "^{{version}}", - "@backstage/theme": "^{{version}}", - "@material-ui/core": "^4.9.1", - "@material-ui/icons": "^4.9.1", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-use": "^14.2.0", - "react-router-dom": "^5.2.0" - }, - "devDependencies": { - "@backstage/cli": "^{{version}}", - "@backstage/dev-utils": "^{{version}}", - "@testing-library/jest-dom": "^5.7.0", - "@testing-library/react": "^9.3.2", - "@types/testing-library__jest-dom": "^5.0.4", - "jest-fetch-mock": "^3.0.3" - }, - "files": [ - "dist/**/*.{js,d.ts}" - ] +"name": "plugin-welcome", +"version": "0.0.0", +"main": "dist/index.esm.js", +"main:src": "src/index.ts", +"types": "src/index.ts", +"private": true, +"scripts": { +"build": "backstage-cli plugin:build", +"start": "backstage-cli plugin:serve", +"lint": "backstage-cli lint", +"test": "backstage-cli test", +"diff": "backstage-cli plugin:diff", +"prepack": "backstage-cli prepack", +"postpack": "backstage-cli postpack", +"clean": "backstage-cli clean" +}, +"dependencies": { +"@backstage/core": "^{{version}}", +"@backstage/theme": "^{{version}}", +"@material-ui/core": "^4.9.1", +"@material-ui/icons": "^4.9.1", +"react": "^16.13.1", +"react-dom": "^16.13.1", +"react-use": "^14.2.0", +"react-router-dom": "6.0.0-alpha.5" +}, +"devDependencies": { +"@backstage/cli": "^{{version}}", +"@backstage/dev-utils": "^{{version}}", +"@testing-library/jest-dom": "^5.7.0", +"@testing-library/react": "^9.3.2", +"@types/testing-library__jest-dom": "^5.0.4", +"jest-fetch-mock": "^3.0.3" +}, +"files": [ +"dist/**/*.{js,d.ts}" +] } diff --git a/packages/core-api/package.json b/packages/core-api/package.json index 8139f2c54a..aa88fb1aeb 100644 --- a/packages/core-api/package.json +++ b/packages/core-api/package.json @@ -34,7 +34,7 @@ "@types/react": "^16.9", "prop-types": "^15.7.2", "react": "^16.12.0", - "react-router-dom": "^5.2.0", + "react-router-dom": "6.0.0-alpha.5", "react-use": "^14.2.0", "zen-observable": "^0.8.15" }, diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx index 575dcfc59d..e47aa545ab 100644 --- a/packages/core-api/src/app/App.tsx +++ b/packages/core-api/src/app/App.tsx @@ -15,7 +15,7 @@ */ import React, { ComponentType, FC } from 'react'; -import { Route, Switch, Redirect } from 'react-router-dom'; +import { Route, Redirect, Routes, Navigate } from 'react-router-dom'; import { AppContextProvider } from './AppContext'; import { BackstageApp, AppComponents, AppConfigLoader } from './types'; import { BackstagePlugin } from '../plugin'; @@ -85,26 +85,26 @@ export class PrivateAppImpl implements BackstageApp { for (const output of plugin.output()) { switch (output.type) { case 'legacy-route': { - const { path, component, options = {} } = output; + const { path, component: Component, options = {} } = output; const { exact = true } = options; routes.push( } exact={exact} />, ); break; } case 'route': { - const { target, component, options = {} } = output; + const { target, component: Component, options = {} } = output; const { exact = true } = options; routes.push( } exact={exact} />, ); @@ -114,7 +114,7 @@ export class PrivateAppImpl implements BackstageApp { const { path, target, options = {} } = output; const { exact = true } = options; routes.push( - , + , ); break; } @@ -122,7 +122,7 @@ export class PrivateAppImpl implements BackstageApp { const { from, to, options = {} } = output; const { exact = true } = options; routes.push( - + {routes} - - + } /> + ); return () => rendered; diff --git a/packages/core/package.json b/packages/core/package.json index 818634238b..6c54b2c59e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -34,7 +34,6 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.45", "@types/react": "^16.9", - "@types/react-router-dom": "^5.1.5", "@types/react-sparklines": "^1.7.0", "classnames": "^2.2.6", "clsx": "^1.1.0", @@ -45,8 +44,8 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "6.0.0", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", + "react-router": "6.0.0-alpha.5", + "react-router-dom": "6.0.0-alpha.5", "react-sparklines": "^1.7.0", "react-syntax-highlighter": "^12.2.1", "react-use": "^14.2.0" diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.tsx index b94c7409fc..fa2315307f 100644 --- a/packages/core/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core/src/layout/ErrorPage/ErrorPage.tsx @@ -19,7 +19,7 @@ import { Typography, Link, Grid } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import { MicDrop } from './MicDrop'; -import { useHistory } from 'react-router'; +import { useNavigate } from 'react-router'; interface IErrorPageProps { status: string; @@ -40,7 +40,7 @@ const useStyles = makeStyles(theme => ({ export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => { const classes = useStyles(); - const history = useHistory(); + const history = useNavigate(); return ( diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json index ab595ea9a7..b2c5e1fa59 100644 --- a/packages/dev-utils/package.json +++ b/packages/dev-utils/package.json @@ -41,8 +41,8 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-hot-loader": "^4.12.21", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0" + "react-router": "^6.0.0-alpha.5", + "react-router-dom": "^6.0.0-alpha.5" }, "devDependencies": { "@types/jest": "^25.2.2", diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 136b6d6854..8f23e6b05e 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -39,8 +39,8 @@ "@types/react": "^16.9", "react": "^16.12.0", "react-dom": "^16.12.0", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0" + "react-router": "^6.0.0-alpha.5", + "react-router-dom": "^6.0.0-alpha.5" }, "devDependencies": { "@types/jest": "^25.2.2", diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index 5445fffb32..44b9c63435 100644 --- a/plugins/catalog/package.json +++ b/plugins/catalog/package.json @@ -27,8 +27,8 @@ "@material-ui/lab": "4.0.0-alpha.45", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", + "react-router": "^6.0.0-alpha.5", + "react-router-dom": "^6.0.0-alpha.5", "react-use": "^14.2.0" }, "devDependencies": { diff --git a/plugins/circleci/package.json b/plugins/circleci/package.json index bbcac8e9eb..3158acadfb 100644 --- a/plugins/circleci/package.json +++ b/plugins/circleci/package.json @@ -37,8 +37,8 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-lazylog": "^4.5.2", - "react-router": "^5.1.2", - "react-router-dom": "^5.1.2", + "react-router": "^6.0.0-alpha.5", + "react-router-dom": "^6.0.0-alpha.5", "react-use": "^14.2.0" }, "devDependencies": { diff --git a/plugins/circleci/src/components/App.tsx b/plugins/circleci/src/components/App.tsx index 1649c01b70..5907146340 100644 --- a/plugins/circleci/src/components/App.tsx +++ b/plugins/circleci/src/components/App.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React from 'react'; -import { Switch, Route, MemoryRouter } from 'react-router'; +import { Route, MemoryRouter, Routes } from 'react-router'; import { BuildsPage, Builds } from '../pages/BuildsPage'; import { DetailedViewPage, BuildWithSteps } from '../pages/BuildWithStepsPage'; import { AppStateProvider } from '../state'; @@ -24,14 +24,13 @@ export const App = () => { return ( <> - - + + } /> } /> - + @@ -45,14 +44,10 @@ export const CircleCIWidget = () => ( <> - - - - + + } /> + } /> + diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index a3fee6e217..3062971dec 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -53,7 +53,7 @@ "@types/node": "^12.0.0", "@types/testing-library__jest-dom": "^5.0.4", "jest-fetch-mock": "^3.0.3", - "react-router-dom": "^5.2.0" + "react-router-dom": "6.0.0-alpha.5" }, "files": [ "dist/**/*.{js,d.ts}" diff --git a/plugins/home-page/package.json b/plugins/home-page/package.json index fa1236861c..cfe196a9d3 100644 --- a/plugins/home-page/package.json +++ b/plugins/home-page/package.json @@ -36,7 +36,7 @@ "@types/node": "^12.0.0", "@types/testing-library__jest-dom": "^5.0.4", "jest-fetch-mock": "^3.0.3", - "react-router-dom": "^5.2.0" + "react-router-dom": "6.0.0-alpha.5" }, "files": [ "dist/**/*.{js,d.ts}" diff --git a/plugins/lighthouse/package.json b/plugins/lighthouse/package.json index d8e2b53ace..aba8d964be 100644 --- a/plugins/lighthouse/package.json +++ b/plugins/lighthouse/package.json @@ -25,7 +25,7 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-markdown": "^4.3.1", - "react-router-dom": "^5.2.0", + "react-router-dom": "6.0.0-alpha.5", "react-use": "^14.2.0" }, "devDependencies": { diff --git a/plugins/lighthouse/src/components/AuditList/index.test.tsx b/plugins/lighthouse/src/components/AuditList/index.test.tsx index bcd486e876..612bed4635 100644 --- a/plugins/lighthouse/src/components/AuditList/index.test.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.test.tsx @@ -22,7 +22,7 @@ jest.mock('react-router-dom', () => { }; return { ...actual, - useHistory: jest.fn(() => mocks), + useNavigate: jest.fn(() => mocks), }; }); @@ -41,7 +41,7 @@ import AuditList from '.'; import * as data from '../../__fixtures__/website-list-response.json'; -const { useHistory } = jest.requireMock('react-router-dom'); +const { useNavigate } = jest.requireMock('react-router-dom'); const websiteListResponse = data as WebsiteListResponse; describe('AuditList', () => { @@ -145,7 +145,9 @@ describe('AuditList', () => { ); const element = await rendered.findByLabelText(/Go to page 1/); fireEvent.click(element); - expect(useHistory().replace).toHaveBeenCalledWith(`/lighthouse?page=1`); + expect(useNavigate().replace).toHaveBeenCalledWith( + `/lighthouse?page=1`, + ); }); }); }); diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx index 4dbbb05295..28fbc06ce1 100644 --- a/plugins/lighthouse/src/components/AuditList/index.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.tsx @@ -16,7 +16,7 @@ import React, { useState, useMemo, FC, ReactNode } from 'react'; import { useLocalStorage, useAsync } from 'react-use'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Grid, Button } from '@material-ui/core'; import Alert from '@material-ui/lab/Alert'; import Pagination from '@material-ui/lab/Pagination'; @@ -65,7 +65,7 @@ const AuditList: FC<{}> = () => { return 0; }, [value?.total, value?.limit]); - const history = useHistory(); + const history = useNavigate(); let content: ReactNode = null; if (value) { diff --git a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx index 08e8005530..39c109788f 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx @@ -22,7 +22,7 @@ jest.mock('react-router-dom', () => { }; return { ...actual, - useHistory: jest.fn(() => mocks), + useNavigate: jest.fn(() => mocks), }; }); @@ -41,7 +41,7 @@ import { lighthouseApiRef, LighthouseRestApi, Audit } from '../../api'; import CreateAudit from '.'; import * as data from '../../__fixtures__/create-audit-response.json'; -const { useHistory }: { useHistory: jest.Mock } = jest.requireMock( +const { useNavigate }: { useNavigate: jest.Mock } = jest.requireMock( 'react-router-dom', ); const createAuditResponse = data as Audit; @@ -115,7 +115,7 @@ describe('CreateAudit', () => { describe('when the audit is successfully created', () => { it('triggers a location change to the table', async () => { - useHistory().push.mockClear(); + useNavigate().push.mockClear(); mockFetch.mockResponseOnce(JSON.stringify(createAuditResponse)); const rendered = render( @@ -140,7 +140,7 @@ describe('CreateAudit', () => { await wait(() => expect(rendered.getByLabelText(/URL/)).toBeEnabled()); - expect(useHistory().push).toHaveBeenCalledWith('/lighthouse'); + expect(useNavigate().push).toHaveBeenCalledWith('/lighthouse'); }); }); diff --git a/plugins/lighthouse/src/components/CreateAudit/index.tsx b/plugins/lighthouse/src/components/CreateAudit/index.tsx index 55ae99d1db..4c7570221c 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React, { useState, useCallback, FC } from 'react'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { makeStyles, Grid, @@ -40,7 +40,7 @@ import { lighthouseApiRef } from '../../api'; import { useQuery } from '../../utils'; import LighthouseSupportButton from '../SupportButton'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ input: { minWidth: 300, }, @@ -58,7 +58,7 @@ const CreateAudit: FC<{}> = () => { const lighthouseApi = useApi(lighthouseApiRef); const classes = useStyles(); const query = useQuery(); - const history = useHistory(); + const history = useNavigate(); const [submitting, setSubmitting] = useState(false); const [url, setUrl] = useState(query.get('url') || ''); const [emulatedFormFactor, setEmulatedFormFactor] = useState('mobile'); @@ -113,7 +113,7 @@ const CreateAudit: FC<{}> = () => {
{ + onSubmit={ev => { ev.preventDefault(); triggerAudit(); }} @@ -128,7 +128,7 @@ const CreateAudit: FC<{}> = () => { helperText="The target URL for Lighthouse to use." required disabled={submitting} - onChange={(ev) => setUrl(ev.target.value)} + onChange={ev => setUrl(ev.target.value)} value={url} inputProps={{ 'aria-label': 'URL' }} /> @@ -142,7 +142,7 @@ const CreateAudit: FC<{}> = () => { select required disabled={submitting} - onChange={(ev) => setEmulatedFormFactor(ev.target.value)} + onChange={ev => setEmulatedFormFactor(ev.target.value)} value={emulatedFormFactor} inputProps={{ 'aria-label': 'Emulated form factor' }} > diff --git a/plugins/register-component/package.json b/plugins/register-component/package.json index 83be6fb7db..f414e9448f 100644 --- a/plugins/register-component/package.json +++ b/plugins/register-component/package.json @@ -27,8 +27,8 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-hook-form": "^5.7.2", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", + "react-router": "^6.0.0-alpha.5", + "react-router-dom": "^6.0.0-alpha.5", "react-use": "^14.2.0" }, "devDependencies": { diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json index ad44e06986..77733e09c1 100644 --- a/plugins/scaffolder/package.json +++ b/plugins/scaffolder/package.json @@ -24,7 +24,7 @@ "@material-ui/lab": "4.0.0-alpha.45", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-router-dom": "^5.2.0", + "react-router-dom": "6.0.0-alpha.5", "react-use": "^14.2.0" }, "devDependencies": { diff --git a/plugins/welcome/package.json b/plugins/welcome/package.json index b05ef1145f..7eab83bc07 100644 --- a/plugins/welcome/package.json +++ b/plugins/welcome/package.json @@ -24,7 +24,7 @@ "@material-ui/lab": "4.0.0-alpha.45", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-router-dom": "^5.2.0", + "react-router-dom": "6.0.0-alpha.5", "react-use": "^14.2.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 20ed4ae91c..42edf5b02a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3874,23 +3874,6 @@ "@types/react" "*" immutable ">=3.8.2" -"@types/react-router-dom@^5.1.3", "@types/react-router-dom@^5.1.5": - version "5.1.5" - resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090" - integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw== - dependencies: - "@types/history" "*" - "@types/react" "*" - "@types/react-router" "*" - -"@types/react-router@*": - version "5.1.4" - resolved "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.4.tgz#7d70bd905543cb6bcbdcc6bd98902332054f31a6" - integrity sha512-PZtnBuyfL07sqCJvGg3z+0+kt6fobc/xmle08jBiezLS8FrmGeiGkJnuxL/8Zgy9L83ypUhniV5atZn/L8n9MQ== - dependencies: - "@types/history" "*" - "@types/react" "*" - "@types/react-sparklines@^1.7.0": version "1.7.0" resolved "https://registry.npmjs.org/@types/react-sparklines/-/react-sparklines-1.7.0.tgz#f956d0f7b0e746ad445ce1cd250fe81f8a384684" @@ -9943,17 +9926,12 @@ highlight.js@~9.15.0, highlight.js@~9.15.1: resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2" integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw== -history@^4.9.0: - version "4.10.1" - resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" - integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== +history@5.0.0-beta.9: + version "5.0.0-beta.9" + resolved "https://registry.npmjs.org/history/-/history-5.0.0-beta.9.tgz#fe230706c18c5f7f132001e55215e71b4aaab6d6" + integrity sha512-iLpu0fzu3iM041KDMNsawyB6YZjPLB+Bn+Pvq2lMnY7xxpxDIYvEz7r4et3Na8FthWzbYeukjl74ZKGWXcLhIA== dependencies: - "@babel/runtime" "^7.1.2" - loose-envify "^1.2.0" - resolve-pathname "^3.0.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" - value-equal "^1.0.1" + "@babel/runtime" "^7.7.6" hmac-drbg@^1.0.0: version "1.0.1" @@ -9964,7 +9942,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -11107,11 +11085,6 @@ is-yarn-global@^0.3.0: resolved "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232" integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw== -isarray@0.0.1: - version "0.0.1" - resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" - integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= - isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" @@ -12424,7 +12397,7 @@ loglevel@^1.6.8: resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171" integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -12874,14 +12847,6 @@ min-indent@^1.0.0: resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256" integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY= -mini-create-react-context@^0.4.0: - version "0.4.0" - resolved "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040" - integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA== - dependencies: - "@babel/runtime" "^7.5.5" - tiny-warning "^1.0.3" - mini-css-extract-plugin@^0.7.0: version "0.7.0" resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz#5ba8290fbb4179a43dd27cca444ba150bee743a0" @@ -14239,13 +14204,6 @@ path-to-regexp@0.1.7: resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= -path-to-regexp@^1.7.0: - version "1.8.0" - resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a" - integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA== - dependencies: - isarray "0.0.1" - path-type@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" @@ -15468,7 +15426,7 @@ react-inspector@^4.0.0: is-dom "^1.0.9" prop-types "^15.6.1" -react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: +react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -15539,34 +15497,21 @@ react-redux@^7.0.3: prop-types "^15.7.2" react-is "^16.9.0" -react-router-dom@^5.1.2, react-router-dom@^5.2.0: - version "5.2.0" - resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662" - integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA== +react-router-dom@6.0.0-alpha.5, react-router-dom@^6.0.0-alpha.5: + version "6.0.0-alpha.5" + resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.0-alpha.5.tgz#3c3e22226ee610eb91042a351741ce3f53596323" + integrity sha512-xo3VM55aE563uyZBPoUplfCPOYKJmTP2oA8wamm0k4K07e/6T4x4DDunS5Gu2VIy+m2+5mZp8n0rT6S+tYCb6Q== dependencies: - "@babel/runtime" "^7.1.2" - history "^4.9.0" - loose-envify "^1.3.1" - prop-types "^15.6.2" - react-router "5.2.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" + history "5.0.0-beta.9" + prop-types "^15.7.2" -react-router@5.2.0, react-router@^5.1.2, react-router@^5.2.0: - version "5.2.0" - resolved "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293" - integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw== +react-router@6.0.0-alpha.5, react-router@^6.0.0-alpha.5: + version "6.0.0-alpha.5" + resolved "https://registry.npmjs.org/react-router/-/react-router-6.0.0-alpha.5.tgz#c98805e50dc0e64787aa8aa4fa6753b435f2496b" + integrity sha512-cDj70bTUAgcfx6b5Fx1+wVlBSDVZGo8N+GUDk/yNFDCyGLfAsFlRpS3BhQqx8c49w2cCW+OrXxFhB4cbLZxWJw== dependencies: - "@babel/runtime" "^7.1.2" - history "^4.9.0" - hoist-non-react-statics "^3.1.0" - loose-envify "^1.3.1" - mini-create-react-context "^0.4.0" - path-to-regexp "^1.7.0" - prop-types "^15.6.2" - react-is "^16.6.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" + history "5.0.0-beta.9" + prop-types "^15.7.2" react-side-effect@^2.1.0: version "2.1.0" @@ -16173,11 +16118,6 @@ resolve-from@^4.0.0: resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== -resolve-pathname@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" - integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== - resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -17944,12 +17884,12 @@ tiny-emitter@^2.0.0: resolved "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== -tiny-invariant@^1.0.2, tiny-invariant@^1.0.4, tiny-invariant@^1.0.6: +tiny-invariant@^1.0.4, tiny-invariant@^1.0.6: version "1.1.0" resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw== -tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3: +tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -18731,11 +18671,6 @@ validate-npm-package-name@^3.0.0: dependencies: builtins "^1.0.3" -value-equal@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" - integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== - vary@^1, vary@~1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" From 13f88468892923aa9ca61118024964af4ec8b346 Mon Sep 17 00:00:00 2001 From: blam Date: Sun, 7 Jun 2020 14:27:39 +0200 Subject: [PATCH 02/63] chore(react-router-v6): Fixing some more subrouting in the catalog page --- packages/core-api/src/app/App.tsx | 33 ++++--------------- .../ComponentPage/ComponentPage.tsx | 18 +++++----- 2 files changed, 17 insertions(+), 34 deletions(-) diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx index e47aa545ab..e9855e0a95 100644 --- a/packages/core-api/src/app/App.tsx +++ b/packages/core-api/src/app/App.tsx @@ -85,50 +85,31 @@ export class PrivateAppImpl implements BackstageApp { for (const output of plugin.output()) { switch (output.type) { case 'legacy-route': { - const { path, component: Component, options = {} } = output; - const { exact = true } = options; + const { path, component: Component } = output; routes.push( - } - exact={exact} - />, + } />, ); break; } case 'route': { - const { target, component: Component, options = {} } = output; - const { exact = true } = options; + const { target, component: Component } = output; routes.push( } - exact={exact} />, ); break; } case 'legacy-redirect-route': { - const { path, target, options = {} } = output; - const { exact = true } = options; - routes.push( - , - ); + const { path, target } = output; + routes.push(); break; } case 'redirect-route': { - const { from, to, options = {} } = output; - const { exact = true } = options; - routes.push( - , - ); + const { from, to } = output; + routes.push(); break; } case 'feature-flag': { diff --git a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx index b9c89604b0..c0c0132d01 100644 --- a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx +++ b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx @@ -34,6 +34,7 @@ import { Grid } from '@material-ui/core'; import { catalogApiRef } from '../..'; import { entityToComponent } from '../../data/utils'; import { Component } from '../../data/component'; +import { useParams, useNavigate } from 'react-router'; const REDIRECT_DELAY = 1000; @@ -48,17 +49,19 @@ type ComponentPageProps = { }; }; -const ComponentPage: FC = ({ match, history }) => { +const ComponentPage: FC = () => { const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false); const [removingPending, setRemovingPending] = useState(false); const showRemovalDialog = () => setConfirmationDialogOpen(true); const hideRemovalDialog = () => setConfirmationDialogOpen(false); - const componentName = match.params.name; + const params = useParams() as { name: string }; + const componentName = params.name; + const navigate = useNavigate(); const errorApi = useApi(errorApiRef); const catalogApi = useApi(catalogApiRef); const { value: component, error, loading } = useAsync(async () => { - const entity = await catalogApi.getEntityByName(match.params.name); + const entity = await catalogApi.getEntityByName(params.name); const location = await catalogApi.getLocationByEntity(entity); return { ...entityToComponent(entity), location }; }); @@ -67,13 +70,13 @@ const ComponentPage: FC = ({ match, history }) => { if (error) { errorApi.post(new Error('Component not found!')); setTimeout(() => { - history.push('/'); + navigate('/'); }, REDIRECT_DELAY); } - }, [error, errorApi, history]); + }, [error, errorApi, navigate]); if (componentName === '') { - history.push('/catalog'); + navigate('/catalog'); return null; } @@ -83,7 +86,7 @@ const ComponentPage: FC = ({ match, history }) => { // await componentFactory.removeComponentByName(componentName); await catalogApi; - history.push('/'); + navigate('/'); }; // TODO - Replace with proper tabs implementation @@ -120,7 +123,6 @@ const ComponentPage: FC = ({ match, history }) => { - {confirmationDialogOpen && component && ( Date: Sun, 7 Jun 2020 14:31:39 +0200 Subject: [PATCH 03/63] chore(react-router-v6): fixing some of the formatting for hbs --- .../default-app/packages/app/package.json.hbs | 101 +++++++++--------- .../plugins/welcome/package.json.hbs | 74 ++++++------- 2 files changed, 87 insertions(+), 88 deletions(-) diff --git a/packages/cli/templates/default-app/packages/app/package.json.hbs b/packages/cli/templates/default-app/packages/app/package.json.hbs index 46e27c5b91..346e09a76a 100644 --- a/packages/cli/templates/default-app/packages/app/package.json.hbs +++ b/packages/cli/templates/default-app/packages/app/package.json.hbs @@ -1,53 +1,52 @@ { -"name": "app", -"version": "0.0.0", -"private": true, -"dependencies": { -"@material-ui/core": "^4.9.1", -"@material-ui/icons": "^4.9.1", -"@material-ui/lab": "4.0.0-alpha.45", -"@backstage/cli": "^{{version}}", -"@backstage/core": "^{{version}}", -"@backstage/theme": "^{{version}}", -"plugin-welcome": "0.0.0", -"react": "^16.13.1", -"react-dom": "^16.13.1", -"react-router-dom": "6.0.0-alpha.5", -"react-use": "^14.2.0" -}, -"devDependencies": { -"@testing-library/jest-dom": "^5.7.0", -"@testing-library/react": "^9.3.2", -"@testing-library/user-event": "^10.2.4", -"@types/jest": "^25.2.2", -"@types/node": "^12.0.0", -"@types/react-router-dom": "6.0.0-alpha.5", -"@types/testing-library__jest-dom": "^5.0.4", -"cross-env": "^7.0.0", -"cypress": "^4.2.0", -"eslint-plugin-cypress": "^2.10.3", -"start-server-and-test": "^1.10.11" -}, -"scripts": { -"start": "backstage-cli app:serve", -"bundle": "backstage-cli app:build", -"test": "backstage-cli test", -"lint": "backstage-cli lint", -"test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev", -"test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run", -"cy:dev": "cypress open", -"cy:run": "cypress run" -}, -"browserslist": { -"production": [ -">0.2%", -"not dead", -"not op_mini all" -], -"development": [ -"last 1 chrome version", -"last 1 firefox version", -"last 1 safari version" -] -} + "name": "app", + "version": "0.0.0", + "private": true, + "dependencies": { + "@material-ui/core": "^4.9.1", + "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "4.0.0-alpha.45", + "@backstage/cli": "^{{version}}", + "@backstage/core": "^{{version}}", + "@backstage/theme": "^{{version}}", + "plugin-welcome": "0.0.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-router-dom": "6.0.0-alpha.5", + "react-use": "^14.2.0" + }, + "devDependencies": { + "@testing-library/jest-dom": "^5.7.0", + "@testing-library/react": "^9.3.2", + "@testing-library/user-event": "^10.2.4", + "@types/jest": "^25.2.2", + "@types/node": "^12.0.0", + "@types/testing-library__jest-dom": "^5.0.4", + "cross-env": "^7.0.0", + "cypress": "^4.2.0", + "eslint-plugin-cypress": "^2.10.3", + "start-server-and-test": "^1.10.11" + }, + "scripts": { + "start": "backstage-cli app:serve", + "bundle": "backstage-cli app:build", + "test": "backstage-cli test", + "lint": "backstage-cli lint", + "test:e2e": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:dev", + "test:e2e:ci": "cross-env PORT=3001 start-server-and-test start http://localhost:3001 cy:run", + "cy:dev": "cypress open", + "cy:run": "cypress run" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } } diff --git a/packages/cli/templates/default-app/plugins/welcome/package.json.hbs b/packages/cli/templates/default-app/plugins/welcome/package.json.hbs index 42676f56ee..f1196ff074 100644 --- a/packages/cli/templates/default-app/plugins/welcome/package.json.hbs +++ b/packages/cli/templates/default-app/plugins/welcome/package.json.hbs @@ -1,39 +1,39 @@ { -"name": "plugin-welcome", -"version": "0.0.0", -"main": "dist/index.esm.js", -"main:src": "src/index.ts", -"types": "src/index.ts", -"private": true, -"scripts": { -"build": "backstage-cli plugin:build", -"start": "backstage-cli plugin:serve", -"lint": "backstage-cli lint", -"test": "backstage-cli test", -"diff": "backstage-cli plugin:diff", -"prepack": "backstage-cli prepack", -"postpack": "backstage-cli postpack", -"clean": "backstage-cli clean" -}, -"dependencies": { -"@backstage/core": "^{{version}}", -"@backstage/theme": "^{{version}}", -"@material-ui/core": "^4.9.1", -"@material-ui/icons": "^4.9.1", -"react": "^16.13.1", -"react-dom": "^16.13.1", -"react-use": "^14.2.0", -"react-router-dom": "6.0.0-alpha.5" -}, -"devDependencies": { -"@backstage/cli": "^{{version}}", -"@backstage/dev-utils": "^{{version}}", -"@testing-library/jest-dom": "^5.7.0", -"@testing-library/react": "^9.3.2", -"@types/testing-library__jest-dom": "^5.0.4", -"jest-fetch-mock": "^3.0.3" -}, -"files": [ -"dist/**/*.{js,d.ts}" -] + "name": "plugin-welcome", + "version": "0.0.0", + "main": "dist/index.esm.js", + "main:src": "src/index.ts", + "types": "src/index.ts", + "private": true, + "scripts": { + "build": "backstage-cli plugin:build", + "start": "backstage-cli plugin:serve", + "lint": "backstage-cli lint", + "test": "backstage-cli test", + "diff": "backstage-cli plugin:diff", + "prepack": "backstage-cli prepack", + "postpack": "backstage-cli postpack", + "clean": "backstage-cli clean" + }, + "dependencies": { + "@backstage/core": "^{{version}}", + "@backstage/theme": "^{{version}}", + "@material-ui/core": "^4.9.1", + "@material-ui/icons": "^4.9.1", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-use": "^14.2.0", + "react-router-dom": "6.0.0-alpha.5" + }, + "devDependencies": { + "@backstage/cli": "^{{version}}", + "@backstage/dev-utils": "^{{version}}", + "@testing-library/jest-dom": "^5.7.0", + "@testing-library/react": "^9.3.2", + "@types/testing-library__jest-dom": "^5.0.4", + "jest-fetch-mock": "^3.0.3" + }, + "files": [ + "dist/**/*.{js,d.ts}" + ] } From fada5ab4b0d5034a9c6abc0ceb312e25bb8da8fa Mon Sep 17 00:00:00 2001 From: blam Date: Sun, 7 Jun 2020 14:54:34 +0200 Subject: [PATCH 04/63] chore(react-router-v6): Tidying up some more components and moving across to the new API --- packages/core-api/src/app/App.tsx | 2 +- packages/core/src/layout/ErrorPage/ErrorPage.tsx | 4 ++-- packages/core/src/layout/Sidebar/Items.tsx | 6 ++---- plugins/lighthouse/src/components/AuditList/index.tsx | 4 ++-- plugins/lighthouse/src/components/CreateAudit/index.tsx | 6 +++--- 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx index e9855e0a95..0aed43846d 100644 --- a/packages/core-api/src/app/App.tsx +++ b/packages/core-api/src/app/App.tsx @@ -15,7 +15,7 @@ */ import React, { ComponentType, FC } from 'react'; -import { Route, Redirect, Routes, Navigate } from 'react-router-dom'; +import { Route, Routes, Navigate } from 'react-router-dom'; import { AppContextProvider } from './AppContext'; import { BackstageApp, AppComponents, AppConfigLoader } from './types'; import { BackstagePlugin } from '../plugin'; diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.tsx index fa2315307f..d6620295c1 100644 --- a/packages/core/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core/src/layout/ErrorPage/ErrorPage.tsx @@ -40,7 +40,7 @@ const useStyles = makeStyles(theme => ({ export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => { const classes = useStyles(); - const history = useNavigate(); + const navigate = useNavigate(); return ( @@ -53,7 +53,7 @@ export const ErrorPage = ({ status, statusMessage }: IErrorPageProps) => { Looks like someone dropped the mic! - + navigate(-1)}> Go back ... or if you think this is a bug, please file an{' '} diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx index ddd71cc189..1b5a1e9d91 100644 --- a/packages/core/src/layout/Sidebar/Items.tsx +++ b/packages/core/src/layout/Sidebar/Items.tsx @@ -139,8 +139,7 @@ export const SidebarItem: FC = ({ Boolean(match && !disableSelected)} - exact + end to={to} onClick={onClick} > @@ -153,8 +152,7 @@ export const SidebarItem: FC = ({ Boolean(match && !disableSelected)} - exact + end to={to} onClick={onClick} > diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx index 28fbc06ce1..09ea882134 100644 --- a/plugins/lighthouse/src/components/AuditList/index.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.tsx @@ -65,7 +65,7 @@ const AuditList: FC<{}> = () => { return 0; }, [value?.total, value?.limit]); - const history = useNavigate(); + const navigate = useNavigate(); let content: ReactNode = null; if (value) { @@ -77,7 +77,7 @@ const AuditList: FC<{}> = () => { page={page} count={pageCount} onChange={(_event: Event, newPage: number) => { - history.replace(`/lighthouse?page=${newPage}`); + navigate(`/lighthouse?page=${newPage}`); }} /> )} diff --git a/plugins/lighthouse/src/components/CreateAudit/index.tsx b/plugins/lighthouse/src/components/CreateAudit/index.tsx index 4c7570221c..a699e148c8 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.tsx @@ -58,7 +58,7 @@ const CreateAudit: FC<{}> = () => { const lighthouseApi = useApi(lighthouseApiRef); const classes = useStyles(); const query = useQuery(); - const history = useNavigate(); + const navigate = useNavigate(); const [submitting, setSubmitting] = useState(false); const [url, setUrl] = useState(query.get('url') || ''); const [emulatedFormFactor, setEmulatedFormFactor] = useState('mobile'); @@ -78,7 +78,7 @@ const CreateAudit: FC<{}> = () => { }, }, }); - history.push('/lighthouse'); + navigate('/lighthouse'); } catch (err) { errorApi.post(err); } finally { @@ -90,7 +90,7 @@ const CreateAudit: FC<{}> = () => { lighthouseApi, setSubmitting, errorApi, - history, + navigate, ]); return ( From e18a60cffae5adc9c1c7e0d0d7e4c636b53d9698 Mon Sep 17 00:00:00 2001 From: blam Date: Sun, 7 Jun 2020 14:58:16 +0200 Subject: [PATCH 05/63] chore(react-router-v6): Fixing issues with isActive for now --- packages/core/src/layout/Sidebar/Items.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx index 1b5a1e9d91..866b850f05 100644 --- a/packages/core/src/layout/Sidebar/Items.tsx +++ b/packages/core/src/layout/Sidebar/Items.tsx @@ -112,7 +112,8 @@ export const SidebarItem: FC = ({ icon: Icon, text, to = '#', - disableSelected = false, + // TODO: isActive is not in v6 + // disableSelected = false, hasNotifications = false, onClick, children, From cf204edeb24a8cd319beba9759708839da774523 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 9 Jun 2020 11:57:48 +0200 Subject: [PATCH 06/63] chore:(react-router-v6): Moving more logic across to react-router-v6 --- .../src/components/Button/Button.stories.tsx | 16 ++-------------- packages/core/src/components/Button/Button.tsx | 9 +++++++-- .../core/src/components/Link/Link.stories.tsx | 2 +- packages/core/src/components/Link/Link.tsx | 4 ++-- .../test-utils/src/testUtils/appWrappers.tsx | 2 +- 5 files changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/core/src/components/Button/Button.stories.tsx b/packages/core/src/components/Button/Button.stories.tsx index f7bbe45abd..aaca389f82 100644 --- a/packages/core/src/components/Button/Button.stories.tsx +++ b/packages/core/src/components/Button/Button.stories.tsx @@ -15,12 +15,7 @@ */ import React, { FunctionComponentFactory } from 'react'; import { Button } from './Button'; -import { - MemoryRouter, - Route, - useLocation, - Link as RouterLink, -} from 'react-router-dom'; +import { MemoryRouter, Route, useLocation } from 'react-router-dom'; import { createRouteRef } from '@backstage/core-api'; const Location = () => { @@ -70,14 +65,7 @@ export const PassProps = () => { return ( <> -  has props for both material-ui's component as well as for diff --git a/packages/core/src/components/Button/Button.tsx b/packages/core/src/components/Button/Button.tsx index ca45b3da7f..a426052684 100644 --- a/packages/core/src/components/Button/Button.tsx +++ b/packages/core/src/components/Button/Button.tsx @@ -25,6 +25,11 @@ type Props = ComponentProps & * Thin wrapper on top of material-ui's Button component * Makes the Button to utilise react-router */ -export const Button = React.forwardRef((props, ref) => ( - + +const LinkBehavior = React.forwardRef((props, ref) => ( + +)); + +export const Button = React.forwardRef((props, ref) => ( + )); diff --git a/packages/core/src/components/Link/Link.stories.tsx b/packages/core/src/components/Link/Link.stories.tsx index 2bd499fa33..ce09f5c9d0 100644 --- a/packages/core/src/components/Link/Link.stories.tsx +++ b/packages/core/src/components/Link/Link.stories.tsx @@ -73,7 +73,7 @@ export const PassProps = () => { diff --git a/packages/core/src/components/Link/Link.tsx b/packages/core/src/components/Link/Link.tsx index 859650e6b0..8d800aadcd 100644 --- a/packages/core/src/components/Link/Link.tsx +++ b/packages/core/src/components/Link/Link.tsx @@ -19,12 +19,12 @@ import { Link as MaterialLink } from '@material-ui/core'; import { Link as RouterLink } from 'react-router-dom'; type Props = ComponentProps & - ComponentProps; + ComponentProps & { as?: React.FC }; /** * Thin wrapper on top of material-ui's Link component * Makes the Link to utilise react-router */ export const Link = React.forwardRef((props, ref) => ( - + )); diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 2450604976..34b207eed8 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -80,7 +80,7 @@ export function wrapInTestApp( return ( - + } /> ); From 7ecfceac0f2b83eccba0efc3813f4954ed54873c Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 11 Jun 2020 18:35:53 +0200 Subject: [PATCH 07/63] chore(react-router-v6): made some more progress on getting the tests passing --- package.json | 2 +- packages/core-api/src/app/App.tsx | 4 +- packages/core-api/src/app/types.ts | 3 +- .../src/testUtils/appWrappers.test.tsx | 8 +- .../test-utils/src/testUtils/appWrappers.tsx | 4 +- .../components/ClusterPage/ClusterPage.tsx | 3 +- yarn.lock | 81 +++++++++++++++++-- 7 files changed, 89 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 437ce36c4b..5c45c4e17e 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "tsc": "tsc", "clean": "backstage-cli clean && lerna run clean", "diff": "lerna run diff --", - "test": "lerna run test --since origin/master -- --coverage", + "test": "lerna run test --since origin/master --parallel -- --coverage", "test:all": "lerna run test -- --coverage", "lint": "lerna run lint --since origin/master --", "lint:all": "lerna run lint --", diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx index d0f4b109f9..c408303205 100644 --- a/packages/core-api/src/app/App.tsx +++ b/packages/core-api/src/app/App.tsx @@ -191,7 +191,9 @@ export class PrivateAppImpl implements BackstageApp { - {children} + + {children} + diff --git a/packages/core-api/src/app/types.ts b/packages/core-api/src/app/types.ts index 664c5238bc..08547bacfd 100644 --- a/packages/core-api/src/app/types.ts +++ b/packages/core-api/src/app/types.ts @@ -25,12 +25,11 @@ export type BootErrorPageProps = { step: 'load-config'; error: Error; }; - export type AppComponents = { NotFoundErrorPage: ComponentType<{}>; BootErrorPage: ComponentType; Progress: ComponentType<{}>; - Router: ComponentType<{ basename?: string }>; + Router: ComponentType<{}>; }; /** diff --git a/packages/test-utils/src/testUtils/appWrappers.test.tsx b/packages/test-utils/src/testUtils/appWrappers.test.tsx index 34a20be63b..75fcbe4e04 100644 --- a/packages/test-utils/src/testUtils/appWrappers.test.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.test.tsx @@ -33,14 +33,14 @@ describe('wrapInTestApp', () => { const rendered = render( wrapInTestApp( <> - Route 1 - Route 2 + Route 1

} /> + Route 2

} /> , - { routeEntries: ['/route2'] }, + { routeEntries: ['/'] }, ), ); - expect(rendered.getByText('Route 2')).toBeInTheDocument(); + expect(rendered.getByText('Route 2')).toBeInTheDocument(); // Wait for async actions to trigger the act() warnings that we assert below await Promise.resolve(); }); diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index ab627f8712..c474678fd1 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -92,7 +92,9 @@ export function wrapInTestApp( return ( - } /> + {/* The path of * here is needed to be set as a catch all, so it will render the wrapper element + * and work with nested routes if they exist too */} + } /> ); } diff --git a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx index 29559e4fec..d454278255 100644 --- a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx +++ b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx @@ -33,8 +33,7 @@ import { gitOpsApiRef, Status } from '../../api'; import { transformRunStatus } from '../ProfileCatalog'; const ClusterPage: FC<{}> = () => { - const params = useParams<{ owner: string; repo: string }>(); - + const params = useParams() as { owner: string; repo: string }; const [loginInfo] = useLocalStorage<{ token: string; username: string; diff --git a/yarn.lock b/yarn.lock index 2402b971ef..7b7490f5f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9966,6 +9966,18 @@ history@5.0.0-beta.9: dependencies: "@babel/runtime" "^7.7.6" +history@^4.9.0: + version "4.10.1" + resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" + integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== + dependencies: + "@babel/runtime" "^7.1.2" + loose-envify "^1.2.0" + resolve-pathname "^3.0.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + value-equal "^1.0.1" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -9975,7 +9987,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -11118,6 +11130,11 @@ is-yarn-global@^0.3.0: resolved "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232" integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw== +isarray@0.0.1: + version "0.0.1" + resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" + integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= + isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" @@ -12430,7 +12447,7 @@ loglevel@^1.6.8: resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171" integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -12880,6 +12897,14 @@ min-indent@^1.0.0: resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256" integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY= +mini-create-react-context@^0.4.0: + version "0.4.0" + resolved "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040" + integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA== + dependencies: + "@babel/runtime" "^7.5.5" + tiny-warning "^1.0.3" + mini-css-extract-plugin@^0.7.0: version "0.7.0" resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz#5ba8290fbb4179a43dd27cca444ba150bee743a0" @@ -14244,6 +14269,13 @@ path-to-regexp@0.1.7: resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= +path-to-regexp@^1.7.0: + version "1.8.0" + resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a" + integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA== + dependencies: + isarray "0.0.1" + path-type@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" @@ -15466,7 +15498,7 @@ react-inspector@^4.0.0: is-dom "^1.0.9" prop-types "^15.6.1" -react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: +react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -15545,6 +15577,35 @@ react-router-dom@6.0.0-alpha.5, react-router-dom@^6.0.0-alpha.5: history "5.0.0-beta.9" prop-types "^15.7.2" +react-router-dom@^5.2.0: + version "5.2.0" + resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662" + integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA== + dependencies: + "@babel/runtime" "^7.1.2" + history "^4.9.0" + loose-envify "^1.3.1" + prop-types "^15.6.2" + react-router "5.2.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + +react-router@5.2.0: + version "5.2.0" + resolved "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293" + integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw== + dependencies: + "@babel/runtime" "^7.1.2" + history "^4.9.0" + hoist-non-react-statics "^3.1.0" + loose-envify "^1.3.1" + mini-create-react-context "^0.4.0" + path-to-regexp "^1.7.0" + prop-types "^15.6.2" + react-is "^16.6.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + react-router@6.0.0-alpha.5, react-router@^6.0.0-alpha.5: version "6.0.0-alpha.5" resolved "https://registry.npmjs.org/react-router/-/react-router-6.0.0-alpha.5.tgz#c98805e50dc0e64787aa8aa4fa6753b435f2496b" @@ -16168,6 +16229,11 @@ resolve-from@^4.0.0: resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== +resolve-pathname@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" + integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -17934,12 +18000,12 @@ tiny-emitter@^2.0.0: resolved "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== -tiny-invariant@^1.0.4, tiny-invariant@^1.0.6: +tiny-invariant@^1.0.2, tiny-invariant@^1.0.4, tiny-invariant@^1.0.6: version "1.1.0" resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw== -tiny-warning@^1.0.2: +tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -18731,6 +18797,11 @@ validate-npm-package-name@^3.0.0: dependencies: builtins "^1.0.3" +value-equal@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" + integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== + vary@^1, vary@~1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" From da493b1fc9f412b453dda0e330571be87ac79d3b Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 11 Jun 2020 19:12:58 +0200 Subject: [PATCH 08/63] chore(react-router-v6): revert paralell for tests, as my computer stared over 9000 node processes making my machine grind to a machine babbage would have disapointed with --- package.json | 2 +- packages/core-api/src/app/App.tsx | 4 +--- .../core/src/components/Button/Button.test.jsx | 15 +++++++-------- packages/core/src/components/Link/Link.test.jsx | 7 ++++--- .../lighthouse/src/components/AuditView/index.tsx | 2 +- 5 files changed, 14 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 5c45c4e17e..437ce36c4b 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "tsc": "tsc", "clean": "backstage-cli clean && lerna run clean", "diff": "lerna run diff --", - "test": "lerna run test --since origin/master --parallel -- --coverage", + "test": "lerna run test --since origin/master -- --coverage", "test:all": "lerna run test -- --coverage", "lint": "lerna run lint --since origin/master --", "lint:all": "lerna run lint --", diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx index c408303205..3f77d826ae 100644 --- a/packages/core-api/src/app/App.tsx +++ b/packages/core-api/src/app/App.tsx @@ -191,9 +191,7 @@ export class PrivateAppImpl implements BackstageApp { - - {children} - + {children} diff --git a/packages/core/src/components/Button/Button.test.jsx b/packages/core/src/components/Button/Button.test.jsx index 2563d367c2..bf057e4261 100644 --- a/packages/core/src/components/Button/Button.test.jsx +++ b/packages/core/src/components/Button/Button.test.jsx @@ -15,26 +15,25 @@ */ import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, act } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; import { Button } from './Button'; -import { MemoryRouter, Route } from 'react-router'; -import { act } from 'react-dom/test-utils'; +import { Route } from 'react-router'; describe(' - {testString}{' '} - , + , ), ); expect(() => getByText(testString)).toThrow(); - await act(async () => fireEvent.click(getByText(buttonLabel))); + await act(async () => fireEvent.click(getByRole('button'))); expect(getByText(testString)).toBeInTheDocument(); }); }); diff --git a/packages/core/src/components/Link/Link.test.jsx b/packages/core/src/components/Link/Link.test.jsx index fcbc92a67a..c35cdfdbe6 100644 --- a/packages/core/src/components/Link/Link.test.jsx +++ b/packages/core/src/components/Link/Link.test.jsx @@ -18,7 +18,7 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; import { Link } from './Link'; -import { MemoryRouter, Route } from 'react-router'; +import { Route } from 'react-router'; import { act } from 'react-dom/test-utils'; describe('', () => { @@ -27,14 +27,15 @@ describe('', () => { const linkText = 'Navigate!'; const { getByText } = render( wrapInTestApp( - + <> {linkText} {testString} - , + , ), ); expect(() => getByText(testString)).toThrow(); await act(async () => fireEvent.click(getByText(linkText))); + expect(getByText(testString)).toBeInTheDocument(); }); }); diff --git a/plugins/lighthouse/src/components/AuditView/index.tsx b/plugins/lighthouse/src/components/AuditView/index.tsx index af7636cf59..06ab812cf4 100644 --- a/plugins/lighthouse/src/components/AuditView/index.tsx +++ b/plugins/lighthouse/src/components/AuditView/index.tsx @@ -18,7 +18,6 @@ import { Link, useParams } from 'react-router-dom'; import { useAsync } from 'react-use'; import { makeStyles, - Button, Grid, List, ListItem, @@ -33,6 +32,7 @@ import { Header, Page, Content, + Button, ContentHeader, HeaderLabel, Progress, From 47766635b67c52be748d68aa1631780fa5388142 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 11 Jun 2020 20:20:58 +0200 Subject: [PATCH 09/63] chore(react-router-v6): Fixing navigation in the lighthouse plugin --- .../src/components/AuditList/index.test.tsx | 12 ++++-------- .../lighthouse/src/components/AuditView/index.tsx | 2 +- .../src/components/CreateAudit/index.test.tsx | 11 ++++------- 3 files changed, 9 insertions(+), 16 deletions(-) diff --git a/plugins/lighthouse/src/components/AuditList/index.test.tsx b/plugins/lighthouse/src/components/AuditList/index.test.tsx index 612bed4635..076bb5819a 100644 --- a/plugins/lighthouse/src/components/AuditList/index.test.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.test.tsx @@ -16,13 +16,10 @@ jest.mock('react-router-dom', () => { const actual = jest.requireActual('react-router-dom'); - const mocks = { - replace: jest.fn(), - push: jest.fn(), - }; + const mockNavigation = jest.fn(); return { ...actual, - useNavigate: jest.fn(() => mocks), + useNavigate: jest.fn(() => mockNavigation), }; }); @@ -145,9 +142,8 @@ describe('AuditList', () => { ); const element = await rendered.findByLabelText(/Go to page 1/); fireEvent.click(element); - expect(useNavigate().replace).toHaveBeenCalledWith( - `/lighthouse?page=1`, - ); + + expect(useNavigate()).toHaveBeenCalledWith(`/lighthouse?page=1`); }); }); }); diff --git a/plugins/lighthouse/src/components/AuditView/index.tsx b/plugins/lighthouse/src/components/AuditView/index.tsx index 06ab812cf4..d323b1a005 100644 --- a/plugins/lighthouse/src/components/AuditView/index.tsx +++ b/plugins/lighthouse/src/components/AuditView/index.tsx @@ -21,6 +21,7 @@ import { Grid, List, ListItem, + Button, ListItemIcon, ListItemText, } from '@material-ui/core'; @@ -32,7 +33,6 @@ import { Header, Page, Content, - Button, ContentHeader, HeaderLabel, Progress, diff --git a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx index 39c109788f..ee0404fc22 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.test.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.test.tsx @@ -16,13 +16,10 @@ jest.mock('react-router-dom', () => { const actual = jest.requireActual('react-router-dom'); - const mocks = { - replace: jest.fn(), - push: jest.fn(), - }; + const mockNavigate = jest.fn(); return { ...actual, - useNavigate: jest.fn(() => mocks), + useNavigate: jest.fn(() => mockNavigate), }; }); @@ -115,7 +112,7 @@ describe('CreateAudit', () => { describe('when the audit is successfully created', () => { it('triggers a location change to the table', async () => { - useNavigate().push.mockClear(); + useNavigate.mockClear(); mockFetch.mockResponseOnce(JSON.stringify(createAuditResponse)); const rendered = render( @@ -140,7 +137,7 @@ describe('CreateAudit', () => { await wait(() => expect(rendered.getByLabelText(/URL/)).toBeEnabled()); - expect(useNavigate().push).toHaveBeenCalledWith('/lighthouse'); + expect(useNavigate()).toHaveBeenCalledWith('/lighthouse'); }); }); From 273db0314a771df699b8e3d95ccd30ffc83ef8df Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 11 Jun 2020 20:35:48 +0200 Subject: [PATCH 10/63] chore(react-router-v6): Managed to get the Link + Button components working as expected --- packages/core/src/components/Button/Button.test.jsx | 9 +++++---- packages/core/src/components/Link/Link.test.jsx | 6 +++--- packages/core/src/components/Link/Link.tsx | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/Button/Button.test.jsx b/packages/core/src/components/Button/Button.test.jsx index bf057e4261..5750f84101 100644 --- a/packages/core/src/components/Button/Button.test.jsx +++ b/packages/core/src/components/Button/Button.test.jsx @@ -18,20 +18,21 @@ import React from 'react'; import { render, fireEvent, act } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; import { Button } from './Button'; -import { Route } from 'react-router'; +import { Route, Routes } from 'react-router'; describe(' - , + , ), ); + expect(() => getByText(testString)).toThrow(); await act(async () => fireEvent.click(getByRole('button'))); expect(getByText(testString)).toBeInTheDocument(); diff --git a/packages/core/src/components/Link/Link.test.jsx b/packages/core/src/components/Link/Link.test.jsx index c35cdfdbe6..bc279d2fd6 100644 --- a/packages/core/src/components/Link/Link.test.jsx +++ b/packages/core/src/components/Link/Link.test.jsx @@ -18,7 +18,7 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; import { Link } from './Link'; -import { Route } from 'react-router'; +import { Route, Routes } from 'react-router'; import { act } from 'react-dom/test-utils'; describe('', () => { @@ -27,10 +27,10 @@ describe('', () => { const linkText = 'Navigate!'; const { getByText } = render( wrapInTestApp( - <> + {linkText} {testString} - , + , ), ); expect(() => getByText(testString)).toThrow(); diff --git a/packages/core/src/components/Link/Link.tsx b/packages/core/src/components/Link/Link.tsx index 8d800aadcd..ebcc2819d9 100644 --- a/packages/core/src/components/Link/Link.tsx +++ b/packages/core/src/components/Link/Link.tsx @@ -26,5 +26,5 @@ type Props = ComponentProps & * Makes the Link to utilise react-router */ export const Link = React.forwardRef((props, ref) => ( - + )); From 0cd9a8a7d4573e130b4f9a4f7fb3fce602323716 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 11 Jun 2020 20:42:39 +0200 Subject: [PATCH 11/63] chore(react-router-v6): tidy up parts of the PR i wasn't happy with --- packages/core/src/components/Button/Button.test.jsx | 4 ++-- packages/test-utils/src/testUtils/appWrappers.test.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/Button/Button.test.jsx b/packages/core/src/components/Button/Button.test.jsx index 5750f84101..115835be3f 100644 --- a/packages/core/src/components/Button/Button.test.jsx +++ b/packages/core/src/components/Button/Button.test.jsx @@ -24,7 +24,7 @@ describe('