Add latest changes from gitlab-org/gitlab@master

14 files changed, 132 insertions, 61 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index c734da80f48..f8fb58cdca2 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -201,7 +201,13 @@ export default {
   <section v-else>
     <ancestor-notice />
 
-    <gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
+    <gl-table
+      :items="clusters"
+      :fields="fields"
+      stacked="md"
+      class="qa-clusters-table"
+      data-testid="cluster_list_table"
+    >
       <template #cell(name)="{ item }">
         <div :class="[contentAlignClasses, 'js-status']">
           <img
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index dd5addbf1e3..085f951147f 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -474,7 +474,7 @@ export default {
         <div
           v-if="showTreeList"
           :style="{ width: `${treeWidth}px` }"
-          class="diff-tree-list js-diff-tree-list mr-3"
+          class="diff-tree-list js-diff-tree-list px-3 pr-md-0"
         >
           <panel-resizer
             :size.sync="treeWidth"
@@ -487,7 +487,7 @@ export default {
           <tree-list :hide-file-stats="hideFileStats" />
         </div>
         <div
-          class="diff-files-holder"
+          class="col-12 col-md-auto diff-files-holder"
           :class="{
             [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
           }"
diff --git a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
index dded3643115..270bbfb99b7 100644
--- a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
+++ b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
@@ -50,7 +50,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="!isDismissed" data-testid="root" :class="containerClasses">
+  <div v-if="!isDismissed" data-testid="root" :class="containerClasses" class="col-12">
     <gl-alert
       :dismissible="true"
       :title="__('Some changes are not shown')"
diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue
index 8c7192b49a0..d2a613bed4f 100644
--- a/app/assets/javascripts/groups/components/group_folder.vue
+++ b/app/assets/javascripts/groups/components/group_folder.vue
@@ -1,8 +1,12 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import { n__ } from '../../locale';
 import { MAX_CHILDREN_COUNT } from '../constants';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     parentGroup: {
       type: Object,
@@ -45,7 +49,7 @@ export default {
     />
     <li v-if="hasMoreChildren" class="group-row">
       <a :href="parentGroup.relativePath" class="group-row-contents has-more-items py-2">
-        <i class="fa fa-external-link" aria-hidden="true"> </i> {{ moreChildrenStats }}
+        <gl-icon name="external-link" aria-hidden="true" /> {{ moreChildrenStats }}
       </a>
     </li>
   </ul>
diff --git a/app/assets/javascripts/pages/projects/commit/pipelines/index.js b/app/assets/javascripts/pages/projects/commit/pipelines/index.js
index 1415a6f60c8..26dea17ca8a 100644
--- a/app/assets/javascripts/pages/projects/commit/pipelines/index.js
+++ b/app/assets/javascripts/pages/projects/commit/pipelines/index.js
@@ -1,14 +1,8 @@
-import $ from 'jquery';
-import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
+import { initCommitBoxInfo } from '~/projects/commit_box/info';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
-import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new MiniPipelineGraph({
-    container: '.js-commit-pipeline-graph',
-  }).bindEvents();
-  // eslint-disable-next-line no-jquery/no-load
-  $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
-  fetchCommitMergeRequests();
+  initCommitBoxInfo();
+
   initPipelines();
 });
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index d5fb2a8be3c..32fb35f97e3 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -4,10 +4,8 @@ import $ from 'jquery';
 import Diff from '~/diff';
 import ZenMode from '~/zen_mode';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
 import initNotes from '~/init_notes';
 import initChangesDropdown from '~/init_changes_dropdown';
-import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 import '~/sourcegraph/load';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
@@ -15,6 +13,7 @@ import syntaxHighlight from '~/syntax_highlight';
 import flash from '~/flash';
 import { __ } from '~/locale';
 import loadAwardsHandler from '~/awards_handler';
+import { initCommitBoxInfo } from '~/projects/commit_box/info';
 
 document.addEventListener('DOMContentLoaded', () => {
   const hasPerfBar = document.querySelector('.with-performance-bar');
@@ -22,13 +21,10 @@ document.addEventListener('DOMContentLoaded', () => {
   initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
   new ZenMode();
   new ShortcutsNavigation();
-  new MiniPipelineGraph({
-    container: '.js-commit-pipeline-graph',
-  }).bindEvents();
+
+  initCommitBoxInfo();
+
   initNotes();
-  // eslint-disable-next-line no-jquery/no-load
-  $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
-  fetchCommitMergeRequests();
 
   const filesContainer = $('.js-diffs-batch');
 
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) {
diff --git a/app/assets/javascripts/projects/commit_box/info/index.js b/app/assets/javascripts/projects/commit_box/info/index.js
new file mode 100644
index 00000000000..352ac39f3c4
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/index.js
@@ -0,0 +1,18 @@
+import { loadBranches } from './load_branches';
+import { fetchCommitMergeRequests } from '~/commit_merge_requests';
+import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
+
+export const initCommitBoxInfo = (containerSelector = '.js-commit-box-info') => {
+  const containerEl = document.querySelector(containerSelector);
+
+  // Display commit related branches
+  loadBranches(containerEl);
+
+  // Related merge requests to this commit
+  fetchCommitMergeRequests();
+
+  // Display pipeline info for this commit
+  new MiniPipelineGraph({
+    container: '.js-commit-pipeline-graph',
+  }).bindEvents();
+};
diff --git a/app/assets/javascripts/projects/commit_box/info/load_branches.js b/app/assets/javascripts/projects/commit_box/info/load_branches.js
new file mode 100644
index 00000000000..0efa1998507
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/load_branches.js
@@ -0,0 +1,20 @@
+import axios from 'axios';
+import { sanitize } from '~/lib/dompurify';
+import { __ } from '~/locale';
+
+export const loadBranches = containerEl => {
+  if (!containerEl) {
+    return;
+  }
+
+  const { commitPath } = containerEl.dataset;
+  const branchesEl = containerEl.querySelector('.commit-info.branches');
+  axios
+    .get(commitPath)
+    .then(({ data }) => {
+      branchesEl.innerHTML = sanitize(data);
+    })
+    .catch(() => {
+      branchesEl.textContent = __('Failed to load branches. Please try again.');
+    });
+};
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 86bfacbfb9e..46d51138ccf 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as Flash } from '~/flash';
@@ -8,7 +8,7 @@ import eventHub from '../../event_hub';
 
 export default {
   components: {
-    GlLoadingIcon,
+    GlButton,
   },
   props: {
     fullPath: {
@@ -64,18 +64,18 @@ export default {
 
 <template>
   <div class="sidebar-item-warning-message-actions">
-    <button type="button" class="btn btn-default gl-mr-3" @click="closeForm">
+    <gl-button class="gl-mr-3" @click="closeForm">
       {{ __('Cancel') }}
-    </button>
-    <button
-      type="button"
-      class="btn btn-close"
-      data-testid="confidential-toggle"
+    </gl-button>
+    <gl-button
+      category="secondary"
+      variant="warning"
       :disabled="isLoading"
+      :loading="isLoading"
+      data-testid="confidential-toggle"
       @click.prevent="submitForm"
     >
-      <gl-loading-icon v-if="isLoading" inline />
       {{ toggleButtonText }}
-    </button>
+    </gl-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 240bab58297..835f7b9e9a9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -1,12 +1,9 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
 import { GlIcon, GlButton, GlSprintf, GlLink } from '@gitlab/ui';
-import successSvg from 'icons/_icon_status_success.svg';
-import warningSvg from 'icons/_icon_status_warning.svg';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
 import simplePoll from '~/lib/utils/simple_poll';
-import { __, sprintf } from '~/locale';
+import { __ } from '~/locale';
 import MergeRequest from '../../../merge_request';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { deprecatedCreateFlash as Flash } from '../../../flash';
@@ -59,8 +56,6 @@ export default {
       commitMessage: this.mr.commitMessage,
       squashBeforeMerge: this.mr.squashIsSelected,
       isSquashReadOnly: this.mr.squashIsReadonly,
-      successSvg,
-      warningSvg,
       squashCommitMessage: this.mr.squashCommitMessage,
     };
   },
@@ -147,16 +142,7 @@ export default {
       return !this.mr.ffOnlyEnabled;
     },
     shaMismatchLink() {
-      const href = this.mr.mergeRequestDiffsPath;
-
-      return sprintf(
-        __('New changes were added. %{linkStart}Reload the page to review them%{linkEnd}'),
-        {
-          linkStart: `<a href="${href}">`,
-          linkEnd: '</a>',
-        },
-        false,
-      );
+      return this.mr.mergeRequestDiffsPath;
     },
   },
   methods: {
@@ -331,7 +317,7 @@ export default {
                   @click.prevent="handleMergeButtonClick(true)"
                 >
                   <span class="media">
-                    <span class="merge-opt-icon" aria-hidden="true" v-html="successSvg"></span>
+                    <gl-icon name="status_success" class="merge-opt-icon" aria-hidden="true" />
                     <span class="media-body merge-opt-title">{{ autoMergeText }}</span>
                   </span>
                 </a>
@@ -349,7 +335,7 @@ export default {
                   @click.prevent="handleMergeImmediatelyButtonClick"
                 >
                   <span class="media">
-                    <span class="merge-opt-icon" aria-hidden="true" v-html="warningSvg"></span>
+                    <gl-icon name="status_warning" class="merge-opt-icon" aria-hidden="true" />
                     <span class="media-body merge-opt-title">{{ __('Merge immediately') }}</span>
                   </span>
                 </a>
@@ -400,7 +386,17 @@ export default {
         </div>
         <div v-if="mr.isSHAMismatch" class="d-flex align-items-center mt-2 js-sha-mismatch">
           <gl-icon name="warning-solid" class="text-warning mr-1" />
-          <span class="text-warning" v-html="shaMismatchLink"></span>
+          <span class="text-warning">
+            <gl-sprintf
+              :message="
+                __('New changes were added. %{linkStart}Reload the page to review them%{linkEnd}')
+              "
+            >
+              <template #link="{ content }">
+                <gl-link :href="mr.mergeRequestDiffsPath">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </span>
         </div>
       </div>
     </div>
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
index 4cab61a8e39..b884a6ea9fb 100644
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ b/app/assets/stylesheets/fontawesome_custom.scss
@@ -257,6 +257,38 @@
   content: '\f127';
 }
 
+.fa-file-pdf-o::before {
+  content: '\f1c1';
+}
+
+.fa-file-word-o::before {
+  content: '\f1c2';
+}
+
+.fa-file-excel-o::before {
+  content: '\f1c3';
+}
+
+.fa-file-powerpoint-o::before {
+  content: '\f1c4';
+}
+
+.fa-file-image-o::before {
+  content: '\f1c5';
+}
+
+.fa-file-archive-o::before {
+  content: '\f1c6';
+}
+
+.fa-file-audio-o::before {
+  content: '\f1c7';
+}
+
+.fa-file-video-o::before {
+  content: '\f1c8';
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index 316066694a8..4aa6b2492a2 100644
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -127,9 +127,4 @@
       @include gl-w-full;
     }
   }
-
-  // TODO: Abstract to `@gitlab/ui` utility set: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/921
-  .gl-fill-green-500 {
-    fill: $green-500;
-  }
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8aaeb92eb7a..ddec04b1b0c 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -770,8 +770,6 @@ $mr-widget-min-height: 69px;
     position: -webkit-sticky;
     position: sticky;
     top: $header-height + $mr-tabs-height;
-    margin-left: -16px;
-    width: calc(100% + 32px);
 
     .mr-version-menus-container {
       flex-wrap: nowrap;
@@ -868,6 +866,13 @@ $mr-widget-min-height: 69px;
   }
 }
 
+.container-fluid {
+  // Negative margins for mobile/tablet screen
+  .diffs.tab-pane {
+    margin: 0 (-$gl-padding);
+  }
+}
+
 // Wrap MR tabs/buttons so you don't have to scroll on desktop
 @include media-breakpoint-down(md) {
   .merge-request-tabs-container,