Merge pull request #8129 from backstage/blam/fix-up-use-of-hooks

chore: remove occurrences of the rule of hooks to favour wrapping the components instead

plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -146,19 +146,22 @@ const generatedColumns: TableColumn[] = [
     highlight: true,
     width: '20%',
     render: (row: Partial<CITableBuildInfo>) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const routeLink = useRouteRef(circleCIBuildRouteRef);
+      const LinkWrapper = () => {
+        const routeLink = useRouteRef(circleCIBuildRouteRef);
 
-      return (
-        <Link
-          component={RouterLink}
-          to={`${routeLink({
-            buildId: row.id!,
-          })}`}
-        >
-          {row.buildName ? row.buildName : row?.workflow?.name}
-        </Link>
-      );
+        return (
+          <Link
+            component={RouterLink}
+            to={`${routeLink({
+              buildId: row.id!,
+            })}`}
+          >
+            {row.buildName ? row.buildName : row?.workflow?.name}
+          </Link>
+        );
+      };
+
+      return <LinkWrapper />;
     },
   },
   {

plugins/cloudbuild/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx

@@ -56,17 +56,20 @@ const generatedColumns: TableColumn[] = [
     highlight: true,
     width: '200px',
     render: (row: Partial<WorkflowRun>) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const routeLink = useRouteRef(buildRouteRef);
-      return (
-        <Link
-          component={RouterLink}
-          data-testid="cell-source"
-          to={routeLink({ id: row.id! })}
-        >
-          {row.message}
-        </Link>
-      );
+      const LinkWrapper = () => {
+        const routeLink = useRouteRef(buildRouteRef);
+        return (
+          <Link
+            component={RouterLink}
+            data-testid="cell-source"
+            to={routeLink({ id: row.id! })}
+          >
+            {row.message}
+          </Link>
+        );
+      };
+
+      return <LinkWrapper />;
     },
   },
   {

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

@@ -48,13 +48,16 @@ const generatedColumns: TableColumn[] = [
     field: 'message',
     highlight: true,
     render: (row: Partial<WorkflowRun>) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const routeLink = useRouteRef(buildRouteRef);
-      return (
-        <Link component={RouterLink} to={routeLink({ id: row.id! })}>
-          {row.message}
-        </Link>
-      );
+      const LinkWrapper = () => {
+        const routeLink = useRouteRef(buildRouteRef);
+        return (
+          <Link component={RouterLink} to={routeLink({ id: row.id! })}>
+            {row.message}
+          </Link>
+        );
+      };
+
+      return <LinkWrapper />;
     },
   },
   {

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -92,30 +92,33 @@ const generatedColumns: TableColumn[] = [
     field: 'fullName',
     highlight: true,
     render: (row: Partial<Project>) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const routeLink = useRouteRef(buildRouteRef);
-      if (!row.fullName || !row.lastBuild?.number) {
-        return (
-          <>
-            {row.fullName ||
-              row.fullDisplayName ||
-              row.displayName ||
-              'Unknown'}
-          </>
-        );
-      }
+      const LinkWrapper = () => {
+        const routeLink = useRouteRef(buildRouteRef);
+        if (!row.fullName || !row.lastBuild?.number) {
+          return (
+            <>
+              {row.fullName ||
+                row.fullDisplayName ||
+                row.displayName ||
+                'Unknown'}
+            </>
+          );
+        }
 
-      return (
-        <Link
-          component={RouterLink}
-          to={routeLink({
-            jobFullName: encodeURIComponent(row.fullName),
-            buildNumber: String(row.lastBuild?.number),
-          })}
-        >
-          {row.fullDisplayName}
-        </Link>
-      );
+        return (
+          <Link
+            component={RouterLink}
+            to={routeLink({
+              jobFullName: encodeURIComponent(row.fullName),
+              buildNumber: String(row.lastBuild?.number),
+            })}
+          >
+            {row.fullDisplayName}
+          </Link>
+        );
+      };
+
+      return <LinkWrapper />;
     },
   },
   {