fix: frontend improvements (#1097)

* fix: frontend improvements * simplify code highlighter
hatchet-dev · Dec 6, 2024 · f6103c5 · f6103c5
1 parent bf68a86
commit f6103c5
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 87 deletions.
diff --git a/frontend/app/src/components/molecules/combobox/combobox.tsx b/frontend/app/src/components/molecules/combobox/combobox.tsx
@@ -125,7 +125,11 @@ export function Combobox({
                 variant="secondary"
                 className="rounded-sm px-1 font-normal lg:hidden"
               >
-                {values.length}
+                {type == ToolbarType.Radio
+                  ? // get the label of the value
+                    options?.find(({ value }) => value == values[0])?.label ||
+                    values[0]
+                  : values.length}
               </Badge>
               <div className="hidden space-x-1 lg:flex">
                 {values.length > 2 ? (
@@ -168,7 +172,7 @@ export function Combobox({
                 <Badge
                   key={index}
                   variant="secondary"
-                  className="mr-2 mb-2 rounded-sm px-1 font-normal flex items-center space-x-1 font-normal pl-2"
+                  className="mr-2 mb-2 rounded-sm px-1 font-normal flex items-center space-x-1 pl-2"
                 >
                   <span className="grow">{filter}</span>
                   <Button

diff --git a/frontend/app/src/components/molecules/relative-date.tsx b/frontend/app/src/components/molecules/relative-date.tsx
@@ -72,7 +72,11 @@ const RelativeDate: React.FC<RelativeDateProps> = ({
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger
+          onFocusCapture={(e) => {
+            e.stopPropagation();
+          }}
+        >
           {future && countdown ? (
             <>{countdown}</>
           ) : (

diff --git a/frontend/app/src/components/ui/code-editor.tsx b/frontend/app/src/components/ui/code-editor.tsx
@@ -23,7 +23,7 @@ export function CodeEditor({
   className,
   height,
   width,
-  copy,
+  copy = true,
   wrapLines = true,
   lineNumbers = false,
 }: CodeEditorProps) {
@@ -73,7 +73,7 @@ export function CodeEditor({
       />
       {copy && (
         <CopyToClipboard
-          className="absolute top-1 right-1"
+          className="absolute top-2 right-2"
           text={code.trim()}
         />
       )}
@@ -131,7 +131,7 @@ export function DiffCodeEditor({
       />
       {copy && (
         <CopyToClipboard
-          className="absolute top-1 right-1"
+          className="absolute top-2 right-2"
           text={code.trim()}
         />
       )}

diff --git a/frontend/app/src/components/ui/code-highlighter.tsx b/frontend/app/src/components/ui/code-highlighter.tsx
@@ -9,7 +9,6 @@ import {
   atomOneLight,
 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import CopyToClipboard from './copy-to-clipboard';
-import { useRef } from 'react';
 import { cn } from '@/lib/utils';
 import { useTheme } from '../theme-provider';
 
@@ -20,18 +19,16 @@ SyntaxHighlighter.registerLanguage('json', json);
 export function CodeHighlighter({
   code,
   copyCode,
-  setCode,
   language,
   className,
   maxHeight,
   minHeight,
   maxWidth,
-  copy,
+  copy = true,
   wrapLines = true,
 }: {
   code: string;
   copyCode?: string;
-  setCode?: (code: string) => void;
   language: string;
   className?: string;
   maxHeight?: string;
@@ -42,52 +39,39 @@ export function CodeHighlighter({
 }) {
   const { theme } = useTheme();
 
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
   return (
     <div className={cn('w-full h-fit relative bg-muted rounded-lg', className)}>
-      <div
-        role="button"
-        tabIndex={0}
-        onKeyDown={() => textareaRef.current?.focus()}
-        onClick={() => textareaRef.current?.focus()}
-        className="relative flex"
+      <SyntaxHighlighter
+        language={language}
+        style={theme == 'dark' ? anOldHope : atomOneLight}
+        wrapLines={wrapLines}
+        lineProps={{
+          style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
+        }}
+        customStyle={{
+          cursor: 'default',
+          borderRadius: '0.5rem',
+          maxHeight: maxHeight,
+          minHeight: minHeight,
+          maxWidth: maxWidth,
+          fontFamily:
+            "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+          fontSize: '0.75rem',
+          lineHeight: '1rem',
+          padding: '0.5rem',
+          paddingRight: '2rem',
+          flex: '1',
+          background: 'transparent',
+        }}
       >
-        {setCode && (
-          <textarea
-            className="absolute rounded-lg text-xs inset-0 resize-none bg-transparent p-2 font-mono text-transparent caret-white outline-none"
-            ref={textareaRef}
-            value={code}
-            onChange={(e) => setCode(e.target.value)}
-            autoCorrect="off"
-          />
-        )}
-        <SyntaxHighlighter
-          language={language}
-          style={theme == 'dark' ? anOldHope : atomOneLight}
-          wrapLines={wrapLines}
-          lineProps={{
-            style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
-          }}
-          customStyle={{
-            cursor: setCode ? 'pointer' : 'default',
-            borderRadius: '0.5rem',
-            maxHeight: maxHeight,
-            minHeight: minHeight,
-            maxWidth: maxWidth,
-            fontFamily:
-              "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-            fontSize: '0.75rem',
-            lineHeight: '1rem',
-            padding: '0.5rem',
-            flex: '1',
-            background: 'transparent',
-          }}
-        >
-          {code.trim()}
-        </SyntaxHighlighter>
-      </div>
-      {copy && <CopyToClipboard text={(copyCode || code).trim()} withText />}
+        {code.trim()}
+      </SyntaxHighlighter>
+      {copy && (
+        <CopyToClipboard
+          className="absolute top-2 right-2"
+          text={(copyCode || code).trim()}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/app/src/pages/main/events/index.tsx b/frontend/app/src/pages/main/events/index.tsx
@@ -501,7 +501,7 @@ function EventsTable() {
 
 function ExpandedEventContent({ event }: { event: Event }) {
   return (
-    <DialogContent className="w-fit max-w-[80%] min-w-[500px]">
+    <DialogContent className="w-fit max-w-[700px] overflow-hidden">
       <DialogHeader>
         <DialogTitle>Event {event.key}</DialogTitle>
         <DialogDescription>
@@ -559,15 +559,17 @@ function EventWorkflowRunsList({ event }: { event: Event }) {
   });
 
   return (
-    <DataTable
-      columns={workflowRunsColumns()}
-      data={listWorkflowRunsQuery.data?.rows || []}
-      filters={[]}
-      pageCount={listWorkflowRunsQuery.data?.pagination?.num_pages || 0}
-      columnVisibility={{
-        'Triggered by': false,
-      }}
-      isLoading={listWorkflowRunsQuery.isLoading}
-    />
+    <div className="w-full overflow-x-auto max-w-full">
+      <DataTable
+        columns={workflowRunsColumns()}
+        data={listWorkflowRunsQuery.data?.rows || []}
+        filters={[]}
+        pageCount={listWorkflowRunsQuery.data?.pagination?.num_pages || 0}
+        columnVisibility={{
+          'Triggered by': false,
+        }}
+        isLoading={listWorkflowRunsQuery.isLoading}
+      />
+    </div>
   );
 }
diff --git a/frontend/app/src/pages/main/workflow-runs/$run/components/step-run-output.tsx b/frontend/app/src/pages/main/workflow-runs/$run/components/step-run-output.tsx
@@ -22,6 +22,7 @@ export const StepRunOutput: React.FC<StepRunOutputProps> = ({
         language="json"
         className="mb-4"
         height="400px"
+        copy={true}
         code={JSON.stringify(
           errors.length > 0
             ? errors.map((error) => error.split('\\n')).flat()

diff --git a/frontend/app/src/pages/main/workflows/$workflow/components/trigger-workflow-form.tsx b/frontend/app/src/pages/main/workflows/$workflow/components/trigger-workflow-form.tsx
@@ -79,7 +79,7 @@ export function TriggerWorkflowForm({
     setErrors,
   });
 
-  const { data: workflowKeys } = useQuery({
+  const { data: workflowKeys, isFetched } = useQuery({
     ...queries.workflows.list(tenant.metadata.id),
   });
 
@@ -238,6 +238,28 @@ export function TriggerWorkflowForm({
     }
   };
 
+  if (!workflow && isFetched) {
+    return (
+      <Dialog
+        open={show}
+        onOpenChange={(open) => {
+          if (!open) {
+            onClose();
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-[625px] py-12 max-h-screen overflow-auto">
+          <DialogHeader className="gap-2">
+            <DialogTitle>Trigger Workflow</DialogTitle>
+            <DialogDescription className="text-muted-foreground">
+              No workflows found. Create a workflow first.
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
     <Dialog
       open={!!workflow && show}

diff --git a/frontend/app/src/pages/onboarding/create-tenant/components/tenant-create-form.tsx b/frontend/app/src/pages/onboarding/create-tenant/components/tenant-create-form.tsx
@@ -6,7 +6,7 @@ import { Spinner } from '@/components/ui/loading.tsx';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 const schema = z.object({
   name: z.string().min(4).max(32),
@@ -24,14 +24,10 @@ export function TenantCreateForm({
   className,
   ...props
 }: TenantCreateFormProps) {
-  //   const [isSlugModified, setIsSlugModified] = useState(false);
-  const [isSlugSuffixed, setIsSlugSuffixed] = useState(false);
-
   const {
     register,
     handleSubmit,
     setValue,
-    getValues,
     watch,
     formState: { errors },
   } = useForm<z.infer<typeof schema>>({
@@ -42,12 +38,15 @@ export function TenantCreateForm({
     const subscription = watch((value, { name }) => {
       switch (name) {
         case 'name':
-          if (!isSlugSuffixed) {
-            const slug = value.name
-              ?.toLowerCase()
-              .replace(/[^a-z0-9-]/g, '-')
-              .replace(/-+/g, '-')
-              .replace(/^-|-$/g, '');
+          if (value.name) {
+            const slug =
+              value.name
+                ?.toLowerCase()
+                .replace(/[^a-z0-9-]/g, '-')
+                .replace(/-+/g, '-')
+                .replace(/^-|-$/g, '') +
+              '-' +
+              Math.random().toString(36).substr(2, 5);
 
             if (slug) {
               setValue('slug', slug);
@@ -61,7 +60,7 @@ export function TenantCreateForm({
     });
 
     return () => subscription.unsubscribe();
-  }, [isSlugSuffixed, setValue, watch]);
+  }, [setValue, watch]);
 
   const nameError =
     errors.name?.message?.toString() || props.fieldErrors?.email;
@@ -90,15 +89,12 @@ export function TenantCreateForm({
               autoCorrect="off"
               disabled={props.isLoading}
               spellCheck={false}
-              onBlur={() => {
-                // add a random suffix to the slug if it's not modified
-                if (!isSlugSuffixed) {
-                  const newSlug =
-                    getValues('slug') +
-                    '-' +
-                    Math.random().toString(36).substr(2, 5);
-                  setValue('slug', newSlug);
-                  setIsSlugSuffixed(true);
+              onChange={(e) => {
+                setValue('name', e.target.value);
+
+                // if value is unset, reset the slug
+                if (!e.target.value) {
+                  setValue('slug', '');
                 }
               }}
             />
@@ -125,7 +121,7 @@ export function TenantCreateForm({
               <div className="text-sm text-red-500">{slugError}</div>
             )}
           </div>
-          <Button disabled={props.isLoading || !isSlugSuffixed}>
+          <Button disabled={props.isLoading}>
             {props.isLoading && <Spinner />}
             Create
           </Button>