feat: icon tabs

grutt · Feb 13, 2024 · 1cf0165 · 1cf0165
1 parent 29eb8c4
commit 1cf0165
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -65,6 +65,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.20.0",
     "react-syntax-highlighter": "^15.5.0",
     "reactflow": "^11.10.3",

diff --git a/frontend/app/pnpm-lock.yaml b/frontend/app/pnpm-lock.yaml
diff --git a/frontend/app/src/pages/main/workflow-runs/$run/components/step-run-inputs.tsx b/frontend/app/src/pages/main/workflow-runs/$run/components/step-run-inputs.tsx
@@ -1,6 +1,7 @@
 import { CodeEditor } from '@/components/ui/code-editor';
 import { JsonForm } from '@/components/ui/json-form';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { VscNote, VscJson } from 'react-icons/vsc';
 
 export interface StepRunOutputProps {
   input: string;
@@ -17,9 +18,13 @@ export const StepRunInputs: React.FC<StepRunOutputProps> = ({
 }) => {
   return (
     <Tabs defaultValue="output" className="w-full">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="form">Form</TabsTrigger>
-        <TabsTrigger value="code">Code</TabsTrigger>
+      <TabsList className="grid w-1/3 grid-cols-2">
+        <TabsTrigger value="form" aria-label="Form Editor">
+          <VscNote />
+        </TabsTrigger>
+        <TabsTrigger value="json" aria-label="JSON Editor">
+          <VscJson />
+        </TabsTrigger>
       </TabsList>
       <TabsContent value="form">
         <JsonForm
@@ -29,7 +34,7 @@ export const StepRunInputs: React.FC<StepRunOutputProps> = ({
           disabled={disabled}
         />
       </TabsContent>
-      <TabsContent value="code">
+      <TabsContent value="json">
         <CodeEditor
           language="json"
           className="my-4"

diff --git a/frontend/app/src/pages/main/workflow-runs/$run/components/step-run-playground.tsx b/frontend/app/src/pages/main/workflow-runs/$run/components/step-run-playground.tsx
@@ -9,7 +9,6 @@ import { cn } from '@/lib/utils';
 import { useOutletContext } from 'react-router-dom';
 import { TenantContextType } from '@/lib/outlet';
 import { PlayIcon } from '@radix-ui/react-icons';
-import { JsonForm } from '@/components/ui/json-form';
 import { StepRunOutput } from './step-run-output';
 import { StepRunInputs } from './step-run-inputs';