Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

5 files changed, 130 insertions, 144 deletions

diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue
new file mode 100644
index 00000000000..7c23f60954a
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue
@@ -0,0 +1,92 @@
+<script>
+import { GlSkeletonLoader, GlSafeHtmlDirective, GlAlert } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import { renderGFM } from '../render_gfm_facade';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+    GlAlert,
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
+  props: {
+    getWikiContentUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoadingContent: false,
+      loadingContentFailed: false,
+      content: null,
+    };
+  },
+  mounted() {
+    this.loadWikiContent();
+  },
+  methods: {
+    async loadWikiContent() {
+      this.loadingContentFailed = false;
+      this.isLoadingContent = true;
+
+      try {
+        const {
+          data: { content },
+        } = await axios.get(this.getWikiContentUrl, { params: { render_html: true } });
+        this.content = content;
+
+        this.$nextTick()
+          .then(() => {
+            renderGFM(this.$refs.content);
+          })
+          .catch(() =>
+            createFlash({
+              message: this.$options.i18n.renderingContentFailed,
+            }),
+          );
+      } catch (e) {
+        this.loadingContentFailed = true;
+      } finally {
+        this.isLoadingContent = false;
+      }
+    },
+  },
+  i18n: {
+    loadingContentFailed: __(
+      'The content for this wiki page failed to load. To fix this error, reload the page.',
+    ),
+    retryLoadingContent: __('Retry'),
+    renderingContentFailed: __('The content for this wiki page failed to render.'),
+  },
+};
+</script>
+<template>
+  <gl-skeleton-loader v-if="isLoadingContent" :width="830" :height="113">
+    <rect width="540" height="16" rx="4" />
+    <rect y="49" width="701" height="16" rx="4" />
+    <rect y="24" width="830" height="16" rx="4" />
+    <rect y="73" width="540" height="16" rx="4" />
+  </gl-skeleton-loader>
+  <gl-alert
+    v-else-if="loadingContentFailed"
+    :dismissible="false"
+    variant="danger"
+    :primary-button-text="$options.i18n.retryLoadingContent"
+    @primaryAction="loadWikiContent"
+  >
+    {{ $options.i18n.loadingContentFailed }}
+  </gl-alert>
+  <div
+    v-else-if="!loadingContentFailed && !isLoadingContent"
+    ref="content"
+    data-qa-selector="wiki_page_content"
+    data-testid="wiki_page_content"
+    class="js-wiki-page-content md"
+    v-html="content /* eslint-disable-line vue/no-v-html */"
+  ></div>
+</template>
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
index 8ef31b9b983..024b3bc9595 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
@@ -1,21 +1,11 @@
 <script>
-import {
-  GlForm,
-  GlIcon,
-  GlLink,
-  GlButton,
-  GlSprintf,
-  GlAlert,
-  GlModal,
-  GlModalDirective,
-} from '@gitlab/ui';
+import { GlForm, GlIcon, GlLink, GlButton, GlSprintf, GlAlert } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import csrf from '~/lib/utils/csrf';
 import { setUrlFragment } from '~/lib/utils/url_utility';
-import { __, s__, sprintf } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   CONTENT_EDITOR_LOADED_ACTION,
   SAVED_USING_CONTENT_EDITOR_ACTION,
@@ -64,31 +54,6 @@ export default {
         ),
         primaryAction: s__('WikiPage|Retry'),
       },
