feat: token input and showing list of builds

plugins/circleci/src/components/ExampleComponent/ExampleComponent.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
-import { Typography, Grid } from '@material-ui/core';
+import React, { FC, useState } from 'react';
+import { Typography, Grid, Input } from '@material-ui/core';
 import {
   InfoCard,
   Header,
@@ -28,32 +28,41 @@ import {
 } from '@backstage/core';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
-const ExampleComponent: FC<{}> = () => (
-  <Page theme={pageTheme.tool}>
-    <Header title="Welcome to circleci!" subtitle="Optional subtitle">
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
-    </Header>
-    <Content>
-      <ContentHeader title="Plugin title">
-        <SupportButton>A description of your plugin goes here.</SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <InfoCard title="Information card">
-            <Typography variant="body1">
-              All content should be wrapped in a card like this.
-            </Typography>
-          </InfoCard>
+const ExampleComponent: FC<{}> = () => {
+  const [token, setToken] = useState<string>('');
+
+  return (
+    <Page theme={pageTheme.tool}>
+      <Header title="Welcome to circleci!" subtitle="Optional subtitle">
+        <HeaderLabel label="Owner" value="Team X" />
+        <HeaderLabel label="Lifecycle" value="Alpha" />
+      </Header>
+      <Content>
+        <ContentHeader title="Plugin title">
+          <SupportButton>A description of your plugin goes here.</SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="column">
+          <Grid item>
+            <InfoCard title="Information card">
+              <Typography variant="body1">
+                Please paste your CircleCI token here
+                <Input
+                  onChange={e => setToken(e.target.value)}
+                  type="password"
+                  value={token}
+                ></Input>
+              </Typography>
+            </InfoCard>
+          </Grid>
+          <Grid item>
+            <InfoCard title="Example User List (fetching data from randomuser.me)">
+              <ExampleFetchComponent token={token} />
+            </InfoCard>
+          </Grid>
         </Grid>
-        <Grid item>
-          <InfoCard title="Example User List (fetching data from randomuser.me)">
-            <ExampleFetchComponent />
-          </InfoCard>
-        </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);
+      </Content>
+    </Page>
+  );
+};
 
 export default ExampleComponent;

plugins/circleci/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx

@@ -7,14 +7,14 @@
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
- * Unless required by applicable law or agreed to in writing, software
+ * Unless required by applicable law or agreed to in wr iting, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, useRef, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -22,41 +22,22 @@ 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';
-import Alert from '@material-ui/lab/Alert';
+// import Alert from '@material-ui/lab/Alert';
 import { useAsync } from 'react-use';
-import { Progress } from '@backstage/core';
+// import { Progress } from '@backstage/core';
 
-import { CircleCI, GitType, CircleCIOptions } from "circleci-api";
+import { CircleCI, GitType, CircleCIOptions, BuildSummary } from 'circleci-api';
 
-const CIRCLECI_TOKEN: string = "943aa82531ccaab192b4c4bc614507dff31c094c";
+// const CIRCLECI_TOKEN: string = '943aa82531ccaab192b4c4bc614507dff31c094c';
 
 // Configure the factory with some defaults
-const options: CircleCIOptions = {
-  // Required for all requests
-  token: CIRCLECI_TOKEN, // Set your CircleCi API token
 
-  // Optional
-  // Anything set here can be overriden when making the request
-
-  // Git information is required for project/build/etc endpoints
-  vcs: {
-    type: GitType.GITHUB, // default: github
-    owner: "CircleCITest3",
-    repo: "circleci-test"
-  },
-
-  // Optional query params for requests
-  // options: {
-  //   branch: "master", // default: master
-  // }
-};
-
-const api = new CircleCI(options);
-
-api.builds()
-  .then((v) => console.log("token is valid"))
-  .catch(() => console.error("invalid token"));
+// const api = new CircleCI(options);
 
+// api
+//   .builds()
+//   .then(d => console.log('token is valid', d))
+//   .catch(() => console.error('invalid token'));
 
 const useStyles = makeStyles({
   table: {
@@ -131,21 +112,50 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
     </TableContainer>
   );
 };
+const options: Partial<CircleCIOptions> = {
+  // Required for all requests
+  // token: CIRCLECI_TOKEN, // Set your CircleCi API token
 
-const ExampleFetchComponent: FC<{}> = () => {
-  // const { value, loading, error } = useAsync(async (): Promise<User[]> => {
-  //   const response = await fetch('https://randomuser.me/api/?results=20');
-  //   const data = await response.json();
-  //   return data.results;
-  // }, []);
+  // Optional
+  // Anything set here can be overriden when making the request
 
-  if (loading) {
-    return <Progress />;
-  } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
+  // Git information is required for project/build/etc endpoints
+  vcs: {
+    type: GitType.GITHUB, // default: github
+    owner: 'CircleCITest3',
+    repo: 'circleci-test',
+  },
 
-  return <DenseTable users={value || []} />;
+  // Optional query params for requests
+  // options: {
+  //   branch: "master", // default: master
+  // }
+};
+
+const BuildList: React.FC<{ builds: BuildSummary[] }> = ({ builds }) => (
+  <ul>
+    {builds.map(build => (
+      <li key={`build-${build.build_num}`}>
+        #{build.build_num} ({build.subject})
+      </li>
+    ))}
+  </ul>
+);
+const ExampleFetchComponent: FC<{ token: string }> = ({ token }) => {
+  const api = useRef<CircleCI | null>(null);
+  useEffect(() => {
+    if (token !== '') api.current = new CircleCI({ ...options, token });
+  }, [token]);
+
+  const { value, loading, error } = useAsync(() => {
+    if (api.current) return api.current.builds();
+    return Promise.reject('Api token not provided');
+  }, [token]);
+
+  if (loading) return <div>loading</div>;
+  if (error) return <div>{JSON.stringify(error, null, 2)}</div>;
+
+  return <BuildList builds={value || []} />;
 };
 
 export default ExampleFetchComponent;

plugins/circleci/src/plugin.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-import ExampleComponent from './components/ExampleFetchComponent';
+import ExampleComponent from './components/ExampleComponent';
 
 export const plugin = createPlugin({
   id: 'circleci',