Merge pull request #30 from spotify/soapraj/add-react-router

Add react router and login page

frontend/packages/app/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@backstage/core": "0.0.0",
     "@backstage/plugin-hello-world": "0.0.0",
+    "@backstage/plugin-login": "0.0.0",
     "@react-workspaces/react-scripts": "^3.3.0-alpha-08",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -13,9 +14,11 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-router-dom": "^5.1.3",
     "cross-env": "^7.0.0",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2"
   },
   "workspaces": {
     "nohoist": [

frontend/packages/app/src/App.tsx

@@ -1,9 +1,16 @@
-import React, { FC } from 'react';
+import React, { FC, Fragment } from 'react';
 import helloWorld, { MyComponent } from '@backstage/plugin-hello-world';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import SideBar from './components/SideBar';
 import PageHeader from './components/PageHeader';
+import { LoginComponent } from '@backstage/plugin-login';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link as RouterLink
+} from "react-router-dom";
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -28,6 +35,50 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const App: FC<{}> = () => {
+  return (
+  <Router>
+    <Switch>
+      <Route exact path="/">
+        <AppShell>
+          <Home />
+        </AppShell>
+      </Route>
+      <Route path="/login">
+      <AppShell>
+          <Login />
+        </AppShell>
+      </Route>
+    </Switch>
+    </Router>);
+};
+
+const Home: FC<{}> = () => {
+  return (
+    <Fragment>
+      <Typography variant="body1">
+        {' '}
+        …with plugin {helloWorld?.id ?? 'wat'}:
+      </Typography>
+      <MyComponent />
+      <div>
+        <RouterLink to="/login">Go to Login</RouterLink>
+      </div>
+    </Fragment>
+  );
+};
+
+const Login: FC<{}> = () => {
+  return (
+    <Fragment>
+      <LoginComponent />
+      <div>
+        <RouterLink to="/">Go to Home</RouterLink>
+      </div>
+    </Fragment>
+    );
+}
+
+const AppShell: FC<{}> = ({children}) => {
   const classes = useStyles();
 
   return (
@@ -36,15 +87,11 @@ const App: FC<{}> = () => {
       <div className={classes.mainContentArea}>
         <PageHeader />
         <div className={classes.pageBody}>
-          <Typography variant="body1">
-            {' '}
-            …with plugin {helloWorld?.id ?? 'wat'}:
-          </Typography>
-          <MyComponent />
+          {children}
         </div>
       </div>
     </div>
   );
-};
+}
 
 export default App;

frontend/packages/plugins/login/README.md

@@ -0,0 +1 @@
+Welcome to your login-page plugin!

frontend/packages/plugins/login/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@spotify/web-scripts/config/jest.config.js'),
+  setupFilesAfterEnv: ['../jest.setup.ts'],
+};

frontend/packages/plugins/login/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

frontend/packages/plugins/login/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@backstage/plugin-login",
+  "version": "0.0.0",
+  "main": "src/index.ts",
+  "main:src": "src/index.ts",
+  "devDependencies": {
+    "@backstage/core": "0.0.0",
+    "@spotify/web-scripts": "^6.0.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1"
+  },
+  "scripts": {
+    "lint": "web-scripts lint",
+    "test": "web-scripts test"
+  },
+  "license": "Apache-2.0"
+}

frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import LoginComponent from './LoginComponent';
+
+describe('LoginComponent', () => {
+  it('should render', () => {
+    const rendered = render(<LoginComponent />);
+    expect(rendered.getByText('Login')).toBeInTheDocument();
+  });
+});

frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx

@@ -0,0 +1,20 @@
+import React, { FC, Fragment } from 'react';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+
+const LoginComponent: FC<{}> = () => {
+  return (
+    <Fragment>
+      <TextField variant="outlined" label="Username: " />
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => window.location.href = "/"}
+      >
+        Login
+      </Button>
+    </Fragment>
+  );
+};
+
+export default LoginComponent;

frontend/packages/plugins/login/src/components/LoginComponent/index.ts

@@ -0,0 +1 @@
+export { default } from './LoginComponent';

frontend/packages/plugins/login/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from './plugin';
+export { default as LoginComponent } from './components/LoginComponent';

frontend/packages/plugins/login/src/plugin.test.ts

@@ -0,0 +1,7 @@
+import plugin from './plugin';
+
+describe('login', () => {
+  it('should export plugin', () => {
+    expect(plugin.id).toBe('login');
+  });
+});

frontend/packages/plugins/login/src/plugin.ts

@@ -0,0 +1,5 @@
+import { createPlugin } from '@backstage/core';
+
+export default createPlugin({
+  id: 'login',
+});