-      useNewEditor: {
-        primaryLabel: s__('WikiPage|Use the new editor'),
-        secondaryLabel: s__('WikiPage|Try this later'),
-        title: s__('WikiPage|Get a richer editing experience'),
-        text: s__(
-          "WikiPage|Try the new visual Markdown editor. Read the %{linkStart}documentation%{linkEnd} to learn what's currently supported.",
-        ),
-      },
-      switchToOldEditor: {
-        label: s__('WikiPage|Switch me back to the classic editor.'),
-        helpText: s__(
-          "WikiPage|This editor is in beta and may not display the page's contents properly. Switching back to the classic editor will discard changes you've made in the new editor.",
-        ),
-        modal: {
-          title: s__('WikiPage|Are you sure you want to switch back to the classic editor?'),
-          primary: s__('WikiPage|Switch to classic editor'),
-          cancel: s__('WikiPage|Keep editing'),
-          text: s__(
-            "WikiPage|Switching to the classic editor will discard any changes you've made in the new editor.",
-          ),
-        },
-      },
-      feedbackTip: __(
-        'Tell us your experiences with the new Markdown editor %{linkStart}in this feedback issue%{linkEnd}.',
-      ),
     },
     linksHelpText: s__(
       'WikiPage|To link to a (new) page, simply type %{linkExample}. More examples are in the %{linkStart}documentation%{linkEnd}.',
@@ -108,7 +73,6 @@ export default {
     editSourceButtonText: s__('WikiPage|Edit source'),
     editRichTextButtonText: s__('WikiPage|Edit rich text'),
   },
-  contentEditorFeedbackIssue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/332629',
   components: {
     GlAlert,
     GlForm,
@@ -116,24 +80,19 @@ export default {
     GlIcon,
     GlLink,
     GlButton,
-    GlModal,
     MarkdownField,
     ContentEditor: () =>
       import(
         /* webpackChunkName: 'content_editor' */ '~/content_editor/components/content_editor.vue'
       ),
   },
-  directives: {
-    GlModalDirective,
-  },
-  mixins: [trackingMixin, glFeatureFlagMixin()],
+  mixins: [trackingMixin],
   inject: ['formatOptions', 'pageInfo'],
   data() {
     return {
       title: this.pageInfo.title?.trim() || '',
       format: this.pageInfo.format || 'markdown',
       content: this.pageInfo.content || '',
-      isContentEditorAlertDismissed: false,
       useContentEditor: false,
       commitMessage: '',
       isDirty: false,
@@ -194,25 +153,9 @@ export default {
     isMarkdownFormat() {
       return this.format === 'markdown';
     },
-    showContentEditorAlert() {
-      return (
-        !this.glFeatures.wikiSwitchBetweenContentEditorRawMarkdown &&
-        this.isMarkdownFormat &&
-        !this.useContentEditor &&
-        !this.isContentEditorAlertDismissed
-      );
-    },
-    showSwitchEditingModeButton() {
-      return this.glFeatures.wikiSwitchBetweenContentEditorRawMarkdown && this.isMarkdownFormat;
-    },
     displayWikiSpecificMarkdownHelp() {
       return !this.isContentEditorActive;
     },
-    displaySwitchBackToClassicEditorMessage() {
-      return (
-        !this.glFeatures.wikiSwitchBetweenContentEditorRawMarkdown && this.isContentEditorActive
-      );
-    },
     disableSubmitButton() {
       return this.noContent || !this.title || this.contentEditorRenderFailed;
     },
@@ -312,23 +255,6 @@ export default {
       this.commitMessage = newCommitMessage;
     },
 
-    initContentEditor() {
-      this.useContentEditor = true;
-    },
-
-    switchToOldEditor() {
-      this.useContentEditor = false;
-    },
-
-    confirmSwitchToOldEditor() {
-      if (this.contentEditorRenderFailed) {
-        this.contentEditorRenderFailed = false;
-        this.switchToOldEditor();
-      } else {
-        this.$refs.confirmSwitchToOldEditorModal.show();
-      }
-    },
-
     trackContentEditorLoaded() {
       this.track(CONTENT_EDITOR_LOADED_ACTION);
     },
@@ -349,10 +275,6 @@ export default {
         },
       });
     },
-
-    dismissContentEditorAlert() {
-      this.isContentEditorAlertDismissed = true;
-    },
   },
 };
 </script>
@@ -438,10 +360,7 @@ export default {
         }}</label>
       </div>
       <div class="col-sm-10">
-        <div
-          v-if="showSwitchEditingModeButton"
-          class="gl-display-flex gl-justify-content-end gl-mb-3"
-        >
+        <div v-if="isMarkdownFormat" class="gl-display-flex gl-justify-content-end gl-mb-3">
           <gl-button
             data-testid="toggle-editing-mode-button"
             data-qa-selector="editing_mode_button"
