From 693979fca152b8319809fcb6af86e227406f34aa Mon Sep 17 00:00:00 2001
From: Raghunandan Balachandran <raghunandan@spotify.com>
Date: Tue, 4 Feb 2020 12:06:32 +0100
Subject: [PATCH 1/2] Add react router and login page

---
 frontend/packages/app/package.json            |  5 +-
 frontend/packages/app/src/App.tsx             | 61 ++++++++++++++++---
 frontend/packages/plugins/login/README.md     |  1 +
 .../packages/plugins/login/jest.config.js     |  4 ++
 frontend/packages/plugins/login/jest.setup.ts |  1 +
 frontend/packages/plugins/login/package.json  | 26 ++++++++
 .../LoginComponent/LoginComponent.test.tsx    | 10 +++
 .../LoginComponent/LoginComponent.tsx         | 16 +++++
 .../src/components/LoginComponent/index.ts    |  1 +
 frontend/packages/plugins/login/src/index.ts  |  2 +
 .../packages/plugins/login/src/plugin.test.ts |  7 +++
 frontend/packages/plugins/login/src/plugin.ts |  5 ++
 12 files changed, 131 insertions(+), 8 deletions(-)
 create mode 100644 frontend/packages/plugins/login/README.md
 create mode 100644 frontend/packages/plugins/login/jest.config.js
 create mode 100644 frontend/packages/plugins/login/jest.setup.ts
 create mode 100644 frontend/packages/plugins/login/package.json
 create mode 100644 frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx
 create mode 100644 frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
 create mode 100644 frontend/packages/plugins/login/src/components/LoginComponent/index.ts
 create mode 100644 frontend/packages/plugins/login/src/index.ts
 create mode 100644 frontend/packages/plugins/login/src/plugin.test.ts
 create mode 100644 frontend/packages/plugins/login/src/plugin.ts

diff --git a/frontend/packages/app/package.json b/frontend/packages/app/package.json
index 03a809c0d8..9082342597 100644
--- a/frontend/packages/app/package.json
+++ b/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": [
diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx
index aeb42ba263..fa38461c01 100644
--- a/frontend/packages/app/src/App.tsx
+++ b/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;
diff --git a/frontend/packages/plugins/login/README.md b/frontend/packages/plugins/login/README.md
new file mode 100644
index 0000000000..9308111c21
--- /dev/null
+++ b/frontend/packages/plugins/login/README.md
@@ -0,0 +1 @@
+Welcome to your login-page plugin!
diff --git a/frontend/packages/plugins/login/jest.config.js b/frontend/packages/plugins/login/jest.config.js
new file mode 100644
index 0000000000..6b28dacb3d
--- /dev/null
+++ b/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'],
+};
diff --git a/frontend/packages/plugins/login/jest.setup.ts b/frontend/packages/plugins/login/jest.setup.ts
new file mode 100644
index 0000000000..666127af39
--- /dev/null
+++ b/frontend/packages/plugins/login/jest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';
diff --git a/frontend/packages/plugins/login/package.json b/frontend/packages/plugins/login/package.json
new file mode 100644
index 0000000000..04c33bda17
--- /dev/null
+++ b/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"
+}
diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx
new file mode 100644
index 0000000000..a4bb1be887
--- /dev/null
+++ b/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('Username')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
new file mode 100644
index 0000000000..8c89db5b44
--- /dev/null
+++ b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import Button from '@material-ui/core/Button';
+
+const LoginComponent: FC<{}> = () => {
+  return (
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={() => window.location.href = "/"}
+    >
+      Login
+    </Button>
+  );
+};
+
+export default LoginComponent;
diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/index.ts b/frontend/packages/plugins/login/src/components/LoginComponent/index.ts
new file mode 100644
index 0000000000..e20ece5b56
--- /dev/null
+++ b/frontend/packages/plugins/login/src/components/LoginComponent/index.ts
@@ -0,0 +1 @@
+export { default } from './LoginComponent';
diff --git a/frontend/packages/plugins/login/src/index.ts b/frontend/packages/plugins/login/src/index.ts
new file mode 100644
index 0000000000..e7201a30d2
--- /dev/null
+++ b/frontend/packages/plugins/login/src/index.ts
@@ -0,0 +1,2 @@
+export { default } from './plugin';
+export { default as LoginComponent } from './components/LoginComponent';
diff --git a/frontend/packages/plugins/login/src/plugin.test.ts b/frontend/packages/plugins/login/src/plugin.test.ts
new file mode 100644
index 0000000000..f7115384da
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/frontend/packages/plugins/login/src/plugin.ts b/frontend/packages/plugins/login/src/plugin.ts
new file mode 100644
index 0000000000..f09a95ae5b
--- /dev/null
+++ b/frontend/packages/plugins/login/src/plugin.ts
@@ -0,0 +1,5 @@
+import { createPlugin } from '@backstage/core';
+
+export default createPlugin({
+  id: 'login',
+});

From 33a811c9781807b21e0a314a047da28cdd8f5ece Mon Sep 17 00:00:00 2001
From: Raghunandan Balachandran <raghunandan@spotify.com>
Date: Tue, 4 Feb 2020 12:20:37 +0100
Subject: [PATCH 2/2] Fix test

---
 .../LoginComponent/LoginComponent.test.tsx    |  2 +-
 .../LoginComponent/LoginComponent.tsx         | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx
index a4bb1be887..5262db4a5b 100644
--- a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx
+++ b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.test.tsx
@@ -5,6 +5,6 @@ import LoginComponent from './LoginComponent';
 describe('LoginComponent', () => {
   it('should render', () => {
     const rendered = render(<LoginComponent />);
-    expect(rendered.getByText('Username')).toBeInTheDocument();
+    expect(rendered.getByText('Login')).toBeInTheDocument();
   });
 });
diff --git a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
index 8c89db5b44..a9dc81d93c 100644
--- a/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
+++ b/frontend/packages/plugins/login/src/components/LoginComponent/LoginComponent.tsx
@@ -1,15 +1,19 @@
-import React, { FC } from 'react';
+import React, { FC, Fragment } from 'react';
 import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
 
 const LoginComponent: FC<{}> = () => {
   return (
-    <Button
-      variant="contained"
-      color="primary"
-      onClick={() => window.location.href = "/"}
-    >
-      Login
-    </Button>
+    <Fragment>
+      <TextField variant="outlined" label="Username: " />
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => window.location.href = "/"}
+      >
+        Login
+      </Button>
+    </Fragment>
   );
 };