WIP: convert HAML buttons to Vue buttonsexperiement/convert-buttons-to-vue

Juts one view is affected in this commit as a PoC

2 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index d036ff07d89..102976145f1 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+import { GlButton } from '@gitlab/ui';
 import initAvatarPicker from '~/avatar_picker';
 import TransferDropdown from '~/groups/transfer_dropdown';
 import initConfirmDangerModal from '~/confirm_danger_modal';
@@ -23,3 +25,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
   projectSelect();
 });
+
+// eslint-disable-next-line no-new
+new Vue({
+  el: '#content-body',
+  components: {
+    GlButton,
+  },
+});
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 0c8f86c2822..0d6ee47e4a3 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -7,7 +7,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Naming, visibility')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %gl-button.js-settings-toggle{ type: 'button' }
       = _('Collapse')
     %p
       = _('Update your group name, description, avatar, and visibility.')
@@ -18,7 +18,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Permissions, LFS, 2FA')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %gl-button.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _('Advanced permissions, Large File Storage and Two-Factor authentication settings.')
@@ -31,8 +31,8 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = s_('GroupSettings|Badges')
-    %button.btn.js-settings-toggle{ type: 'button' }
-      = expanded ? 'Collapse' : 'Expand'
+    %gl-button.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
     %p
       = s_('GroupSettings|Customize your group badges.')
       = link_to s_('GroupSettings|Learn more about badges.'), help_page_path('user/project/badges')
@@ -46,7 +46,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Path, transfer, remove')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %gl-button.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _('Perform advanced options such as changing path, transferring, or removing the group.')