@@ -451,42 +370,6 @@ export default {
             >{{ toggleEditingModeButtonText }}</gl-button
           >
         </div>
-        <gl-alert
-          v-if="showContentEditorAlert"
-          class="gl-mb-6"
-          variant="info"
-          data-qa-selector="try_new_editor_container"
-          :primary-button-text="$options.i18n.contentEditor.useNewEditor.primaryLabel"
-          :secondary-button-text="$options.i18n.contentEditor.useNewEditor.secondaryLabel"
-          :dismiss-label="$options.i18n.contentEditor.useNewEditor.secondaryLabel"
-          :title="$options.i18n.contentEditor.useNewEditor.title"
-          @primaryAction="initContentEditor"
-          @secondaryAction="dismissContentEditorAlert"
-          @dismiss="dismissContentEditorAlert"
-        >
-          <gl-sprintf :message="$options.i18n.contentEditor.useNewEditor.text">
-            <template
-              #link="// eslint-disable-next-line vue/no-template-shadow
-                { content }"
-              ><gl-link
-                :href="contentEditorHelpPath"
-                target="_blank"
-                data-testid="content-editor-help-link"
-                >{{ content }}</gl-link
-              ></template
-            >
-          </gl-sprintf>
-        </gl-alert>
-        <gl-modal
-          ref="confirmSwitchToOldEditorModal"
-          modal-id="confirm-switch-to-old-editor"
-          :title="$options.i18n.contentEditor.switchToOldEditor.modal.title"
-          :action-primary="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.primary }"
-          :action-cancel="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.cancel }"
-          @primary="switchToOldEditor"
-        >
-          {{ $options.i18n.contentEditor.switchToOldEditor.modal.text }}
-        </gl-modal>
         <markdown-field
           v-if="!isContentEditorActive"
           :markdown-preview-path="pageInfo.markdownPreviewPath"
@@ -516,22 +399,7 @@ export default {
             </textarea>
           </template>
         </markdown-field>
-
         <div v-if="isContentEditorActive">
-          <gl-alert class="gl-mb-6" variant="tip" :dismissible="false">
-            <gl-sprintf :message="$options.i18n.contentEditor.feedbackTip">
-              <template
-                #link="// eslint-disable-next-line vue/no-template-shadow
-                { content }"
-                ><gl-link
-                  :href="$options.contentEditorFeedbackIssue"
-                  target="_blank"
-                  data-testid="wiki-markdown-help-link"
-                  >{{ content }}</gl-link
-                ></template
-              >
-            </gl-sprintf>
-          </gl-alert>
           <content-editor
             :render-markdown="renderMarkdown"
             :uploads-path="pageInfo.uploadsPath"
@@ -560,12 +428,6 @@ export default {
               ></template
             >
           </gl-sprintf>
-          <span v-if="displaySwitchBackToClassicEditorMessage">
-            {{ $options.i18n.contentEditor.switchToOldEditor.helpText }}
-            <gl-button variant="link" @click="confirmSwitchToOldEditor">{{
-              $options.i18n.contentEditor.switchToOldEditor.label
-            }}</gl-button>
-          </span>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/pages/shared/wikis/edit.js b/app/assets/javascripts/pages/shared/wikis/edit.js
index beeabfde1a6..02878633916 100644
--- a/app/assets/javascripts/pages/shared/wikis/edit.js
+++ b/app/assets/javascripts/pages/shared/wikis/edit.js
@@ -3,8 +3,8 @@ import Vue from 'vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import csrf from '~/lib/utils/csrf';
 import Translate from '~/vue_shared/translate';
-import GLForm from '../../../gl_form';
-import ZenMode from '../../../zen_mode';
+import GLForm from '~/gl_form';
+import ZenMode from '~/zen_mode';
 import deleteWikiModal from './components/delete_wiki_modal.vue';
 import wikiAlert from './components/wiki_alert.vue';
 import wikiForm from './components/wiki_form.vue';
diff --git a/app/assets/javascripts/pages/shared/wikis/render_gfm_facade.js b/app/assets/javascripts/pages/shared/wikis/render_gfm_facade.js
new file mode 100644
index 00000000000..90cc2983153
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/wikis/render_gfm_facade.js
@@ -0,0 +1,5 @@
+import $ from 'jquery';
+
+export const renderGFM = (el) => {
+  return $(el).renderGFM();
+};
diff --git a/app/assets/javascripts/pages/shared/wikis/show.js b/app/assets/javascripts/pages/shared/wikis/show.js
new file mode 100644
index 00000000000..9906cb595f8
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/wikis/show.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import Wikis from './wikis';
+import WikiContent from './components/wiki_content.vue';
+
+const mountWikiContentApp = () => {
+  const el = document.querySelector('.js-async-wiki-page-content');
+
+  if (el) {
+    const { getWikiContentUrl } = el.dataset;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      render(createElement) {
+        return createElement(WikiContent, {
+          props: { getWikiContentUrl },
+        });
+      },
+    });
+  }
+};
+
+export const mountApplications = () => {
+  // eslint-disable-next-line no-new
+  new Wikis();
+  mountWikiContentApp();
+};