Prevent error message when owner/repo has not been set

The owner/repo variables are set to undefined during the first render of the WorkflowRunDetails component.

These undefined values are then passed to the useWorkflowRunsDetails hook and are returned as an error.

This causes a false error message to show for a split second.

The next render succesfully triggers when the owner/repo values get set, updating the details variable and returning the correct react component.

A new "loading" variable has been added that checks for loading values in addition to the details value existing.

I've also added an extra check for the error.message value considering it's used within the error message.

This prevents the false error message from displaying.

Signed-off-by: KaemonIsland <kaemonlovendahl@outlook.com>

.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/WorkflowRunDetails/WorkflowRunDetails.tsx

@@ -175,14 +175,17 @@ export const WorkflowRunDetails = ({ entity }: { entity: Entity }) => {
   const jobs = useWorkflowRunJobs({ hostname, owner, repo });
 
   const error = projectName.error || (projectName.value && details.error);
+  const loading = projectName.loading || details.loading || !details.value;
+
   const classes = useStyles();
-  if (error) {
+
+  if (error && error.message) {
     return (
       <Typography variant="h6" color="error">
         Failed to load build, {error.message}
       </Typography>
     );
-  } else if (projectName.loading || details.loading) {
+  } else if (loading) {
     return <LinearProgress />;
   }
   return (