From db806afd4a8b27c5df5332934bb7d19c3bcdba55 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Wed, 26 Nov 2025 12:25:55 +0100
Subject: [PATCH 1/2] Opt-out of dynamic height behavior from source editor in
 flow definitions

---
 .../vue_shared/components/source_editor.vue          | 12 +++++++++++-
 .../ai/catalog/components/form_flow_definition.vue   |  1 +
 .../__snapshots__/snippet_blob_edit_spec.js.snap     |  1 +
 .../snippets/components/snippet_blob_edit_spec.js    |  1 +
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_shared/components/source_editor.vue b/app/assets/javascripts/vue_shared/components/source_editor.vue
index 6131fc92843fd4..658a33fb728436 100644
--- a/app/assets/javascripts/vue_shared/components/source_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/source_editor.vue
@@ -58,12 +58,22 @@ export default {
       required: false,
       default: CONTENT_UPDATE_DEBOUNCE,
     },
+    useDynamicHeight: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
       editor: null,
     };
   },
+  computed: {
+    directives() {
+      return this.useDynamicHeight ? { DynamicHeight } : {};
+    },
+  },
   watch: {
     fileName(newVal) {
       this.editor.updateModelLanguage(newVal);
@@ -107,7 +117,7 @@ export default {
   <div
     :id="`source-editor-${fileGlobalId}`"
     ref="editor"
-    v-dynamic-height
+    v-bind="directives"
     data-editor-loading
     data-testid="source-editor-container"
     @[$options.readyEvent]="$emit($options.readyEvent, $event)"
diff --git a/ee/app/assets/javascripts/ai/catalog/components/form_flow_definition.vue b/ee/app/assets/javascripts/ai/catalog/components/form_flow_definition.vue
index 27418b67aa57a4..920dd2e9ca0677 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/form_flow_definition.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/form_flow_definition.vue
@@ -94,6 +94,7 @@ export default {
       :value="value"
       file-name="*.yaml"
       :editor-options="editorOptions"
+      :use-dynamic-height="false"
       @input="onInput"
     />
   </div>
diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap
index 6414ab6dfba3e3..85926f6d480ee8 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap
@@ -18,6 +18,7 @@ exports[`Snippet Blob Edit component with loaded blob matches snapshot 1`] = `
     extensions="[object Object]"
     fileglobalid="blob_local_7"
     filename="foo/bar/test.md"
+    usedynamicheight="true"
     value="Lorem ipsum dolar sit amet,
 consectetur adipiscing elit."
   />
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index 53993921621556..773ceebed96970 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -186,6 +186,7 @@ describe('Snippet Blob Edit component', () => {
             value: TEST_BLOB_LOADED.content,
             fileGlobalId: TEST_BLOB_LOADED.id,
             fileName: TEST_BLOB_LOADED.path,
+            useDynamicHeight: true,
           }),
         );
       }
-- 
GitLab


From f1276f15936a0066e2434d763f9880cd206d7bfe Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Wed, 3 Dec 2025 10:04:02 +0100
Subject: [PATCH 2/2] Update source editor spec file

---
 .../__snapshots__/source_editor_spec.js.snap  |  1 +
 .../components/source_editor_spec.js          | 22 ++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap
index 76deb4d0b3691e..43915e56d156a8 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Source Editor component rendering matches the snapshot 1`] = `
 <div
   data-editor-loading=""
   data-testid="source-editor-container"
+  dynamicheight="[object Object]"
   id="reference-0"
 >
   <pre
diff --git a/spec/frontend/vue_shared/components/source_editor_spec.js b/spec/frontend/vue_shared/components/source_editor_spec.js
index dc037b170f7455..f532ed20d2f18f 100644
--- a/spec/frontend/vue_shared/components/source_editor_spec.js
+++ b/spec/frontend/vue_shared/components/source_editor_spec.js
@@ -2,7 +2,6 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { EDITOR_READY_EVENT } from '~/editor/constants';
 import Editor from '~/editor/source_editor';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import * as helpers from 'jest/editor/helpers';
 
@@ -33,7 +32,7 @@ describe('Source Editor component', () => {
       createInstance: createInstanceMock,
     };
   });
-  function createComponent(props = {}, directives = {}) {
+  function createComponent(props = {}) {
     wrapper = shallowMount(SourceEditor, {
       propsData: {
         value,
@@ -41,7 +40,6 @@ describe('Source Editor component', () => {
         fileGlobalId,
         ...props,
       },
-      directives,
     });
   }
 
@@ -166,12 +164,20 @@ describe('Source Editor component', () => {
       });
     });
 
-    it('applies the v-dynamic-height directive to the editor element', () => {
-      createComponent({}, { DynamicHeight: createMockDirective('dynamic-height') });
-      const editorElement = wrapper.find('[data-testid="source-editor-container"]');
-      const directiveBinding = getBinding(editorElement.element, 'dynamic-height');
+    it('applies the v-dynamic-height directive to the editor element when useDynamicHeight is true', () => {
+      createComponent({ useDynamicHeight: true });
 
-      expect(directiveBinding).toBeDefined();
+      const editorDiv = wrapper.find('[data-testid="source-editor-container"]');
+
+      expect(editorDiv.attributes('dynamicheight')).toBeDefined();
+    });
+
+    it('does not the v-dynamic-height directive to the editor element when useDynamicHeight is false', () => {
+      createComponent({ useDynamicHeight: false });
+
+      const editorDiv = wrapper.find('[data-testid="source-editor-container"]');
+
+      expect(editorDiv.attributes('dynamicheight')).toBeUndefined();
     });
   });
 });
-- 
GitLab