Merge

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

@@ -1,5 +1,5 @@
 import { useState, FC, useEffect } from 'react';
-import { List, ListItem, TextField, Button } from '@material-ui/core';
+import { ListItem, TextField, Button } from '@material-ui/core';
 import React from 'react';
 
 export const ProjectInput: FC<{
@@ -16,13 +16,13 @@ export const ProjectInput: FC<{
   }, [apiGitInfo]);
 
   return (
-    <List>
+    <>
       <ListItem>
         <TextField
           name="circleci-owner"
           label="Owner"
           value={owner}
-          onChange={e => setOwner(e.target.value)}
+          onChange={(e) => setOwner(e.target.value)}
         />
       </ListItem>
       <ListItem>
@@ -30,7 +30,7 @@ export const ProjectInput: FC<{
           name="circleci-repo"
           label="Repo"
           value={repo}
-          onChange={e => setRepo(e.target.value)}
+          onChange={(e) => setRepo(e.target.value)}
         />
       </ListItem>
       <ListItem>
@@ -43,6 +43,6 @@ export const ProjectInput: FC<{
           Save
         </Button>
       </ListItem>
-    </List>
+    </>
   );
 };

plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, TextField, List, Grid, ListItem } from '@material-ui/core';
 import { circleCIApiRef } from 'api';
 import {
@@ -8,12 +8,12 @@ import {
   ContentHeader,
   SupportButton,
 } from '@backstage/core';
-import { ProjectInput } from 'components/ProjectInput/ProjectInput';
 import { Link as RouterLink } from 'react-router-dom';
 import { Layout } from 'components/Layout';
 
 export const SettingsPage = () => {
   const api = useApi(circleCIApiRef);
+  const apiGitInfo = api.options.vcs;
   const [authed, setAuthed] = React.useState(api.authed);
   const [token, setToken] = React.useState('');
 
@@ -25,6 +25,16 @@ export const SettingsPage = () => {
       .catch(() => setAuthed(false));
   }, []);
 
+  const [owner, setOwner] = useState('');
+  const [repo, setRepo] = useState('');
+
+  useEffect(() => {
+    if (apiGitInfo && apiGitInfo.owner !== owner && apiGitInfo.owner)
+      setOwner(apiGitInfo.owner);
+    if (apiGitInfo && apiGitInfo.repo !== repo && apiGitInfo.repo)
+      setRepo(apiGitInfo.repo);
+  }, [apiGitInfo]);
+
   return (
     <Layout>
       <Content>
@@ -52,6 +62,32 @@ export const SettingsPage = () => {
                       />
                     </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="load-build-button"
+                        variant="outlined"
+                        color="primary"
+                        onClick={() => api.setVCSOptions({ owner, repo })}
+                      >
+                        Save
+                      </Button>
+                    </ListItem>
                     <ListItem>
                       <Button
                         data-testid="github-auth-button"
@@ -73,14 +109,6 @@ export const SettingsPage = () => {
               </List>
             </InfoCard>
           </Grid>
-          <Grid item xs={6}>
-            <InfoCard title="Project configuration">
-              <ProjectInput
-                apiGitInfo={api.options.vcs}
-                setGitInfo={(info) => api.setVCSOptions(info)}
-              />
-            </InfoCard>
-          </Grid>
         </Grid>
       </Content>
     </Layout>

plugins/circleci/src/utils/index.ts

@@ -0,0 +1,62 @@
+import { circleCIApiRef } from 'api';
+import { BuildSummary } from 'circleci-api';
+import { CITableBuildInfo } from 'components/CITable';
+
+const makeReadableStatus = (status: string | undefined) => {
+  if (typeof status === 'undefined') return '';
+  return ({
+    retried: 'Retried',
+    canceled: 'Canceled',
+    infrastructure_fail: 'Infra fail',
+    timedout: 'Timedout',
+    not_run: 'Not run',
+    running: 'Running',
+    failed: 'Failed',
+    queued: 'Queued',
+    scheduled: 'Scheduled',
+    not_running: 'Not running',
+    no_tests: 'No tests',
+    fixed: 'Fixed',
+    success: 'Success',
+  } as Record<string, string>)[status];
+};
+
+export const transformBuildSummary = (
+  api: typeof circleCIApiRef.T,
+  buildData: BuildSummary,
+) => {
+  const tableBuildInfo: CITableBuildInfo = {
+    id: String(buildData.build_num),
+    buildName: buildData.subject
+      ? buildData.subject +
+        (buildData.retry_of ? ` (retry of #${buildData.retry_of})` : '')
+      : '',
+    onRetryClick: () => api.retry(String(buildData.build_num)),
+    source: {
+      branchName: String(buildData.branch),
+      commit: {
+        hash: String(buildData.vcs_revision),
+        url: 'todo',
+      },
+    },
+    status: makeReadableStatus(buildData.status),
+    buildUrl: buildData.build_url,
+    // tests: {
+    //   failed: 0,
+    //   passed: 10,
+    //   skipped: 3,
+    //   testUrl: 'nourlnow',
+    //   total: 13,
+    // },
+  };
+  return tableBuildInfo;
+};
+
+export const transformBuildSummaries = (
+  buildsData: BuildSummary[],
+  api: typeof circleCIApiRef.T,
+): CITableBuildInfo[] => {
+  return buildsData.map((buildSummary) =>
+    transformBuildSummary(api, buildSummary),
+  );
+};