Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

3 files changed, 18 insertions, 7 deletions

diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index 4aaa2cff2ac..200e5ba255f 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -1,6 +1,7 @@
 <script>
 /* eslint-disable vue/no-v-html */
 import { escape } from 'lodash';
+import { GlButton } 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';
@@ -9,6 +10,7 @@ import { deprecatedCreateFlash as Flash } from '~/flash';
 export default {
   components: {
     GlModal: DeprecatedModal2,
+    GlButton,
   },
   props: {
     actionUrl: {
@@ -100,15 +102,15 @@ Please update your Git repository remotes as soon as possible.`),
       </div>
       <p class="form-text text-muted">{{ path }}</p>
     </div>
-    <button
+    <gl-button
       :data-target="`#${$options.modalId}`"
       :disabled="isRequestPending || newUsername === username"
-      class="btn btn-warning"
-      type="button"
+      category="primary"
+      variant="warning"
       data-toggle="modal"
     >
       {{ $options.buttonText }}
-    </button>
+    </gl-button>
     <gl-modal
       :id="$options.modalId"
       :header-title-text="s__('Profiles|Change username') + '?'"
diff --git a/app/assets/javascripts/profile/gl_crop.js b/app/assets/javascripts/profile/gl_crop.js
index 55bc9fb8955..ecb69422287 100644
--- a/app/assets/javascripts/profile/gl_crop.js
+++ b/app/assets/javascripts/profile/gl_crop.js
@@ -3,6 +3,7 @@
 import $ from 'jquery';
 import 'cropper';
 import { isString } from 'lodash';
+import { loadCSSFile } from '../lib/utils/css_utils';
 
 (() => {
   // Matches everything but the file name
@@ -180,6 +181,9 @@ import { isString } from 'lodash';
     }
   }
 
+  const cropModal = document.querySelector('.modal-profile-crop');
+  if (cropModal) loadCSSFile(cropModal.dataset.cropperCssPath);
+
   $.fn.glCrop = function(opts) {
     return this.each(function() {
       return $(this).data('glcrop', new GitLabCrop(this, opts));
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index 6822fa8f7c7..4755a4aa9ba 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
+import { Rails } from '~/lib/utils/rails_ujs';
 import { deprecatedCreateFlash as flash } from '../flash';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import TimezoneDropdown, {
@@ -48,9 +49,13 @@ export default class Profile {
   }
 
   submitForm() {
-    return $(this)
-      .parents('form')
-      .submit();
+    const $form = $(this).parents('form');
+
+    if ($form.data('remote')) {
+      Rails.fire($form[0], 'submit');
+    } else {
+      $form.submit();
+    }
   }
 
   onSubmitForm(e) {