fix: sync issue while creating pipeline using yaml editor

Author: anwesha-palit-redhat

src/components/pipeline-builder/PipelineBuilderForm.tsx

@@ -280,7 +280,7 @@ const PipelineBuilderForm: React.FC<PipelineBuilderFormProps> = (props) => {
                 submitLabel={existingPipeline ? t('Save') : t('Create')}
                 disableSubmit={
                   editorType === EditorType.YAML
-                    ? !dirty
+                    ? !dirty || !_.isEmpty(errors) || !!status?.submitError
                     : !dirty ||
                       !_.isEmpty(errors) ||
                       !_.isEmpty(status?.tasks) ||

src/components/pipeline-builder/SyncedEditorField.tsx

@@ -140,6 +140,39 @@ const SyncedEditorField: React.FC<SyncedEditorFieldProps> = ({
     }
   }, [editorType, field.value, formContext.isDisabled, name, setFieldValue]);
 
+  React.useEffect(() => {
+    // Sync formData when yamlData changes (while in YAML mode)
+    if (editorType === EditorType.YAML && yamlData) {
+      const syncFormDataFromYaml = async () => {
+        try {
+          const content = safeYAMLToJS(yamlData);
+          if (!_.isEmpty(content) && formContext.sanitizeTo) {
+            const sanitizedContent = await formContext.sanitizeTo(content);
+            if (
+              typeof sanitizedContent === 'object' &&
+              !_.isEmpty(sanitizedContent)
+            ) {
+              // Only update if the content is different
+              if (!_.isEqual(sanitizedContent, formData)) {
+                setFieldValue(formContext.name, sanitizedContent);
+              }
+            }
+          }
+        } catch (e) {
+          console.warn('Failed to sync form data from YAML', e);
+        }
+      };
+      syncFormDataFromYaml();
+    }
+  }, [
+    yamlData,
+    editorType,
+    formContext.sanitizeTo,
+    formContext.name,
+    setFieldValue,
+    formData,
+  ]);
+
   return (
     <>
       <div