Merge pull request #9369 from KaemonIsland/fix-workflow-run-details-error

Fix workflow run details error

.changeset/tall-planes-grow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-github-actions': patch
+---
+
+Fixed an issue where an error message was being displayed on the initial component render. This was due to values owner/repo not yet being set.

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

@@ -24,7 +24,7 @@ import {
 } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
 import React, { useEffect } from 'react';
-import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
+import { GITHUB_ACTIONS_ANNOTATION } from '../getProjectNameFromEntity';
 import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunsTable } from '../WorkflowRunsTable';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';

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

@@ -18,7 +18,7 @@ import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import React, { useEffect } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
-import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
+import { GITHUB_ACTIONS_ANNOTATION } from '../getProjectNameFromEntity';
 import { useWorkflowRuns } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import { Typography } from '@material-ui/core';

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

@@ -20,7 +20,7 @@ import { Routes, Route } from 'react-router';
 import { buildRouteRef } from '../routes';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 import { WorkflowRunsTable } from './WorkflowRunsTable';
-import { GITHUB_ACTIONS_ANNOTATION } from './useProjectName';
+import { GITHUB_ACTIONS_ANNOTATION } from './getProjectNameFromEntity';
 import { MissingAnnotationEmptyState } from '@backstage/core-components';
 
 export const isGithubActionsAvailable = (entity: Entity) =>

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

@@ -39,7 +39,7 @@ import ExternalLinkIcon from '@material-ui/icons/Launch';
 import { DateTime } from 'luxon';
 import React from 'react';
 import { Job, Jobs, Step } from '../../api';
-import { useProjectName } from '../useProjectName';
+import { getProjectNameFromEntity } from '../getProjectNameFromEntity';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import { useWorkflowRunJobs } from './useWorkflowRunJobs';
 import { useWorkflowRunsDetails } from './useWorkflowRunsDetails';
@@ -164,25 +164,25 @@ const JobsList = ({ jobs, entity }: { jobs?: Jobs; entity: Entity }) => {
 
 export const WorkflowRunDetails = ({ entity }: { entity: Entity }) => {
   const config = useApi(configApiRef);
-  const projectName = useProjectName(entity);
+  const projectName = getProjectNameFromEntity(entity);
 
   // TODO: Get github hostname from metadata annotation
   const hostname = readGitHubIntegrationConfigs(
     config.getOptionalConfigArray('integrations.github') ?? [],
   )[0].host;
-  const [owner, repo] = projectName.value ? projectName.value.split('/') : [];
+  const [owner, repo] = (projectName && projectName.split('/')) || [];
   const details = useWorkflowRunsDetails({ hostname, owner, repo });
   const jobs = useWorkflowRunJobs({ hostname, owner, repo });
 
-  const error = projectName.error || (projectName.value && details.error);
   const classes = useStyles();
-  if (error) {
+
+  if (details.error && details.error.message) {
     return (
       <Typography variant="h6" color="error">
-        Failed to load build, {error.message}
+        Failed to load build, {details.error.message}
       </Typography>
     );
-  } else if (projectName.loading || details.loading) {
+  } else if (details.loading) {
     return <LinearProgress />;
   }
   return (

plugins/github-actions/src/components/WorkflowRunDetails/useWorkflowRunJobs.ts

@@ -37,7 +37,7 @@ export const useWorkflowRunJobs = ({
           repo,
           id: parseInt(id, 10),
         })
-      : Promise.reject('No repo/owner provided');
+      : Promise.reject(new Error('No repo/owner provided'));
   }, [repo, owner, id]);
   return jobs;
 };

plugins/github-actions/src/components/WorkflowRunDetails/useWorkflowRunsDetails.ts

@@ -37,7 +37,7 @@ export const useWorkflowRunsDetails = ({
           repo,
           id: parseInt(id, 10),
         })
-      : Promise.reject('No repo/owner provided');
+      : Promise.reject(new Error('No repo/owner provided'));
   }, [repo, owner, id]);
   return details;
 };

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

@@ -33,7 +33,7 @@ import {
 import DescriptionIcon from '@material-ui/icons/Description';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React from 'react';
-import { useProjectName } from '../useProjectName';
+import { getProjectNameFromEntity } from '../getProjectNameFromEntity';
 import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs';
 
 const useStyles = makeStyles<Theme>(theme => ({
@@ -77,13 +77,13 @@ export const WorkflowRunLogs = ({
 }) => {
   const config = useApi(configApiRef);
   const classes = useStyles();
-  const projectName = useProjectName(entity);
+  const projectName = getProjectNameFromEntity(entity);
 
   // TODO: Get github hostname from metadata annotation
   const hostname = readGitHubIntegrationConfigs(
     config.getOptionalConfigArray('integrations.github') ?? [],
   )[0].host;
-  const [owner, repo] = projectName.value ? projectName.value.split('/') : [];
+  const [owner, repo] = (projectName && projectName.split('/')) || [];
   const jobLogs = useDownloadWorkflowRunLogs({
     hostname,
     owner,

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

@@ -29,7 +29,7 @@ import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import SyncIcon from '@material-ui/icons/Sync';
 import { buildRouteRef } from '../../routes';
-import { useProjectName } from '../useProjectName';
+import { getProjectNameFromEntity } from '../getProjectNameFromEntity';
 import { Entity } from '@backstage/catalog-model';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 
@@ -157,7 +157,7 @@ export const WorkflowRunsTable = ({
   branch?: string;
 }) => {
   const config = useApi(configApiRef);
-  const { value: projectName, loading } = useProjectName(entity);
+  const projectName = getProjectNameFromEntity(entity);
   // TODO: Get github hostname from metadata annotation
   const hostname = readGitHubIntegrationConfigs(
     config.getOptionalConfigArray('integrations.github') ?? [],
@@ -172,7 +172,7 @@ export const WorkflowRunsTable = ({
     });
 
   const githubHost = hostname || 'github.com';
-  const hasNoRuns = !loading && !tableProps.loading && !runs;
+  const hasNoRuns = !tableProps.loading && !runs;
 
   return hasNoRuns ? (
     <EmptyState
@@ -193,7 +193,7 @@ export const WorkflowRunsTable = ({
     <WorkflowRunsTableView
       {...tableProps}
       runs={runs}
-      loading={loading || tableProps.loading}
+      loading={tableProps.loading}
       retry={retry}
       onChangePageSize={setPageSize}
       onChangePage={setPage}

plugins/github-actions/src/components/getProjectNameFromEntity.ts

@@ -13,15 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import useAsync from 'react-use/lib/useAsync';
 import { Entity } from '@backstage/catalog-model';
 
 export const GITHUB_ACTIONS_ANNOTATION = 'github.com/project-slug';
 
-export const useProjectName = (entity: Entity) => {
-  const { value, loading, error } = useAsync(async () => {
-    return entity?.metadata.annotations?.[GITHUB_ACTIONS_ANNOTATION] ?? '';
-  });
-  return { value, loading, error };
-};
+export const getProjectNameFromEntity = (entity: Entity) =>
+  entity?.metadata.annotations?.[GITHUB_ACTIONS_ANNOTATION] ?? '';

plugins/github-actions/src/index.ts

@@ -35,4 +35,4 @@ export {
   isGithubActionsAvailable as isPluginApplicableToEntity,
 } from './components/Router';
 export * from './components/Cards';
-export { GITHUB_ACTIONS_ANNOTATION } from './components/useProjectName';
+export { GITHUB_ACTIONS_ANNOTATION } from './components/getProjectNameFromEntity';