Externalize markdown toolbar tooltips

Replace tooltip texts in the markdown toolbar with bindings to gettext
calls

Author:    Enrique Alcantara <enrique@crunch.io>

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -79,7 +79,7 @@ export default {
     <ul class="nav-links clearfix">
       <li :class="{ active: !previewMarkdown }" class="md-header-tab">
         <button class="js-write-link" tabindex="-1" type="button" @click="writeMarkdownTab($event)">
-          Write
+          {{ __('Write') }}
         </button>
       </li>
       <li :class="{ active: previewMarkdown }" class="md-header-tab">
@@ -89,36 +89,41 @@ export default {
           type="button"
           @click="previewMarkdownTab($event)"
         >
-          Preview
+          {{ __('Preview') }}
         </button>
       </li>
       <li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
-        <toolbar-button tag="**" button-title="Add bold text" icon="bold" />
-        <toolbar-button tag="*" button-title="Add italic text" icon="italic" />
-        <toolbar-button :prepend="true" tag="> " button-title="Insert a quote" icon="quote" />
-        <toolbar-button tag="`" tag-block="```" button-title="Insert code" icon="code" />
+        <toolbar-button tag="**" :button-title="__('Add bold text')" icon="bold" />
+        <toolbar-button tag="*" :button-title="__('Add italic text')" icon="italic" />
+        <toolbar-button
+          :prepend="true"
+          tag="> "
+          :button-title="__('Insert a quote')"
+          icon="quote"
+        />
+        <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
         <toolbar-button
           tag="[{text}](url)"
           tag-select="url"
-          button-title="Add a link"
+          :button-title="__('Add a link')"
           icon="link"
         />
         <toolbar-button
           :prepend="true"
           tag="* "
-          button-title="Add a bullet list"
+          :button-title="__('Add a bullet list')"
           icon="list-bulleted"
         />
         <toolbar-button
           :prepend="true"
           tag="1. "
-          button-title="Add a numbered list"
+          :button-title="__('Add a numbered list')"
           icon="list-numbered"
         />
         <toolbar-button
           :prepend="true"
           tag="* [ ] "
-          button-title="Add a task list"
+          :button-title="__('Add a task list')"
           icon="task-done"
         />
         <toolbar-button
@@ -139,11 +144,11 @@ export default {
         />
         <button
           v-gl-tooltip
-          aria-label="Go full screen"
+          :aria-label="__('Go full screen')"
           class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
           data-container="body"
           tabindex="-1"
-          title="Go full screen"
+          :title="__('Go full screen')"
           type="button"
         >
           <icon name="screen-full" />

app/views/projects/_md_preview.html.haml

@@ -12,10 +12,10 @@
     %ul.nav.nav-tabs.nav-links.clearfix
       %li.md-header-tab.active
         %button.js-md-write-button{ tabindex: -1 }
-          Write
+          = _("Write")
       %li.md-header-tab
         %button.js-md-preview-button{ tabindex: -1 }
-          Preview
+          = _("Preview")
 
       %li.md-header-toolbar.active
         = render 'projects/blob/markdown_buttons', show_fullscreen_button: true

app/views/projects/blob/_markdown_buttons.html.haml

 .md-header-toolbar.active
-  = markdown_toolbar_button({ icon: "bold", data: { "md-tag" => "**" }, title: s_("MarkdownToolbar|Add bold text") })
-  = markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: s_("MarkdownToolbar|Add italic text") })
-  = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: s_("MarkdownToolbar|Insert a quote") })
-  = markdown_toolbar_button({ icon: "code", data: { "md-tag" => "`", "md-block" => "```" }, title: s_("MarkdownToolbar|Insert code") })
-  = markdown_toolbar_button({ icon: "link", data: { "md-tag" => "[{text}](url)", "md-select" => "url" }, title: s_("MarkdownToolbar|Add a link") })
-  = markdown_toolbar_button({ icon: "list-bulleted", data: { "md-tag" => "* ", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a bullet list") })
-  = markdown_toolbar_button({ icon: "list-numbered", data: { "md-tag" => "1. ", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a numbered list") })
-  = markdown_toolbar_button({ icon: "task-done", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a task list") })
-  = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a table") })
+  = markdown_toolbar_button({ icon: "bold", data: { "md-tag" => "**" }, title: _("Add bold text") })
+  = markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: _("Add italic text") })
+  = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: _("Insert a quote") })
+  = markdown_toolbar_button({ icon: "code", data: { "md-tag" => "`", "md-block" => "```" }, title: _("Insert code") })
+  = markdown_toolbar_button({ icon: "link", data: { "md-tag" => "[{text}](url)", "md-select" => "url" }, title: _("Add a link") })
+  = markdown_toolbar_button({ icon: "list-bulleted", data: { "md-tag" => "* ", "md-prepend" => true }, title: _("Add a bullet list") })
+  = markdown_toolbar_button({ icon: "list-numbered", data: { "md-tag" => "1. ", "md-prepend" => true }, title: _("Add a numbered list") })
+  = markdown_toolbar_button({ icon: "task-done", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: _("Add a task list") })
+  = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: _("Add a table") })
   - if show_fullscreen_button
-    %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: s_("MarkdownToolbar|Go full screen"), data: { container: "body" } }
+    %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
       = sprite_icon("screen-full")

changelogs/unreleased/53413-externalize-markdown-toolbar-tooltips.yml

+---
+title: Externalize markdown toolbar buttons tooltips
+merge_request: 25529
+author:
+type: fixed

locale/gitlab.pot

@@ -384,21 +384,39 @@ msgstr ""
 msgid "Add README"
 msgstr ""
 
+msgid "Add a bullet list"
+msgstr ""
+
 msgid "Add a general comment to this %{noteable_name}."
 msgstr ""
 
 msgid "Add a homepage to your wiki that contains information about your project and GitLab will display it here instead of this message."
 msgstr ""
 
+msgid "Add a link"
+msgstr ""
+
+msgid "Add a numbered list"
+msgstr ""
+
 msgid "Add a table"
 msgstr ""
 
+msgid "Add a task list"
+msgstr ""
+
+msgid "Add bold text"
+msgstr ""
+
 msgid "Add header and footer to emails. Please note that color settings will only be applied within the application interface"
 msgstr ""
 
 msgid "Add image comment"
 msgstr ""
 
+msgid "Add italic text"
+msgstr ""
+
 msgid "Add license"
 msgstr ""
 
@@ -3627,6 +3645,9 @@ msgstr ""
 msgid "Go back"
 msgstr ""
 
+msgid "Go full screen"
+msgstr ""
+
 msgid "Go to"
 msgstr ""
 
@@ -4070,6 +4091,12 @@ msgstr ""
 msgid "Input your repository URL"
 msgstr ""
 
+msgid "Insert a quote"
+msgstr ""
+
+msgid "Insert code"
+msgstr ""
+
 msgid "Insert suggestion"
 msgstr ""
 
@@ -4542,36 +4569,6 @@ msgstr ""
 msgid "Markdown enabled"
 msgstr ""
 
-msgid "MarkdownToolbar|Add a bullet list"
-msgstr ""
-
-msgid "MarkdownToolbar|Add a link"
-msgstr ""
-
-msgid "MarkdownToolbar|Add a numbered list"
-msgstr ""
-
-msgid "MarkdownToolbar|Add a table"
-msgstr ""
-
-msgid "MarkdownToolbar|Add a task list"
-msgstr ""
-
-msgid "MarkdownToolbar|Add bold text"
-msgstr ""
-
-msgid "MarkdownToolbar|Add italic text"
-msgstr ""
-
-msgid "MarkdownToolbar|Go full screen"
-msgstr ""
-
-msgid "MarkdownToolbar|Insert a quote"
-msgstr ""
-
-msgid "MarkdownToolbar|Insert code"
-msgstr ""
-
 msgid "Max access level"
 msgstr ""
 
@@ -8528,6 +8525,9 @@ msgstr ""
 msgid "Withdraw Access Request"
 msgstr ""
 
+msgid "Write"
+msgstr ""
+
 msgid "Write a comment or drag your files here…"
 msgstr ""