Add a way to view subgraph metadata on target schemas page

packages/services/api/src/modules/schema/providers/schema-manager.ts

@@ -233,7 +233,9 @@ export class SchemaManager {
   @atomic(stringifySelector)
   async getMaybeSchemasOfVersion(schemaVersion: SchemaVersion) {
     this.logger.debug('Fetching schemas (schemaVersionId=%s)', schemaVersion.id);
-    return this.storage.getSchemasOfVersion({ versionId: schemaVersion.id });
+    // !note: The decorators are doing something to prevent passing in an additional boolean for "includeMetadata"...
+    //  so for now always include metadata
+    return this.storage.getSchemasOfVersion({ versionId: schemaVersion.id, includeMetadata: true });
   }
 
   async getMatchingServiceSchemaOfVersions(versions: { before: string | null; after: string }) {

packages/services/storage/src/index.ts

@@ -2154,7 +2154,7 @@ export async function createStorage(
 
       return transformSchema(result);
     },
-    async getSchemasOfVersion({ versionId: version, includeMetadata = false }) {
+    async getSchemasOfVersion({ versionId: version, includeMetadata }) {
       const result = await pool.query<
         Pick<
           OverrideProp<schema_log, 'action', 'PUSH'>,

packages/web/app/src/pages/target.tsx

@@ -46,15 +46,14 @@ function SchemaBlock({ schema }: { schema: CompositeSchema }) {
   return (
     <Accordion.Item value={schema.id} key={schema.id} className="border-2 border-gray-900/50">
       <Accordion.Header>
-        <div>
-          <div className="text-base" id={schema.service ? `service-${schema.service}` : undefined}>
-            {schema.service ?? 'SDL'}
-          </div>
-          {schema.url ? <div className="text-xs text-gray-500">{schema.url}</div> : null}
+        <div className="text-base" id={schema.service ? `service-${schema.service}` : undefined}>
+          {schema.service ?? 'SDL'}
         </div>
+        {schema.url ? <div className="text-xs text-gray-500">{schema.url}</div> : null}
       </Accordion.Header>
       <Accordion.Content>
         <div className="p-2">
+          {schema.metadata ? <SchemaMetadata metadata={JSON.stringify(JSON.parse(schema.metadata), undefined, 2)} /> : null}
           <GraphQLHighlight code={schema.source} />
         </div>
       </Accordion.Content>
@@ -129,9 +128,11 @@ const SchemaView_SchemaFragment = graphql(`
     ... on SingleSchema {
       id
       source
+      metadata @include(if: $includeMetadata)
     }
     ... on CompositeSchema {
       id
+      metadata @include(if: $includeMetadata)
       source
       service
       url
@@ -155,6 +156,28 @@ const SchemaView_TargetFragment = graphql(`
   }
 `);
 
+function SchemaMetadata(props: { metadata: string }): ReactElement | null {
+  return (
+    <Popover>
+      <PopoverTrigger asChild onClick={event => event.stopPropagation()}>
+        <Button variant="secondary" role="button" size="sm">
+          metadata
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[400px] truncate p-0"
+        onClick={event => event.stopPropagation()}
+        side="right"
+        align="start"
+      >
+        <ScrollArea className="relative p-2">
+          <pre>{props.metadata}</pre>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 function SchemaView(props: {
   organization: FragmentType<typeof SchemaView_OrganizationFragment>;
   project: FragmentType<typeof SchemaView_ProjectFragment>;
@@ -265,6 +288,7 @@ const TargetSchemaPageQuery = graphql(`
     $organizationSlug: String!
     $projectSlug: String!
     $targetSlug: String!
+    $includeMetadata: Boolean = false
   ) {
     organization(selector: { organizationSlug: $organizationSlug }) {
       organization {
@@ -290,13 +314,15 @@ function TargetSchemaPage(props: {
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
+  includeMetadata?: boolean;
 }) {
   const [query] = useQuery({
     query: TargetSchemaPageQuery,
     variables: {
       organizationSlug: props.organizationSlug,
       projectSlug: props.projectSlug,
       targetSlug: props.targetSlug,
+      includeMetadata: props.includeMetadata,
     },
   });
 
@@ -361,6 +387,7 @@ export function TargetPage(props: {
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
+  includeMetadata?: boolean;
 }) {
   return (
     <>
@@ -369,6 +396,7 @@ export function TargetPage(props: {
         organizationSlug={props.organizationSlug}
         projectSlug={props.projectSlug}
         targetSlug={props.targetSlug}
+        includeMetadata={props.includeMetadata}
       />
     </>
   );

packages/web/app/src/router.tsx

@@ -528,6 +528,7 @@ const targetIndexRoute = createRoute({
         organizationSlug={organizationSlug}
         projectSlug={projectSlug}
         targetSlug={targetSlug}
+        includeMetadata
       />
     );
   },