Merge branch 'master' of github.com:Nek/backstage

plugins/circleci/src/components/App.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Switch, Route } from 'react-router';
-import { BuildsPage } from '../pages/BuildsPage';
-import { DetailedViewPage } from '../pages/BuildWithStepsPage';
+import { Switch, Route, MemoryRouter } from 'react-router';
+import { BuildsPage, Builds } from '../pages/BuildsPage';
+import { DetailedViewPage, BuildWithSteps } from '../pages/BuildWithStepsPage';
 import { AppStateProvider } from '../state';
 import { Settings } from './Settings';
 
@@ -37,3 +37,24 @@ export const App = () => {
     </AppStateProvider>
   );
 };
+
+// TODO: allow pass in settings as props
+// When some shared settings workflow
+// will be established
+export const CircleCIWidget = () => (
+  <MemoryRouter initialEntries={['/circleci']}>
+    <AppStateProvider>
+      <>
+        <Switch>
+          <Route path="/circleci" exact component={Builds} />
+          <Route
+            path="/circleci/build/:buildId"
+            exact
+            component={BuildWithSteps}
+          />
+        </Switch>
+        <Settings />
+      </>
+    </AppStateProvider>
+  </MemoryRouter>
+);

plugins/circleci/src/index.ts

@@ -18,3 +18,4 @@ export { plugin } from './plugin';
 export * from './api';
 export * from './proxy';
 export * from './navTargets';
+export { CircleCIWidget } from './components/App';

plugins/circleci/src/navTargets.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { createNavTarget } from '@backstage/core';
+import { SvgIcon, SvgIconProps } from '@material-ui/core';
+
+const CircleCIIcon: FC<SvgIconProps> = (props) => (
+  <SvgIcon {...props}>
+    <svg
+      enable-background="new 0 0 200 200"
+      height="105.2"
+      viewBox="0 0 103.8 105.2"
+      width="103.8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m38.6 52.6c0-6.9 5.6-12.5 12.5-12.5s12.5 5.6 12.5 12.5-5.6 12.5-12.5 12.5c-6.9.1-12.5-5.6-12.5-12.5zm12.5-52.6c-24.6 0-45.2 16.8-51 39.6 0 .2-.1.3-.1.5 0 1.4 1.1 2.5 2.5 2.5h21.2c1 0 1.9-.6 2.3-1.5 4.4-9.5 13.9-16.1 25.1-16.1 15.2 0 27.6 12.4 27.6 27.6s-12.4 27.6-27.6 27.6c-11.1 0-20.7-6.6-25.1-16.1-.4-.9-1.3-1.5-2.3-1.5h-21.2c-1.4 0-2.5 1.1-2.5 2.5 0 .2 0 .3.1.5 5.8 22.8 26.4 39.6 51 39.6 29.1 0 52.7-23.6 52.7-52.7 0-29-23.6-52.5-52.7-52.5z"
+        fill="#343434"
+      />
+    </svg>
+  </SvgIcon>
+);
+
+export const navTargetCircleCI = createNavTarget({
+  icon: CircleCIIcon,
+  path: '/circleci',
+  title: 'CircleCI',
+});

plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -92,7 +92,15 @@ const pickClassName = (
   return classes.neutral;
 };
 
-const BuildWithStepsPage: FC<{}> = () => {
+const Page = () => (
+  <Layout>
+    <Content>
+      <BuildWithStepsView />
+    </Content>
+  </Layout>
+);
+
+const BuildWithStepsView: FC<{}> = () => {
   const { buildId = '' } = useParams();
   const classes = useStyles();
   const [settings] = useSettings();
@@ -106,23 +114,21 @@ const BuildWithStepsPage: FC<{}> = () => {
   }, [buildId, settings]);
 
   return (
-    <Layout>
-      <Content>
-        <PluginHeader title="Build info" />
+    <>
+      <PluginHeader title="Build info" />
 
-        <Grid container spacing={3} direction="column">
-          <Grid item>
-            <InfoCard
-              className={pickClassName(classes, value)}
-              title={<BuildName build={value} />}
-              cardClassName={classes.cardContent}
-            >
-              {loading ? <Progress /> : <BuildsList build={value} />}
-            </InfoCard>
-          </Grid>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard
+            className={pickClassName(classes, value)}
+            title={<BuildName build={value} />}
+            cardClassName={classes.cardContent}
+          >
+            {loading ? <Progress /> : <BuildsList build={value} />}
+          </InfoCard>
         </Grid>
-      </Content>
-    </Layout>
+      </Grid>
+    </>
   );
 };
 
@@ -156,4 +162,5 @@ const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({
   );
 };
 
-export default BuildWithStepsPage;
+export default Page;
+export { BuildWithStepsView as BuildWithSteps };

plugins/circleci/src/pages/BuildWithStepsPage/index.ts

@@ -13,4 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { default as DetailedViewPage } from './BuildWithStepsPage';
+export {
+  default as DetailedViewPage,
+  BuildWithSteps,
+} from './BuildWithStepsPage';

plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx

@@ -16,21 +16,28 @@
 import React, { FC } from 'react';
 import { Content } from '@backstage/core';
 import { Grid } from '@material-ui/core';
-import { Builds } from './lib/Builds';
+import { Builds as BuildsComp } from './lib/Builds';
 import { Layout } from '../../components/Layout';
 import { PluginHeader } from '../../components/PluginHeader';
 
 const BuildsPage: FC<{}> = () => (
   <Layout>
     <Content>
-      <PluginHeader title="All builds" />
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <Builds />
-        </Grid>
-      </Grid>
+      <Builds />
     </Content>
   </Layout>
 );
 
+const Builds = () => (
+  <>
+    <PluginHeader title="All builds" />
+    <Grid container spacing={3} direction="column">
+      <Grid item>
+        <BuildsComp />
+      </Grid>
+    </Grid>
+  </>
+);
+
 export default BuildsPage;
+export { Builds };

plugins/circleci/src/pages/BuildsPage/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { default as BuildsPage } from './BuildsPage';
+export { default as BuildsPage, Builds } from './BuildsPage';

plugins/circleci/src/state/AppState.tsx

@@ -16,7 +16,7 @@
 import React, { FC, useReducer, Dispatch, Reducer } from 'react';
 import { circleCIApiRef } from '../api';
 import type { State, Action, SettingsState } from './types';
-export { SettingsState };
+export type { SettingsState };
 
 export const AppContext = React.createContext<[State, Dispatch<Action>]>(
   [] as any,