From 7efee0f94c194bd3937a1057f2a19760afb0dc55 Mon Sep 17 00:00:00 2001
From: KaemonIsland <kaemonlovendahl@outlook.com>
Date: Fri, 4 Feb 2022 13:36:00 -0700
Subject: [PATCH] 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                             | 5 +++++
 .../components/WorkflowRunDetails/WorkflowRunDetails.tsx   | 7 +++++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tall-planes-grow.md

diff --git a/.changeset/tall-planes-grow.md b/.changeset/tall-planes-grow.md
new file mode 100644
index 0000000000000..d5e07256c9077
--- /dev/null
+++ b/.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.
diff --git a/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx b/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx
index aebf7dfa01278..d1930bf5dda1c 100644
--- a/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx
+++ b/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 (