From d6f7aaaf01b5ae0f5e76614433f5c95c22ff7869 Mon Sep 17 00:00:00 2001
From: Kevin Paxton <kevin.paxton@formidable.com>
Date: Sun, 7 Jan 2024 17:35:55 +0000
Subject: [PATCH] Various UI fixes

---
 .../webui/src/components/Authorization.tsx    |  4 +-
 packages/webui/src/components/CodeDisplay.tsx | 12 ++++--
 packages/webui/src/components/Fields.tsx      |  2 +-
 .../webui/src/components/MonacoEditor.tsx     | 42 ++++++++++++++++---
 packages/webui/src/components/Section.tsx     |  2 +-
 .../src/components/ui/TraceDetail.test.tsx    |  2 +-
 .../webui/src/components/ui/TraceDetail.tsx   |  4 +-
 packages/webui/src/styles/base.css            | 11 +++--
 packages/webui/src/systems/GraphQL.tsx        | 24 +++++------
 packages/webui/src/systems/Sanity.tsx         | 18 ++++----
 packages/webui/src/systems/index.tsx          |  4 +-
 11 files changed, 78 insertions(+), 47 deletions(-)

diff --git a/packages/webui/src/components/Authorization.tsx b/packages/webui/src/components/Authorization.tsx
index 20a86f2..9f6c8c6 100644
--- a/packages/webui/src/components/Authorization.tsx
+++ b/packages/webui/src/components/Authorization.tsx
@@ -72,7 +72,7 @@ export default function Authorization({ value }: AuthorizationProps) {
       decoded = JSON.stringify({ username: un, password: pw });
     }
 
