Add latest changes from gitlab-org/gitlab@master

14 files changed, 155 insertions, 82 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 7c0c456daa1..d42e7d760b7 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -10,14 +10,16 @@ import {
   GlDropdownItem,
   GlTabs,
   GlTab,
+  GlBadge,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import { joinPaths, visitUrl } from '~/lib/utils/url_utility';
+import { fetchPolicies } from '~/lib/graphql';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-import getAlerts from '../graphql/queries/getAlerts.query.graphql';
+import getAlerts from '../graphql/queries/get_alerts.query.graphql';
+import getAlertsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
@@ -88,8 +90,8 @@ export default {
     GlIcon,
     GlTabs,
     GlTab,
+    GlBadge,
   },
-  mixins: [glFeatureFlagsMixin()],
   props: {
     projectPath: {
       type: String,
@@ -114,6 +116,7 @@ export default {
   },
   apollo: {
     alerts: {
+      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
       query: getAlerts,
       variables() {
         return {
@@ -122,12 +125,23 @@ export default {
         };
       },
       update(data) {
-        return data.project.alertManagementAlerts.nodes;
+        return data.project?.alertManagementAlerts?.nodes;
       },
       error() {
         this.errored = true;
       },
     },
+    alertsCount: {
+      query: getAlertsCountByStatus,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update(data) {
+        return data.project?.alertManagementAlertStatusCounts;
+      },
+    },
   },
   data() {
     return {
@@ -139,7 +153,9 @@ export default {
   },
   computed: {
     showNoAlertsMsg() {
-      return !this.errored && !this.loading && !this.alerts?.length && !this.isAlertDismissed;
+      return (
+        !this.errored && !this.loading && this.alertsCount?.all === 0 && !this.isAlertDismissed
+      );
     },
     showErrorMsg() {
       return this.errored && !this.isErrorAlertDismissed;
@@ -171,6 +187,7 @@ export default {
         })
         .then(() => {
           this.$apollo.queries.alerts.refetch();
+          this.$apollo.queries.alertsCount.refetch();
         })
         .catch(() => {
           createFlash(
@@ -196,10 +213,13 @@ export default {
         {{ $options.i18n.errorMsg }}
       </gl-alert>
 
-      <gl-tabs v-if="glFeatures.alertListStatusFilteringEnabled" @input="filterAlertsByStatus">
+      <gl-tabs @input="filterAlertsByStatus">
         <gl-tab v-for="tab in $options.statusTabs" :key="tab.status">
           <template slot="title">
             <span>{{ tab.title }}</span>
+            <gl-badge v-if="alertsCount" pill size="sm" class="gl-tab-counter-badge">
+              {{ alertsCount[tab.status.toLowerCase()] }}
+            </gl-badge>
           </template>
         </gl-tab>
       </gl-tabs>
diff --git a/app/assets/javascripts/alert_management/graphql/fragments/detailItem.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/detailItem.fragment.graphql
index df802616e97..95bc4d97516 100644
--- a/app/assets/javascripts/alert_management/graphql/fragments/detailItem.fragment.graphql
+++ b/app/assets/javascripts/alert_management/graphql/fragments/detailItem.fragment.graphql
@@ -1,4 +1,4 @@
-#import "./listItem.fragment.graphql"
+#import "./list_item.fragment.graphql"
 
 fragment AlertDetailItem on AlertManagementAlert {
   ...AlertListItem
diff --git a/app/assets/javascripts/alert_management/graphql/fragments/listItem.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql
index 22adfc9800c..22adfc9800c 100644
--- a/app/assets/javascripts/alert_management/graphql/fragments/listItem.fragment.graphql
+++ b/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql
diff --git a/app/assets/javascripts/alert_management/graphql/queries/getAlerts.query.graphql b/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql
index 54b66389d5b..294467d6bd1 100644
--- a/app/assets/javascripts/alert_management/graphql/queries/getAlerts.query.graphql
+++ b/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql
@@ -1,4 +1,4 @@
-#import "../fragments/listItem.fragment.graphql"
+#import "../fragments/list_item.fragment.graphql"
 
 query getAlerts($projectPath: ID!, $statuses: [AlertManagementStatus!]) {
   project(fullPath: $projectPath) {
diff --git a/app/assets/javascripts/alert_management/graphql/queries/get_count_by_status.query.graphql b/app/assets/javascripts/alert_management/graphql/queries/get_count_by_status.query.graphql
new file mode 100644
index 00000000000..1143050200c
--- /dev/null
+++ b/app/assets/javascripts/alert_management/graphql/queries/get_count_by_status.query.graphql
@@ -0,0 +1,11 @@
+query getAlertsCount($projectPath: ID!) {
+    project(fullPath: $projectPath) {
+        alertManagementAlertStatusCounts {
+            all
+            open
+            acknowledged
+            resolved
+            triggered
+        }
+    }
+}
diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
index 271f9f74838..c5375cbfbdc 100644
--- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
+++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
@@ -147,7 +147,7 @@ export default {
           )
         }}</span>
       </template>
-      <template slot="modal-footer">
+      <template #modal-footer>
         <gl-deprecated-button variant="secondary" @click="handleCancel">{{
           s__('Cancel')
         }}</gl-deprecated-button>
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 085dd34179e..d8d8cc450f2 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -507,9 +507,6 @@ export const cacheTreeListWidth = (_, size) => {
   localStorage.setItem(TREE_LIST_WIDTH_STORAGE_KEY, size);
 };
 
-export const requestFullDiff = ({ commit }, filePath) => commit(types.REQUEST_FULL_DIFF, filePath);
-export const receiveFullDiffSucess = ({ commit }, { filePath }) =>
-  commit(types.RECEIVE_FULL_DIFF_SUCCESS, { filePath });
 export const receiveFullDiffError = ({ commit }, filePath) => {
   commit(types.RECEIVE_FULL_DIFF_ERROR, filePath);
   createFlash(s__('MergeRequest|Error loading full diff. Please try again.'));
@@ -600,7 +597,7 @@ export const setExpandedDiffLines = ({ commit, state }, { file, data }) => {
   }
 };
 
-export const fetchFullDiff = ({ dispatch }, file) =>
+export const fetchFullDiff = ({ commit, dispatch }, file) =>
   axios
     .get(file.context_lines_path, {
       params: {
@@ -609,15 +606,16 @@ export const fetchFullDiff = ({ dispatch }, file) =>
       },
     })
     .then(({ data }) => {
-      dispatch('receiveFullDiffSucess', { filePath: file.file_path });
+      commit(types.RECEIVE_FULL_DIFF_SUCCESS, { filePath: file.file_path });
+
       dispatch('setExpandedDiffLines', { file, data });
     })
     .catch(() => dispatch('receiveFullDiffError', file.file_path));
 
-export const toggleFullDiff = ({ dispatch, getters, state }, filePath) => {
+export const toggleFullDiff = ({ dispatch, commit, getters, state }, filePath) => {
   const file = state.diffFiles.find(f => f.file_path === filePath);
 
-  dispatch('requestFullDiff', filePath);
+  commit(types.REQUEST_FULL_DIFF, filePath);
 
   if (file.isShowingFullFile) {
     dispatch('loadCollapsedDiff', file)
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 0a5538237f9..b8bcca814cd 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -158,13 +158,13 @@ export default {
       :deploy-boards-help-path="deployBoardsHelpPath"
       @onChangePage="onChangePage"
     >
-      <empty-state
-        v-if="!isLoading && state.environments.length === 0"
-        slot="emptyState"
-        :new-path="newEnvironmentPath"
-        :help-path="helpPagePath"
-        :can-create-environment="canCreateEnvironment"
-      />
+      <template v-if="!isLoading && state.environments.length === 0" #emptyState>
+        <empty-state
+          :new-path="newEnvironmentPath"
+          :help-path="helpPagePath"
+          :can-create-environment="canCreateEnvironment"
+        />
+      </template>
     </container>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
new file mode 100644
index 00000000000..966c36d6e71
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { otherSide } from '../utils';
+import { SIDE_RIGHT } from '../constants';
+
+export default {
+  directives: {
+    tooltip: GlTooltipDirective,
+  },
+  components: {
+    GlIcon,
+  },
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    side: {
+      type: String,
+      required: true,
+    },
+    currentView: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isOpen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    otherSide() {
+      return otherSide(this.side);
+    },
+  },
+  methods: {
+    isActiveTab(tab) {
+      return this.isOpen && tab.views.some(view => view.name === this.currentView);
+    },
+    buttonClasses(tab) {
+      return [
+        {
+          'is-right': this.side === SIDE_RIGHT,
+          active: this.isActiveTab(tab),
+        },
+        ...(tab.buttonClasses || []),
+      ];
+    },
+    clickTab(e, tab) {
+      e.currentTarget.blur();
+      this.$root.$emit('bv::hide::tooltip');
+
+      if (this.isActiveTab(tab)) {
+        this.$emit('close');
+      } else {
+        this.$emit('open', tab.views[0]);
+      }
+    },
+  },
+};
+</script>
+<template>
+  <nav class="ide-activity-bar">
+    <ul class="list-unstyled">
+      <li v-for="tab of tabs" :key="tab.title">
+        <button
+          v-tooltip="{ container: 'body', placement: otherSide }"
+          :title="tab.title"
+          :aria-label="tab.title"
+          :class="buttonClasses(tab)"
+          :data-qa-selector="`${tab.title.toLowerCase()}_tab_button`"
+          class="ide-sidebar-link"
+          type="button"
+          @click="clickTab($event, tab)"
+        >
+          <gl-icon :size="16" :name="tab.icon" />
+        </button>
+      </li>
+    </ul>
+  </nav>
+</template>
diff --git a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
index 91e80be7d18..2814844d157 100644
--- a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
+++ b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
@@ -3,7 +3,7 @@ import { mapActions, mapState } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import ResizablePanel from '../resizable_panel.vue';
-import { GlSkeletonLoading } from '@gitlab/ui';
+import IdeSidebarNav from '../ide_sidebar_nav.vue';
 
 export default {
   name: 'CollapsibleSidebar',
@@ -13,7 +13,7 @@ export default {
   components: {
     Icon,
     ResizablePanel,
-    GlSkeletonLoading,
+    IdeSidebarNav,
   },
   props: {
     extensionTabs: {
@@ -31,7 +31,6 @@ export default {
     },
   },
   computed: {
-    ...mapState(['loading']),
     ...mapState({
       isOpen(state) {
         return state[this.namespace].isOpen;
@@ -39,9 +38,6 @@ export default {
       currentView(state) {
         return state[this.namespace].currentView;
       },
-      isActiveView(state, getters) {
-        return getters[`${this.namespace}/isActiveView`];
-      },
       isAliveView(_state, getters) {
         return getters[`${this.namespace}/isAliveView`];
       },
@@ -59,9 +55,6 @@ export default {
     aliveTabViews() {
       return this.tabViews.filter(view => this.isAliveView(view.name));
     },
-    otherSide() {
-      return this.side === 'right' ? 'left' : 'right';
-    },
   },
   methods: {
     ...mapActions({
@@ -72,25 +65,6 @@ export default {
         return dispatch(`${this.namespace}/open`, view);
       },
     }),
-    clickTab(e, tab) {
-      e.target.blur();
-
-      if (this.isActiveTab(tab)) {
-        this.toggleOpen();
-      } else {
-        this.open(tab.views[0]);
-      }
-    },
-    isActiveTab(tab) {
-      return tab.views.some(view => this.isActiveView(view.name));
-    },
-    buttonClasses(tab) {
-      return [
-        this.side === 'right' ? 'is-right' : '',
-        this.isActiveTab(tab) && this.isOpen ? 'active' : '',
-        ...(tab.buttonClasses || []),
-      ];
-    },
   },
 };
 </script>
@@ -110,40 +84,23 @@ export default {
       class="multi-file-commit-panel-inner"
     >
       <div class="h-100 d-flex flex-column align-items-stretch">
-        <slot v-if="isOpen" name="header"></slot>
         <div
           v-for="tabView in aliveTabViews"
-          v-show="isActiveView(tabView.name)"
+          v-show="tabView.name === currentView"
           :key="tabView.name"
           class="flex-fill gl-overflow-hidden js-tab-view"
         >
           <component :is="tabView.component" />
         </div>
-        <slot name="footer"></slot>
       </div>
     </resizable-panel>
-    <nav class="ide-activity-bar">
-      <ul class="list-unstyled">
-        <li>
-          <slot name="header-icon"></slot>
-        </li>
-        <li v-for="tab of tabs" :key="tab.title">
-          <button
-            v-tooltip
-            :title="tab.title"
-            :aria-label="tab.title"
-            :class="buttonClasses(tab)"
-            data-container="body"
-            :data-placement="otherSide"
-            :data-qa-selector="`${tab.title.toLowerCase()}_tab_button`"
-            class="ide-sidebar-link"
-            type="button"
-            @click="clickTab($event, tab)"
-          >
-            <icon :size="16" :name="tab.icon" />
-          </button>
-        </li>
-      </ul>
-    </nav>
+    <ide-sidebar-nav
+      :tabs="tabs"
+      :side="side"
+      :current-view="currentView"
+      :is-open="isOpen"
+      @open="open"
+      @close="toggleOpen"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index a5a69841792..bc2cb3fdadc 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -92,3 +92,6 @@ export const commitActionTypes = {
 };
 
 export const packageJsonPath = 'package.json';
+
+export const SIDE_LEFT = 'left';
+export const SIDE_RIGHT = 'right';
diff --git a/app/assets/javascripts/ide/stores/modules/pane/getters.js b/app/assets/javascripts/ide/stores/modules/pane/getters.js
index c346cf13689..7816172bb6f 100644
--- a/app/assets/javascripts/ide/stores/modules/pane/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/pane/getters.js
@@ -1,4 +1,3 @@
-export const isActiveView = state => view => state.currentView === view;
-
-export const isAliveView = (state, getters) => view =>
-  state.keepAliveViews[view] || (state.isOpen && getters.isActiveView(view));
+// eslint-disable-next-line import/prefer-default-export
+export const isAliveView = state => view =>
+  state.keepAliveViews[view] || (state.isOpen && state.currentView === view);
diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js
index 9d14b7f7d48..7573bfd963c 100644
--- a/app/assets/javascripts/ide/utils.js
+++ b/app/assets/javascripts/ide/utils.js
@@ -1,3 +1,4 @@
+import { SIDE_LEFT, SIDE_RIGHT } from './constants';
 import { languages } from 'monaco-editor';
 import { flatten } from 'lodash';
 
@@ -73,3 +74,5 @@ export function registerLanguages(def, ...defs) {
   languages.setMonarchTokensProvider(languageId, def.language);
   languages.setLanguageConfiguration(languageId, def.conf);
 }
+
+export const otherSide = side => (side === SIDE_RIGHT ? SIDE_LEFT : SIDE_RIGHT);
diff --git a/app/controllers/projects/alert_management_controller.rb b/app/controllers/projects/alert_management_controller.rb
index 429ae7390c5..f425582da4d 100644
--- a/app/controllers/projects/alert_management_controller.rb
+++ b/app/controllers/projects/alert_management_controller.rb
@@ -3,7 +3,6 @@
 class Projects::AlertManagementController < Projects::ApplicationController
   before_action :authorize_read_alert_management_alert!
   before_action do
-    push_frontend_feature_flag(:alert_list_status_filtering_enabled)
     push_frontend_feature_flag(:alert_management_create_alert_issue)
     push_frontend_feature_flag(:alert_assignee, project)
   end