Added Widget for listing workflows run

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

@@ -15,7 +15,7 @@
  */
 import React, { useEffect } from 'react';
 import { useWorkflowRuns } from '../useWorkflowRuns';
-import { WorkflowRun } from '../WorkflowRunsTable';
+import { WorkflowRun, WorkflowRunsTable } from '../WorkflowRunsTable';
 import { Entity } from '@backstage/catalog-model';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import {
@@ -108,3 +108,54 @@ export const Widget = ({
     </InfoCard>
   );
 };
+
+const WidgetListContent = ({
+  error,
+  loading,
+  branch,
+}: {
+  error?: Error;
+  loading?: boolean;
+  lastRun: WorkflowRun;
+  branch: string;
+}) => {
+  if (error) return <Typography>Couldn't fetch {branch} runs</Typography>;
+  if (loading) return <LinearProgress />;
+  return <WorkflowRunsTable />;
+};
+
+export const WidgetList = ({
+  entity,
+  branch = 'master',
+}: {
+  entity: Entity;
+  branch: string;
+}) => {
+  const errorApi = useApi(errorApiRef);
+  const [owner, repo] = (
+    entity?.metadata.annotations?.['backstage.io/github-actions-id'] ?? '/'
+  ).split('/');
+  const [{ runs, loading, error }] = useWorkflowRuns({
+    owner,
+    repo,
+    branch,
+  });
+
+  const lastRun = runs?.[0] ?? ({} as WorkflowRun);
+  useEffect(() => {
+    if (error) {
+      errorApi.post(error);
+    }
+  }, [error, errorApi]);
+
+  return (
+    <InfoCard title={`${branch} builds`}>
+      <WidgetListContent
+        error={error}
+        loading={loading}
+        branch={branch}
+        lastRun={lastRun}
+      />
+    </InfoCard>
+  );
+};

plugins/github-actions/src/components/Widget/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { Widget } from './Widget';
+export { Widget, WidgetList } from './Widget';