Merge branch 'nfriend-fix-markdown-preview-on-new-release-page' into 'master'

Fix Markdown preview on New/Edit Release and New Snippet pages

See merge request gitlab-org/gitlab!42640

app/assets/javascripts/releases/components/app_edit_new.vue

@@ -150,7 +150,7 @@ export default {
           />
         </div>
       </gl-form-group>
-      <gl-form-group>
+      <gl-form-group data-testid="release-notes">
         <label for="release-notes">{{ __('Release notes') }}</label>
         <div class="bordered-box pr-3 pl-3">
           <markdown-field
@@ -158,6 +158,7 @@ export default {
             :markdown-preview-path="markdownPreviewPath"
             :markdown-docs-path="markdownDocsPath"
             :add-spacing-classes="false"
+            :textarea-value="releaseNotes"
             class="gl-mt-3 gl-mb-3"
           >
             <template #textarea>

app/assets/javascripts/snippets/components/snippet_description_edit.vue

@@ -49,6 +49,7 @@ export default {
         :add-spacing-classes="false"
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
+        :textarea-value="value"
       >
         <template #textarea>
           <textarea

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -84,7 +84,37 @@ export default {
       required: false,
       default: false,
     },
-    // This prop is used as a fallback in case if textarea.elm is undefined
+
+    /**
+     * This prop is used as a fallback if the value of the textarea can't be
+     * retreived using `this.$slots.textarea[0]?.elm?`.
+     *
+     * This happens when the `textarea` slot is defined like this:
+     *
+     * ```html
+     * <markdown-field>
+     *    <template #textarea>
+     *      <textarea></textarea>
+     *    </template>
+     *  </markdown-field>
+     * ```
+     *
+     * ... as opposed to this:
+     *
+     * ```html
+     * <markdown-field>
+     *   <textarea slot="textarea">
+     * </markdown-field>
+     * ```
+     *
+     * When using `<template #textarea>` as shown above in example #1,
+     * it's important to **always** provide a value to this prop.
+     * If `textareaValue` isn't provided, this component will not
+     * show a preview when the "Preview" tab is clicked - it
+     * will always show "Nothing to preview."
+     *
+     * For more info, see https://github.com/vuejs/vue/issues/10450.
+     */
     textareaValue: {
       type: String,
       required: false,

changelogs/unreleased/nfriend-fix-markdown-preview-on-new-release-page.yml

+---
+title: Fix Markdown "Preview" tab on New/Edit Release and New Snippet pages
+merge_request: 42640
+author:
+type: fixed

spec/features/projects/releases/user_creates_release_spec.rb

@@ -108,6 +108,24 @@ RSpec.describe 'User creates release', :js do
     end
   end
 
+  context 'when the release notes "Preview" tab is clicked' do
+    before do
+      find_field('Release notes').click
+
+      fill_release_notes('**some** _markdown_ [content](https://example.com)')
+
+      click_on 'Preview'
+
+      wait_for_all_requests
+    end
+
+    it 'renders a preview of the release notes markdown' do
+      within('[data-testid="release-notes"]') do
+        expect(page).to have_text('some markdown content')
+      end
+    end
+  end
+
   def fill_out_form_and_submit
     fill_tag_name(tag_name)