Update change username to gl-modal

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44325

app/assets/javascripts/profile/account/components/update_username.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
-import { GlButton } from '@gitlab/ui';
+import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 
 export default {
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
     GlButton,
   },
+  directives: {
+    GlModalDirective,
+    SafeHtml,
+  },
   props: {
     actionUrl: {
       type: String,
@@ -54,6 +56,21 @@ Please update your Git repository remotes as soon as possible.`),
         false,
       );
     },
+    primaryProps() {
+      return {
+        text: s__('Update username'),
+        attributes: [
+          { variant: 'warning' },
+          { category: 'primary' },
+          { disabled: this.isRequestPending },
+        ],
+      };
+    },
+    cancelProps() {
+      return {
+        text: s__('Cancel'),
+      };
+    },
   },
   methods: {
     onConfirm() {
@@ -103,22 +120,21 @@ Please update your Git repository remotes as soon as possible.`),
       <p class="form-text text-muted">{{ path }}</p>
     </div>
     <gl-button
-      :data-target="`#${$options.modalId}`"
+      v-gl-modal-directive="$options.modalId"
       :disabled="isRequestPending || newUsername === username"
       category="primary"
       variant="warning"
-      data-toggle="modal"
+      data-testid="username-change-confirmation-modal"
+      >{{ $options.buttonText }}</gl-button
     >
-      {{ $options.buttonText }}
-    </gl-button>
     <gl-modal
-      :id="$options.modalId"
-      :header-title-text="s__('Profiles|Change username') + '?'"
-      :footer-primary-button-text="$options.buttonText"
-      footer-primary-button-variant="warning"
-      @submit="onConfirm"
+      :modal-id="$options.modalId"
+      :title="s__('Profiles|Change username') + '?'"
+      :action-primary="primaryProps"
+      :action-cancel="cancelProps"
+      @primary="onConfirm"
     >
-      <span v-html="modalText"></span>
+      <span v-safe-html="modalText"></span>
     </gl-modal>
   </div>
 </template>

changelogs/unreleased/229674-update-change-username-modal.yml

+---
+title: Update change username modal
+merge_request: 44325
+author:
+type: changed

locale/gitlab.pot

@@ -28386,6 +28386,9 @@ msgstr ""
 msgid "Update now"
 msgstr ""
 
+msgid "Update username"
+msgstr ""
+
 msgid "Update variable"
 msgstr ""
 

spec/features/profile_spec.rb

@@ -101,10 +101,10 @@ RSpec.describe 'Profile account page', :js do
     it 'changes my username' do
       fill_in 'username-change-input', with: 'new-username'
 
-      page.find('[data-target="#username-change-confirmation-modal"]').click
+      page.find('[data-testid="username-change-confirmation-modal"]').click
 
       page.within('.modal') do
-        find('.js-modal-primary-action').click
+        find('.js-modal-action-primary').click
       end
 
       expect(page).to have_content('new-username')

spec/features/profiles/account_spec.rb

@@ -128,10 +128,10 @@ def update_username(new_username)
 
   fill_in 'username-change-input', with: new_username
 
-  page.find('[data-target="#username-change-confirmation-modal"]').click
+  page.find('[data-testid="username-change-confirmation-modal"]').click
 
   page.within('.modal') do
-    find('.js-modal-primary-action').click
+    find('.js-modal-action-primary').click
   end
 
   wait_for_requests

spec/frontend/profile/account/components/update_username_spec.js

-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
-import mountComponent from 'helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 
-import updateUsername from '~/profile/account/components/update_username.vue';
+import UpdateUsername from '~/profile/account/components/update_username.vue';
 
 describe('UpdateUsername component', () => {
   const rootUrl = TEST_HOST;
   const actionUrl = `${TEST_HOST}/update/username`;
-  const username = 'hasnoname';
-  const newUsername = 'new_username';
-  let Component;
-  let vm;
+  const defaultProps = {
+    actionUrl,
+    rootUrl,
+    initialUsername: 'hasnoname',
+  };
+  let wrapper;
   let axiosMock;
 
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(UpdateUsername, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      stubs: {
+        GlModal,
+      },
+    });
+  };
+
   beforeEach(() => {
     axiosMock = new MockAdapter(axios);
-    Component = Vue.extend(updateUsername);
-    vm = mountComponent(Component, {
-      actionUrl,
-      rootUrl,
-      initialUsername: username,
-    });
+    createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
     axiosMock.restore();
   });
 
   const findElements = () => {
-    const modalSelector = `#${vm.$options.modalId}`;
+    const modal = wrapper.find(GlModal);
 
     return {
-      input: vm.$el.querySelector(`#${vm.$options.inputId}`),
-      openModalBtn: vm.$el.querySelector(`[data-target="${modalSelector}"]`),
-      modal: vm.$el.querySelector(modalSelector),
-      modalBody: vm.$el.querySelector(`${modalSelector} .modal-body`),
-      modalHeader: vm.$el.querySelector(`${modalSelector} .modal-title`),
-      confirmModalBtn: vm.$el.querySelector(`${modalSelector} .btn-warning`),
+      modal,
+      input: wrapper.find(`#${wrapper.vm.$options.inputId}`),
+      openModalBtn: wrapper.find('[data-testid="username-change-confirmation-modal"]'),
+      modalBody: modal.find('.modal-body'),
+      modalHeader: modal.find('.modal-title'),
+      confirmModalBtn: wrapper.find('.btn-warning'),
     };
   };
 
-  it('has a disabled button if the username was not changed', done => {
-    const { input, openModalBtn } = findElements();
-    input.dispatchEvent(new Event('input'));
-
-    Vue.nextTick()
-      .then(() => {
-        expect(vm.username).toBe(username);
-        expect(vm.newUsername).toBe(username);
-        expect(openModalBtn).toBeDisabled();
-      })
-      .then(done)
-      .catch(done.fail);
+  it('has a disabled button if the username was not changed', async () => {
+    const { openModalBtn } = findElements();
+
+    await wrapper.vm.$nextTick();
+
+    expect(openModalBtn.props('disabled')).toBe(true);
   });
 
-  it('has an enabled button which if the username was changed', done => {
+  it('has an enabled button which if the username was changed', async () => {
     const { input, openModalBtn } = findElements();
-    input.value = newUsername;
-    input.dispatchEvent(new Event('input'));
-
-    Vue.nextTick()
-      .then(() => {
-        expect(vm.username).toBe(username);
-        expect(vm.newUsername).toBe(newUsername);
-        expect(openModalBtn).not.toBeDisabled();
-      })
-      .then(done)
-      .catch(done.fail);
-  });
 
-  it('confirmation modal contains proper header and body', done => {
-    const { modalBody, modalHeader } = findElements();
+    input.element.value = 'newUsername';
+    input.trigger('input');
 
-    vm.newUsername = newUsername;
+    await wrapper.vm.$nextTick();
 
-    Vue.nextTick()
-      .then(() => {
-        expect(modalHeader.textContent).toContain('Change username?');
-        expect(modalBody.textContent).toContain(
-          `You are going to change the username ${username} to ${newUsername}`,
-        );
-      })
-      .then(done)
-      .catch(done.fail);
+    expect(openModalBtn.props('disabled')).toBe(false);
   });
 
-  it('confirmation modal should escape usernames properly', done => {
-    const { modalBody } = findElements();
+  describe('changing username', () => {
+    const newUsername = 'new_username';
 
-    vm.username = '<i>Italic</i>';
-    vm.newUsername = vm.username;
+    beforeEach(async () => {
+      createComponent();
+      wrapper.setData({ newUsername });
 
-    Vue.nextTick()
-      .then(() => {
-        expect(modalBody.innerHTML).toContain('&lt;i&gt;Italic&lt;/i&gt;');
-        expect(modalBody.innerHTML).not.toContain(vm.username);
-      })
-      .then(done)
-      .catch(done.fail);
+      await wrapper.vm.$nextTick();
     });
 
-  it('executes API call on confirmation button click', done => {
-    const { confirmModalBtn } = findElements();
+    it('confirmation modal contains proper header and body', async () => {
+      const { modal } = findElements();
 
+      expect(modal.attributes('title')).toBe('Change username?');
+      expect(modal.text()).toContain(
+        `You are going to change the username ${defaultProps.initialUsername} to ${newUsername}`,
+      );
+    });
+
+    it('executes API call on confirmation button click', async () => {
       axiosMock.onPut(actionUrl).replyOnce(() => [200, { message: 'Username changed' }]);
       jest.spyOn(axios, 'put');
 
-    vm.newUsername = newUsername;
-
-    Vue.nextTick()
-      .then(() => {
-        confirmModalBtn.click();
+      await wrapper.vm.onConfirm();
+      await wrapper.vm.$nextTick();
 
       expect(axios.put).toHaveBeenCalledWith(actionUrl, { user: { username: newUsername } });
-      })
-      .then(done)
-      .catch(done.fail);
     });
 
-  it('sets the username after a successful update', done => {
+    it('sets the username after a successful update', async () => {
       const { input, openModalBtn } = findElements();
 
       axiosMock.onPut(actionUrl).replyOnce(() => {
-      expect(input).toBeDisabled();
-      expect(openModalBtn).toBeDisabled();
+        expect(input.attributes('disabled')).toBe('disabled');
+        expect(openModalBtn.props('disabled')).toBe(true);
 
         return [200, { message: 'Username changed' }];
       });
 
-    vm.newUsername = newUsername;
-
-    vm.onConfirm()
-      .then(() => {
-        expect(vm.username).toBe(newUsername);
-        expect(vm.newUsername).toBe(newUsername);
-        expect(input).not.toBeDisabled();
-        expect(input.value).toBe(newUsername);
-        expect(openModalBtn).toBeDisabled();
-      })
-      .then(done)
-      .catch(done.fail);
+      await wrapper.vm.onConfirm();
+      await wrapper.vm.$nextTick();
+
+      expect(input.attributes('disabled')).toBe(undefined);
+      expect(openModalBtn.props('disabled')).toBe(true);
     });
 
-  it('does not set the username after a erroneous update', done => {
+    it('does not set the username after a erroneous update', async () => {
       const { input, openModalBtn } = findElements();
 
       axiosMock.onPut(actionUrl).replyOnce(() => {
-      expect(input).toBeDisabled();
-      expect(openModalBtn).toBeDisabled();
+        expect(input.attributes('disabled')).toBe('disabled');
+        expect(openModalBtn.props('disabled')).toBe(true);
 
         return [400, { message: 'Invalid username' }];
       });
 
-    const invalidUsername = 'anything.git';
-    vm.newUsername = invalidUsername;
-
-    vm.onConfirm()
-      .then(() => done.fail('Expected onConfirm to throw!'))
-      .catch(() => {
-        expect(vm.username).toBe(username);
-        expect(vm.newUsername).toBe(invalidUsername);
-        expect(input).not.toBeDisabled();
-        expect(input.value).toBe(invalidUsername);
-        expect(openModalBtn).not.toBeDisabled();
-      })
-      .then(done)
-      .catch(done.fail);
+      await expect(wrapper.vm.onConfirm()).rejects.toThrow();
+      expect(input.attributes('disabled')).toBe(undefined);
+      expect(openModalBtn.props('disabled')).toBe(false);
+    });
   });
 });