fix: use gitgub token from UI

plugins/github-actions/src/api/GithubActionsApi.ts

@@ -28,39 +28,47 @@ export const githubActionsApiRef = createApiRef<GithubActionsApi>({
 
 export type GithubActionsApi = {
   listWorkflowRuns: ({
+    token,
     owner,
     repo,
     pageSize,
     page,
   }: {
+    token: string;
     owner: string;
     repo: string;
     pageSize?: number;
     page?: number;
   }) => Promise<ActionsListWorkflowRunsForRepoResponseData>;
   getWorkflow: ({
+    token,
     owner,
     repo,
     id,
   }: {
+    token: string;
     owner: string;
     repo: string;
     id: number;
   }) => Promise<ActionsGetWorkflowResponseData>;
   getWorkflowRun: ({
+    token,
     owner,
     repo,
     id,
   }: {
+    token: string;
     owner: string;
     repo: string;
     id: number;
   }) => Promise<ActionsGetWorkflowRunResponseData>;
   reRunWorkflow: ({
+    token,
     owner,
     repo,
     runId,
   }: {
+    token: string;
     owner: string;
     repo: string;
     runId: number;

plugins/github-actions/src/api/GithubActionsClient.ts

@@ -23,37 +23,39 @@ import {
 } from '@octokit/types';
 
 export class GithubActionsClient implements GithubActionsApi {
-  private api: Octokit;
-  constructor({ api }: { api: Octokit }) {
-    this.api = api;
-  }
   reRunWorkflow({
+    token,
     owner,
     repo,
     runId,
   }: {
+    token: string;
     owner: string;
     repo: string;
     runId: number;
   }) {
-    this.api.actions.reRunWorkflow({
+    new Octokit({ auth: token }).actions.reRunWorkflow({
       owner,
       repo,
       run_id: runId,
     });
   }
   async listWorkflowRuns({
+    token,
     owner,
     repo,
     pageSize = 100,
     page = 0,
   }: {
+    token: string;
     owner: string;
     repo: string;
     pageSize?: number;
     page?: number;
   }): Promise<ActionsListWorkflowRunsForRepoResponseData> {
-    const workflowRuns = await this.api.actions.listWorkflowRunsForRepo({
+    const workflowRuns = await new Octokit({
+      auth: token,
+    }).actions.listWorkflowRunsForRepo({
       owner,
       repo,
       per_page: pageSize,
@@ -62,15 +64,17 @@ export class GithubActionsClient implements GithubActionsApi {
     return workflowRuns.data;
   }
   async getWorkflow({
+    token,
     owner,
     repo,
     id,
   }: {
+    token: string;
     owner: string;
     repo: string;
     id: number;
   }): Promise<ActionsGetWorkflowResponseData> {
-    const workflow = await this.api.actions.getWorkflow({
+    const workflow = await new Octokit({ auth: token }).actions.getWorkflow({
       owner,
       repo,
       workflow_id: id,
@@ -78,15 +82,17 @@ export class GithubActionsClient implements GithubActionsApi {
     return workflow.data;
   }
   async getWorkflowRun({
+    token,
     owner,
     repo,
     id,
   }: {
+    token: string;
     owner: string;
     repo: string;
     id: number;
   }): Promise<ActionsGetWorkflowRunResponseData> {
-    const run = await this.api.actions.getWorkflowRun({
+    const run = await new Octokit({ auth: token }).actions.getWorkflowRun({
       owner,
       repo,
       run_id: id,

plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx

@@ -30,7 +30,7 @@ import {
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
-import { Link, useApi } from '@backstage/core';
+import { Link, useApi, githubAuthApiRef } from '@backstage/core';
 import { githubActionsApiRef } from '../../api';
 
 const useStyles = makeStyles<Theme>(theme => ({
@@ -50,22 +50,23 @@ export const BuildDetailsPage = () => {
   const repo = 'try-ssr';
   const owner = 'CircleCITest3';
   const api = useApi(githubActionsApiRef);
+  const auth = useApi(githubAuthApiRef);
 
   const classes = useStyles();
   const { id } = useParams();
-  const status = useAsync(
-    () =>
-      api
-        .getWorkflowRun({
-          owner,
-          repo,
-          id: parseInt(id, 10),
-        })
-        .then(data => {
-          return data;
-        }),
-    [location.search],
-  );
+  const status = useAsync(async () => {
+    const token = await auth.getAccessToken(['repo', 'user']);
+    return api
+      .getWorkflowRun({
+        token,
+        owner,
+        repo,
+        id: parseInt(id, 10),
+      })
+      .then(data => {
+        return data;
+      });
+  }, [location.search]);
 
   if (status.loading) {
     return <LinearProgress />;

plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx

@@ -28,7 +28,7 @@ import React from 'react';
 import { useAsync } from 'react-use';
 import { BuildStatusIndicator } from '../BuildStatusIndicator';
 import { githubActionsApiRef, BuildStatus } from '../../api';
-import { Link, useApi } from '@backstage/core';
+import { Link, useApi, githubAuthApiRef } from '@backstage/core';
 
 const useStyles = makeStyles<Theme>(theme => ({
   root: {
@@ -41,9 +41,11 @@ const useStyles = makeStyles<Theme>(theme => ({
 
 const BuildInfoCardContent = () => {
   const api = useApi(githubActionsApiRef);
+  const auth = useApi(githubAuthApiRef);
 
   const status = useAsync(async () => {
-    return api.listWorkflowRuns({ owner: 'spotify', repo: 'backstage' });
+    const token = await auth.getAccessToken(['repo', 'user']);
+    return api.listWorkflowRuns({ token, owner: 'spotify', repo: 'backstage' });
   });
 
   if (status.loading) {

plugins/github-actions/src/components/BuildListTable/useBuilds.ts

@@ -17,11 +17,12 @@ import { useState } from 'react';
 import { useAsyncRetry } from 'react-use';
 import { Build } from './BuildListTable';
 import { githubActionsApiRef } from '../../api/GithubActionsApi';
-import { useApi } from '@backstage/core';
+import { useApi, githubAuthApiRef } from '@backstage/core';
 import { ActionsListWorkflowRunsForRepoResponseData } from '@octokit/types';
 
 export function useBuilds({ repo, owner }: { repo: string; owner: string }) {
   const api = useApi(githubActionsApiRef);
+  const auth = useApi(githubAuthApiRef);
 
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(0);
@@ -29,11 +30,13 @@ export function useBuilds({ repo, owner }: { repo: string; owner: string }) {
 
   const restartBuild = async () => {};
 
-  const { loading, value: builds, retry } = useAsyncRetry<Build[]>(
-    () =>
+  const { loading, value: builds, retry } = useAsyncRetry<Build[]>(async () => {
+    const token = await auth.getAccessToken(['repo', 'user']);
+
+    return (
       api
         // GitHub API pagination count starts from 1
-        .listWorkflowRuns({ owner, repo, pageSize, page: page + 1 })
+        .listWorkflowRuns({ token, owner, repo, pageSize, page: page + 1 })
         .then(
           (allBuilds: ActionsListWorkflowRunsForRepoResponseData): Build[] => {
             setTotal(allBuilds.total_count);
@@ -43,6 +46,7 @@ export function useBuilds({ repo, owner }: { repo: string; owner: string }) {
               id: `${run.id}`,
               onRestartClick: () => {
                 api.reRunWorkflow({
+                  token,
                   owner,
                   repo,
                   runId: run.id,
@@ -62,9 +66,9 @@ export function useBuilds({ repo, owner }: { repo: string; owner: string }) {
               buildUrl: run.url,
             }));
           },
-        ),
-    [page, pageSize],
-  );
+        )
+    );
+  }, [page, pageSize]);
 
   const projectName = `${owner}/${repo}`;
   return [