Add Zen Mode support to Issuable Show

Adds support for Zen Mode in `issuable_show` app

app/assets/javascripts/issuable_show/components/issuable_body.vue

@@ -42,6 +42,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    enableZenMode: {
+      type: Boolean,
+      required: true,
+    },
     enableTaskList: {
       type: Boolean,
       required: false,
@@ -144,6 +148,7 @@ export default {
         :issuable="issuable"
         :enable-autocomplete="enableAutocomplete"
         :enable-autosave="enableAutosave"
+        :enable-zen-mode="enableZenMode"
         :show-field-title="showFieldTitle"
         :description-preview-path="descriptionPreviewPath"
         :description-help-path="descriptionHelpPath"

app/assets/javascripts/issuable_show/components/issuable_edit_form.vue

@@ -4,6 +4,7 @@ import $ from 'jquery';
 
 import Autosave from '~/autosave';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import ZenMode from '~/zen_mode';
 
 import eventHub from '../event_hub';
 
@@ -27,6 +28,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    enableZenMode: {
+      type: Boolean,
+      required: true,
+    },
     showFieldTitle: {
       type: Boolean,
       required: true,
@@ -62,6 +67,9 @@ export default {
   },
   mounted() {
     if (this.enableAutosave) this.initAutosave();
+
+    // eslint-disable-next-line no-new
+    if (this.enableZenMode) new ZenMode();
   },
   beforeDestroy() {
     eventHub.$off('update.issuable', this.resetAutosave);

app/assets/javascripts/issuable_show/components/issuable_show_root.vue

@@ -42,6 +42,11 @@ export default {
       required: false,
       default: true,
     },
+    enableZenMode: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     enableTaskList: {
       type: Boolean,
       required: false,
@@ -120,6 +125,7 @@ export default {
       :enable-edit="enableEdit"
       :enable-autocomplete="enableAutocomplete"
       :enable-autosave="enableAutosave"
+      :enable-zen-mode="enableZenMode"
       :enable-task-list="enableTaskList"
       :edit-form-visible="editFormVisible"
       :show-field-title="showFieldTitle"

ee/app/assets/javascripts/requirements/components/requirement_form.vue

@@ -250,6 +250,7 @@ export default {
       :enable-edit="canEditRequirement"
       :enable-autocomplete="false"
       :enable-autosave="false"
+      :enable-zen-mode="false"
       :edit-form-visible="enableRequirementEdit || isCreate"
       :show-field-title="true"
       :description-preview-path="descriptionPreviewPath"

ee/changelogs/unreleased/kp-add-zen-mode-support-issuable-show.yml

+---
+title: Make Zen Mode functional while editing Test Case description
+merge_request: 58984
+author:
+type: fixed

ee/spec/features/projects/quality/test_case_show_spec.rb

@@ -72,6 +72,15 @@ RSpec.describe 'Test Cases', :js do
         end
       end
 
+      it 'enters into zen mode when clicking on zen mode button' do
+        page.within('.test-case-container .issuable-details') do
+          page.find('.js-issuable-edit').click
+          page.find('.js-vue-markdown-field button.js-zen-enter').click
+
+          expect(page).to have_selector('.zen-backdrop.fullscreen')
+        end
+      end
+
       it 'update title and description' do
         title = 'Updated title'
         description = 'Updated test case description.'

spec/frontend/issuable_show/mock_data.js

@@ -32,6 +32,7 @@ export const mockIssuableShowProps = {
   editFormVisible: false,
   enableAutocomplete: true,
   enableAutosave: true,
+  enableZenMode: true,
   enableTaskList: true,
   enableEdit: true,
   showFieldTitle: false,