chore(dashboard,api-service): revert blocking the preview when template has issues

apps/api/src/app/workflows-v2/usecases/preview/preview.usecase.ts

@@ -35,7 +35,10 @@ import { buildLiquidParser, Variable } from '../../util/template-parser/liquid-p
 import { buildVariables } from '../../util/build-variables';
 import { mergeCommonObjectKeys } from '../../util/utils';
 import { buildVariablesSchema } from '../../util/create-schema';
-import { isObjectMailyJSONContent } from '../../../environments-v1/usecases/output-renderers/maily-to-liquid/wrap-maily-in-liquid.command';
+import {
+  isObjectMailyJSONContent,
+  isStringifiedMailyJSONContent,
+} from '../../../environments-v1/usecases/output-renderers/maily-to-liquid/wrap-maily-in-liquid.command';
 import { GeneratePreviewResponseDto, JSONSchemaDto, PreviewPayloadDto, StepResponseDto } from '../../dtos';
 
 const LOG_CONTEXT = 'GeneratePreviewUsecase';
@@ -301,14 +304,21 @@ export class PreviewUsecase {
   private fixControlValueInvalidVariables(controlValues: unknown, invalidVariables: Variable[]): unknown {
     try {
       let controlValuesString = JSON.stringify(controlValues);
+      const isMailyJSONContent = isStringifiedMailyJSONContent(controlValues);
 
       for (const invalidVariable of invalidVariables) {
-        if (!controlValuesString.includes(invalidVariable.output)) {
+        let variableOutput = invalidVariable.output;
+
+        if (isMailyJSONContent) {
+          variableOutput = variableOutput.replace(/\{\{|\}\}/g, '').trim();
+        }
+
+        if (!controlValuesString.includes(variableOutput)) {
           continue;
         }
 
         const EMPTY_STRING = '';
-        controlValuesString = replaceAll(controlValuesString, invalidVariable.output, EMPTY_STRING);
+        controlValuesString = replaceAll(controlValuesString, variableOutput, EMPTY_STRING);
       }
 
       return JSON.parse(controlValuesString);

apps/dashboard/src/components/workflow-editor/steps/chat/chat-tabs.tsx

@@ -10,7 +10,7 @@ import { ChatEditorPreview } from '@/components/workflow-editor/steps/chat/chat-
 import { useEditorPreview } from '../use-editor-preview';
 
 export const ChatTabs = (props: StepEditorProps) => {
-  const { workflow, step, hasStepValidationErrors } = props;
+  const { workflow, step } = props;
   const { dataSchema, uiSchema } = step.controls;
   const [tabsValue, setTabsValue] = useState('editor');
   const form = useFormContext();
@@ -47,7 +47,6 @@ export const ChatTabs = (props: StepEditorProps) => {
       tabsValue={tabsValue}
       onTabChange={setTabsValue}
       previewStep={previewStep}
-      hasStepValidationErrors={hasStepValidationErrors}
     />
   );
 };

apps/dashboard/src/components/workflow-editor/steps/configure-step-template-form.tsx

@@ -29,12 +29,11 @@ const STEP_TYPE_TO_TEMPLATE_FORM: Record<StepTypeEnum, (args: StepEditorProps) =
 };
 
 export type StepEditorProps = {
-  hasStepValidationErrors: boolean;
   workflow: WorkflowResponseDto;
   step: StepResponseDto;
 };
 
-type ConfigureStepTemplateFormProps = Omit<StepEditorProps, 'hasStepValidationErrors'> & {
+type ConfigureStepTemplateFormProps = StepEditorProps & {
   update: UpdateWorkflowFn;
 };
 
@@ -98,16 +97,11 @@ export const ConfigureStepTemplateForm = (props: ConfigureStepTemplateFormProps)
 
   const value = useMemo(() => ({ saveForm }), [saveForm]);
 
-  const hasStepValidationErrors = useMemo(() => {
-    const stepIssues = flattenIssues(step.issues?.controls);
-    return hideValidationErrorsOnFirstRender ? false : Object.keys(stepIssues).length > 0;
-  }, [step.issues?.controls, hideValidationErrorsOnFirstRender]);
-
   return (
     <Form {...form}>
       <FormRoot className="flex h-full flex-col" onBlur={onBlur}>
         <SaveFormContext.Provider value={value}>
-          <TemplateForm workflow={workflow} step={step} hasStepValidationErrors={hasStepValidationErrors} />
+          <TemplateForm workflow={workflow} step={step} />
         </SaveFormContext.Provider>
       </FormRoot>
     </Form>

apps/dashboard/src/components/workflow-editor/steps/configure-step-template-issue-cta.tsx

@@ -56,8 +56,8 @@ export const ConfigureStepTemplateIssueCta = (props: ConfigureStepTemplateIssueC
         type="button"
       >
         <span className={cn(`h-full min-w-1 rounded-full`, { 'bg-destructive': isError, 'bg-bg-sub': !isError })} />
-        <div className="flex flex-col items-start gap-0.5">
-          <TruncatedText className="font-medium">{truncatedTextContent}</TruncatedText>
+        <div className="flex flex-col items-start gap-0.5 overflow-hidden">
+          <TruncatedText className="w-full font-medium">{truncatedTextContent}</TruncatedText>
           <p className="text-text-soft text-wrap text-start">{issue.message}</p>
         </div>
         <RiArrowRightUpLine

apps/dashboard/src/components/workflow-editor/steps/email/email-tabs.tsx

@@ -9,7 +9,7 @@ import { CustomStepControls } from '../controls/custom-step-controls';
 import { useEditorPreview } from '../use-editor-preview';
 
 export const EmailTabs = (props: StepEditorProps) => {
-  const { workflow, step, hasStepValidationErrors } = props;
+  const { workflow, step } = props;
   const { dataSchema, uiSchema } = step.controls;
   const form = useFormContext();
   const [tabsValue, setTabsValue] = useState('editor');
@@ -47,7 +47,6 @@ export const EmailTabs = (props: StepEditorProps) => {
       previewContent={previewContent}
       tabsValue={tabsValue}
       onTabChange={setTabsValue}
-      hasStepValidationErrors={hasStepValidationErrors}
     />
   );
 };

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx

@@ -9,7 +9,7 @@ import { CustomStepControls } from '../controls/custom-step-controls';
 import { useEditorPreview } from '../use-editor-preview';
 
 export const InAppTabs = (props: StepEditorProps) => {
-  const { workflow, step, hasStepValidationErrors } = props;
+  const { workflow, step } = props;
   const { dataSchema, uiSchema } = step.controls;
   const form = useFormContext();
   const [tabsValue, setTabsValue] = useState('editor');
@@ -47,7 +47,6 @@ export const InAppTabs = (props: StepEditorProps) => {
       previewContent={previewContent}
       tabsValue={tabsValue}
       onTabChange={setTabsValue}
-      hasStepValidationErrors={hasStepValidationErrors}
     />
   );
 };

apps/dashboard/src/components/workflow-editor/steps/other-steps-tabs.tsx

@@ -3,7 +3,7 @@ import { CustomStepControls } from './controls/custom-step-controls';
 import { TemplateTabs } from './template-tabs';
 import type { StepEditorProps } from './configure-step-template-form';
 
-export const OtherStepTabs = ({ workflow, step, hasStepValidationErrors }: StepEditorProps) => {
+export const OtherStepTabs = ({ workflow, step }: StepEditorProps) => {
   const { dataSchema } = step.controls;
   const [tabsValue, setTabsValue] = useState('editor');
 
@@ -21,7 +21,6 @@ export const OtherStepTabs = ({ workflow, step, hasStepValidationErrors }: StepE
       previewContent={previewContent}
       tabsValue={tabsValue}
       onTabChange={setTabsValue}
-      hasStepValidationErrors={hasStepValidationErrors}
     />
   );
 };

apps/dashboard/src/components/workflow-editor/steps/push/push-tabs.tsx

@@ -9,7 +9,7 @@ import { useFormContext } from 'react-hook-form';
 import { useEditorPreview } from '../use-editor-preview';
 
 export const PushTabs = (props: StepEditorProps) => {
-  const { workflow, step, hasStepValidationErrors } = props;
+  const { workflow, step } = props;
   const { dataSchema, uiSchema } = step.controls;
   const [tabsValue, setTabsValue] = useState('editor');
   const form = useFormContext();
@@ -46,7 +46,6 @@ export const PushTabs = (props: StepEditorProps) => {
       previewContent={previewContent}
       tabsValue={tabsValue}
       onTabChange={setTabsValue}
-      hasStepValidationErrors={hasStepValidationErrors}
     />
   );
 };

apps/dashboard/src/components/workflow-editor/steps/sms/sms-tabs.tsx

@@ -9,7 +9,7 @@ import { useFormContext } from 'react-hook-form';
 import { useEditorPreview } from '../use-editor-preview';
 
 export const SmsTabs = (props: StepEditorProps) => {
-  const { workflow, step, hasStepValidationErrors } = props;
+  const { workflow, step } = props;
   const { dataSchema, uiSchema } = step.controls;
   const form = useFormContext();
   const [tabsValue, setTabsValue] = useState('editor');
@@ -47,7 +47,6 @@ export const SmsTabs = (props: StepEditorProps) => {
       tabsValue={tabsValue}
       onTabChange={setTabsValue}
       previewStep={previewStep}
-      hasStepValidationErrors={hasStepValidationErrors}
     />
   );
 };

apps/dashboard/src/components/workflow-editor/steps/template-tabs.tsx

@@ -6,15 +6,13 @@ import { Notification5Fill } from '@/components/icons';
 import { Separator } from '@/components/primitives/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/primitives/tabs';
 import { CompactButton } from '../../primitives/button-compact';
-import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@/components/primitives/tooltip';
 
 interface TemplateTabsProps {
   editorContent: React.ReactNode;
   previewContent?: React.ReactNode;
   tabsValue: string;
   onTabChange: (tab: string) => void;
   previewStep?: () => void;
-  hasStepValidationErrors?: boolean;
 }
 
 export const TemplateTabs = ({
@@ -23,7 +21,6 @@ export const TemplateTabs = ({
   tabsValue,
   onTabChange,
   previewStep,
-  hasStepValidationErrors = false,
 }: TemplateTabsProps) => {
   const navigate = useNavigate();
 
@@ -47,24 +44,9 @@ export const TemplateTabs = ({
             <RiPencilRuler2Line className="size-5 p-0.5" />
             <span>Editor</span>
           </TabsTrigger>
-          <TabsTrigger value="preview" className="gap-1.5" disabled={!previewContent || hasStepValidationErrors}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex gap-1.5">
-                  <Notification5Fill className="size-5 p-0.5" />
-                  <span>Preview</span>
-                </div>
-              </TooltipTrigger>
-              <TooltipPortal>
-                {hasStepValidationErrors && (
-                  <TooltipContent className="flex min-w-min max-w-[200px]" side="bottom">
-                    <span className="text-xs font-normal">
-                      Preview is disabled due to validation issues that need to be addressed
-                    </span>
-                  </TooltipContent>
-                )}
-              </TooltipPortal>
-            </Tooltip>
+          <TabsTrigger value="preview" className="gap-1.5" disabled={!previewContent}>
+            <Notification5Fill className="size-5 p-0.5" />
+            <span>Preview</span>
           </TabsTrigger>
         </TabsList>