fix(dashboard): Redirect url tooltip

novuhq · Nov 15, 2024 · 745eec9 · 745eec9
1 parent c978334
commit 745eec9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/apps/dashboard/src/components/primitives/form/form.tsx b/apps/dashboard/src/components/primitives/form/form.tsx
@@ -9,6 +9,7 @@ import { cva } from 'class-variance-authority';
 import { FormFieldContext, FormItemContext, useFormField } from './form-context';
 import { RiErrorWarningFill, RiInformationFill } from 'react-icons/ri';
 import { BsFillInfoCircleFill } from 'react-icons/bs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/primitives/tooltip';
 
 const Form = FormProvider;
 
@@ -40,25 +41,28 @@ FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { optional?: boolean; hint?: string }
->(({ className, optional, hint, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { optional?: boolean; hint?: string; tooltip?: string }
+>(({ className, optional, tooltip, hint, children, ...props }, ref) => {
   const { formItemId } = useFormField();
 
   return (
-    <Label ref={ref} className={cn('text-foreground-950', className)} htmlFor={formItemId} {...props}>
+    <Label ref={ref} className={cn('text-foreground-950 flex items-center', className)} htmlFor={formItemId} {...props}>
       {children}
-      {hint && (
-        <span className="text-foreground-400 ml-0.5 inline-flex items-center gap-1">
-          {hint}
-          <BsFillInfoCircleFill className="text-foreground-300 inline size-3" />
-        </span>
-      )}
 
-      {optional && (
-        <span className="text-foreground-400 ml-0.5 inline-flex items-center gap-1">
-          (optional) <BsFillInfoCircleFill className="text-foreground-300 inline size-3" />
-        </span>
+      {tooltip && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger className="ml-1">
+              <BsFillInfoCircleFill className="text-foreground-300 -mt-0.5 inline size-3" />
+            </TooltipTrigger>
+            <TooltipContent>{tooltip}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
+
+      {hint && <span className="text-foreground-400 ml-0.5 inline-flex items-center gap-1">{hint}</span>}
+
+      {optional && <span className="text-foreground-400 ml-0.5 inline-flex items-center gap-1">(optional)</span>}
     </Label>
   );
 });

diff --git a/apps/dashboard/src/components/primitives/tooltip.tsx b/apps/dashboard/src/components/primitives/tooltip.tsx
@@ -13,7 +13,7 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipPortal = TooltipPrimitive.Portal;
 
 const tooltipContentVariants = cva(
-  `z-50 overflow-hidden  px-3 py-1.5 text-xs  animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
+  `z-50 overflow-hidden max-w-sm px-3 py-1.5 text-xs  animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
   {
     variants: {
       variant: {

diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-redirect.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-redirect.tsx
@@ -5,7 +5,9 @@ import { urlTargetTypes } from '@/utils/url';
 export const InAppRedirect = () => {
   return (
     <div className="flex flex-col gap-1">
-      <FormLabel hint="">Redirect URL</FormLabel>
+      <FormLabel tooltip="The redirect object defines the URL to visit when the notification is clicked. Alternatively, use an onNotificationClick handler in the <Inbox /> component.">
+        Redirect URL
+      </FormLabel>
       <URLInput
         options={urlTargetTypes}
         placeholder="/tasks/{{taskId}}"