Using EmptyState in Github Actions Plugin (#2680)

* display EmptyState when no CI/CD is avialable

* change padding and title size

* add EmptyState to gitHubActionPlugin

* fix test failing

* add MissingAnnotationEmptyState

* add MissingAnnotationEmptyState to storybook

* add highlightedNumbers feature to Codesnippet

* use the new component in github actions and update README

* remove entity from MissingAnnotationEmptyState

* remove proptypes from Codesnippet

Co-authored-by: Samira Mokaram <samiram@spotify.com>

plugins/github-actions/README.md

@@ -11,7 +11,7 @@ TBD
 ### Generic Requirements
 
 1. Provide OAuth credentials:
-   1. [Create an OAuth App](https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/) with callback URL set to `https://localhost:3000/auth/github`.
+   1. [Create an OAuth App](https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/) with callback URL set to `http://localhost:7000/api/auth/github`.
    2. Take Client ID and Client Secret from the newly created app's settings page and put them into `AUTH_GITHUB_CLIENT_ID` and `AUTH_GITHUB_CLIENT_SECRET` env variables.
 2. Annotate your component with a correct GitHub Actions repository and owner:
 

plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx

@@ -18,9 +18,9 @@ import { errorApiRef, useApi } from '@backstage/core-api';
 import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
 import { useWorkflowRuns } from '../useWorkflowRuns';
 import React, { useEffect } from 'react';
-import { Table } from '@backstage/core';
+import { EmptyState, Table } from '@backstage/core';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
-import { Card, Link, TableContainer } from '@material-ui/core';
+import { Button, Card, Link, TableContainer } from '@material-ui/core';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 
 const firstLine = (message: string): string => message.split('\n')[0];
@@ -54,7 +54,22 @@ export const RecentWorkflowRunsCard = ({
     }
   }, [error, errorApi]);
 
-  return (
+  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://github.com/${owner}/${repo}/actions/new`}
+        >
+          Create new Workflow
+        </Button>
+      }
+    />
+  ) : (
     <TableContainer component={Card}>
       <Table
         title="Recent Workflow Runs"

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

@@ -20,18 +20,14 @@ import { rootRouteRef, buildRouteRef } from '../plugin';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 import { WorkflowRunsTable } from './WorkflowRunsTable';
 import { GITHUB_ACTIONS_ANNOTATION } from './useProjectName';
-import { WarningPanel } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[GITHUB_ACTIONS_ANNOTATION]);
 
 export const Router = ({ entity }: { entity: Entity }) =>
-  // TODO(shmidt-i): move warning to a separate standardized component
   !isPluginApplicableToEntity(entity) ? (
-    <WarningPanel title="GitHubActions plugin:">
-      <pre>{GITHUB_ACTIONS_ANNOTATION}</pre> annotation is missing on the
-      entity.
-    </WarningPanel>
+    <MissingAnnotationEmptyState annotation={GITHUB_ACTIONS_ANNOTATION} />
   ) : (
     <Routes>
       <Route

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

@@ -14,11 +14,18 @@
  * limitations under the License.
  */
 import React, { FC } from 'react';
-import { Link, Typography, Box, IconButton, Tooltip } from '@material-ui/core';
+import {
+  Link,
+  Typography,
+  Box,
+  IconButton,
+  Tooltip,
+  Button,
+} from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import { Link as RouterLink, generatePath } from 'react-router-dom';
-import { Table, TableColumn } from '@backstage/core';
+import { EmptyState, Table, TableColumn } from '@backstage/core';
 import { useWorkflowRuns } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import SyncIcon from '@material-ui/icons/Sync';
@@ -156,15 +163,34 @@ export const WorkflowRunsTable = ({
 }) => {
   const { value: projectName, loading } = useProjectName(entity);
   const [owner, repo] = (projectName ?? '/').split('/');
-  const [tableProps, { retry, setPage, setPageSize }] = useWorkflowRuns({
+  const [
+    { runs, ...tableProps },
+    { retry, setPage, setPageSize },
+  ] = useWorkflowRuns({
     owner,
     repo,
     branch,
   });
 
-  return (
+  return !runs ? (
+    <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://github.com/${projectName}/actions/new`}
+        >
+          Create new Workflow
+        </Button>
+      }
+    />
+  ) : (
     <WorkflowRunsTableView
       {...tableProps}
+      runs={runs}
       loading={loading || tableProps.loading}
       retry={retry}
       onChangePageSize={setPageSize}