Merge pull request #229 from spotify/nikek/welcome

Add a welcome page

packages/app/package.json

@@ -8,6 +8,7 @@
     "@spotify-backstage/cli": "^1.2.0",
     "@spotify-backstage/core": "1.0.0",
     "@spotify-backstage/plugin-home-page": "0.0.0",
+    "@spotify-backstage/plugin-welcome": "0.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

packages/app/src/plugins.ts

@@ -1 +1,2 @@
 export { default as HomePagePlugin } from '@spotify-backstage/plugin-home-page';
+export { default as WelcomePlugin } from '@spotify-backstage/plugin-welcome';

plugins/home-page/src/plugin.ts

@@ -4,6 +4,6 @@ import HomePage from './components/HomePage';
 export default createPlugin({
   id: 'home-page',
   register({ router }) {
-    router.registerRoute('/', HomePage);
+    router.registerRoute('/home', HomePage);
   },
 });

plugins/welcome/README.md

@@ -0,0 +1,6 @@
+# Title
+Welcome to the welcome plugin!
+
+## Sub-section 1
+
+## Sub-section 2

plugins/welcome/jest.config.js

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

plugins/welcome/jest.setup.ts

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

plugins/welcome/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@spotify-backstage/plugin-welcome",
+  "version": "0.0.0",
+  "main": "dist/cjs/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "license": "Apache-2.0",
+  "private": false,
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "lint": "backstage-cli plugin:lint",
+    "test": "backstage-cli plugin:test"
+  },
+  "devDependencies": {
+    "@spotify-backstage/cli": "^1.2.0"
+  },
+  "dependencies": {
+    "@material-ui/lab": "4.0.0-alpha.45"
+  }
+}

plugins/welcome/src/components/Timer/Timer.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from 'react';
+import { HeaderLabel } from '@spotify-backstage/core';
+
+const timeFormat = { hour: '2-digit', minute: '2-digit' };
+const utcOptions = { timeZone: 'UTC', ...timeFormat };
+const nycOptions = { timeZone: 'America/New_York', ...timeFormat };
+const tyoOptions = { timeZone: 'Asia/Tokyo', ...timeFormat };
+const stoOptions = { timeZone: 'Europe/Stockholm', ...timeFormat };
+
+const defaultTimes = {
+  timeNY: '',
+  timeUTC: '',
+  timeTYO: '',
+  timeSTO: '',
+};
+
+function getTimes() {
+  const d = new Date();
+  const lang = window.navigator.language;
+
+  // Using the browser native toLocaleTimeString instead of huge moment-tz
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+  const timeNY = d.toLocaleTimeString(lang, nycOptions);
+  const timeUTC = d.toLocaleTimeString(lang, utcOptions);
+  const timeTYO = d.toLocaleTimeString(lang, tyoOptions);
+  const timeSTO = d.toLocaleTimeString(lang, stoOptions);
+
+  return { timeNY, timeUTC, timeTYO, timeSTO };
+}
+
+const HomePageTimer: FC<{}> = () => {
+  const [{ timeNY, timeUTC, timeTYO, timeSTO }, setTimes] = React.useState(
+    defaultTimes,
+  );
+
+  React.useEffect(() => {
+    setTimes(getTimes());
+
+    const intervalId = setInterval(() => {
+      setTimes(getTimes());
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <>
+      <HeaderLabel label="NYC" value={timeNY} />
+      <HeaderLabel label="UTC" value={timeUTC} />
+      <HeaderLabel label="STO" value={timeSTO} />
+      <HeaderLabel label="TYO" value={timeTYO} />
+    </>
+  );
+};
+
+export default HomePageTimer;

plugins/welcome/src/components/Timer/index.ts

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

plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import WelcomePage from './WelcomePage';
+import { ThemeProvider } from '@material-ui/core';
+import { BackstageTheme } from '@spotify-backstage/core';
+
+describe('WelcomePage', () => {
+  it('should render', () => {
+    const rendered = render(
+      <ThemeProvider theme={BackstageTheme}>
+        <WelcomePage />
+      </ThemeProvider>,
+    );
+    expect(rendered.baseElement).toBeInTheDocument();
+  });
+});

plugins/welcome/src/components/WelcomePage/WelcomePage.tsx

@@ -0,0 +1,93 @@
+import React, { FC } from 'react';
+import Link from '@material-ui/core/Link';
+import { Link as RouterLink } from 'react-router-dom';
+import { Typography, Grid } from '@material-ui/core';
+import Timer from '../Timer';
+import {
+  Content,
+  InfoCard,
+  Header,
+  Page,
+  pageTheme,
+  ContentHeader,
+  SupportButton,
+} from '@spotify-backstage/core';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+
+const WelcomePage: FC<{}> = () => {
+  const profile = { givenName: '' };
+
+  return (
+    <Page theme={pageTheme.home}>
+      <Header
+        title={`Welcome ${profile.givenName || 'to Backstage'}`}
+        subtitle="Some quick intro and links."
+      >
+        <Timer />
+      </Header>
+      <Content>
+        <ContentHeader title="Getting Started">
+          <SupportButton></SupportButton>
+        </ContentHeader>
+        <Grid container>
+          <Grid item xs={12} md={6}>
+            <InfoCard maxWidth>
+              <Typography variant="body1" gutterBottom>
+                You now have a running instance of Backstage 🎉! Let's make sure
+                you get the most out of this platform by walking you through the
+                basics.
+              </Typography>
+              <Typography variant="h6" gutterBottom>
+                The Setup
+              </Typography>
+              <Typography variant="body1" paragraph>
+                Backstage is put together from three base concepts: the core,
+                the app and the plugins.
+              </Typography>
+              <ul>
+                <li>The core is responsible for base functionality.</li>
+                <li>The app provides the base UI and connects the plugins.</li>
+                <li>
+                  The plugins make Backstage useful for the end users with
+                  specific views and functionality.
+                </li>
+              </ul>
+              <Typography variant="h6" gutterBottom>
+                Try It Out
+              </Typography>
+              <Typography variant="body1" paragraph>
+                We suggest you either check out the documentation for{' '}
+                <Link href="https://github.com/spotify/backstage#plugins">
+                  creating a plugin
+                </Link>{' '}
+                or have a look in the code for the{' '}
+                <Link component={RouterLink} to="/home">
+                  Home Page
+                </Link>{' '}
+                in the directory "plugins/home-page/src".
+              </Typography>
+            </InfoCard>
+          </Grid>
+          <Grid item>
+            <InfoCard>
+              <Typography variant="h5">Quick Links</Typography>
+              <List>
+                <ListItem>
+                  <Link href="https://backstage.io">backstage.io</Link>
+                </ListItem>
+                <ListItem>
+                  <Link href="https://github.com/spotify/backstage#plugins">
+                    Create a plugin
+                  </Link>
+                </ListItem>
+              </List>
+            </InfoCard>
+          </Grid>
+        </Grid>
+      </Content>
+    </Page>
+  );
+};
+
+export default WelcomePage;

plugins/welcome/src/components/WelcomePage/index.ts

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

plugins/welcome/src/index.ts

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

plugins/welcome/src/plugin.test.ts

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

plugins/welcome/src/plugin.ts

@@ -0,0 +1,9 @@
+import { createPlugin } from '@spotify-backstage/core';
+import WelcomePage from './components/WelcomePage';
+
+export default createPlugin({
+  id: 'welcome',
+  register({ router }) {
+    router.registerRoute('/', WelcomePage);
+  },
+});

plugins/welcome/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}