Migrate Bootstrap buttons

Migrating buttons in Vue and also HAML for parity

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

@@ -70,34 +70,50 @@ export default {
       </span>
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">
-          <template>
-            <gl-icon name="media" />
-          </template>
+          <gl-icon name="media" />
         </span>
         <span class="uploading-error-message"></span>
 
         <gl-sprintf
           :message="
             __(
-              '%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}',
+              '%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}.',
             )
           "
         >
           <template #retryButton="{content}">
-            <button class="retry-uploading-link" type="button">{{ content }}</button>
+            <gl-button
+              variant="link"
+              category="primary"
+              class="retry-uploading-link gl-vertical-align-baseline"
+            >
+              {{ content }}
+            </gl-button>
           </template>
           <template #newFileButton="{content}">
-            <button class="attach-new-file markdown-selector" type="button">{{ content }}</button>
+            <gl-button
+              variant="link"
+              category="primary"
+              class="markdown-selector attach-new-file gl-vertical-align-baseline"
+            >
+              {{ content }}
+            </gl-button>
           </template>
         </gl-sprintf>
       </span>
-      <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
+        icon="media"
+        variant="link"
+        category="primary"
+        class="markdown-selector button-attach-file gl-vertical-align-text-bottom"
+      >
+        {{ __('Attach a file') }}
       </gl-button>
-      <gl-button class="btn btn-default btn-sm hide button-cancel-uploading-files" variant="link">
+      <gl-button
+        variant="link"
+        category="primary"
+        class="button-cancel-uploading-files gl-vertical-align-baseline hide"
+      >
         {{ __('Cancel') }}
       </gl-button>
     </span>

app/assets/stylesheets/pages/note_form.scss

@@ -450,31 +450,6 @@ table {
   margin-right: 5px;
 }
 
-.attach-new-file,
-.button-attach-file,
-.retry-uploading-link {
-  color: $blue-600;
-  padding: 0;
-  background: none;
-  border: 0;
-  font-size: 14px;
-  line-height: 16px;
-  vertical-align: initial;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-
-    .text-attach-file {
-      text-decoration: underline;
-    }
-  }
-
-  .gl-icon:not(:last-child) {
-    margin-right: 0;
-  }
-}
-
 .markdown-selector {
   color: $blue-600;
 }

app/views/shared/notes/_hints.html.haml

@@ -23,13 +23,20 @@
         = sprite_icon('media', css_class: 'gl-icon gl-vertical-align-text-bottom')
       %span.uploading-error-message
         -# Populated by app/assets/javascripts/dropzone_input.js
-      %button.retry-uploading-link{ type: 'button' }= _("Try again")
-      or
-      %button.attach-new-file.markdown-selector{ type: 'button' }= _("attach a new file")
+      %button.btn.gl-button.btn-link.gl-vertical-align-baseline.retry-uploading-link
+        %span.gl-button-text
+          = _("Try again")
+      = _("or")
+      %button.btn.gl-button.btn-link.attach-new-file.markdown-selector.gl-vertical-align-baseline
+        %span.gl-button-text
+          = _("attach a new file")
+      = _(".")
 
-    %button.btn.markdown-selector.button-attach-file.btn-link{ type: 'button' }
+    %button.btn.gl-button.btn-link.button-attach-file.markdown-selector.button-attach-file.gl-vertical-align-text-bottom
       = sprite_icon('media')
-      %span.text-attach-file<>
+      %span.gl-button-text
         = _("Attach a file")
 
-    %button.btn.btn-default.btn-sm.hide.button-cancel-uploading-files{ type: 'button' }= _("Cancel")
+    %button.btn.gl-button.btn-link.button-cancel-uploading-files.gl-vertical-align-baseline.hide
+      %span.gl-button-text
+        = _("Cancel")

changelogs/unreleased/229300-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml

+---
+title: Migrate Bootstrap buttons to GitLab UI buttons for attach a file form actions
+merge_request: 46041
+author:
+type: other

locale/gitlab.pot

@@ -737,7 +737,7 @@ msgstr[1] ""
 msgid "%{reportType} %{status} detected no vulnerabilities."
 msgstr ""
 
-msgid "%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}"
+msgid "%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}."
 msgstr ""
 
 msgid "%{seconds}s"
@@ -1047,6 +1047,9 @@ msgstr ""
 msgid "- show less"
 msgstr ""
 
+msgid "."
+msgstr ""
+
 msgid "0 bytes"
 msgstr ""
 

spec/features/uploads/user_uploads_file_to_note_spec.rb

@@ -58,8 +58,8 @@ RSpec.describe 'User uploads file to note' do
       error_text = 'File is too big (0.06MiB). Max filesize: 0.01MiB.'
 
       expect(page).to have_selector('.uploading-error-message', visible: true, text: error_text)
-      expect(page).to have_selector('.retry-uploading-link', visible: true, text: 'Try again')
-      expect(page).to have_selector('.attach-new-file', visible: true, text: 'attach a new file')
+      expect(page).to have_button('Try again', visible: true)
+      expect(page).to have_button('attach a new file', visible: true)
       expect(page).not_to have_button('Attach a file')
     end
   end