Move owner/repo form into CircleCIFetch component

plugins/circleci/src/api/index.ts

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { CircleCI, GitType, CircleCIOptions, GitInfo } from 'circleci-api';
+import { CircleCI, GitType, CircleCIOptions, GitInfo, getBuildSummaries } from 'circleci-api';
 import { ApiRef } from '@backstage/core';
-import { default } from '../../../../packages/core/src/components/Status/Status.stories';
+//import { default } from '../../../../packages/core/src/components/Status/Status.stories';
 
 const defaultVcsOptions: GitInfo = {
   type: GitType.GITHUB, // default: github
@@ -37,16 +37,14 @@ const options: Partial<CircleCIOptions> = {
 
 export class CircleCIApi {
   api: null | CircleCI = null;
+  token: string = '';
   constuctor() {}
-  async authenticate({token, owner, repo}: {token: string, owner: string, repo: string}) {
+  async authenticate(token: string) {
     try {
-      if (token === '' || owner === '' || repo === '') return Promise.reject();
-      this.api = new CircleCI({ ...options, token, vcs: {
-        type: GitType.GITHUB, // default: github
-        owner,
-        repo,
-      }});
+      if (token === '') return Promise.reject();
+      this.api = new CircleCI({ ...options, token});
       // await this.api.me();
+      this.token = token;
       return Promise.resolve();
     } catch (e) {
       this.api = null;
@@ -56,9 +54,10 @@ export class CircleCIApi {
   async cantAuth() {
     return Promise.reject("Can't auth");
   }
-  async getBuilds() {
+  async getBuilds({repo, owner}: {repo: string, owner: string}) {
     if (!this.api) return this.cantAuth();
-    return this.api.builds();
+    if (owner === '' || repo === '') return Promise.reject();
+    return getBuildSummaries(this.token, {vcs: {...defaultVcsOptions, owner, repo}});
   }
 }
 

plugins/circleci/src/components/CITable/CITable.tsx

@@ -7,7 +7,6 @@ import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
-
 const useStyles = makeStyles({
   table: {
     minWidth: 650,

plugins/circleci/src/components/CircleCIFetch/CirleCIFetch.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 // import Alert from '@material-ui/lab/Alert';
 // import { Progress } from '@backstage/core';
@@ -24,6 +24,7 @@ import { BuildSummary } from 'circleci-api';
 import { CITable, CITableBuildInfo } from '../CITable';
 import { circleCIApiRef } from 'api';
 import { useApi } from '@backstage/core';
+import { ProjectInput } from 'components/ProjectInput/ProjectInput';
 
 // "lifecycle" : "finished", // :queued, :scheduled, :not_run, :not_running, :running or :finished
 // "outcome" : "failed", // :canceled, :infrastructure_fail, :timedout, :failed, :no_tests or :success
@@ -73,19 +74,24 @@ const transform = (buildsData: BuildSummary[]): CITableBuildInfo[] => {
   });
 };
 
+
 export const CircleCIFetch: FC<{}> = () => {
+  const [vcsOptions, setVcsOptions] = useState({owner: '', repo: ''});
   const [builds, setBuilds] = React.useState<BuildSummary[]>([]);
   const api = useApi(circleCIApiRef);
 
   React.useEffect(() => {
     const intervalId = setInterval(() => {
       if (!api.api) return;
-      api.getBuilds().then(setBuilds);
+      api.getBuilds(vcsOptions).then(setBuilds);
     }, 1500);
     return () => clearInterval(intervalId);
   }, []);
 
-  if (!api.api) return <div>Not authenticated</div>;
   const transformedBuilds = transform(builds || []);
-  return <CITable builds={transformedBuilds} />;
+  return <>
+  <ProjectInput setGitInfo={(info) => {
+    setVcsOptions(info);
+    api.getBuilds(info).then(setBuilds)}}/>
+  {!api.api ? <div>Not authenticated</div> : <CITable builds={transformedBuilds} />}</>;
 };

plugins/circleci/src/components/LoginCard/LoginCard.tsx

@@ -33,14 +33,12 @@ const useSessionStorage = (key: string): [string, (value: string) => void] => {
 };
 export const LoginCard = () => {
   const [token, setToken] = useSessionStorage(circleCIApiRef.id + '_token');
-  const [owner, setOwner] = useSessionStorage(circleCIApiRef.id + '_owner');
-  const [repo, setRepo] = useSessionStorage(circleCIApiRef.id + '_repo');
 
   const api = useApi(circleCIApiRef);
 
   React.useEffect(() => {
     if (token && token !== '') {
-      api.authenticate({token, owner, repo});
+      api.authenticate(token);
     }
   }, []);
   return (
@@ -58,28 +56,12 @@ export const LoginCard = () => {
             onChange={e => setToken(e.target.value)}
           />
         </ListItem>
-        <ListItem>
-          <TextField
-            name="circleci-owner"
-            label="Owner"
-            value={owner}
-            onChange={e => setOwner(e.target.value)}
-          />
-        </ListItem>
-        <ListItem>
-          <TextField
-            name="circleci-repo"
-            label="Repo"
-            value={repo}
-            onChange={e => setRepo(e.target.value)}
-          />
-        </ListItem>
         <ListItem>
           <Button
             data-testid="github-auth-button"
             variant="outlined"
             color="primary"
-            onClick={() => api.authenticate({token, owner, repo})}
+            onClick={() => api.authenticate(token)}
           >
             Authenticate
           </Button>

plugins/circleci/src/components/ProjectInput/ProjectInput.tsx

@@ -0,0 +1,42 @@
+import { useState, FC } from "react";
+import { List, ListItem, TextField, Button } from "@material-ui/core";
+import React from "react";
+
+export const ProjectInput:FC<{
+    setGitInfo: (info: {owner: string, repo: string}) => void
+  }> = ({setGitInfo}) => {
+    
+  const [owner, setOwner] = useState('');
+  const [repo, setRepo] = useState('');
+  
+  return (
+    <List>
+      <ListItem>
+        <TextField
+          name="circleci-owner"
+          label="Owner"
+          value={owner}
+          onChange={e => setOwner(e.target.value)}
+        />
+      </ListItem>
+      <ListItem>
+        <TextField
+          name="circleci-repo"
+          label="Repo"
+          value={repo}
+          onChange={e => setRepo(e.target.value)}
+        />
+      </ListItem>
+      <ListItem>
+        <Button
+          data-testid="load-build-button"
+          variant="outlined"
+          color="primary"
+          onClick={() => setGitInfo({ owner, repo })}
+        >
+          Load
+        </Button>
+      </ListItem>
+    </List>
+  );
+};