Restructure project credentials form

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

@@ -1,48 +0,0 @@
-import { useState, FC, useEffect } from 'react';
-import { ListItem, TextField, Button } from '@material-ui/core';
-import React from 'react';
-
-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 (
-    <>
-      <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 })}
-        >
-          Save
-        </Button>
-      </ListItem>
-    </>
-  );
-};

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

@@ -7,6 +7,8 @@ import {
   Content,
   ContentHeader,
   SupportButton,
+  // StatusOK,
+  StatusFailed,
 } from '@backstage/core';
 import { Link as RouterLink } from 'react-router-dom';
 import { Layout } from 'components/Layout';
@@ -46,7 +48,14 @@ export const SettingsPage = () => {
         </ContentHeader>
         <Grid container spacing={3}>
           <Grid item xs={6}>
-            <InfoCard title="Authentication">
+            <InfoCard
+              title="Project Credentials"
+              subheader={
+                <div>
+                  <StatusFailed />
+                </div>
+              }
+            >
               <List>
                 {authed ? (
                   <>Authenticated</>
@@ -78,22 +87,13 @@ export const SettingsPage = () => {
                         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"
                         variant="outlined"
                         color="primary"
                         onClick={async () => {
+                          api.setVCSOptions({ owner, repo });
                           api.setToken(token);
                           api
                             .validateToken()
@@ -101,7 +101,7 @@ export const SettingsPage = () => {
                             .catch(() => setAuthed(false));
                         }}
                       >
-                        Authenticate
+                        Save credentials
                       </Button>
                     </ListItem>
                   </>