Merge branch '228883-disable-preview-for-unsupported-wiki-formats' into 'master'

Hide markdown preview tab if editing non-markdown formats

See merge request gitlab-org/gitlab!80178

app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue

@@ -495,6 +495,7 @@ export default {
           :textarea-value="content"
           :markdown-docs-path="pageInfo.markdownHelpPath"
           :uploads-path="pageInfo.uploadsPath"
+          :enable-preview="isMarkdownFormat"
           class="bordered-box"
         >
           <template #textarea>

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

@@ -48,6 +48,11 @@ export default {
       required: false,
       default: '',
     },
+    enablePreview: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     addSpacingClasses: {
       type: Boolean,
       required: false,
@@ -204,6 +209,14 @@ export default {
         }
       },
     },
+    enablePreview: {
+      immediate: true,
+      handler(newVal) {
+        if (!newVal) {
+          this.showWriteTab();
+        }
+      },
+    },
   },
   mounted() {
     // GLForm class handles all the toolbar buttons
@@ -301,6 +314,7 @@ export default {
       :preview-markdown="previewMarkdown"
       :line-content="lineContent"
       :can-suggest="canSuggest"
+      :enable-preview="enablePreview"
       :show-suggest-popover="showSuggestPopover"
       :suggestion-start-index="suggestionsStartIndex"
       data-testid="markdownHeader"

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

@@ -43,6 +43,11 @@ export default {
       required: false,
       default: 0,
     },
+    enablePreview: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -164,6 +169,7 @@ export default {
         @click="writeMarkdownTab($event)"
       />
       <gl-tab
+        v-if="enablePreview"
         title-link-class="gl-pt-3 gl-px-3 js-md-preview-button"
         :title="$options.i18n.previewTabTitle"
         :active="previewMarkdown"

spec/frontend/pages/shared/wikis/components/wiki_form_spec.js

@@ -154,6 +154,20 @@ describe('WikiForm', () => {
     expect(findContent().element.value).toBe('  My page content  ');
   });
 
+  it.each`
+    format        | enabled  | action
+    ${'markdown'} | ${true}  | ${'displays'}
+    ${'rdoc'}     | ${false} | ${'hides'}
+    ${'asciidoc'} | ${false} | ${'hides'}
+    ${'org'}      | ${false} | ${'hides'}
+  `('$action preview in the markdown field when format is $format', async ({ format, enabled }) => {
+    createWrapper();
+
+    await setFormat(format);
+
+    expect(findClassicEditor().props('enablePreview')).toBe(enabled);
+  });
+
   it.each`
     value         | text
     ${'markdown'} | ${'[Link Title](page-slug)'}

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

@@ -29,6 +29,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
     >
       <markdown-header-stub
         data-testid="markdownHeader"
+        enablepreview="true"
         linecontent=""
         suggestionstartindex="0"
       />

spec/frontend/vue_shared/components/markdown/field_spec.js

@@ -4,6 +4,7 @@ import $ from 'jquery';
 import { TEST_HOST, FIXTURES_PATH } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import MarkdownFieldHeader from '~/vue_shared/components/markdown/header.vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 
 const markdownPreviewPath = `${TEST_HOST}/preview`;
@@ -32,7 +33,7 @@ describe('Markdown field component', () => {
     axiosMock.restore();
   });
 
-  function createSubject(lines = []) {
+  function createSubject({ lines = [], enablePreview = true } = {}) {
     // We actually mount a wrapper component so that we can force Vue to rerender classes in order to test a regression
     // caused by mixing Vanilla JS and Vue.
     subject = mountExtended(
@@ -61,6 +62,7 @@ describe('Markdown field component', () => {
           isSubmitting: false,
           textareaValue,
           lines,
+          enablePreview,
         },
         provide: {
           glFeatures: {
@@ -272,11 +274,22 @@ describe('Markdown field component', () => {
 
   describe('suggestions', () => {
     it('escapes new line characters', () => {
-      createSubject([{ rich_text: 'hello world\\n' }]);
+      createSubject({ lines: [{ rich_text: 'hello world\\n' }] });
 
       expect(subject.find('[data-testid="markdownHeader"]').props('lineContent')).toBe(
         'hello world%br',
       );
     });
   });
+
+  it('allows enabling and disabling Markdown Preview', () => {
+    createSubject({ enablePreview: false });
+
+    expect(subject.findComponent(MarkdownFieldHeader).props('enablePreview')).toBe(false);
+
+    subject.destroy();
+    createSubject({ enablePreview: true });
+
+    expect(subject.findComponent(MarkdownFieldHeader).props('enablePreview')).toBe(true);
+  });
 });

spec/frontend/vue_shared/components/markdown/header_spec.js

@@ -157,4 +157,12 @@ describe('Markdown field header component', () => {
 
     expect(wrapper.find('.js-suggestion-btn').exists()).toBe(false);
   });
+
+  it('hides preview tab when previewMarkdown property is false', () => {
+    createWrapper({
+      enablePreview: false,
+    });
+
+    expect(wrapper.findByTestId('preview-tab').exists()).toBe(false);
+  });
 });