Replace DeprecatedModal with GlModal for boards

Review feedback

app/assets/javascripts/boards/components/board_form.vue

@@ -19,15 +19,16 @@ const boardDefaults = {
   hide_closed_list: false,
 };
 
+const newFormType = 'new';
+const deleteFormType = 'delete';
+const editFormType = 'edit';
+
 export default {
   i18n: {
-    createBoardButtonText: __('Create board'),
-    deleteBoardButtonText: __('Delete'),
-    saveButtonText: __('Save changes'),
-    createModalTitle: __('Create new board'),
-    deleteModalTitle: __('Delete board'),
+    [newFormType]: { title: __('Create new board'), btnText: __('Create board') },
+    [deleteFormType]: { title: __('Delete board'), btnText: __('Delete') },
+    [editFormType]: { title: __('Edit board'), btnText: __('Save changes') },
     scopeModalTitle: __('Board scope'),
-    editModalTitle: __('Edit board'),
     cancelButtonText: __('Cancel'),
     deleteErrorMessage: __('Failed to delete board. Please try again.'),
     saveErrorMessage: __('Unable to save your changes. Please try again.'),
@@ -89,22 +90,16 @@ export default {
   },
   computed: {
     isNewForm() {
-      return this.currentPage === 'new';
+      return this.currentPage === newFormType;
     },
     isDeleteForm() {
-      return this.currentPage === 'delete';
+      return this.currentPage === deleteFormType;
     },
     isEditForm() {
-      return this.currentPage === 'edit';
+      return this.currentPage === editFormType;
     },
     buttonText() {
-      if (this.isNewForm) {
-        return this.$options.i18n.createBoardButtonText;
-      }
-      if (this.isDeleteForm) {
-        return this.$options.i18n.deleteBoardButtonText;
-      }
-      return this.$options.i18n.saveButtonText;
+      return this.$options.i18n[this.currentPage].btnText;
     },
     buttonKind() {
       if (this.isNewForm) {
@@ -116,16 +111,11 @@ export default {
       return 'info';
     },
     title() {
-      if (this.isNewForm) {
-        return this.$options.i18n.createModalTitle;
-      }
-      if (this.isDeleteForm) {
-        return this.$options.i18n.deleteModalTitle;
-      }
       if (this.readonly) {
         return this.$options.i18n.scopeModalTitle;
       }
-      return this.$options.i18n.editModalTitle;
+
+      return this.$options.i18n[this.currentPage].title;
     },
     readonly() {
       return !this.canAdminBoard;
@@ -136,7 +126,13 @@ export default {
     primaryProps() {
       return {
         text: this.buttonText,
-        attributes: [{ variant: this.buttonKind, disabled: this.submitDisabled }],
+        attributes: [
+          {
+            variant: this.buttonKind,
+            disabled: this.submitDisabled,
+            'data-qa-selector': 'save_changes_button',
+          },
+        ],
       };
     },
     cancelProps() {
@@ -207,6 +203,7 @@ export default {
   <gl-modal
     modal-id="board-config-modal"
     modal-class="board-config-modal"
+    content-class="gl-absolute gl-top-7"
     visible
     :hide-footer="readonly"
     :title="title"
@@ -215,6 +212,7 @@ export default {
     @primary="submit"
     @cancel="cancel"
     @close="cancel"
+    @hide.prevent
   >
     <p v-if="isDeleteForm">{{ $options.i18n.deleteConfirmationMessage }}</p>
     <form v-else class="js-board-config-modal" @submit.prevent>

app/assets/stylesheets/framework/modal.scss

@@ -91,6 +91,7 @@
 
 body.modal-open {
   overflow: hidden;
+  padding-right: 0 !important;
 }
 
 .modal-no-backdrop {

ee/spec/features/boards/scoped_issue_board_spec.rb

@@ -543,7 +543,7 @@ RSpec.describe 'Scoped issue boards', :js do
 
     click_on_board_modal
 
-    click_button 'Create'
+    click_button 'Create board'
 
     wait_for_requests
 
@@ -572,7 +572,7 @@ RSpec.describe 'Scoped issue boards', :js do
 
     click_on_board_modal
 
-    click_button 'Save'
+    click_button 'Save changes'
 
     wait_for_requests
 
@@ -582,6 +582,6 @@ RSpec.describe 'Scoped issue boards', :js do
   # Click on modal to make sure the dropdown is closed (e.g. label scenario)
   #
   def click_on_board_modal
-    find('.board-config-modal').click
+    find('.board-config-modal .modal-content').click
   end
 end