feat: visual adjustments

plugins/circleci/src/api/index.ts

@@ -31,8 +31,8 @@ export const circleCIApiRef = new ApiRef<CircleCIApi>({
 });
 
 export class CircleCIApi {
-  token: string = '';
-  private options: Partial<CircleCIOptions>;
+  private token: string = '';
+  options: Partial<CircleCIOptions>;
 
   authed: boolean = false;
   constructor(options?: Partial<CircleCIOptions>) {

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

@@ -11,9 +11,6 @@ import {
   TableRow,
   Link,
   CircularProgress,
-  List,
-  ListItem,
-  ListItemText,
 } from '@material-ui/core';
 import { Replay as RetryIcon } from '@material-ui/icons';
 import {
@@ -78,7 +75,7 @@ export const CITable: FC<{
   builds: CITableBuildInfo[];
 }> = ({ builds }) => {
   const classes = useStyles();
-
+  const isTestDataAvailable = builds.some(build => build.tests);
   return (
     <TableContainer>
       <Table className={classes.table} size="small" aria-label="a dense table">
@@ -88,8 +85,8 @@ export const CITable: FC<{
             <TableCell>Build</TableCell>
             <TableCell>Source</TableCell>
             <TableCell align="center">Status</TableCell>
-            <TableCell>Tests</TableCell>
-            <TableCell>Actions</TableCell>
+            {isTestDataAvailable && <TableCell>Tests</TableCell>}
+            <TableCell align="center">Actions</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -102,28 +99,25 @@ export const CITable: FC<{
                 </Link>
               </TableCell>
               <TableCell>
-                <List dense>
-                  <ListItem>
-                    <ListItemText primary={build.source.branchName} />
-                  </ListItem>
-                  <ListItem>
-                    <ListItemText primary={build.source.commit.hash} />
-                  </ListItem>
-                </List>
+                {build.source.branchName}
+                <br />
+                {build.source.commit.hash}
               </TableCell>
               <TableCell align="center">
                 {getStatusComponent(build.status)}
               </TableCell>
-              <TableCell>
-                {build.tests && (
-                  <>
-                    {build.tests.passed}/{build.tests.total} (
-                    {build.tests.failed ? build.tests.failed + ', ' : ''}
-                    {build.tests.skipped ? build.tests.skipped : ''})
-                  </>
-                )}
-              </TableCell>
-              <TableCell>
+              {build.tests && (
+                <TableCell>
+                  {
+                    <>
+                      {build.tests.passed}/{build.tests.total} (
+                      {build.tests.failed ? build.tests.failed + ', ' : ''}
+                      {build.tests.skipped ? build.tests.skipped : ''})
+                    </>
+                  }
+                </TableCell>
+              )}
+              <TableCell align="center">
                 <Button onClick={build.onRetryClick}>
                   <RetryIcon />
                 </Button>

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

@@ -68,13 +68,13 @@ const transform = (
       },
       status: makeReadableStatus(buildData.status),
       buildUrl: buildData.build_url,
-      tests: {
-        failed: 0,
-        passed: 10,
-        skipped: 3,
-        testUrl: 'nourlnow',
-        total: 13,
-      },
+      // tests: {
+      //   failed: 0,
+      //   passed: 10,
+      //   skipped: 3,
+      //   testUrl: 'nourlnow',
+      //   total: 13,
+      // },
     };
     return tableBuildInfo;
   });

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

@@ -1,14 +1,20 @@
-import { useState, FC } from "react";
-import { List, ListItem, TextField, Button } from "@material-ui/core";
-import React from "react";
+import { useState, FC, useEffect } 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}) => {
-    
+export const ProjectInput: FC<{
+  setGitInfo: (info: { owner: string; repo: string }) => void;
+  apiGitInfo?: { owner?: string; repo?: string };
+}> = ({ setGitInfo, apiGitInfo = {} }) => {
   const [owner, setOwner] = useState('');
   const [repo, setRepo] = useState('');
-  
+
+  useEffect(() => {
+    if (apiGitInfo.owner !== owner && apiGitInfo.owner)
+      setOwner(apiGitInfo.owner);
+    if (apiGitInfo.repo !== repo && apiGitInfo.repo) setRepo(apiGitInfo.repo);
+  }, [apiGitInfo]);
+
   return (
     <List>
       <ListItem>
@@ -34,9 +40,9 @@ export const ProjectInput:FC<{
           color="primary"
           onClick={() => setGitInfo({ owner, repo })}
         >
-          Load
+          Save
         </Button>
       </ListItem>
     </List>
   );
-};
+};

plugins/circleci/src/components/SettingsPage/SettingsPage.tsx

@@ -41,8 +41,8 @@ export const SettingsPage = () => {
           </Button>
           <SupportButton>A description of your plugin goes here.</SupportButton>
         </ContentHeader>
-        <Grid container spacing={3} direction="column">
-          <Grid item>
+        <Grid container spacing={3}>
+          <Grid item xs={6}>
             <InfoCard title="Authentication">
               <List>
                 {authed ? (
@@ -79,7 +79,14 @@ export const SettingsPage = () => {
                 )}
               </List>
             </InfoCard>
-            <ProjectInput setGitInfo={info => api.setVCSOptions(info)} />
+          </Grid>
+          <Grid item xs={6}>
+            <InfoCard title="Project configuration">
+              <ProjectInput
+                apiGitInfo={api.options.vcs}
+                setGitInfo={info => api.setVCSOptions(info)}
+              />
+            </InfoCard>
           </Grid>
         </Grid>
       </Content>