feat: settings -> dialog

packages/cli/src/commands/plugin/serve.ts

@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 
+import fs from 'fs-extra';
 import { serveBundle } from '../../lib/bundler';
 import { Command } from 'commander';
+import { paths } from '../../lib/paths';
 
 export default async (cmd: Command) => {
+  const pkgPath = paths.resolveTarget('package.json');
+  const pkg = await fs.readJson(pkgPath);
+
   const waitForExit = await serveBundle({
     entry: 'dev/index',
     checksEnabled: cmd.check,
+    proxy: pkg.proxy,
   });
 
   await waitForExit();

plugins/circleci/dev/index.tsx

@@ -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 { createDevApp } from '@backstage/dev-utils';
+import { plugin } from '../src/plugin';
+import { circleCIApiRef, CircleCIApi } from '../src/api';
+
+createDevApp()
+  .registerPlugin(plugin)
+  .registerApiFactory({
+    deps: {},
+    factory: () => new CircleCIApi(),
+    implements: circleCIApiRef,
+  })
+  .render();

plugins/circleci/package.json

@@ -3,18 +3,31 @@
   "version": "0.1.1-alpha.4",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "src/index.ts",
   "license": "Apache-2.0",
   "private": true,
+  "proxy": {
+    "/circleci/api": {
+      "target": "https://circleci.com/api/v1.1",
+      "changeOrigin": true,
+      "pathRewrite": {
+        "^/circleci/api/": "/"
+      }
+    }
+  },
   "scripts": {
     "build": "backstage-cli plugin:build",
     "lint": "backstage-cli lint",
     "test": "backstage-cli test",
-    "clean": "backstage-cli clean"
+    "clean": "backstage-cli clean",
+    "diff": "backstage-cli plugin:diff",
+    "start": "backstage-cli plugin:serve",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack"
   },
   "dependencies": {
-    "@backstage/core": "^0.1.1-alpha.4",
-    "@backstage/theme": "^0.1.1-alpha.4",
+    "@backstage/core": "^0.1.1-alpha.5",
+    "@backstage/theme": "^0.1.1-alpha.5",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
@@ -22,24 +35,25 @@
     "circleci-api": "^4.0.0",
     "fast-deep-equal": "^3.1.1",
     "moment": "^2.25.3",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-lazylog": "^4.5.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-use": "^13.0.0"
+    "react-use": "^14.2.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.1.1-alpha.4",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@backstage/cli": "^0.1.1-alpha.5",
+    "@testing-library/jest-dom": "^5.7.0",
     "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
+    "@testing-library/user-event": "^10.2.4",
+    "@types/jest": "^25.2.1",
     "@types/node": "^12.0.0",
-    "@types/testing-library__jest-dom": "5.0.2",
-    "jest-fetch-mock": "^3.0.3"
+    "@types/testing-library__jest-dom": "^5.0.4",
+    "jest-fetch-mock": "^3.0.3",
+    "@backstage/dev-utils": "^0.1.1-alpha.5"
   },
   "files": [
-    "dist"
+    "dist/**/*.{js,d.ts}"
   ]
 }

plugins/circleci/src/components/Settings/Settings.tsx

@@ -23,6 +23,7 @@ import {
   Box,
   Dialog,
   DialogTitle,
+  DialogContent,
 } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import { useSettings } from '../../state';
@@ -71,54 +72,56 @@ const Settings = () => {
           Project Credentials
           {/* {authed ? <StatusOK /> : <StatusFailed />} */}
         </DialogTitle>
-        <List>
-          <ListItem>
-            <TextField
-              name="circleci-token"
-              label="Token"
-              value={token}
-              fullWidth
-              variant="outlined"
-              onChange={(e) => setToken(e.target.value)}
-            />
-          </ListItem>
-          <ListItem>
-            <TextField
-              name="circleci-owner"
-              fullWidth
-              label="Owner"
-              variant="outlined"
-              value={owner}
-              onChange={(e) => setOwner(e.target.value)}
-            />
-          </ListItem>
-          <ListItem>
-            <TextField
-              name="circleci-repo"
-              label="Repo"
-              fullWidth
-              variant="outlined"
-              value={repo}
-              onChange={(e) => setRepo(e.target.value)}
-            />
-          </ListItem>
-          <ListItem>
-            <Box mt={2} display="flex" width="100%" justifyContent="center">
-              <Button
-                data-testid="github-auth-button"
+        <Box minWidth="400px">
+          <List>
+            <ListItem>
+              <TextField
+                name="circleci-token"
+                label="Token"
+                value={token}
+                fullWidth
                 variant="outlined"
-                color="primary"
-                onClick={() => {
-                  setSaved(true);
-                  saveSettings({ repo, owner, token });
-                  hideSettings();
-                }}
-              >
-                Save credentials
-              </Button>
-            </Box>
-          </ListItem>
-        </List>
+                onChange={(e) => setToken(e.target.value)}
+              />
+            </ListItem>
+            <ListItem>
+              <TextField
+                name="circleci-owner"
+                fullWidth
+                label="Owner"
+                variant="outlined"
+                value={owner}
+                onChange={(e) => setOwner(e.target.value)}
+              />
+            </ListItem>
+            <ListItem>
+              <TextField
+                name="circleci-repo"
+                label="Repo"
+                fullWidth
+                variant="outlined"
+                value={repo}
+                onChange={(e) => setRepo(e.target.value)}
+              />
+            </ListItem>
+            <ListItem>
+              <Box mt={2} display="flex" width="100%" justifyContent="center">
+                <Button
+                  data-testid="github-auth-button"
+                  variant="outlined"
+                  color="primary"
+                  onClick={() => {
+                    setSaved(true);
+                    saveSettings({ repo, owner, token });
+                    hideSettings();
+                  }}
+                >
+                  Save credentials
+                </Button>
+              </Box>
+            </ListItem>
+          </List>
+        </Box>
       </Dialog>
     </>
   );

plugins/circleci/src/state/AppState.tsx

@@ -48,7 +48,6 @@ const reducer: Reducer<State, Action> = (state, action) => {
 
 export const AppStateProvider: FC = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-
   return (
     <AppContext.Provider value={[state, dispatch]}>
       <>{children}</>

plugins/circleci/src/state/index.ts

@@ -14,3 +14,6 @@
  * limitations under the License.
  */
 export * from './AppState';
+export * from './useSettings';
+export * from './useBuilds';
+export * from './useBuildWithSteps';

plugins/circleci/src/state/useBuildWithSteps.ts

@@ -27,6 +27,9 @@ export function useBuildWithSteps(buildId: number) {
   const errorApi = useApi(errorApiRef);
 
   const getBuildWithSteps = useCallback(async () => {
+    if (owner === '' || repo === '' || token === '') {
+      return;
+    }
     try {
       const options = {
         token: token,
@@ -44,11 +47,6 @@ export function useBuildWithSteps(buildId: number) {
     }
   }, [token, owner, repo, buildId]);
 
-  const { startPolling, stopPolling } = useAsyncPolling(
-    getBuildWithSteps,
-    INTERVAL_AMOUNT,
-  );
-
   const restartBuild = async () => {
     try {
       await api.retry(buildId, {

plugins/circleci/src/state/useBuilds.tsx

@@ -103,11 +103,6 @@ export function useBuilds() {
     [repo, token, owner],
   );
 
-  const { startPolling, stopPolling } = useAsyncPolling(
-    getBuilds,
-    INTERVAL_AMOUNT,
-  );
-
   const restartBuild = async (buildId: number) => {
     try {
       await api.retry(buildId, {