From b656bc16ebe24f124cc4ad54c5fbf3da98f06671 Mon Sep 17 00:00:00 2001
From: Shubham Gupta <shubham.gupta2956@gmail.com>
Date: Mon, 16 Feb 2026 03:02:19 +0530
Subject: [PATCH] :chore: Create required field labels, full validation tooltip
 on Next button, no advance on save failure

---
 bun.lock                                      |   1 +
 src/app/components/DragAndDropFile.tsx        |   3 +
 .../createBlueprintSteps/EmailDetails.tsx     |   1 +
 .../createBlueprintSteps/ExtractFields.tsx    |   4 +-
 .../createBlueprintSteps/PatternDetails.tsx   |   6 +
 src/app/create/[id]/page.tsx                  | 128 ++++++++++++++----
 src/components/ui/input.tsx                   |   3 +
 src/components/ui/textarea.tsx                |   4 +-
 8 files changed, 119 insertions(+), 31 deletions(-)

diff --git a/bun.lock b/bun.lock
index f12a1c37..89096d4b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "registry",
diff --git a/src/app/components/DragAndDropFile.tsx b/src/app/components/DragAndDropFile.tsx
index 4ea6bd23..5c15ab6d 100644
--- a/src/app/components/DragAndDropFile.tsx
+++ b/src/app/components/DragAndDropFile.tsx
@@ -16,6 +16,7 @@ const DragAndDropFile = ({
   errorMessage,
   loading,
   tooltipComponent,
+  required,
 }: {
   accept: string;
   title?: string;
@@ -26,6 +27,7 @@ const DragAndDropFile = ({
   errorMessage?: string;
   tooltipComponent?: React.ReactNode;
   loading?: boolean;
+  required?: boolean;
 }) => {
   return (
     <div className="flex w-full flex-col gap-4">
@@ -33,6 +35,7 @@ const DragAndDropFile = ({
         <div className="flex flex-row gap-2">
           <Label className="text-base text-grey-900" htmlFor={title}>
             {title}
+            {required && <span className="text-red-500"> *</span>}
           </Label>
 
           {tooltipComponent ? (
diff --git a/src/app/create/[id]/createBlueprintSteps/EmailDetails.tsx b/src/app/create/[id]/createBlueprintSteps/EmailDetails.tsx
index e1791a8e..400017ca 100644
--- a/src/app/create/[id]/createBlueprintSteps/EmailDetails.tsx
+++ b/src/app/create/[id]/createBlueprintSteps/EmailDetails.tsx
@@ -156,6 +156,7 @@ const EmailDetails = ({
         <div className="">
           <Input
             title="Max Email Body Length"
+            required
             disabled={store.ignoreBodyHashCheck}
             placeholder="4032"
             error={!!validationErrors.emailBodyMaxLength}
diff --git a/src/app/create/[id]/createBlueprintSteps/ExtractFields.tsx b/src/app/create/[id]/createBlueprintSteps/ExtractFields.tsx
index 6edf6a0c..c4cf8b63 100644
--- a/src/app/create/[id]/createBlueprintSteps/ExtractFields.tsx
+++ b/src/app/create/[id]/createBlueprintSteps/ExtractFields.tsx
@@ -580,7 +580,7 @@ const ExtractFields = ({
           <div className="mb-4 w-full overflow-hidden rounded-lg">
             <div className="flex items-center justify-between py-3">
               <div className="flex flex-col gap-1">
-                <Label className="font-medium text-grey-900">Quick header extraction</Label>
+                <Label className="font-medium text-grey-900">Quick header extraction <span className="text-red-500">*</span></Label>
                 <p className="text-base font-medium text-grey-700">
                   We auto-write the regexes for all the toggled fields
                 </p>
@@ -934,7 +934,7 @@ const ExtractFields = ({
             <div key={index} className="mb-2 flex flex-col gap-3 px-1">
               <div className="flex items-center justify-between py-3 pb-1">
                 <div className="flex items-center gap-2">
-                  <Label className="font-medium">Extracted data #{index + 1}</Label>
+                  <Label className="font-medium">Extracted data #{index + 1}{index === 0 ? <><span className="text-red-500"> *</span></> : ''}</Label>
                 </div>
                 <Button
                   size="sm"
diff --git a/src/app/create/[id]/createBlueprintSteps/PatternDetails.tsx b/src/app/create/[id]/createBlueprintSteps/PatternDetails.tsx
index d5404745..823a3c2a 100644
--- a/src/app/create/[id]/createBlueprintSteps/PatternDetails.tsx
+++ b/src/app/create/[id]/createBlueprintSteps/PatternDetails.tsx
@@ -172,6 +172,7 @@ const PatternDetails = ({
     <div className="flex flex-col gap-6">
       <Input
         title="Pattern Name"
+        required
         // disabled={id !== 'new'}
         placeholder="Name of the Blueprint"
         value={store.title}
@@ -203,6 +204,7 @@ const PatternDetails = ({
       <Input title="Slug" disabled value={store.slug} loading={isCheckExistingBlueprintLoading} />
       <Textarea
         title="Description"
+        required
         placeholder="Prove that you own a particular GitHub account"
         value={store.description}
         rows={3}
@@ -227,6 +229,7 @@ const PatternDetails = ({
             </div>
           }
           title="Upload test .eml"
+          required
           id="drag-and-drop-emails"
           data-testid="drag-and-drop-emails"
           helpText="Our AI will autofill fields based on contents inside your mail. Don't worry you can edit them later"
@@ -265,6 +268,7 @@ const PatternDetails = ({
       </div>
       <Input
         title="Email Query"
+        required
         disabled={store.clientStatus === Status.Done && store.serverStatus === Status.Done}
         value={store.emailQuery}
         onChange={(e) => setField('emailQuery', e.target.value)}
@@ -289,6 +293,7 @@ const PatternDetails = ({
       />
       <Input
         title="Sender domain"
+        required
         loading={isVerifyDKIMLoading}
         placeholder="twitter.com"
         helpText="This is the domain used for DKIM verification, which may not exactly match the senders domain (you can check via the d= field in the DKIM-Signature header). Note to only include the part after the @ symbol"
@@ -333,6 +338,7 @@ const PatternDetails = ({
       />
       <Input
         title="Max Email Header Length"
+        required
         placeholder="1024"
         type="number"
         min={0}
diff --git a/src/app/create/[id]/page.tsx b/src/app/create/[id]/page.tsx
index 359e885e..19025e59 100644
--- a/src/app/create/[id]/page.tsx
+++ b/src/app/create/[id]/page.tsx
@@ -25,6 +25,7 @@ import { debounce } from '@/app/utils';
 import ModalGenerator from '@/components/ModalGenerator';
 import { useEmlStore } from '@/lib/stores/useEmlStore';
 import Loader from '@/components/ui/loader';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 type Step = '0' | '1' | '2';
 
@@ -169,7 +170,9 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
     } catch (err) {
       toast.error('Failed to submit blueprint');
       console.error('Failed to submit blueprint: ', err);
-      setErrors(['Unknown error while submitting blueprint']);
+      // Don't set errors state — save failure is already shown via toast and is not a
+      // validation issue; the Next tooltip should only list form/validation reasons.
+      throw err; // Rethrow so callers (e.g. onClickNext) know save failed and don't advance step
     } finally {
       setIsSaveDraftLoading(false);
     }
@@ -387,34 +390,73 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
     }
   }, [JSON.stringify(store.decomposedRegexes), savedEmls[id]]);
 
-  const isNextButtonDisabled = () => {
-    if ((!savedEmls[id] || isFileInvalid) && !skipEmlUpload) {
-      return true;
+  const getNextButtonDisabledReasons = (): string[] => {
+    const reasons: string[] = [];
+    const validationErrors = store.validationErrors || {};
+
+    // EML file requirement (when not skipping)
+    if (!skipEmlUpload) {
+      if (!savedEmls[id]) {
+        reasons.push('Upload a sample .eml file or enable "Skip EML upload"');
+      } else if (isFileInvalid) {
+        reasons.push('The uploaded file is invalid. Upload a valid .eml or enable "Skip EML upload"');
+      }
     }
 
     if (step === '0') {
-      return !store.circuitName || !store.title || !store.description || store.title?.includes(' ');
+      if (!store.circuitName) reasons.push('Pattern name is required');
+      if (!store.title) {
+        reasons.push('Title is required');
+      } else if (store.title?.includes(' ')) {
+        reasons.push('Title must not contain spaces');
+      }
+      if (!store.description) reasons.push('Description is required');
+      if (!store.emailQuery) reasons.push('Email Query is required');
+      else if (validationErrors.emailQuery) reasons.push(`Email Query: ${validationErrors.emailQuery}`);
+      if (!store.senderDomain) reasons.push('Sender domain is required');
+      else if (validationErrors.senderDomain) reasons.push(`Sender domain: ${validationErrors.senderDomain}`);
+      if (validationErrors.emailHeaderMaxLength) {
+        reasons.push(`Max Email Header Length: ${validationErrors.emailHeaderMaxLength}`);
+      }
+      if (isDKIMMissing && store.senderDomain) {
+        reasons.push('DKIM key not found for the sender domain');
+      }
     }
 
     if (step === '1') {
-      return !store.decomposedRegexes.length && !skipEmlUpload;
+      if (!store.decomposedRegexes.length && !skipEmlUpload) {
+        reasons.push('Add at least one extract field');
+        reasons.push('Or enable "Skip EML upload" to continue');
+      }
+      if (errors.length) {
+        reasons.push(...errors);
+      }
+      if (isDKIMMissing && store.senderDomain) {
+        reasons.push('DKIM key not found for the sender domain');
+      }
     }
 
     if (step === '2') {
-      // Check canCompile state from ExtractFields component
-      return !canCompile && !skipEmlUpload;
+      if (!canCompile && !skipEmlUpload) {
+        reasons.push('Complete extract field configuration to continue');
+        reasons.push('Or enable "Skip EML upload"');
+      }
     }
 
-    return !!errors.length || isDKIMMissing;
+    return reasons;
   };
 
+  const isNextButtonDisabled = () => getNextButtonDisabledReasons().length > 0;
+
   const onClickNext = async () => {
     try {
       setIsNextButtonClicked(true);
       const newId = await handleSaveDraft();
+      // Only advance step if save succeeded (handleSaveDraft throws on failure)
       setStep((parseInt(step) + 1).toString() as Step, newId);
     } catch (err) {
       console.error('failed to save draft and move to next step: ', err);
+      // Don't advance step — user stays on current step
     } finally {
       setIsNextButtonClicked(false);
     }
@@ -607,25 +649,55 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
                 Save as Draft
               </Button>
               {parseInt(step) < 2 ? (
-                <Button
-                  onClick={onClickNext}
-                  loading={isNextButtonClicked}
-                  endIcon={
-                    <Image
-                      src="/assets/ArrowRight.svg"
-                      alt="arrow right"
-                      width={16}
-                      height={16}
-                      style={{
-                        maxWidth: '100%',
-                        height: 'auto',
-                      }}
-                    />
-                  }
-                  disabled={isNextButtonDisabled()}
-                >
-                  Next
-                </Button>
+                <TooltipProvider delayDuration={150}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="relative inline-block cursor-pointer [&:has(button:disabled)]:cursor-not-allowed">
+                        {/* Invisible overlay when disabled so tooltip trigger receives hover (disabled buttons block pointer events in some browsers) */}
+                        {isNextButtonDisabled() && (
+                          <span className="pointer-events-auto absolute inset-0 z-10" aria-hidden />
+                        )}
+                        <Button
+                          onClick={onClickNext}
+                          loading={isNextButtonClicked}
+                          endIcon={
+                            <Image
+                              src="/assets/ArrowRight.svg"
+                              alt="arrow right"
+                              width={16}
+                              height={16}
+                              style={{
+                                maxWidth: '100%',
+                                height: 'auto',
+                              }}
+                            />
+                          }
+                          disabled={isNextButtonDisabled()}
+                        >
+                          Next
+                        </Button>
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent
+                      side="top"
+                      sideOffset={8}
+                      className="max-w-sm border border-grey-500 bg-grey-800 px-3 py-2.5 text-left text-sm text-white shadow-lg"
+                    >
+                      {isNextButtonDisabled() ? (
+                        <div className="flex flex-col gap-1.5 py-0.5">
+                          <p className="font-medium">Complete the following to continue:</p>
+                          <ul className="list-inside list-disc space-y-0.5 text-sm">
+                            {getNextButtonDisabledReasons().map((reason, i) => (
+                              <li key={i}>{reason}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      ) : (
+                        'Go to next step'
+                      )}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               ) : (
                 <Button
                   onClick={handleCompile}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index b9899781..5fbd49c6 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -15,6 +15,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   startIcon?: React.ReactNode;
   tooltipComponent?: React.ReactNode;
   loading?: boolean;
+  required?: boolean;
 }
 
 const inputVariants = cva(
@@ -45,6 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       size,
       tooltipComponent,
       loading,
+      required,
       ...props
     },
     ref
@@ -55,6 +57,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           <div className="flex flex-row gap-2">
             <Label className="text-base text-grey-900" htmlFor={props.title}>
               {props.title}
+              {required && <span className="text-red-500"> *</span>}
             </Label>
 
             {tooltipComponent ? (
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index e0b27d47..641106f3 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,15 +7,17 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   title?: string;
   errorMessage?: string;
   helpText?: string;
+  required?: boolean;
 }
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, errorMessage, helpText, ...props }, ref) => {
+  ({ className, errorMessage, helpText, required, ...props }, ref) => {
     return (
       <div className="flex flex-col gap-2">
         {props.title ? (
           <Label className="text-base text-grey-900" htmlFor={props.title}>
             {props.title}
+            {required && <span className="text-red-500"> *</span>}
           </Label>
         ) : null}
         <textarea