Merge branch...

Merge branch '15103-markup-tips-for-markdown-shown-while-editing-wiki-pages-in-other-formats' into 'master'

Markup tips for Markdown shown while editing wiki pages in other formats

See merge request gitlab-org/gitlab!25974

app/assets/javascripts/pages/projects/wikis/wikis.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { s__, sprintf } from '~/locale';
 
+const MARKDOWN_LINK_TEXT = {
+  markdown: '[Link Title](page-slug)',
+  rdoc: '{Link title}[link:page-slug]',
+  asciidoc: 'link:page-slug[Link title]',
+  org: '[[page-slug]]',
+};
+
 export default class Wikis {
   constructor() {
     this.sidebarEl = document.querySelector('.js-wiki-sidebar');
@@ -28,6 +35,15 @@ export default class Wikis {
 
     window.addEventListener('resize', () => this.renderSidebar());
     this.renderSidebar();
+
+    const changeFormatSelect = document.querySelector('#wiki_format');
+    const linkExample = document.querySelector('.js-markup-link-example');
+
+    if (changeFormatSelect) {
+      changeFormatSelect.addEventListener('change', e => {
+        linkExample.innerHTML = MARKDOWN_LINK_TEXT[e.target.value];
+      });
+    }
   }
 
   handleWikiTitleChange(e) {

app/views/projects/wikis/_form.html.haml

@@ -43,8 +43,16 @@
 
       .form-text.text-muted
         = succeed '.' do
-          = (s_("WikiMarkdownTip|To link to a (new) page, simply type %{link_example}") % { link_example: '<code>[Link Title](page-slug)</code>' }).html_safe
-
+          - case @page.format.to_s
+            - when 'rdoc'
+              - link_example = '{Link title}[link:page-slug]'
+            - when 'asciidoc'
+              - link_example = 'link:page-slug[Link title]'
+            - when 'org'
+              - link_example = '[[page-slug]]'
+            - else
+              - link_example = '[Link Title](page-slug)'
+          = (s_('WikiMarkdownTip|To link to a (new) page, simply type <code class="js-markup-link-example">%{link_example}</code>') % { link_example: link_example }).html_safe
         = succeed '.' do
           - markdown_link = link_to s_("WikiMarkdownDocs|documentation"), help_page_path('user/markdown', anchor: 'wiki-specific-markdown')
           = (s_("WikiMarkdownDocs|More examples are in the %{docs_link}") % { docs_link: markdown_link }).html_safe

changelogs/unreleased/15103-markup-tips-for-markdown-shown-while-editing-wiki-pages-in-other-fo.yml

+---
+title: Markup tips for Markdown shown while editing wiki pages in other formats
+merge_request: 25974
+author:
+type: fixed

locale/gitlab.pot

@@ -22296,7 +22296,7 @@ msgstr ""
 msgid "WikiMarkdownDocs|documentation"
 msgstr ""
 
-msgid "WikiMarkdownTip|To link to a (new) page, simply type %{link_example}"
+msgid "WikiMarkdownTip|To link to a (new) page, simply type <code class=\"js-markup-link-example\">%{link_example}</code>"
 msgstr ""
 
 msgid "WikiNewPageTip|Tip: You can specify the full path for the new file. We will automatically create any missing directories."

spec/frontend/wikis_spec.js

@@ -8,11 +8,21 @@ describe('Wikis', () => {
     }">
         <input type="text" id="wiki_title" value="My title" />
         <input type="text" id="wiki_message" />
-      </form>`;
+        <select class="form-control select-control" name="wiki[format]" id="wiki_format">
+          <option value="markdown">Markdown</option>
+          <option selected="selected" value="rdoc">RDoc</option>
+          <option value="asciidoc">AsciiDoc</option>
+          <option value="org">Org</option>
+        </select>
+        <code class="js-markup-link-example">{Link title}[link:page-slug]</code>
+      </form>
+      `;
 
     let wikis;
     let titleInput;
     let messageInput;
+    let changeFormatSelect;
+    let linkExample;
 
     describe('when the wiki page is being created', () => {
       const formHtmlFixture = editFormHtmlFixture({ newPage: true });
@@ -22,6 +32,8 @@ describe('Wikis', () => {
 
         titleInput = document.getElementById('wiki_title');
         messageInput = document.getElementById('wiki_message');
+        changeFormatSelect = document.querySelector('#wiki_format');
+        linkExample = document.querySelector('.js-markup-link-example');
         wikis = new Wikis();
       });
 
@@ -69,6 +81,19 @@ describe('Wikis', () => {
 
         expect(messageInput.value).toEqual('Update My title');
       });
+
+      it.each`
+        value         | text
+        ${'markdown'} | ${'[Link Title](page-slug)'}
+        ${'rdoc'}     | ${'{Link title}[link:page-slug]'}
+        ${'asciidoc'} | ${'link:page-slug[Link title]'}
+        ${'org'}      | ${'[[page-slug]]'}
+      `('updates a message when value=$value is selected', ({ value, text }) => {
+        changeFormatSelect.value = value;
+        changeFormatSelect.dispatchEvent(new Event('change'));
+
+        expect(linkExample.innerHTML).toBe(text);
+      });
     });
   });
 });