fix(github-actions): cards

plugins/catalog/src/components/EntityPageCi/EntityPageCi.tsx

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
+// TODO(shmidt-i): move to the app
 import { Entity } from '@backstage/catalog-model';
 import { Content } from '@backstage/core';
-import { RecentWorkflowRunsCard as GithubActionsListWidget } from '@backstage/plugin-github-actions';
+import { LatestWorkflowsForBranchCard } from '@backstage/plugin-github-actions';
 import { Grid } from '@material-ui/core';
 import React, { FC } from 'react';
 
@@ -26,7 +27,7 @@ export const EntityPageCi: FC<{ entity: Entity }> = ({ entity }) => {
       <Grid container spacing={3}>
         {entity.metadata?.annotations?.['backstage.io/github-actions-id'] && (
           <Grid item sm={12}>
-            <GithubActionsListWidget entity={entity} branch="master" />
+            <LatestWorkflowsForBranchCard entity={entity} branch="master" />
           </Grid>
         )}
       </Grid>

plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx

@@ -16,11 +16,7 @@
 import React, { useState } from 'react';
 import { useParams, useNavigate } from 'react-router';
 
-import {
-  useEntityFromUrl,
-  EntityContext,
-  useEntity,
-} from '../../hooks/useEntity';
+import { useEntity } from '../../hooks/useEntity';
 import {
   pageTheme,
   PageTheme,

plugins/catalog/src/components/EntityPageOverview/EntityPageOverview.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
+// TODO(shmidt-i): move to the app
 import { Entity } from '@backstage/catalog-model';
 import { Content } from '@backstage/core';
 import { SentryIssuesWidget } from '@backstage/plugin-sentry';
-import { Widget as GithubActionsWidget } from '@backstage/plugin-github-actions';
 import {
   JenkinsBuildsWidget,
   JenkinsLastBuildWidget,
@@ -47,11 +47,6 @@ export const EntityPageOverview: FC<{ entity: Entity }> = ({ entity }) => {
             <JenkinsBuildsWidget entity={entity} />
           </Grid>
         )}
-        {entity.metadata?.annotations?.['backstage.io/github-actions-id'] && (
-          <Grid item sm={3}>
-            <GithubActionsWidget entity={entity} branch="master" />
-          </Grid>
-        )}
         <Grid item sm={8}>
           <SentryIssuesWidget
             sentryProjectId="sample-sentry-project-id"

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

@@ -74,7 +74,7 @@ const WidgetContent = ({
   );
 };
 
-export const Widget = ({
+export const LatestWorkflowRunCard = ({
   entity,
   branch = 'master',
 }: {
@@ -109,50 +109,14 @@ export const Widget = ({
   );
 };
 
-const RecentWorkflowRunsCardContent = ({
-  error,
-  loading,
-  branch,
-}: {
-  error?: Error;
-  loading?: boolean;
-  branch: string;
-}) => {
-  if (error) return <Typography>Couldn't fetch {branch} runs</Typography>;
-  if (loading) return <LinearProgress />;
-  return <WorkflowRunsTable />;
-};
-
-export const RecentWorkflowRunsCard = ({
+export const LatestWorkflowsForBranchCard = ({
   entity,
   branch = 'master',
 }: {
   entity: Entity;
   branch: string;
-}) => {
-  const errorApi = useApi(errorApiRef);
-  const [owner, repo] = (
-    entity?.metadata.annotations?.['backstage.io/github-actions-id'] ?? '/'
-  ).split('/');
-  const [{ loading, error }] = useWorkflowRuns({
-    owner,
-    repo,
-    branch,
-  });
-
-  useEffect(() => {
-    if (error) {
-      errorApi.post(error);
-    }
-  }, [error, errorApi]);
-
-  return (
-    <InfoCard title={`${branch} builds`}>
-      <RecentWorkflowRunsCardContent
-        error={error}
-        loading={loading}
-        branch={branch}
-      />
-    </InfoCard>
-  );
-};
+}) => (
+  <InfoCard title={`Last ${branch} build`}>
+    <WorkflowRunsTable branch={branch} entity={entity} />
+  </InfoCard>
+);

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

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

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

@@ -23,7 +23,6 @@ import { useWorkflowRuns } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import SyncIcon from '@material-ui/icons/Sync';
 import { buildRouteRef } from '../../plugin';
-import { useEntityCompoundName } from '@backstage/plugin-catalog';
 import { useProjectName } from '../useProjectName';
 import { Entity } from '@backstage/catalog-model';
 
@@ -148,12 +147,19 @@ export const WorkflowRunsTableView: FC<Props> = ({
   );
 };
 
-export const WorkflowRunsTable = ({ entity }: { entity: Entity }) => {
+export const WorkflowRunsTable = ({
+  entity,
+  branch,
+}: {
+  entity: Entity;
+  branch?: string;
+}) => {
   const { value: projectName, loading } = useProjectName(entity);
   const [owner, repo] = (projectName ?? '/').split('/');
   const [tableProps, { retry, setPage, setPageSize }] = useWorkflowRuns({
     owner,
     repo,
+    branch,
   });
 
   return (

plugins/github-actions/src/index.ts

@@ -17,4 +17,5 @@
 export { plugin } from './plugin';
 export * from './api';
 export { Router } from './components/Router';
+export * from './components/Cards';
 export { GITHUB_ACTIONS_ANNOTATION } from './components/useProjectName';