From 4c42ecca2d106c80f358655b7e0863be463049c6 Mon Sep 17 00:00:00 2001
From: Andrew Shirley <andrew@als-bi.com>
Date: Mon, 19 Apr 2021 16:31:30 +0100
Subject: [PATCH 1/3] Wrap EmptyState in a Card

This prevents it overflowing onto subsequent content

Signed-off-by: Andrew Shirley <andrew@als-bi.com>
---
 .changeset/empty-lizards-doubt.md             |  5 +++
 .../Cards/RecentWorkflowRunsCard.tsx          | 43 ++++++++++++-------
 2 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/empty-lizards-doubt.md

diff --git a/.changeset/empty-lizards-doubt.md b/.changeset/empty-lizards-doubt.md
new file mode 100644
index 0000000000..cfe1e128fc
--- /dev/null
+++ b/.changeset/empty-lizards-doubt.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-github-actions': patch
+---
+
+Wrap EmptyState in Card
diff --git a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
index 1126c2a2a0..a3605abb7e 100644
--- a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
+++ b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
@@ -25,7 +25,14 @@ import {
 } from '@backstage/core';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { Button, Link } from '@material-ui/core';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  Link,
+} from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
@@ -75,20 +82,26 @@ export const RecentWorkflowRunsCard = ({
   const githubHost = hostname || 'github.com';
 
   return !runs.length ? (
-    <EmptyState
-      missing="data"
-      title="No Workflow Data"
-      description="This component has GitHub Actions enabled, but no data was found. Have you created any Workflows? Click the button below to create a new Workflow."
-      action={
-        <Button
-          variant="contained"
-          color="primary"
-          href={`https://${githubHost}/${owner}/${repo}/actions/new`}
-        >
-          Create new Workflow
-        </Button>
-      }
-    />
+    <Card>
+      <CardHeader title="Recent Workflow Runs" />
+      <Divider />
+      <CardContent>
+        <EmptyState
+          missing="data"
+          title="No Workflow Data"
+          description="This component has GitHub Actions enabled, but no data was found. Have you created any Workflows? Click the button below to create a new Workflow."
+          action={
+            <Button
+              variant="contained"
+              color="primary"
+              href={`https://${githubHost}/${owner}/${repo}/actions/new`}
+            >
+              Create new Workflow
+            </Button>
+          }
+        />
+      </CardContent>
+    </Card>
   ) : (
     <InfoCard
       title="Recent Workflow Runs"

From 50701f32cb87d6582135c21b9f0a04dcb3650e97 Mon Sep 17 00:00:00 2001
From: Andrew Shirley <andrew@als-bi.com>
Date: Mon, 26 Apr 2021 17:31:43 +0100
Subject: [PATCH 2/3] Use InfoCard not Card

Signed-off-by: Andrew Shirley <andrew@als-bi.com>
---
 .../Cards/RecentWorkflowRunsCard.tsx          | 45 +++++++------------
 1 file changed, 17 insertions(+), 28 deletions(-)

diff --git a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
index a3605abb7e..97428088fc 100644
--- a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
+++ b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
@@ -25,14 +25,7 @@ import {
 } from '@backstage/core';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Divider,
-  Link,
-} from '@material-ui/core';
+import { Button, Link } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
@@ -82,26 +75,22 @@ export const RecentWorkflowRunsCard = ({
   const githubHost = hostname || 'github.com';
 
   return !runs.length ? (
-    <Card>
-      <CardHeader title="Recent Workflow Runs" />
-      <Divider />
-      <CardContent>
-        <EmptyState
-          missing="data"
-          title="No Workflow Data"
-          description="This component has GitHub Actions enabled, but no data was found. Have you created any Workflows? Click the button below to create a new Workflow."
-          action={
-            <Button
-              variant="contained"
-              color="primary"
-              href={`https://${githubHost}/${owner}/${repo}/actions/new`}
-            >
-              Create new Workflow
-            </Button>
-          }
-        />
-      </CardContent>
-    </Card>
+    <InfoCard title="Recent Workflow Runs" variant={variant}>
+      <EmptyState
+        missing="data"
+        title="No Workflow Data"
+        description="This component has GitHub Actions enabled, but no data was found. Have you created any Workflows? Click the button below to create a new Workflow."
+        action={
+          <Button
+            variant="contained"
+            color="primary"
+            href={`https://${githubHost}/${owner}/${repo}/actions/new`}
+          >
+            Create new Workflow
+          </Button>
+        }
+      />
+    </InfoCard>
   ) : (
     <InfoCard
       title="Recent Workflow Runs"

From 16a4ffb871f1643cd1f1eef964488f2b318da046 Mon Sep 17 00:00:00 2001
From: Andrew Shirley <andrew@als-bi.com>
Date: Mon, 26 Apr 2021 18:04:06 +0100
Subject: [PATCH 3/3] Eliminate EmptyState usage

Signed-off-by: Andrew Shirley <andrew@als-bi.com>
---
 .../Cards/RecentWorkflowRunsCard.tsx          | 89 +++++++++----------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
index 97428088fc..f0366e5590 100644
--- a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
+++ b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
@@ -16,21 +16,21 @@
 import { Entity } from '@backstage/catalog-model';
 import {
   configApiRef,
-  EmptyState,
   errorApiRef,
   InfoCard,
   InfoCardVariants,
+  Link,
   Table,
   useApi,
 } from '@backstage/core';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { Button, Link } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
 import { useWorkflowRuns } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
+import { Typography } from '@material-ui/core';
 
 const firstLine = (message: string): string => message.split('\n')[0];
 
@@ -74,56 +74,53 @@ export const RecentWorkflowRunsCard = ({
 
   const githubHost = hostname || 'github.com';
 
-  return !runs.length ? (
-    <InfoCard title="Recent Workflow Runs" variant={variant}>
-      <EmptyState
-        missing="data"
-        title="No Workflow Data"
-        description="This component has GitHub Actions enabled, but no data was found. Have you created any Workflows? Click the button below to create a new Workflow."
-        action={
-          <Button
-            variant="contained"
-            color="primary"
-            href={`https://${githubHost}/${owner}/${repo}/actions/new`}
-          >
-            Create new Workflow
-          </Button>
-        }
-      />
-    </InfoCard>
-  ) : (
+  return (
     <InfoCard
       title="Recent Workflow Runs"
       subheader={branch ? `Branch: ${branch}` : 'All Branches'}
       noPadding
       variant={variant}
     >
-      <Table
-        isLoading={loading}
-        options={{
-          search: false,
-          paging: false,
-          padding: dense ? 'dense' : 'default',
-          toolbar: false,
-        }}
-        columns={[
-          {
-            title: 'Commit Message',
-            field: 'message',
-            render: data => (
-              <Link
-                component={RouterLink}
-                to={generatePath('./ci-cd/:id', { id: data.id! })}
-              >
-                {firstLine(data.message)}
-              </Link>
-            ),
-          },
-          { title: 'Branch', field: 'source.branchName' },
-          { title: 'Status', field: 'status', render: WorkflowRunStatus },
-        ]}
-        data={runs}
-      />
+      {!runs.length ? (
+        <div style={{ textAlign: 'center' }}>
+          <Typography variant="body1">
+            This component has GitHub Actions enabled, but no workflows were
+            found.
+          </Typography>
+          <Typography variant="body2">
+            <Link to={`https://${githubHost}/${owner}/${repo}/actions/new`}>
+              Create a new workflow
+            </Link>
+          </Typography>
+        </div>
+      ) : (
+        <Table
+          isLoading={loading}
+          options={{
+            search: false,
+            paging: false,
+            padding: dense ? 'dense' : 'default',
+            toolbar: false,
+          }}
+          columns={[
+            {
+              title: 'Commit Message',
+              field: 'message',
+              render: data => (
+                <Link
+                  component={RouterLink}
+                  to={generatePath('./ci-cd/:id', { id: data.id! })}
+                >
+                  {firstLine(data.message)}
+                </Link>
+              ),
+            },
+            { title: 'Branch', field: 'source.branchName' },
+            { title: 'Status', field: 'status', render: WorkflowRunStatus },
+          ]}
+          data={runs}
+        />
+      )}
     </InfoCard>
   );
 };