fix: lint policy block title color; add policy link to lines and rule id tooltip (#7940)

Author: jdolle

.changeset/thick-hands-cheat.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Fix lint policy block title color; add policy link to lines and rule id tooltip

packages/web/app/src/pages/target-checks-single.tsx

@@ -1,6 +1,14 @@
 import { Fragment, useCallback, useMemo, useState } from 'react';
 import { format } from 'date-fns';
-import { BadgeCheck, ChevronDown, ChevronUp, GitCompareIcon, Loader2 } from 'lucide-react';
+import {
+  BadgeCheck,
+  ChevronDown,
+  ChevronUp,
+  CircleQuestionMarkIcon,
+  GitCompareIcon,
+  InfoIcon,
+  Loader2,
+} from 'lucide-react';
 import { useMutation, useQuery } from 'urql';
 import { SchemaEditor } from '@/components/schema-editor';
 import {
@@ -192,22 +200,62 @@ const BreakingChangesTitle = () => {
   );
 };
 
+const PolicyInfo = () => {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger>
+          <InfoIcon className="ml-2 inline-block" size={14} />
+        </TooltipTrigger>
+        <TooltipContent align="start">
+          Schema policy checks run on the composed API schema. Line numbers
+          <br />
+          reflect that and will not match the lines from the source schema.
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
 const PolicyBlock = (props: {
   title: string;
   policies: FragmentType<typeof SchemaPolicyEditor_PolicyWarningsFragment>;
   type: 'warning' | 'error';
+  goToline?: (line: number | undefined) => void;
 }) => {
   const policies = useFragment(SchemaPolicyEditor_PolicyWarningsFragment, props.policies);
   return (
     <div>
-      <h2 className="text-neutral-2 mb-2 text-sm font-medium">{props.title}</h2>
+      <h2 className="text-neutral-10 mb-3 text-sm font-bold">
+        {props.title} <PolicyInfo />
+      </h2>
       <ul className="list-inside list-disc pl-3 text-sm/relaxed">
         {policies.edges.map((edge, key) => (
           <li
             key={key}
             className={cn(props.type === 'warning' ? 'text-yellow-400' : 'text-red-400', 'my-1')}
           >
-            <span className="text-neutral-8 text-left">{labelize(edge.node.message)}</span>
+            <span className="text-neutral-10 text-left">
+              {labelize(edge.node.message.replace(/\.$/, ''))}{' '}
+            </span>
+            {edge.node.start?.line ? (
+              <span
+                className="text-neutral-9 ml-1 cursor-default text-xs hover:underline"
+                onClick={() => props.goToline?.(edge.node.start?.line || undefined)}
+              >
+                on line {edge.node.start.line}
+              </span>
+            ) : null}
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger>
+                  <CircleQuestionMarkIcon size={16} className="text-neutral-6 ml-2 inline-block" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  rule: <span className="text-neutral-12">{edge.node.ruleId}</span>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </li>
         ))}
       </ul>
@@ -426,6 +474,7 @@ function DefaultSchemaView(props: {
 }) {
   const schemaCheck = useFragment(DefaultSchemaView_SchemaCheckFragment, props.schemaCheck);
   const [selectedView, setSelectedView] = useState<string>('details');
+  const [scrollToLine, setScrollToLine] = useState<number | undefined>();
 
   const items = [
     {
@@ -480,7 +529,13 @@ function DefaultSchemaView(props: {
 
   return (
     <>
-      <Tabs value={selectedView} onValueChange={value => setSelectedView(value)}>
+      <Tabs
+        value={selectedView}
+        onValueChange={value => {
+          setScrollToLine(undefined);
+          setSelectedView(value);
+        }}
+      >
         <TabsList className="bg-neutral-5 dark:bg-neutral-3 border-neutral-5 dark:border-neutral-3 w-full justify-start rounded-none border-x border-b">
           {items.map(item => (
             <TabsTrigger key={item.value} value={item.value} disabled={item.isDisabled}>
@@ -543,6 +598,10 @@ function DefaultSchemaView(props: {
                   title="Schema Policy Warnings"
                   policies={schemaCheck.schemaPolicyWarnings}
                   type="warning"
+                  goToline={line => {
+                    setScrollToLine(Math.max((line ?? 0) - 1, 0));
+                    setSelectedView('policy');
+                  }}
                 />
               </div>
             ) : null}
@@ -581,6 +640,7 @@ function DefaultSchemaView(props: {
               errors={
                 ('schemaPolicyErrors' in schemaCheck && schemaCheck.schemaPolicyErrors) || null
               }
+              scrollToLine={scrollToLine}
             />
           </>
         )}
@@ -768,6 +828,7 @@ const SchemaPolicyEditor_PolicyWarningsFragment = graphql(`
     edges {
       node {
         message
+        ruleId
         start {
           line
           column
@@ -785,6 +846,7 @@ const SchemaPolicyEditor = (props: {
   compositeSchemaSDL: string;
   warnings: FragmentType<typeof SchemaPolicyEditor_PolicyWarningsFragment> | null;
   errors: FragmentType<typeof SchemaPolicyEditor_PolicyWarningsFragment> | null;
+  scrollToLine?: number;
 }) => {
   const warnings = useFragment(SchemaPolicyEditor_PolicyWarningsFragment, props.warnings);
   const errors = useFragment(SchemaPolicyEditor_PolicyWarningsFragment, props.errors);
@@ -794,10 +856,10 @@ const SchemaPolicyEditor = (props: {
       options={{
         renderLineHighlightOnlyWhenFocus: true,
         readOnly: true,
-        lineNumbers: 'off',
+        lineNumbers: 'on',
         renderValidationDecorations: 'on',
       }}
-      onMount={(_, monaco) => {
+      onMount={(editor, monaco) => {
         monaco.editor.setModelMarkers(monaco.editor.getModels()[0], 'owner', [
           ...(warnings?.edges
             .map(edge => edge.node)
@@ -822,6 +884,10 @@ const SchemaPolicyEditor = (props: {
               severity: monaco.MarkerSeverity.Error,
             })) ?? []),
         ]);
+
+        if (props.scrollToLine) {
+          editor.revealLineInCenter(props.scrollToLine);
+        }
       }}
       schema={props.compositeSchemaSDL}
     />