Create plugin draft

2020-04-29 16:34:35 +02:00
parent 49049665d4
commit 6f58e92fc7
18 changed files with 604 additions and 2 deletions
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>README.html</title>
+
+</head>
+
+<body>
+
+<figure>
+<img src="docs/headline.png" alt="headline" />
+<figcaption>headline</figcaption>
+</figure>
+
+<h1 id="backstagehttps:backstage.io"><a href="https://backstage.io">Backstage</a></h1>
+
+<p><a href="https://opensource.org/licenses/Apache-2.0"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License" /></a>
+<img src="https://github.com/spotify/backstage/workflows/Frontend%20CI/badge.svg" alt="" />
+<a href="https://discord.gg/EBHEGzX"><img src="https://img.shields.io/discord/687207715902193673" alt="Discord" /></a>
+<img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg" alt="Code style" />
+<a href="https://github.com/spotify/backstage/releases"><img src="https://img.shields.io/npm/v/@backstage/core?label=Version" alt="" /></a></p>
+
+<h2 id="whatisbackstage">What is Backstage?</h2>
+
+<p>Backstage is an open platform for building developer portals.</p>
+
+<p>The philosophy behind Backstage is simple: Don&#8217;t expose your engineers to the full complexity of your infrastructure tooling. Engineers should be shipping code — not figuring out a whole new toolset every time they want to implement the basics. Backstage allows you add &#8220;stuff&#8221; (tooling, services, features, etc.) by adding a plugin, instead of building a new tool. This saves you work and avoids the need of your team to learn how to use and support yet another tool.</p>
+
+<p>For more information go to <a href="https://backstage.io">backstage.io</a> or join our <a href="https://discord.gg/EBHEGzX">Discord chatroom</a>.</p>
+
+<h2 id="whatproblemdoesbackstagesolve">What problem does Backstage solve?</h2>
+
+<p>As companies grow, their infrastructure systems get messier. Backstage unifies all your infrastructure tooling, services, and documentation with a single, consistent UI.</p>
+
+<p>This blog post provides more examples of how Backstage is used inside Spotify:</p>
+
+<p>https://labs.spotify.com/2020/03/17/what-the-heck-is-backstage-anyway/</p>
+
+<h2 id="projectroadmap">Project roadmap</h2>
+
+<p>We created Backstage about 4 years ago. While our internal version of Backstage has had the benefit of time to mature and evolve, the first iteration of our open source version is still nascent. We are envisioning three phases of the project and we have already begun work on various aspects of these phases:</p>
+
+<ul>
+<li><p>🐣 <strong>Phase 1:</strong> Extensible frontend platform (now) - You will be able to easily create a single consistent UI layer for your internal infrastructure and tools. A set of reusable UX patterns and components help ensure a consistent experience between tools.</p></li>
+<li><p>🐢 <strong>Phase 2:</strong> Manage your stuff (next 2&#8211;3 months) - Manage anything from microservices to software components to infrastructure and your service catalog. Regardless of whether you want to create a new library, view service deployment status in Kubernetes, or check the test coverage for a website &#8211; Backstage will provide all of those tools - and many more - in a single developer portal.</p></li>
+<li><p>🐇 <strong>Phase 3:</strong> Ecosystem (later) - Everyone&#8217;s infrastructure stack is different. By fostering a vibrant community of contributors we hope to provide an ecosystem of Open Source plugins/integrations that allows you to pick the tools that match your stack.</p></li>
+</ul>
+
+<p>Check out our <a href="https://github.com/spotify/backstage/milestones">Milestones</a> and open <a href="https://github.com/spotify/backstage/labels/rfc">RFCs</a> how they relate to the three Phases outlined above.</p>
+
+<p>Our vision for Backstage is for it to become the trusted standard toolbox (read: UX layer) for the open source infrastructure landscape. Think of it like Kubernetes for developer experience. We realize this is an ambitious goal. We can’t do it alone. If this sounds interesting or you&#8217;d like to help us shape our product vision, we&#8217;d love to talk. You can email me directly: <a href="mailto:alund@spotify.com">alund@spotify.com</a>.</p>
+
+<h2 id="overview">Overview</h2>
+
+<p>The Backstage platform consists of a number of different components:</p>
+
+<ul>
+<li><strong>app</strong> - Main web application that users interact with. It&#8217;s built up by a number of different <em>Plugins</em>. This repo contains an example implementation of an app (located in <code>packages/example-app</code>) and you can easily get started with your own app by <a href="docs/create-an-app.md">creating one</a>.</li>
+<li><a href="https://github.com/spotify/backstage/tree/master/plugins"><strong>plugins</strong></a> - Each plugin is treated as a self-contained web app and can include almost any type of content. Plugins all use a common set of platform API&#8217;s and reusable UI components. Plugins can fetch data either from the <em>backend</em> or through any RESTful API exposed through the <em>proxy</em>.</li>
+<li><a href="https://github.com/spotify/backstage/tree/master/packages/backend"><strong>backend</strong></a> - GraphQL aggregation service that holds the model of your software ecosystem, including organisational information and what team owns what software. The backend also has a Plugin model for extending its graph.</li>
+<li><strong>proxy</strong> * - Terminates HTTPS and exposes any RESTful API to Plugins.</li>
+<li><strong>identity</strong> * - A backend service that holds your organisation&#8217;s metadata.</li>
+</ul>
+
+<p><em>* not yet released</em></p>
+
+<figure>
+<img src="backstage_overview.png" alt="overview" />
+<figcaption>overview</figcaption>
+</figure>
+
+<h2 id="gettingstarted">Getting started</h2>
+
+<p>To run a Backstage app, you will need to have the following installed:</p>
+
+<ul>
+<li><a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git">git</a></li>
+<li><a href="https://nodejs.org/en/download/">NodeJS</a> - Active LTS Release, currently v12</li>
+<li><a href="https://classic.yarnpkg.com/en/docs/install">yarn</a></li>
+</ul>
+
+<p>After cloning this repo, open a terminal window and start the web app using the following commands from the project root:</p>
+
+<pre><code class="bash">yarn install
+yarn start
+</code></pre>
+
+<p>The final <code>yarn start</code> command should open a local instance of Backstage in your browser, otherwise open one of the URLs printed in the terminal.</p>
+
+<p>And thats it! You are good to go 👍</p>
+
+<h3 id="nextstep">Next step</h3>
+
+<p>Take a look at the <a href="docs/getting-started/README.md">Getting Started</a> guide to learn more about how to extend the functionality with Plugins.</p>
+
+<h2 id="documentation">Documentation</h2>
+
+<ul>
+<li><a href="docs/getting-started/README.md">Getting Started</a></li>
+<li><a href="docs/create-an-app.md">Create a Backstage App</a></li>
+<li><a href="docs/architecture-terminology.md">Architecture</a></li>
+<li><a href="docs/reference/README.md">API references</a></li>
+<li><a href="docs/design.md">Designing for Backstage</a></li>
+<li><a href="http://storybook.backstage.io">Storybook - UI components</a> (<a href="https://github.com/spotify/backstage/milestone/9">WIP</a>)</li>
+<li><a href="docs/getting-started/contributing-to-storybook.md">Contributing to Storybook</a></li>
+<li>Using Backstage components (TODO)</li>
+</ul>
+
+<h2 id="contributing">Contributing</h2>
+
+<p>We would love your help in building Backstage! See <a href="CONTRIBUTING.md">CONTRIBUTING</a> for more information.</p>
+
+<h2 id="community">Community</h2>
+
+<ul>
+<li><a href="https://discord.gg/MUpMjP2">Discord chatroom</a> - Get support or discuss the project</li>
+<li><a href="https://github.com/spotify/backstage/labels/good%20first%20issue">Good First Issues</a> - Start here if you want to contribute</li>
+<li><a href="https://github.com/spotify/backstage/labels/rfc">RFCs</a> - Help shape the technical direction</li>
+<li><a href="docs/FAQ.md">FAQ</a> - Frequently Asked Questions</li>
+<li><a href="CODE_OF_CONDUCT.md">Code of Conduct</a> - This is how we roll</li>
+<li><a href="https://backstage.io/blog/">Blog</a> - Announcements and updates</li>
+<li>Give us a star ⭐️ - If you are using Backstage or think it is an interesting project, we would love a star ❤️</li>
+</ul>
+
+<p>Or, if you are an open source developer and are interested in joining our team, please reach out to <a href="mailto:foss-opportunities@spotify.com">foss-opportunities@spotify.com </a></p>
+
+<h2 id="license">License</h2>
+
+<p>Copyright 2020 Spotify AB.</p>
+
+<p>Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0</p>
+
+</body>
+</html>
@@ -20,6 +20,7 @@
  "dependencies": {
    "@backstage/cli": "^0.1.1-alpha.4",
    "@backstage/core": "^0.1.1-alpha.4",
+    "@backstage/plugin-circleci": "^0.1.1-alpha.4",
    "@backstage/plugin-home-page": "^0.1.1-alpha.4",
    "@backstage/plugin-inventory": "^0.1.1-alpha.4",
    "@backstage/plugin-lighthouse": "^0.1.1-alpha.4",
@@ -13,9 +13,9 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-
 export { plugin as HomePagePlugin } from '@backstage/plugin-home-page';
 export { plugin as WelcomePlugin } from '@backstage/plugin-welcome';
 export { plugin as LighthousePlugin } from '@backstage/plugin-lighthouse';
 export { plugin as InventoryPlugin } from '@backstage/plugin-inventory';
 export { plugin as TechRadar } from '@backstage/plugin-tech-radar';
+export { plugin as Circleci } from '@backstage/plugin-circleci';
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};
@@ -0,0 +1,6 @@
+# Title
+Welcome to the circleci plugin!
+
+## Sub-section 1
+
+## Sub-section 2
@@ -0,0 +1,38 @@
+{
+  "name": "@backstage/plugin-circleci",
+  "version": "0.1.1-alpha.4",
+  "main": "dist/index.cjs.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "clean": "backstage-cli clean"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.1.1-alpha.4",
+    "@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/testing-library__jest-dom": "5.0.2",
+    "jest-fetch-mock": "^3.0.3"
+  },
+  "dependencies": {
+    "@backstage/core": "^0.1.1-alpha.4",
+    "@backstage/theme": "^0.1.1-alpha.4",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "circleci-api": "^4.0.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-use": "^13.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import mockFetch from 'jest-fetch-mock';
+import ExampleComponent from './ExampleComponent';
+import { ThemeProvider } from '@material-ui/core';
+import { lightTheme } from '@backstage/theme';
+
+describe('ExampleComponent', () => {
+  it('should render', () => {
+    mockFetch.mockResponse(() => new Promise(() => {}));
+    const rendered = render(
+      <ThemeProvider theme={lightTheme}>
+        <ExampleComponent />
+      </ThemeProvider>,
+    );
+    expect(rendered.getByText('Welcome to circleci!')).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { Typography, Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  Header,
+  Page,
+  pageTheme,
+  Content,
+  ContentHeader,
+  HeaderLabel,
+  SupportButton,
+} from '@backstage/core';
+import ExampleFetchComponent from '../ExampleFetchComponent';
+
+const ExampleComponent: FC<{}> = () => (
+  <Page theme={pageTheme.tool}>
+    <Header title="Welcome to circleci!" subtitle="Optional subtitle">
+      <HeaderLabel label="Owner" value="Team X" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content>
+      <ContentHeader title="Plugin title">
+        <SupportButton>A description of your plugin goes here.</SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Information card">
+            <Typography variant="body1">
+              All content should be wrapped in a card like this.
+            </Typography>
+          </InfoCard>
+        </Grid>
+        <Grid item>
+          <InfoCard title="Example User List (fetching data from randomuser.me)">
+            <ExampleFetchComponent />
+          </InfoCard>
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
+);
+
+export default ExampleComponent;
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from './ExampleComponent';
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import mockFetch from 'jest-fetch-mock';
+import ExampleFetchComponent from './ExampleFetchComponent';
+
+describe('ExampleFetchComponent', () => {
+  it('should render', async () => {
+    mockFetch.mockResponse(() => new Promise(() => {}));
+    const rendered = render(<ExampleFetchComponent />);
+    expect(await rendered.findByTestId('progress')).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,151 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Alert from '@material-ui/lab/Alert';
+import { useAsync } from 'react-use';
+import { Progress } from '@backstage/core';
+
+import { CircleCI, GitType, CircleCIOptions } from "circleci-api";
+
+const CIRCLECI_TOKEN: string = "943aa82531ccaab192b4c4bc614507dff31c094c";
+
+// Configure the factory with some defaults
+const options: CircleCIOptions = {
+  // Required for all requests
+  token: CIRCLECI_TOKEN, // Set your CircleCi API token
+
+  // Optional
+  // Anything set here can be overriden when making the request
+
+  // Git information is required for project/build/etc endpoints
+  vcs: {
+    type: GitType.GITHUB, // default: github
+    owner: "CircleCITest3",
+    repo: "circleci-test"
+  },
+
+  // Optional query params for requests
+  // options: {
+  //   branch: "master", // default: master
+  // }
+};
+
+const api = new CircleCI(options);
+
+api.builds()
+  .then((v) => console.log("token is valid"))
+  .catch(() => console.error("invalid token"));
+
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+  avatar: {
+    height: 32,
+    width: 32,
+    borderRadius: '50%',
+  },
+});
+
+type User = {
+  gender: string; // "male"
+  name: {
+    title: string; // "Mr",
+    first: string; // "Duane",
+    last: string; // "Reed"
+  };
+  location: object; // {street: {number: 5060, name: "Hickory Creek Dr"}, city: "Albany", state: "New South Wales",…}
+  email: string; // "duane.reed@example.com"
+  login: object; // {uuid: "4b785022-9a23-4ab9-8a23-cb3fb43969a9", username: "blackdog796", password: "patch",…}
+  dob: object; // {date: "1983-06-22T12:30:23.016Z", age: 37}
+  registered: object; // {date: "2006-06-13T18:48:28.037Z", age: 14}
+  phone: string; // "07-2154-5651"
+  cell: string; // "0405-592-879"
+  id: {
+    name: string; // "TFN",
+    value: string; // "796260432"
+  };
+  picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…}
+  nat: string; // "AU"
+};
+
+type DenseTableProps = {
+  users: User[];
+};
+
+export const DenseTable: FC<DenseTableProps> = ({ users }) => {
+  const classes = useStyles();
+
+  return (
+    <TableContainer>
+      <Table className={classes.table} size="small" aria-label="a dense table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Avatar</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Email</TableCell>
+            <TableCell>Nationality</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {users.map(user => (
+            <TableRow key={user.email}>
+              <TableCell>
+                <img
+                  src={user.picture.medium}
+                  className={classes.avatar}
+                  alt={user.name.first}
+                />
+              </TableCell>
+              <TableCell>
+                {user.name.first} {user.name.last}
+              </TableCell>
+              <TableCell>{user.email}</TableCell>
+              <TableCell>{user.nat}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+const ExampleFetchComponent: FC<{}> = () => {
+  // const { value, loading, error } = useAsync(async (): Promise<User[]> => {
+  //   const response = await fetch('https://randomuser.me/api/?results=20');
+  //   const data = await response.json();
+  //   return data.results;
+  // }, []);
+
+  if (loading) {
+    return <Progress />;
+  } else if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  return <DenseTable users={value || []} />;
+};
+
+export default ExampleFetchComponent;
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from './ExampleFetchComponent';
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { plugin } from './plugin';
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { plugin } from './plugin';
+
+describe('circleci', () => {
+  it('should export plugin', () => {
+    expect(plugin).toBeDefined();
+  });
+});
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createPlugin } from '@backstage/core';
+import ExampleComponent from './components/ExampleFetchComponent';
+
+export const plugin = createPlugin({
+  id: 'circleci',
+  register({ router }) {
+    router.registerRoute('/circleci', ExampleComponent);
+  },
+});
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@testing-library/jest-dom/extend-expect';
+require('jest-fetch-mock').enableMocks();
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}
@@ -5290,6 +5290,13 @@ aws4@^1.8.0:
  resolved "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
  integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==

+axios@^0.19.0:
+  version "0.19.2"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 axobject-query@^2.0.2:
  version "2.1.2"
  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799"
@@ -6460,6 +6467,13 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
    inherits "^2.0.1"
    safe-buffer "^5.0.1"

+circleci-api@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/circleci-api/-/circleci-api-4.0.0.tgz#d773fe68f4a59e1968881269883a23b0805b3546"
+  integrity sha512-D/THFyhOv6THSkYXJhrOLIOmV7fmyDqgs1+pBFMAqDR+ywXszxa2Dqx1Zw+YD3O2zD2y5LQOifCDT96VidRG7Q==
+  dependencies:
+    axios "^0.19.0"
+
 class-utils@^0.3.5:
  version "0.3.6"
  resolved "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -7769,7 +7783,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
  dependencies:
    ms "2.0.0"

-debug@3.1.0:
+debug@3.1.0, debug@=3.1.0:
  version "3.1.0"
  resolved "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
@@ -9499,6 +9513,13 @@ focus-lock@^0.6.6:
  resolved "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
  integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==

+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
  version "1.10.0"
  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"