packages/plugins: move to plugins/

plugins/home-page/README.md

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

plugins/home-page/jest.config.js

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

plugins/home-page/jest.setup.ts

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

plugins/home-page/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@spotify-backstage/plugin-home-page",
+  "version": "0.0.0",
+  "main": "dist/cjs",
+  "devDependencies": {
+    "@spotify-backstage/cli": "^1.2.0",
+    "@spotify-backstage/core": "1.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": {
+    "build": "backstage-cli plugin:build",
+    "lint": "backstage-cli plugin:lint",
+    "test": "backstage-cli plugin:test"
+  },
+  "license": "Apache-2.0"
+}

plugins/home-page/src/components/HomePage/HomePage.test.tsx

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

plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -0,0 +1,80 @@
+import React, { FC } from 'react';
+import { Typography, makeStyles, Theme, Grid } from '@material-ui/core';
+import HomePageTimer from '../HomepageTimer';
+import {
+  Content,
+  EntityLink,
+  InfoCard,
+  SortableTable,
+  Header,
+  Page,
+  theme,
+} from '@spotify-backstage/core';
+import SquadTechHealth from './SquadTechHealth';
+
+const STATIC_DATA = [
+  { id: 'backstage', kind: 'service' },
+  { id: 'backstage-microsite', kind: 'website' },
+];
+
+const useStyles = makeStyles<Theme>(theme => ({
+  mainContentArea: {
+    overflowX: 'hidden',
+    overflowY: 'auto',
+  },
+  avatarButton: {
+    padding: theme.spacing(2),
+  },
+}));
+
+const HomePage: FC<{}> = () => {
+  const classes = useStyles();
+  const columns = [
+    { id: 'entity', label: 'ID' },
+    { id: 'kind', label: 'Kind' },
+  ];
+
+  const data = STATIC_DATA.map(({ id, kind }) => {
+    return {
+      id,
+      entity: (
+        <EntityLink kind={kind} id={id}>
+          <Typography color="primary">{id}</Typography>
+        </EntityLink>
+      ),
+      kind: <Typography>{kind}</Typography>,
+    };
+  });
+
+  const profile = { givenName: 'Suzy' };
+
+  return (
+    <Page theme={theme.home}>
+      <div className={classes.mainContentArea}>
+        <Header
+          title={profile ? `Hello, ${profile.givenName}` : 'Hello'}
+          subtitle="Welcome to Backstage"
+        >
+          <HomePageTimer />
+        </Header>
+        <Content>
+          <Grid container direction="row" spacing={3}>
+            <Grid item xs={6}>
+              <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+                Things you own
+              </Typography>
+              <InfoCard maxWidth>
+                <SortableTable data={data} columns={columns} orderBy="id" />
+              </InfoCard>
+            </Grid>
+            <Grid item xs={6}>
+              <SquadTechHealth />
+            </Grid>
+          </Grid>
+        </Content>
+      </div>
+    </Page>
+  );
+};
+
+export default HomePage;

plugins/home-page/src/components/HomePage/SquadTechHealth.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { Grid, Typography } from '@material-ui/core';
+
+import { HorizontalScrollGrid, ProgressCard } from '@spotify-backstage/core';
+
+const SquadTechHealth: FC<{}> = () => {
+  return (
+    <>
+      <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+        Team Metrics
+      </Typography>
+      <HorizontalScrollGrid scrollStep={400} scrollSpeed={100}>
+        <Grid item>
+          <ProgressCard
+            title="Test Certified"
+            progress={0.23}
+            deepLink={{
+              link: '/some-url',
+              title: 'About Test Certs',
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <ProgressCard
+            title="k8s Migration"
+            progress={0.78}
+            deepLink={{
+              link: '/some-url',
+              title: 'About k8s',
+            }}
+          />
+        </Grid>
+      </HorizontalScrollGrid>
+    </>
+  );
+};
+
+export default SquadTechHealth;

plugins/home-page/src/components/HomePage/index.ts

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

plugins/home-page/src/components/HomepageTimer/HomepageTimer.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/home-page/src/components/HomepageTimer/index.ts

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

plugins/home-page/src/index.ts

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

plugins/home-page/src/plugin.test.ts

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

plugins/home-page/src/plugin.ts

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

plugins/home-page/tsconfig.json

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