Move wiki alert to vue

- move wiki error alert to vue
- add tests

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

+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { ERRORS } from '../constants';
+
+export default {
+  ERRORS,
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    error: {
+      type: String,
+      required: true,
+    },
+    wikiPagePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    errorMessage() {
+      if (this.error === this.$options.ERRORS.PAGE_CHANGE.ERROR) {
+        return this.$options.ERRORS.PAGE_CHANGE.MESSAGE;
+      } else if (this.error === this.$options.ERRORS.PAGE_RENAME.ERROR) {
+        return this.$options.ERRORS.PAGE_RENAME.MESSAGE;
+      }
+      return this.error;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert variant="danger" :dismissible="false">
+    <gl-sprintf :message="errorMessage">
+      <template #wikiLink="{ content }">
+        <gl-link :href="wikiPagePath" target="_blank">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>

app/assets/javascripts/pages/shared/wikis/constants.js

+import { s__ } from '~/locale';
+
+export const ERRORS = {
+  PAGE_CHANGE: {
+    ERROR: 'WikiPage::PageChangedError',
+    MESSAGE: s__(
+      'WikiPageConflictMessage|Someone edited the page the same time you did. Please check out %{wikiLinkStart}the page%{wikiLinkEnd} and make sure your changes will not unintentionally remove theirs.',
+    ),
+  },
+  PAGE_RENAME: {
+    ERROR: 'WikiPage::PageRenameError',
+    MESSAGE: s__('WikiEdit|There is already a page with the same title in that path.'),
+  },
+};

app/assets/javascripts/pages/shared/wikis/index.js

@@ -6,9 +6,10 @@ import Translate from '~/vue_shared/translate';
 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 Wikis from './wikis';
 
-export default () => {
+const createModalVueApp = () => {
   new Wikis(); // eslint-disable-line no-new
   new ShortcutsWiki(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
@@ -39,3 +40,28 @@ export default () => {
     });
   }
 };
+
+const createAlertVueApp = () => {
+  const el = document.getElementById('js-wiki-error');
+  if (el) {
+    const { error, wikiPagePath } = el.dataset;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      render(createElement) {
+        return createElement(wikiAlert, {
+          props: {
+            error,
+            wikiPagePath,
+          },
+        });
+      },
+    });
+  }
+};
+
+export default () => {
+  createModalVueApp();
+  createAlertVueApp();
+};

app/controllers/concerns/wiki_actions.rb

@@ -112,6 +112,7 @@ module WikiActions
         wiki_page_path(wiki, page)
       )
     else
+      @error = response.message
       render 'shared/wikis/edit'
     end
   rescue WikiPage::PageChangedError, WikiPage::PageRenameError => e

app/helpers/wiki_helper.rb

@@ -50,24 +50,6 @@ module WikiHelper
       end
   end
 
-  def wiki_page_errors(error)
-    return unless error
-
-    content_tag(:div, class: 'alert alert-danger') do
-      case error
-      when WikiPage::PageChangedError
-        page_link = link_to s_("WikiPageConflictMessage|the page"), wiki_page_path(@wiki, @page), target: "_blank"
-        concat(
-          (s_("WikiPageConflictMessage|Someone edited the page the same time you did. Please check out %{page_link} and make sure your changes will not unintentionally remove theirs.") % { page_link: page_link }).html_safe
-        )
-      when WikiPage::PageRenameError
-        s_("WikiEdit|There is already a page with the same title in that path.")
-      else
-        error.message
-      end
-    end
-  end
-
   def wiki_attachment_upload_url
     case @wiki.container
     when Project

app/views/shared/wikis/edit.html.haml

 - wiki_page_title @page, @page.persisted? ? _('Edit') : _('New')
 - add_page_specific_style 'page_bundles/wiki'
+- errorMessage = @error || ''
 
-= wiki_page_errors(@error)
+- if @error
+  #js-wiki-error{ data: { error: errorMessage, wiki_page_path: wiki_page_path(@wiki, @page) } }
 
 .wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   = wiki_sidebar_toggle_button

changelogs/unreleased/294443-move-wiki-helper-error-to-vue.yml

+---
+title: Move wiki helper alert to Vue
+merge_request: 54517
+author:
+type: other

locale/gitlab.pot

@@ -33549,10 +33549,7 @@ msgstr ""
 msgid "WikiPageConfirmDelete|Delete page %{pageTitle}?"
 msgstr ""
 
-msgid "WikiPageConflictMessage|Someone edited the page the same time you did. Please check out %{page_link} and make sure your changes will not unintentionally remove theirs."
-msgstr ""
-
-msgid "WikiPageConflictMessage|the page"
+msgid "WikiPageConflictMessage|Someone edited the page the same time you did. Please check out %{wikiLinkStart}the page%{wikiLinkEnd} and make sure your changes will not unintentionally remove theirs."
 msgstr ""
 
 msgid "WikiPageCreate|Create %{pageTitle}"

spec/frontend/pages/shared/wikis/wiki_alert_spec.js

+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import WikiAlert from '~/pages/shared/wikis/components/wiki_alert.vue';
+import { ERRORS } from '~/pages/shared/wikis/constants';
+
+describe('WikiAlert', () => {
+  let wrapper;
+
+  function createWrapper(propsData = {}, stubs = {}) {
+    wrapper = shallowMount(WikiAlert, {
+      propsData,
+      stubs,
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+  const findGlLink = () => wrapper.findComponent(GlLink);
+  const findGlSprintf = () => wrapper.findComponent(GlSprintf);
+
+  describe('Wiki Alert', () => {
+    it('does show an alert when there is an error', () => {
+      createWrapper({ error: ERRORS.PAGE_RENAME.ERROR });
+      expect(findGlAlert().exists()).toBe(true);
+    });
+
+    it('does show the page change message text', () => {
+      createWrapper({ error: ERRORS.PAGE_CHANGE.ERROR });
+      expect(findGlSprintf().exists()).toBe(true);
+      const text = findGlSprintf();
+      expect(text.attributes('message')).toBe(ERRORS.PAGE_CHANGE.MESSAGE);
+    });
+
+    it('does show the page rename message text', () => {
+      createWrapper({ error: ERRORS.PAGE_RENAME.ERROR });
+      expect(findGlSprintf().attributes('message')).toBe(ERRORS.PAGE_RENAME.MESSAGE);
+    });
+
+    it('does show the error message', () => {
+      const error = 'test message';
+      createWrapper({ error });
+      expect(findGlSprintf().attributes('message')).toBe(error);
+    });
+
+    it('does show the link to the help path', () => {
+      const wikiPagePath = '/help';
+      createWrapper({ error: ERRORS.PAGE_CHANGE.ERROR, wikiPagePath }, { GlAlert, GlSprintf });
+      expect(findGlLink().attributes('href')).toBe(wikiPagePath);
+    });
+  });
+});