feat: settings -> dialog

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, {