feat: export as a widget

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

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

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 };

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';