1 files changed, 49 insertions, 23 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 486d4f6b609..330785c9319 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,11 +1,13 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLink, GlLoadingIcon, GlSprintf, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
+    GlButton,
     GlLink,
     GlLoadingIcon,
+    GlSprintf,
+    GlIcon,
   },
   props: {
     markdownDocsPath: {
@@ -35,45 +37,69 @@ export default {
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
       <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">{{
+        <gl-link :href="markdownDocsPath" target="_blank">{{
           __('Markdown is supported')
         }}</gl-link>
       </template>
       <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">{{
-          __('Markdown')
-        }}</gl-link>
-        and
-        <gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1">{{
-          __('quick actions')
-        }}</gl-link>
-        are supported
+        <gl-sprintf
+          :message="
+            __(
+              '%{markdownDocsLinkStart}Markdown%{markdownDocsLinkEnd} and %{quickActionsDocsLinkStart}quick actions%{quickActionsDocsLinkEnd} are supported',
+            )
+          "
+        >
+          <template #markdownDocsLink="{content}">
+            <gl-link :href="markdownDocsPath" target="_blank">{{ content }}</gl-link>
+          </template>
+          <template #quickActionsDocsLink="{content}">
+            <gl-link :href="quickActionsDocsPath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
       </template>
     </div>
     <span v-if="canAttachFile" class="uploading-container">
       <span class="uploading-progress-container hide">
-        <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i>
+        <template>
+          <gl-icon name="media" :size="16" />
+        </template>
         <span class="attaching-file-message"></span>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
         <span class="uploading-progress">0%</span>
         <gl-loading-icon inline class="align-text-bottom" />
       </span>
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">
-          <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i>
+          <template>
+            <gl-icon name="media" :size="16" />
+          </template>
         </span>
         <span class="uploading-error-message"></span>
-        <button class="retry-uploading-link" type="button">{{ __('Try again') }}</button> or
-        <button class="attach-new-file markdown-selector" type="button">
-          {{ __('attach a new file') }}
-        </button>
+
+        <gl-sprintf
+          :message="
+            __(
+              '%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}',
+            )
+          "
+        >
+          <template #retryButton="{content}">
+            <button class="retry-uploading-link" type="button">{{ content }}</button>
+          </template>
+          <template #newFileButton="{content}">
+            <button class="attach-new-file markdown-selector" type="button">{{ content }}</button>
+          </template>
+        </gl-sprintf>
       </span>
-      <button class="markdown-selector button-attach-file btn-link" tabindex="-1" type="button">
-        <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i
-        ><span class="text-attach-file">{{ __('Attach a file') }}</span>
-      </button>
-      <button class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button">
+      <gl-button class="markdown-selector button-attach-file" variant="link">
+        <template>
+          <gl-icon name="media" :size="16" />
+        </template>
+        <span class="text-attach-file">{{ __('Attach a file') }}</span>
+      </gl-button>
+      <gl-button class="btn btn-default btn-sm hide button-cancel-uploading-files" variant="link">
         {{ __('Cancel') }}
-      </button>
+      </gl-button>
     </span>
   </div>
 </template>