Various UI fixes

FormidableLabs · Jan 7, 2024 · d6f7aaa · d6f7aaa
1 parent a837b9a
commit d6f7aaa
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -90,29 +90,28 @@ 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;
 }
 
 /**
  * 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
@@ -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
@@ -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
@@ -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;
 }