From c90110f6ab0b2a472c60eee45a5d94870260ddb8 Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Mon, 18 May 2020 19:26:52 +0200
Subject: [PATCH 1/2] feat: export as a widget

---
 plugins/circleci/src/components/App.tsx       | 27 ++++++++++--
 plugins/circleci/src/index.ts                 |  1 +
 .../BuildWithStepsPage/BuildWithStepsPage.tsx | 41 +++++++++++--------
 .../src/pages/BuildWithStepsPage/index.ts     |  5 ++-
 .../src/pages/BuildsPage/BuildsPage.tsx       | 21 ++++++----
 .../circleci/src/pages/BuildsPage/index.ts    |  2 +-
 6 files changed, 68 insertions(+), 29 deletions(-)

diff --git a/plugins/circleci/src/components/App.tsx b/plugins/circleci/src/components/App.tsx
index 46b70cb500..1649c01b70 100644
--- a/plugins/circleci/src/components/App.tsx
+++ b/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>
+);
diff --git a/plugins/circleci/src/index.ts b/plugins/circleci/src/index.ts
index 33b8fe0067..69fdf02416 100644
--- a/plugins/circleci/src/index.ts
+++ b/plugins/circleci/src/index.ts
@@ -17,3 +17,4 @@
 export { plugin } from './plugin';
 export * from './api';
 export * from './proxy';
+export { CircleCIWidget } from './components/App';
diff --git a/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
index 041c495c90..24ef39a05c 100644
--- a/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
+++ b/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
@@ -92,7 +92,15 @@ const pickClassName = (
   return classes.neutral;
 };
 
-const BuildWithStepsPage: FC<{}> = () => {
+const Page = () => (
+  <Layout>
+    <Content>
+      <BuildWithSteps />
+    </Content>
+  </Layout>
+);
+
+const BuildWithSteps: 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 { BuildWithSteps };
diff --git a/plugins/circleci/src/pages/BuildWithStepsPage/index.ts b/plugins/circleci/src/pages/BuildWithStepsPage/index.ts
index 2fb1f48e12..fddff7088c 100644
--- a/plugins/circleci/src/pages/BuildWithStepsPage/index.ts
+++ b/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';
diff --git a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx
index 01593ebf4d..7b124c03c1 100644
--- a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx
+++ b/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 };
diff --git a/plugins/circleci/src/pages/BuildsPage/index.ts b/plugins/circleci/src/pages/BuildsPage/index.ts
index 9b555f0f12..72b46d6bc9 100644
--- a/plugins/circleci/src/pages/BuildsPage/index.ts
+++ b/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';

From 89a4f6a31b487f2e4ae2d64300208843ff88399d Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Mon, 18 May 2020 19:30:39 +0200
Subject: [PATCH 2/2] fix: quick fix

---
 .../src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx     | 6 +++---
 plugins/circleci/src/state/AppState.tsx                     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
index 24ef39a05c..8493913576 100644
--- a/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
+++ b/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
@@ -95,12 +95,12 @@ const pickClassName = (
 const Page = () => (
   <Layout>
     <Content>
-      <BuildWithSteps />
+      <BuildWithStepsView />
     </Content>
   </Layout>
 );
 
-const BuildWithSteps: FC<{}> = () => {
+const BuildWithStepsView: FC<{}> = () => {
   const { buildId = '' } = useParams();
   const classes = useStyles();
   const [settings] = useSettings();
@@ -163,4 +163,4 @@ const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({
 };
 
 export default Page;
-export { BuildWithSteps };
+export { BuildWithStepsView as BuildWithSteps };
diff --git a/plugins/circleci/src/state/AppState.tsx b/plugins/circleci/src/state/AppState.tsx
index f229175111..49d55b602e 100644
--- a/plugins/circleci/src/state/AppState.tsx
+++ b/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,