Improve design consistency of buttons in some modals

The modal-ok and modal-cancel slots are deprecated in favor of props.
These props have better focus indicators and other improvements over
the buttons created for those old slots.

Changelog: fixed

app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue

 <script>
-import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
+import { GlAlert, GlModal } from '@gitlab/ui';
 import { mapActions, mapGetters } from 'vuex';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import DuplicateDashboardForm from './duplicate_dashboard_form.vue';
 const events = {
@@ -9,7 +9,7 @@ const events = {
 };
 export default {
-  components: { GlAlert, GlLoadingIcon, GlModal, DuplicateDashboardForm },
+  components: { GlAlert, GlModal, DuplicateDashboardForm },
   props: {
     defaultBranch: {
       type: String,
@@ -32,6 +32,20 @@ export default {
     okButtonText() {
       return this.loading ? s__('Metrics|Duplicating...') : s__('Metrics|Duplicate');
     },
+    actionPrimaryProps() {
+      return {
+        text: this.okButtonText,
+        attributes: {
+          loading: this.loading,
+          variant: 'confirm',
+        },
+      };
+    },
+    actionCancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
   },
   methods: {
     ...mapActions('monitoringDashboard', ['duplicateSystemDashboard']),
@@ -75,7 +89,8 @@ export default {
     ref="duplicateDashboardModal"
     :modal-id="modalId"
     :title="s__('Metrics|Duplicate dashboard')"
-    ok-variant="success"
+    :action-primary="actionPrimaryProps"
+    :action-cancel="actionCancelProps"
     @ok="ok"
     @hide="hide"
   >
@@ -87,9 +102,5 @@ export default {
       :default-branch="defaultBranch"
       @change="formChange"
     />
-    <template #modal-ok>
-      <gl-loading-icon v-if="loading" size="sm" inline color="light" />
-      {{ okButtonText }}
-    </template>
   </gl-modal>
 </template>

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue

 <script>
 import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
@@ -42,12 +42,22 @@ export default {
     isListEmpty() {
       return !this.list || this.list.length === 0;
     },
-    modalAction() {
-      return s__('PackageRegistry|Delete package');
-    },
     deletePackageName() {
       return this.itemToBeDeleted?.name ?? '';
     },
+    deleteModalActionPrimaryProps() {
+      return {
+        text: this.$options.i18n.modalAction,
+        attributes: {
+          variant: 'danger',
+        },
+      };
+    },
+    deleteModalActionCancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
     tracking() {
       return {
         category: TRACK_CATEGORY,
@@ -74,6 +84,7 @@ export default {
     deleteModalContent: s__(
       'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?',
     ),
+    modalAction: s__('PackageRegistry|Delete package'),
   },
 };
 </script>
@@ -110,12 +121,12 @@ export default {
         ref="packageListDeleteModal"
         size="sm"
         modal-id="confirm-delete-pacakge"
-        ok-variant="danger"
+        :action-primary="deleteModalActionPrimaryProps"
+        :action-cancel="deleteModalActionCancelProps"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
       >
-        <template #modal-title>{{ modalAction }}</template>
-        <template #modal-ok>{{ modalAction }}</template>
+        <template #modal-title>{{ $options.i18n.modalAction }}</template>
         <gl-sprintf :message="$options.i18n.deleteModalContent">
           <template #name>
             <strong>{{ deletePackageName }}</strong>

app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue

 <script>
 import { GlAlert, GlModal, GlSprintf, GlKeysetPagination } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
 import {
@@ -73,6 +73,19 @@ export default {
         }
       },
     },
+    deleteModalActionPrimaryProps() {
+      return {
+        text: this.$options.i18n.modalAction,
+        attributes: {
+          variant: 'danger',
+        },
+      };
+    },
+    deleteModalActionCancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
     errorTitleAlert() {
       return sprintf(
         s__('PackageRegistry|There was an error publishing a %{packageName} package'),
@@ -161,12 +174,12 @@ export default {
         v-model="showDeleteModal"
         modal-id="confirm-delete-pacakge"
         size="sm"
-        ok-variant="danger"
+        :action-primary="deleteModalActionPrimaryProps"
+        :action-cancel="deleteModalActionCancelProps"
         @ok="deleteItemConfirmation"
         @cancel="deleteItemCanceled"
       >
         <template #modal-title>{{ $options.i18n.modalAction }}</template>
-        <template #modal-ok>{{ $options.i18n.modalAction }}</template>
         <gl-sprintf :message="$options.i18n.deleteModalContent">
           <template #name>
             <strong>{{ deletePackageName }}</strong>

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue

 <script>
-import { GlLoadingIcon, GlModal } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
+import { __ } from '~/locale';
 export default {
   components: {
-    GlLoadingIcon,
     GlModal,
   },
   props: {
@@ -27,6 +27,22 @@ export default {
       approvalPassword: '',
     };
   },
+  computed: {
+    actionPrimaryProps() {
+      return {
+        text: __('Approve'),
+        attributes: {
+          loading: this.isApproving,
+          variant: 'confirm',
+        },
+      };
+    },
+    actionCancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+  },
   methods: {
     approve(event) {
       event.preventDefault();
@@ -44,11 +60,13 @@ export default {
   },
 };
 </script>
+
 <template>
   <gl-modal
     :modal-id="modalId"
-    :ok-disabled="isApproving"
     :title="__('Enter your password to approve')"
+    :action-primary="actionPrimaryProps"
+    :action-cancel="actionCancelProps"
     modal-class="js-mr-approvals-modal"
     @ok="approve"
     @hide="onHide"
@@ -81,12 +99,5 @@ export default {
         <span class="gl-field-error">{{ s__('mrWidget|Approval password is invalid.') }}</span>
       </div>
     </form>
-
-    <template #modal-cancel>{{ __('Cancel') }}</template>
-
-    <template #modal-ok>
-      <gl-loading-icon v-if="isApproving" size="sm" inline />
-      {{ __('Approve') }}
-    </template>
   </gl-modal>
 </template>

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_auth_spec.js

@@ -29,13 +29,13 @@ describe('Approval auth component', () => {
     });
     it('password input control is rendered', () => {
-      expect(wrapper.find('input').exists()).toBe(true);
+      expect(findInput().exists()).toBe(true);
     });
     it('does not disable approve button', () => {
-      const attrs = wrapper.attributes();
-
-      expect(attrs['ok-disabled']).toBeUndefined();
+      expect(wrapper.findComponent(GlModal).props('actionPrimary')).toMatchObject({
+        attributes: { loading: false },
+      });
     });
     it('does not show error message', () => {
@@ -66,9 +66,9 @@ describe('Approval auth component', () => {
     });
     it('disables the approve button', () => {
-      const attrs = wrapper.attributes();
-
-      expect(attrs['ok-disabled']).toEqual('true');
+      expect(wrapper.findComponent(GlModal).props('actionPrimary')).toMatchObject({
+        attributes: { loading: true },
+      });
     });
   });