Merge branch '294443-move-wiki-helper-error-to-vue' into 'master'

Move wiki alert to vue

See merge request gitlab-org/gitlab!54517

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

+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    error: {
+      type: String,
+      required: true,
+    },
+    wikiPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert variant="danger" :dismissible="false">
+    <gl-sprintf :message="error">
+      <template #wikiLink="{ content }">
+        <gl-link :href="wikiPagePath" target="_blank">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>

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,10 +112,11 @@ module WikiActions
         wiki_page_path(wiki, page)
       )
     else
+      @error = response.message
       render 'shared/wikis/edit'
     end
   rescue WikiPage::PageChangedError, WikiPage::PageRenameError => e
-    @error = e
+    @error = e.message
     render 'shared/wikis/edit'
   end
   # rubocop:enable Gitlab/ModuleWithInstanceVariables

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/models/wiki_page.rb

@@ -205,14 +205,15 @@ class WikiPage
     last_commit_sha = attrs.delete(:last_commit_sha)
 
     if last_commit_sha && last_commit_sha != self.last_commit_sha
-      raise PageChangedError
+      raise PageChangedError, 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.')
     end
 
     update_attributes(attrs)
 
     if title.present? && title_changed? && wiki.find_page(title).present?
       attributes[:title] = page.title
-      raise PageRenameError
+      raise PageRenameError, s_('WikiEdit|There is already a page with the same title in that path.')
     end
 
     save do

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

 - wiki_page_title @page, @page.persisted? ? _('Edit') : _('New')
 - add_page_specific_style 'page_bundles/wiki'
 
-= wiki_page_errors(@error)
+- if @error
+  #js-wiki-error{ data: { error: @error, 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

@@ -33642,10 +33642,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';
+
+describe('WikiAlert', () => {
+  let wrapper;
+  const ERROR = 'There is already a page with the same title in that path.';
+  const ERROR_WITH_LINK = 'Before text %{wikiLinkStart}the page%{wikiLinkEnd} after text.';
+  const PATH = '/test';
+
+  function createWrapper(propsData = {}, stubs = {}) {
+    wrapper = shallowMount(WikiAlert, {
+      propsData: { wikiPagePath: PATH, ...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('shows an alert when there is an error', () => {
+      createWrapper({ error: ERROR });
+      expect(findGlAlert().exists()).toBe(true);
+      expect(findGlSprintf().exists()).toBe(true);
+      expect(findGlSprintf().attributes('message')).toBe(ERROR);
+    });
+
+    it('shows a the link to the help path', () => {
+      createWrapper({ error: ERROR_WITH_LINK }, { GlAlert, GlSprintf });
+      expect(findGlLink().attributes('href')).toBe(PATH);
+    });
+  });
+});