-    setDecodedToken(<CodeDisplay contentType="application/json" data={decoded} />);
+    setDecodedToken(<CodeDisplay contentType="application/json" data={decoded} className="py-4" />);
   }
 
   return (
@@ -98,7 +98,7 @@ export default function Authorization({ value }: AuthorizationProps) {
             return <Code data-test-id="token-expanded-view">{`${type} ${token}`}</Code>;
           case TokenState.Decoded:
             return (
-              <div data-test-id="token-decoded-view" className="h-[200px]">
+              <div data-test-id="token-decoded-view" className="bg-manatee-100">
                 {decodedToken}
               </div>
             );
diff --git a/packages/webui/src/components/CodeDisplay.tsx b/packages/webui/src/components/CodeDisplay.tsx
index a46041b..530ad3b 100644
--- a/packages/webui/src/components/CodeDisplay.tsx
+++ b/packages/webui/src/components/CodeDisplay.tsx
@@ -1,11 +1,15 @@
 import { safeParseJson } from '@envyjs/core';
 import formatXml from 'xml-formatter';
 
-import Editor, { MonacoEditorProps } from './MonacoEditor';
+import { tw } from '@/utils';
+
+import Editor, { EditorHeight, MonacoEditorProps } from './MonacoEditor';
 
 type CodeDisplayProps = {
   contentType?: string | string[] | null;
   data: string | null | undefined;
+  editorHeight?: EditorHeight;
+  className?: string;
 };
 
 const languageMap: Record<string, MonacoEditorProps['language']> = {
@@ -14,7 +18,7 @@ const languageMap: Record<string, MonacoEditorProps['language']> = {
   'application/xml': 'xml',
 };
 
-export default function CodeDisplay({ data, contentType }: CodeDisplayProps) {
+export default function CodeDisplay({ data, contentType, editorHeight, className }: CodeDisplayProps) {
   if (!data) {
     return;
   }
@@ -42,8 +46,8 @@ export default function CodeDisplay({ data, contentType }: CodeDisplayProps) {
   }
 
   return (
-    <div className="w-full h-full">
-      <Editor value={value} language={lang} />
+    <div className={tw('w-full h-full', className)}>
+      <Editor value={value} language={lang} height={editorHeight} />
     </div>
   );
 }
diff --git a/packages/webui/src/components/Fields.tsx b/packages/webui/src/components/Fields.tsx
index c7f4642..2cd8f72 100644
--- a/packages/webui/src/components/Fields.tsx
+++ b/packages/webui/src/components/Fields.tsx
@@ -19,7 +19,7 @@ export default function Fields({ className, children, ...props }: FieldsProps) {
 export function Field({ label, className, children, ...props }: FieldProps) {
   if (!children) return null;
   return (
-    <tr className={className} {...props}>
+    <tr className={tw('align-top', className)} {...props}>
       <td className={tw('table-cell w-[200px] py-1 font-semibold font-mono uppercase', className)}>{label}</td>
       <td className="table-cell font-mono">{children}</td>
     </tr>
diff --git a/packages/webui/src/components/MonacoEditor.tsx b/packages/webui/src/components/MonacoEditor.tsx
index 07e4861..f681014 100644
--- a/packages/webui/src/components/MonacoEditor.tsx
+++ b/packages/webui/src/components/MonacoEditor.tsx
@@ -1,9 +1,13 @@
 import { Editor, EditorProps, OnMount } from '@monaco-editor/react';
 import { useEffect, useRef } from 'react';
 
-export type MonacoEditorProps = Pick<EditorProps, 'value' | 'language'>;
+export type EditorHeight = 'full' | 'auto';
 
-const editorOptions: EditorProps['options'] = {
+export type MonacoEditorProps = Pick<EditorProps, 'value' | 'language'> & {
+  height?: EditorHeight;
+};
+
+const defaultOptions: EditorProps['options'] = {
   minimap: {
     enabled: false,
   },
@@ -13,9 +17,18 @@ const editorOptions: EditorProps['options'] = {
   lineNumbers: 'off',
 };
 
-export default function MonacoEditor({ value, language }: MonacoEditorProps) {
+const autoHeightOptions: EditorProps['options'] = {
+  ...defaultOptions,
+  scrollbar: {
+    alwaysConsumeMouseWheel: false,
+  },
+};
+
+export default function MonacoEditor({ value, language, height = 'auto' }: MonacoEditorProps) {
   const editorRef = useRef<Parameters<OnMount>['0'] | null>(null);
 
+  const isAutoHeight = height === 'auto';
+
   const executeFolding = () => {
     if (!editorRef.current) return;
 
@@ -33,17 +46,34 @@ export default function MonacoEditor({ value, language }: MonacoEditorProps) {
       base: 'vs',
       inherit: true,
       colors: {
-        'editor.background': '#F5F7F8',
-        'editor.lineHighlightBackground': '#F5F7F8',
+        'editor.background': '#EEEEF1',
       },
       rules: [],
     });
     monaco.editor.setTheme('envy');
 
+    if (isAutoHeight) {
+      const updateHeight = () => {
+        const height = editor.getContentHeight();
+        const width = editor.getScrollWidth();
+        editor.layout({ width, height });
+      };
+
+      editor.onDidContentSizeChange(updateHeight);
+      updateHeight();
+    }
+
     executeFolding();
   };
 
   useEffect(executeFolding, [value, language]);
 
-  return <Editor value={value} language={language} options={editorOptions} onMount={onMount} />;
+  return (
+    <Editor
+      value={value}
+      language={language}
+      options={isAutoHeight ? autoHeightOptions : defaultOptions}
+      onMount={onMount}
+    />
+  );
 }
diff --git a/packages/webui/src/components/Section.tsx b/packages/webui/src/components/Section.tsx
index 8cb34d3..e60df0f 100644
--- a/packages/webui/src/components/Section.tsx
+++ b/packages/webui/src/components/Section.tsx
@@ -27,7 +27,7 @@ export default function Section({ title, collapsible = true, className, children
           }}
           {...props}
         >
-          <div className="flex-1">{title}</div>
+          <div className={tw('flex-1', !expanded && 'opacity-50')}>{title}</div>
           {collapsible && <Icon className="h-6 w-6" />}
         </div>
       )}
diff --git a/packages/webui/src/components/ui/TraceDetail.test.tsx b/packages/webui/src/components/ui/TraceDetail.test.tsx
index 5395c81..20b22be 100644
--- a/packages/webui/src/components/ui/TraceDetail.test.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.test.tsx
@@ -31,7 +31,7 @@ jest.mock('@/components', () => ({
   Fields: function (props: any) {
     return <div {...props} />;
   },
-  CodeDisplay: function ({ children, contentType, ...props }: any) {
+  CodeDisplay: function ({ children, contentType, editorHeight, ...props }: any) {
     return (
       <div {...props} data-content-type={contentType}>
         Mock CodeDisplay component: {children}
diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx
index 3481239..6113bcb 100644
--- a/packages/webui/src/components/ui/TraceDetail.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.tsx
@@ -87,7 +87,7 @@ export default function TraceDetail() {
             <div className="flex items-center">
               <img src={getIconUri(trace)} alt="" className="w-6 h-6" />
             </div>
-            <div className="text-xl font-bold" data-test-id="method">
+            <div className="text-xl font-bold uppercase" data-test-id="method">
               {method}
             </div>
             {requestAborted && (
@@ -203,6 +203,7 @@ export default function TraceDetail() {
             data-test-id="request-body"
             contentType={getHeader(requestHeaders, 'content-type')}
             data={requestBody}
+            editorHeight="full"
           />
         </TabContent>
 
@@ -212,6 +213,7 @@ export default function TraceDetail() {
               data-test-id="response-body"
               contentType={getHeader(responseHeaders, 'content-type')}
               data={responseBody}
+              editorHeight="full"
             />
           )}
         </TabContent>
diff --git a/packages/webui/src/styles/base.css b/packages/webui/src/styles/base.css
index f4d738e..ee09d0e 100644
--- a/packages/webui/src/styles/base.css
+++ b/packages/webui/src/styles/base.css
@@ -90,7 +90,6 @@ input[type='search']::-webkit-search-results-decoration {
 .code-block > ul > li {
   @apply px-4;
   @apply whitespace-pre-wrap;
-  @apply hover:bg-opacity-50 hover:bg-white;
   @apply hover:cursor-default;
 }
 
@@ -98,21 +97,21 @@ input[type='search']::-webkit-search-results-decoration {
  * Tables
  */
 .badge-200 {
-  @apply bg-[#318B47] text-white
+  @apply bg-[#318B47] text-white;
 }
 
 .badge-300 {
-  @apply bg-yellow-400 text-white
+  @apply bg-yellow-400 text-white;
 }
 
 .badge-400 {
-  @apply bg-[#AC0535] text-white
+  @apply bg-[#AC0535] text-white;
 }
 
 .badge-500 {
-  @apply bg-[#613C8D] text-white
+  @apply bg-[#613C8D] text-white;
 }
 
 .badge-abort {
-  @apply bg-manatee-700 text-white
+  @apply bg-manatee-700 text-white;
 }
diff --git a/packages/webui/src/systems/GraphQL.tsx b/packages/webui/src/systems/GraphQL.tsx
index e090ffb..de5b0c5 100644
--- a/packages/webui/src/systems/GraphQL.tsx
+++ b/packages/webui/src/systems/GraphQL.tsx
@@ -49,19 +49,17 @@ export default class GraphQLSystem implements System<GraphQLData> {
     const { operationType, operationName, query } = data;
 
     return (
-      <div className="border-t border-manatee-400 pt-3 mt-3">
-        <Fields>
-          <Field data-test-id="name" label="Name">
-            {operationName}
-          </Field>
-          <Field data-test-id="type" label="Type">
-            {operationType}
-          </Field>
-          <Field label="Query">
-            <Code data-test-id="query">{query}</Code>
-          </Field>
-        </Fields>
-      </div>
+      <Fields>
+        <Field data-test-id="name" label="Name">
+          {operationName}
+        </Field>
+        <Field data-test-id="type" label="Type">
+          {operationType}
+        </Field>
+        <Field label="Query">
+          <Code data-test-id="query">{query}</Code>
+        </Field>
+      </Fields>
     );
   }
 }
diff --git a/packages/webui/src/systems/Sanity.tsx b/packages/webui/src/systems/Sanity.tsx
index 1b8c134..39617da 100644
--- a/packages/webui/src/systems/Sanity.tsx
+++ b/packages/webui/src/systems/Sanity.tsx
@@ -48,16 +48,14 @@ export default class SanitySystem implements System<SanityData> {
     const { type, query } = data;
 
     return (
-      <div className="border-t border-manatee-400 pt-3 mt-3">
-        <Fields>
-          <Field data-test-id="type" label="Item type">
-            {type}
-          </Field>
-          <Field label="Query">
-            <Code data-test-id="query">{query}</Code>
-          </Field>
-        </Fields>
-      </div>
+      <Fields>
+        <Field data-test-id="type" label="Item type">
+          {type}
+        </Field>
+        <Field label="Query">
+          <Code data-test-id="query">{query}</Code>
+        </Field>
+      </Fields>
     );
   }
 
diff --git a/packages/webui/src/systems/index.tsx b/packages/webui/src/systems/index.tsx
index e291147..5095eb7 100644
--- a/packages/webui/src/systems/index.tsx
+++ b/packages/webui/src/systems/index.tsx
@@ -64,10 +64,10 @@ export function ListDataComponent({ trace }: SystemDetailProps): React.ReactNode
 
 export function RequestDetailsComponent({ trace }: SystemDetailProps): React.ReactNode {
   const Component = callOrFallback<ReactNode | null>(trace, 'getRequestDetailComponent');
-  return Component ? Component : null;
+  return Component ? <div className="border-t border-manatee-200 pt-4 mt-4">{Component}</div> : null;
 }
 
 export function ResponseDetailsComponent({ trace }: SystemDetailProps): React.ReactNode {
   const Component = callOrFallback<ReactNode | null>(trace, 'getResponseDetailComponent');
-  return Component ? Component : null;
+  return Component ? <div className="border-t border-manatee-200 pt-4 mt-4">{Component}</div> : null;
 }