Explorer page unions now link to the contained types (#7812)

Author: jdolle

.changeset/strong-women-bake.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Explorer page unions now link to the contained types

packages/web/app/src/components/target/explorer/union-type.tsx

@@ -1,5 +1,10 @@
 import { FragmentType, graphql, useFragment } from '@/gql';
-import { GraphQLTypeCard, GraphQLTypeCardListItem, SchemaExplorerUsageStats } from './common';
+import {
+  GraphQLTypeAsLink,
+  GraphQLTypeCard,
+  GraphQLTypeCardListItem,
+  SchemaExplorerUsageStats,
+} from './common';
 import { SupergraphMetadataList } from './super-graph-metadata';
 
 const GraphQLUnionTypeComponent_TypeFragment = graphql(`
@@ -46,22 +51,28 @@ export function GraphQLUnionTypeComponent(props: {
       <div className="flex flex-col">
         {ttype.members.map((member, i) => (
           <GraphQLTypeCardListItem key={member.name} index={i}>
-            <div>{member.name}</div>
-            {typeof props.totalRequests === 'number' && (
-              <SchemaExplorerUsageStats
-                totalRequests={props.totalRequests}
-                usage={member.usage}
+            <GraphQLTypeAsLink
+              organizationSlug={props.organizationSlug}
+              projectSlug={props.projectSlug}
+              targetSlug={props.targetSlug}
+              className="text-neutral-11 font-semibold"
+              type={member.name}
+            />
+            {member.supergraphMetadata && (
+              <SupergraphMetadataList
                 targetSlug={props.targetSlug}
                 projectSlug={props.projectSlug}
                 organizationSlug={props.organizationSlug}
+                supergraphMetadata={member.supergraphMetadata}
               />
             )}
-            {member.supergraphMetadata && (
-              <SupergraphMetadataList
+            {typeof props.totalRequests === 'number' && (
+              <SchemaExplorerUsageStats
+                totalRequests={props.totalRequests}
+                usage={member.usage}
                 targetSlug={props.targetSlug}
                 projectSlug={props.projectSlug}
                 organizationSlug={props.organizationSlug}
-                supergraphMetadata={member.supergraphMetadata}
               />
             )}
           </GraphQLTypeCardListItem>