Implement tabs for payload and response (#150)

FormidableLabs · Oct 24, 2023 · 804172c · 804172c
1 parent c7aa8b0
commit 804172c
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 165 deletions.
diff --git a/.changeset/large-needles-allow.md b/.changeset/large-needles-allow.md
@@ -0,0 +1,5 @@
+---
+'@envyjs/webui': patch
+---
+
+Implement tabs for payload and response
diff --git a/packages/webui/src/components/JsonDisplay.tsx b/packages/webui/src/components/JsonDisplay.tsx
@@ -12,10 +12,10 @@ type JsonDisplayProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
   children: object | string;
 };
 
-const bg = colors.slate['100'];
+const bg = colors.gray['200'];
 const fg = colors.black;
-const lines = colors.slate['200'];
-const meta = colors.slate['400'];
+const lines = colors.gray['200'];
+const meta = colors.gray['400'];
 const accent = colors.orange['300'];
 
 const customTheme = {
@@ -43,7 +43,7 @@ export default function JsonDisplay({ className, children }: JsonDisplayProps) {
 
   return (
     <Suspense fallback={<></>}>
-      <div className={tw('w-full overflow-auto', className)}>
+      <div className={tw('w-full h-full', className)}>
         <ReactJson
           src={src}
           theme={customTheme}

diff --git a/packages/webui/src/components/Section.tsx b/packages/webui/src/components/Section.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { HiMinus, HiPlus } from 'react-icons/hi';
+import { HiOutlineChevronDown, HiOutlineChevronUp } from 'react-icons/hi';
 
 import { tw } from '@/utils';
 
@@ -10,15 +10,15 @@ type SectionProps = React.HTMLAttributes<HTMLElement> & {
 
 export default function Section({ title, collapsible = true, className, children, ...props }: SectionProps) {
   const [expanded, setExpanded] = useState(true);
-  const Icon = expanded ? HiMinus : HiPlus;
+  const Icon = expanded ? HiOutlineChevronUp : HiOutlineChevronDown;
   return (
     <>
       {title && (
         <div
           data-test-id="section-title"
           className={tw(
-            `relative p-short`,
-            `bg-secondary border-b border-primary shadow-lg`,
+            `relative p-short mt-4`,
+            `bg-secondary border-b border-primary`,
             `font-semibold uppercase`,
             collapsible ? 'cursor-pointer' : '',
             className || '',

diff --git a/packages/webui/src/components/ui/Tabs.tsx b/packages/webui/src/components/ui/Tabs.tsx
@@ -0,0 +1,39 @@
+import useApplication from '@/hooks/useApplication';
+import { tw } from '@/utils';
+
+export function TabList({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="px-4 bg-secondary border-b border-primary">
+      <ul className="flex flex-wrap text-sm gap-2">{children}</ul>
+    </div>
+  );
+}
+
+export function TabListItem({ id, title }: { id: string; title: string }) {
+  const { selectedTab, setSelectedTab } = useApplication();
+
+  const className = tw(
+    'inline-block px-4 py-3 uppercase font-semibold cursor-pointer',
+    'border border-b-0',
+    selectedTab === id ? 'border-green-400 bg-green-100' : 'border-primary bg-primary',
+  );
+
+  return (
+    <li>
+      <a
+        href={`#${id}`}
+        className={className}
+        onClick={() => {
+          setSelectedTab(id);
+        }}
+      >
+        {title}
+      </a>
+    </li>
+  );
+}
+
+export function TabContent({ id, children }: { id: string; children: React.ReactNode }) {
+  const { selectedTab } = useApplication();
+  return <div className={selectedTab === id ? 'h-full' : 'hidden'}>{children}</div>;
+}
diff --git a/packages/webui/src/components/ui/TraceDetail.test.tsx b/packages/webui/src/components/ui/TraceDetail.test.tsx
@@ -40,6 +40,9 @@ jest.mock('@/components', () => ({
   XmlDisplay: function ({ children }: any) {
     return <>Mock XmlDisplay component: {children}</>;
   },
+  IconButton: function ({ children, Icon, ...props }: any) {
+    return <div {...props}>Mock IconButton component: {children}</div>;
+  },
 }));
 
 jest.mock(
@@ -266,8 +269,7 @@ describe('TraceDetail', () => {
 
       const { getByTestId } = render(<TraceDetail />);
 
-      const summary = getByTestId('summary');
-      const status = within(summary).getByTestId('status');
+      const status = getByTestId('response-status');
       const statusCodeCircle = status.firstChild;
 
       expect(statusCodeCircle).toHaveClass(`bg-${color}`);
@@ -374,8 +376,8 @@ describe('TraceDetail', () => {
 
         const { getByTestId } = render(<TraceDetail />);
 
-        const requestDetails = getByTestId('request-details');
-        const body = within(requestDetails).getByTestId('body');
+        const requestDetails = getByTestId('trace-detail');
+        const body = within(requestDetails).getByTestId('request-body');
 
         expect(body).toBeVisible();
         expect(body).toHaveTextContent(content);
@@ -387,9 +389,8 @@ describe('TraceDetail', () => {
 
       const { getByTestId } = render(<TraceDetail />);
 
-      const requestDetails = getByTestId('request-details');
+      const requestDetails = getByTestId('trace-detail');
       const body = within(requestDetails).queryByTestId('body');
-
       expect(body).not.toBeInTheDocument();
     });
 
@@ -642,46 +643,6 @@ describe('TraceDetail', () => {
         expect(responseBody).toBeVisible();
       });
 
-      it('should display response content type', () => {
-        getSelectedTraceFn.mockReturnValue({
-          ...mockTrace,
-          http: {
-            ...mockTrace.http,
-            responseHeaders: {
-              'content-type': 'text/text',
-            },
-          },
-        });
-
-        const { getByTestId } = render(<TraceDetail />);
-
-        const responseBody = getByTestId('response-body');
-        const contentType = within(responseBody).getByTestId('content-type');
-
-        expect(contentType).toBeVisible();
-        expect(contentType).toHaveTextContent(`text/text`);
-      });
-
-      it('should display response content length', () => {
-        getSelectedTraceFn.mockReturnValue({
-          ...mockTrace,
-          http: {
-            ...mockTrace.http,
-            responseHeaders: {
-              'content-length': '1234',
-            },
-          },
-        });
-
-        const { getByTestId } = render(<TraceDetail />);
-
-        const responseBody = getByTestId('response-body');
-        const contentLength = within(responseBody).getByTestId('content-length');
-
-        expect(contentLength).toBeVisible();
-        expect(contentLength).toHaveTextContent(`1234`);
-      });
-
       it.each([
         {
           contentType: 'application/json',
@@ -719,8 +680,8 @@ describe('TraceDetail', () => {
 
           const { getByTestId } = render(<TraceDetail />);
 
-          const responseBody = getByTestId('response-body');
-          const body = within(responseBody).getByTestId('body');
+          const responseBody = getByTestId('trace-detail');
+          const body = within(responseBody).queryByTestId('response-body');
 
           expect(body).toBeVisible();
           expect(body).toHaveTextContent(content);
@@ -732,8 +693,8 @@ describe('TraceDetail', () => {
 
         const { getByTestId } = render(<TraceDetail />);
 
-        const responseBody = getByTestId('response-body');
-        const body = within(responseBody).queryByTestId('body');
+        const responseBody = getByTestId('trace-detail');
+        const body = within(responseBody).queryByTestId('response-body');
 
         expect(body).not.toBeInTheDocument();
       });