Add latest changes from gitlab-org/gitlab@12-6-stable-ee

app/assets/javascripts/boards/components/board_blank_state.vue

 <script>
+import Cookies from 'js-cookie';
 import { __ } from '~/locale';
 import ListLabel from '~/boards/models/label';
-import Cookies from 'js-cookie';
 import boardsStore from '../stores/boards_store';
 export default {

app/assets/javascripts/boards/components/board_list.vue

@@ -71,6 +71,9 @@ export default {
         total: this.list.issuesSize,
       });
     },
+    issuesSizeExceedsMax() {
+      return this.list.maxIssueCount > 0 && this.list.issuesSize > this.list.maxIssueCount;
+    },
   },
   watch: {
     filters: {
@@ -435,7 +438,7 @@ export default {
       ref="list"
       :data-board="list.id"
       :data-board-type="list.type"
-      :class="{ 'is-smaller': showIssueForm }"
+      :class="{ 'is-smaller': showIssueForm, 'bg-danger-100': issuesSizeExceedsMax }"
       class="board-list w-100 h-100 list-unstyled mb-0 p-1 js-board-list"
     >
       <board-card

app/assets/javascripts/boards/components/boards_selector.vue

@@ -315,8 +315,7 @@ export default {
           <gl-dropdown-item
             v-if="showDelete"
-            class="text-danger"
-            data-qa-selector="delete_board_button"
+            class="text-danger js-delete-board"
             @click.prevent="showPage('delete')"
           >
             {{ s__('IssueBoards|Delete board') }}

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -2,10 +2,10 @@
 import _ from 'underscore';
 import { mapState } from 'vuex';
 import { GlTooltipDirective } from '@gitlab/ui';
+import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
 import { sprintf, __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
-import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import IssueDueDate from './issue_due_date.vue';
 import IssueTimeEstimate from './issue_time_estimate.vue';

app/assets/javascripts/boards/components/issue_count.vue

+<script>
+export default {
+  name: 'IssueCount',
+  props: {
+    maxIssueCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    issuesSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  computed: {
+    isMaxLimitSet() {
+      return this.maxIssueCount !== 0;
+    },
+    issuesExceedMax() {
+      return this.isMaxLimitSet && this.issuesSize > this.maxIssueCount;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="issue-count">
+    <span class="js-issue-size" :class="{ 'text-danger': issuesExceedMax }">
+      {{ issuesSize }}
+    </span>
+    <span v-if="isMaxLimitSet" class="js-max-issue-size">
+      {{ maxIssueCount }}
+    </span>
+  </div>
+</template>

app/assets/javascripts/boards/components/issue_due_date.vue

@@ -35,10 +35,10 @@ export default {
     title() {
       const timeago = getTimeago();
       const { timeDifference, standardDateFormat } = this;
-      const formatedDate = standardDateFormat;
+      const formattedDate = standardDateFormat;
       if (timeDifference >= -1 && timeDifference < 7) {
-        return `${timeago.format(this.issueDueDate)} (${formatedDate})`;
+        return `${timeago.format(this.issueDueDate)} (${formattedDate})`;
       }
       return timeago.format(this.issueDueDate);

app/assets/javascripts/boards/components/modal/index.vue

 <script>
 /* global ListIssue */
+import { GlLoadingIcon } from '@gitlab/ui';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 import boardsStore from '~/boards/stores/boards_store';
 import ModalHeader from './header.vue';
@@ -7,7 +8,6 @@ import ModalList from './list.vue';
 import ModalFooter from './footer.vue';
 import EmptyState from './empty_state.vue';
 import ModalStore from '../../stores/modal_store';
-import { GlLoadingIcon } from '@gitlab/ui';
 export default {
   components: {

app/assets/javascripts/boards/components/project_select.vue

 <script>
-import { __ } from '~/locale';
 import $ from 'jquery';
 import _ from 'underscore';
-import Icon from '~/vue_shared/components/icon.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
 import eventHub from '../eventhub';
 import Api from '../../api';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';

app/assets/javascripts/boards/constants.js

@@ -4,6 +4,8 @@ export const ListType = {
   backlog: 'backlog',
   closed: 'closed',
   label: 'label',
+  promotion: 'promotion',
+  blank: 'blank',
 };
 export default {

app/assets/javascripts/boards/index.js

 import $ from 'jquery';
 import Vue from 'vue';
+import 'ee_else_ce/boards/models/issue';
+import 'ee_else_ce/boards/models/list';
+import Board from 'ee_else_ce/boards/components/board';
+import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
+import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
+import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
+import toggleFocusMode from 'ee_else_ce/boards/toggle_focus';
+import toggleLabels from 'ee_else_ce/boards/toggle_labels';
+import {
+  setPromotionState,
+  setWeigthFetchingState,
+  setEpicFetchingState,
+  getMilestoneTitle,
+  getBoardsModalData,
+} from 'ee_else_ce/boards/ee_functions';
+
 import Flash from '~/flash';
 import { __ } from '~/locale';
 import './models/label';
@@ -9,35 +25,19 @@ import './models/assignee';
 import FilteredSearchBoards from '~/boards/filtered_search_boards';
 import eventHub from '~/boards/eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
-import 'ee_else_ce/boards/models/issue';
-import 'ee_else_ce/boards/models/list';
 import '~/boards/models/milestone';
 import '~/boards/models/project';
 import store from '~/boards/stores';
 import boardsStore from '~/boards/stores/boards_store';
 import ModalStore from '~/boards/stores/modal_store';
-import BoardService from 'ee_else_ce/boards/services/board_service';
 import modalMixin from '~/boards/mixins/modal_mixins';
 import '~/boards/filters/due_date_filters';
-import Board from 'ee_else_ce/boards/components/board';
-import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
-import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
 import BoardAddIssuesModal from '~/boards/components/modal/index.vue';
 import {
   NavigationType,
   convertObjectPropsToCamelCase,
   parseBoolean,
 } from '~/lib/utils/common_utils';
-import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
-import toggleFocusMode from 'ee_else_ce/boards/toggle_focus';
-import toggleLabels from 'ee_else_ce/boards/toggle_labels';
-import {
-  setPromotionState,
-  setWeigthFetchingState,
-  setEpicFetchingState,
-  getMilestoneTitle,
-  getBoardsModalData,
-} from 'ee_else_ce/boards/ee_functions';
 import mountMultipleBoardsSwitcher from './mount_multiple_boards_switcher';
 let issueBoardsApp;
@@ -68,6 +68,8 @@ export default () => {
       Board,
       BoardSidebar,
       BoardAddIssuesModal,
+      BoardSettingsSidebar: () =>
+        import('ee_component/boards/components/board_settings_sidebar.vue'),
     },
     store,
     data: {
@@ -97,7 +99,6 @@ export default () => {
         bulkUpdatePath: this.bulkUpdatePath,
         boardId: this.boardId,
       });
-      gl.boardService = new BoardService();
       boardsStore.rootPath = this.boardsEndpoint;
       eventHub.$on('updateTokens', this.updateTokens);
@@ -116,7 +117,7 @@ export default () => {
       this.filterManager.setup();
       boardsStore.disabled = this.disabled;
-      gl.boardService
+      boardsStore
         .all()
         .then(res => res.data)
         .then(lists => {
@@ -155,7 +156,8 @@ export default () => {
           newIssue.setFetchingState('subscriptions', true);
           setWeigthFetchingState(newIssue, true);
           setEpicFetchingState(newIssue, true);
-          BoardService.getIssueInfo(sidebarInfoEndpoint)
+          boardsStore
+            .getIssueInfo(sidebarInfoEndpoint)
             .then(res => res.data)
             .then(data => {
               const {
@@ -166,6 +168,7 @@ export default () => {
                 humanTotalTimeSpent,
                 weight,
                 epic,
+                assignees,
               } = convertObjectPropsToCamelCase(data);
               newIssue.setFetchingState('subscriptions', false);
@@ -179,6 +182,7 @@ export default () => {
                 subscribed,
                 weight,
                 epic,
+                assignees,
               });
             })
             .catch(() => {
@@ -211,7 +215,8 @@ export default () => {
         const { issue } = boardsStore.detail;
         if (issue.id === id && issue.toggleSubscriptionEndpoint) {
           issue.setFetchingState('subscriptions', true);
-          BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
+          boardsStore
+            .toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
             .then(() => {
               issue.setFetchingState('subscriptions', false);
               issue.updateData({

app/assets/javascripts/boards/mixins/is_wip_limits.js

+export default {
+  computed: {
+    isWipLimitsOn() {
+      return false;
+    },
+  },
+};

app/assets/javascripts/boards/models/list.js

 /* eslint-disable no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow */
+import ListIssue from 'ee_else_ce/boards/models/issue';
 import { __ } from '~/locale';
 import ListLabel from './label';
 import ListAssignee from './assignee';
-import ListIssue from 'ee_else_ce/boards/models/issue';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 import flash from '~/flash';
 import boardsStore from '../stores/boards_store';
@@ -52,6 +52,9 @@ class List {
     this.loadingMore = false;
     this.issues = obj.issues || [];
     this.issuesSize = obj.issuesSize ? obj.issuesSize : 0;
+    this.maxIssueCount = Object.hasOwnProperty.call(obj, 'max_issue_count')
+      ? obj.max_issue_count
+      : 0;
     this.defaultAvatar = defaultAvatar;
     if (obj.label) {
@@ -90,7 +93,7 @@ class List {
       entityType = 'milestone_id';
     }
-    return gl.boardService
+    return boardsStore
       .createList(entity.id, entityType)
       .then(res => res.data)
       .then(data => {
@@ -108,14 +111,14 @@ class List {
     boardsStore.state.lists.splice(index, 1);
     boardsStore.updateNewListDropdown(this.id);
-    gl.boardService.destroyList(this.id).catch(() => {
+    boardsStore.destroyList(this.id).catch(() => {
       // TODO: handle request error
     });
   }
   update() {
     const collapsed = !this.isExpanded;
-    return gl.boardService.updateList(this.id, this.position, collapsed).catch(() => {
+    return boardsStore.updateList(this.id, this.position, collapsed).catch(() => {
       // TODO: handle request error
     });
   }
@@ -144,7 +147,7 @@ class List {
       this.loading = true;
     }
-    return gl.boardService
+    return boardsStore
       .getIssuesForList(this.id, data)
       .then(res => res.data)
       .then(data => {
@@ -165,7 +168,7 @@ class List {
     this.addIssue(issue, null, 0);
     this.issuesSize += 1;
-    return gl.boardService
+    return boardsStore
       .newIssue(this.id, issue)
       .then(res => res.data)
       .then(data => this.onNewIssueResponse(issue, data));
@@ -273,7 +276,7 @@ class List {
     this.issues.splice(oldIndex, 1);
     this.issues.splice(newIndex, 0, issue);
-    gl.boardService.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId).catch(() => {
+    boardsStore.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId).catch(() => {
       // TODO: handle request error
     });
   }
@@ -284,7 +287,7 @@ class List {
     });
     this.issues.splice(newIndex, 0, ...issues);
-    gl.boardService
+    boardsStore
       .moveMultipleIssues({
         ids: issues.map(issue => issue.id),
         fromListId: null,
@@ -296,15 +299,13 @@ class List {
   }
   updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId) {
-    gl.boardService
-      .moveIssue(issue.id, listFrom.id, this.id, moveBeforeId, moveAfterId)
-      .catch(() => {
-        // TODO: handle request error
-      });
+    boardsStore.moveIssue(issue.id, listFrom.id, this.id, moveBeforeId, moveAfterId).catch(() => {
+      // TODO: handle request error
+    });
   }
   updateMultipleIssues(issues, listFrom, moveBeforeId, moveAfterId) {
-    gl.boardService
+    boardsStore
       .moveMultipleIssues({
         ids: issues.map(issue => issue.id),
         fromListId: listFrom.id,
@@ -356,7 +357,7 @@ class List {
     if (this.issuesSize > 1) {
       const moveBeforeId = this.issues[1].id;
-      gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeId);
+      boardsStore.moveIssue(issue.id, null, null, null, moveBeforeId);
     }
   }
 }

app/assets/javascripts/boards/services/board_service.js

-/* eslint-disable class-methods-use-this */
-/**
- * This file is intended to be deleted.
- * The existing functions will removed one by one in favor of using the board store directly.
- * see https://gitlab.com/gitlab-org/gitlab-foss/issues/61621
- */
-
-import boardsStore from '~/boards/stores/boards_store';
-
-export default class BoardService {
-  generateBoardsPath(id) {
-    return boardsStore.generateBoardsPath(id);
-  }
-
-  generateIssuesPath(id) {
-    return boardsStore.generateIssuesPath(id);
-  }
-
-  static generateIssuePath(boardId, id) {
-    return boardsStore.generateIssuePath(boardId, id);
-  }
-
-  all() {
-    return boardsStore.all();
-  }
-
-  generateDefaultLists() {
-    return boardsStore.generateDefaultLists();
-  }
-
-  createList(entityId, entityType) {
-    return boardsStore.createList(entityId, entityType);
-  }
-
-  updateList(id, position, collapsed) {
-    return boardsStore.updateList(id, position, collapsed);
-  }
-
-  destroyList(id) {
-    return boardsStore.destroyList(id);
-  }
-
-  getIssuesForList(id, filter = {}) {
-    return boardsStore.getIssuesForList(id, filter);
-  }
-
-  moveIssue(id, fromListId = null, toListId = null, moveBeforeId = null, moveAfterId = null) {
-    return boardsStore.moveIssue(id, fromListId, toListId, moveBeforeId, moveAfterId);
-  }
-
-  moveMultipleIssues({
-    ids,
-    fromListId = null,
-    toListId = null,
-    moveBeforeId = null,
-    moveAfterId = null,
-  }) {
-    return boardsStore.moveMultipleIssues({ ids, fromListId, toListId, moveBeforeId, moveAfterId });
-  }
-
-  newIssue(id, issue) {
-    return boardsStore.newIssue(id, issue);
-  }
-
-  getBacklog(data) {
-    return boardsStore.getBacklog(data);
-  }
-
-  bulkUpdate(issueIds, extraData = {}) {
-    return boardsStore.bulkUpdate(issueIds, extraData);
-  }
-
-  static getIssueInfo(endpoint) {
-    return boardsStore.getIssueInfo(endpoint);
-  }
-
-  static toggleIssueSubscription(endpoint) {
-    return boardsStore.toggleIssueSubscription(endpoint);
-  }
-
-  allBoards() {
-    return boardsStore.allBoards();
-  }
-
-  recentBoards() {
-    return boardsStore.recentBoards();
-  }
-
-  createBoard(board) {
-    return boardsStore.createBoard(board);
-  }
-
-  deleteBoard({ id }) {
-    return boardsStore.deleteBoard({ id });
-  }
-}
-
-window.BoardService = BoardService;

app/assets/javascripts/boards/stores/state.js

 export default () => ({
   isShowingLabels: true,
+  activeListId: 0,
 });

app/assets/javascripts/clusters/clusters_bundle.js

 import Visibility from 'visibilityjs';
 import Vue from 'vue';
-import AccessorUtilities from '~/lib/utils/accessor';
 import { GlToast } from '@gitlab/ui';
+import AccessorUtilities from '~/lib/utils/accessor';
 import PersistentUserCallout from '../persistent_user_callout';
 import { s__, sprintf } from '../locale';
 import Flash from '../flash';
@@ -12,6 +12,7 @@ import { APPLICATION_STATUS, INGRESS, INGRESS_DOMAIN_SUFFIX, CROSSPLANE } from '
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import Applications from './components/applications.vue';
+import RemoveClusterConfirmation from './components/remove_cluster_confirmation.vue';
 import setupToggleButtons from '../toggle_buttons';
 import initProjectSelectDropdown from '~/project_select';
@@ -144,6 +145,8 @@ export default class Clusters {
         () => this.handlePollError(),
       );
     }
+
+    this.initRemoveClusterActions();
   }
   initApplications(type) {
@@ -205,6 +208,25 @@ export default class Clusters {
     });
   }
+  initRemoveClusterActions() {
+    const el = document.querySelector('#js-cluster-remove-actions');
+    if (el && el.dataset) {
+      const { clusterName, clusterPath } = el.dataset;
+
+      this.removeClusterAction = new Vue({
+        el,
+        render(createElement) {
+          return createElement(RemoveClusterConfirmation, {
+            props: {
+              clusterName,
+              clusterPath,
+            },
+          });
+        },
+      });
+    }
+  }
+
   handleClusterEnvironmentsSuccess(data) {
     this.store.toggleFetchEnvironments(false);
     this.store.updateEnvironments(data.data);

app/assets/javascripts/clusters/components/crossplane_provider_stack.vue

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
 export default {
@@ -8,7 +7,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
-    Icon,
+    GlIcon,
   },
   props: {
     stacks: {
@@ -86,8 +85,9 @@ export default {
         href="https://crossplane.io/docs/master/stacks-guide.html"
         target="_blank"
         rel="noopener noreferrer"
-        >{{ __('Crossplane') }}</a
-      >
+        >{{ __('Crossplane') }}
+        <gl-icon name="external-link" class="vertical-align-middle" />
+      </a>
     </p>
   </div>
 </template>

app/assets/javascripts/clusters/components/knative_domain_editor.vue

 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { APPLICATION_STATUS } from '~/clusters/constants';

app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue

+<script>
+import _ from 'underscore';
+import SplitButton from '~/vue_shared/components/split_button.vue';
+import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+
+const splitButtonActionItems = [
+  {
+    title: s__('ClusterIntegration|Remove integration and resources'),
+    description: s__(
+      'ClusterIntegration|Deletes all GitLab resources attached to this cluster during removal',
+    ),
+    eventName: 'remove-cluster-and-cleanup',
+  },
+  {
+    title: s__('ClusterIntegration|Remove integration'),
+    description: s__(
+      'ClusterIntegration|Removes cluster from project but keeps associated resources',
+    ),
+    eventName: 'remove-cluster',
+  },
+];
+
+export default {
+  splitButtonActionItems,
+  components: {
+    SplitButton,
+    GlModal,
+    GlButton,
+    GlFormInput,
+  },
+  props: {
+    clusterPath: {
+      type: String,
+      required: true,
+    },
+    clusterName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      enteredClusterName: '',
+      confirmCleanup: false,
+    };
+  },
+  computed: {
+    csrfToken() {
+      return csrf.token;
+    },
+    modalTitle() {
+      return this.confirmCleanup
+        ? s__('ClusterIntegration|Remove integration and resources?')
+        : s__('ClusterIntegration|Remove integration?');
+    },
+    warningMessage() {
+      return this.confirmCleanup
+        ? s__(
+            'ClusterIntegration|You are about to remove your cluster integration and all GitLab-created resources associated with this cluster.',
+          )
+        : s__('ClusterIntegration|You are about to remove your cluster integration.');
+    },
+    warningToBeRemoved() {
+      return s__(`ClusterIntegration|
+        This will permanently delete the following resources:
+        <ul>
+          <li>All installed applications and related resources</li>
+          <li>The <code>gitlab-managed-apps</code> namespace</li>
+          <li>Any project namespaces</li>
+          <li><code>clusterroles</code></li>
+          <li><code>clusterrolebindings</code></li>
+        </ul>
+      `);
+    },
+    confirmationTextLabel() {
+      return sprintf(
+        this.confirmCleanup
+          ? s__(
+              'ClusterIntegration|To remove your integration and resources, type %{clusterName} to confirm:',
+            )
+          : s__('ClusterIntegration|To remove your integration, type %{clusterName} to confirm:'),
+        {
+          clusterName: `<code>${_.escape(this.clusterName)}</code>`,
+        },
+        false,
+      );
+    },
+    canSubmit() {
+      return this.enteredClusterName === this.clusterName;
+    },
+  },
+  methods: {
+    handleClickRemoveCluster(cleanup = false) {
+      this.confirmCleanup = cleanup;
+      this.$refs.modal.show();
+    },
+    handleCancel() {
+      this.$refs.modal.hide();
+      this.enteredClusterName = '';
+    },
+    handleSubmit(cleanup = false) {
+      this.$refs.cleanup.name = cleanup === true ? 'cleanup' : 'no_cleanup';
+      this.$refs.form.submit();
+      this.enteredClusterName = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <split-button
+      :action-items="$options.splitButtonActionItems"
+      menu-class="dropdown-menu-large"
+      variant="danger"
+      @remove-cluster="handleClickRemoveCluster(false)"
+      @remove-cluster-and-cleanup="handleClickRemoveCluster(true)"
+    />
+    <gl-modal
+      ref="modal"
+      size="lg"
+      modal-id="delete-cluster-modal"
+      :title="modalTitle"
+      kind="danger"
+    >
+      <template>
+        <p>{{ warningMessage }}</p>
+        <div v-if="confirmCleanup" v-html="warningToBeRemoved"></div>
+        <strong v-html="confirmationTextLabel"></strong>
+        <form ref="form" :action="clusterPath" method="post" class="append-bottom-20">
+          <input ref="method" type="hidden" name="_method" value="delete" />
+          <input :value="csrfToken" type="hidden" name="authenticity_token" />
+          <input ref="cleanup" type="hidden" name="cleanup" value="true" />
+          <gl-form-input
+            v-model="enteredClusterName"
+            autofocus
+            type="text"
+            name="confirm_cluster_name_input"
+            autocomplete="off"
+          />
+        </form>
+        <span v-if="confirmCleanup">{{
+          s__(
+            'ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration.',
+          )
+        }}</span>
+      </template>
+      <template slot="modal-footer">
+        <gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
+        <template v-if="confirmCleanup">
+          <gl-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{
+            s__('ClusterIntegration|Remove integration')
+          }}</gl-button>
+          <gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit(true)">{{
+            s__('ClusterIntegration|Remove integration and resources')
+          }}</gl-button>
+        </template>
+        <template v-else>
+          <gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{
+            s__('ClusterIntegration|Remove integration')
+          }}</gl-button>
+        </template>
+      </template>
+    </gl-modal>
+  </div>
+</template>

app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue

 <script>
 import { GlModal } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
 import trackUninstallButtonClickMixin from 'ee_else_ce/clusters/mixins/track_uninstall_button_click';
+import { sprintf, s__ } from '~/locale';
 import {
   HELM,
   INGRESS,

app/assets/javascripts/commit/image_file.js

-/* eslint-disable func-names, no-var, no-else-return, consistent-return, one-var, no-return-assign */
+/* eslint-disable func-names, no-else-return, consistent-return, one-var, no-return-assign */
 import $ from 'jquery';
@@ -51,7 +51,7 @@ export default class ImageFile {
   }
   // eslint-disable-next-line class-methods-use-this
   initDraggable($el, padding, callback) {
-    var dragging = false;
+    let dragging = false;
     const $body = $('body');
     const $offsetEl = $el.parent();
     const dragStart = function() {
@@ -88,14 +88,12 @@ export default class ImageFile {
   }
   static prepareFrames(view) {
-    var maxHeight, maxWidth;
-    maxWidth = 0;
-    maxHeight = 0;
+    let maxWidth = 0;
+    let maxHeight = 0;
     $('.frame', view)
       .each((index, frame) => {
-        var height, width;
-        width = $(frame).width();
-        height = $(frame).height();
+        const width = $(frame).width();
+        const height = $(frame).height();
         maxWidth = width > maxWidth ? width : maxWidth;
         return (maxHeight = height > maxHeight ? height : maxHeight);
       })
@@ -110,8 +108,7 @@ export default class ImageFile {
     'two-up': function() {
       return $('.two-up.view .wrap', this.file).each((index, wrap) => {
         $('img', wrap).each(function() {
-          var currentWidth;
-          currentWidth = $(this).width();
+          const currentWidth = $(this).width();
           if (currentWidth > availWidth / 2) {
             return $(this).width(availWidth / 2);
           }
@@ -124,16 +121,14 @@ export default class ImageFile {
       });
     },
     swipe() {
-      var maxHeight, maxWidth;
-      maxWidth = 0;
-      maxHeight = 0;
+      let maxWidth = 0;
+      let maxHeight = 0;
       return $('.swipe.view', this.file).each((index, view) => {
-        var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding;
         const ref = ImageFile.prepareFrames(view);
         [maxWidth, maxHeight] = ref;
-        $swipeFrame = $('.swipe-frame', view);
-        $swipeWrap = $('.swipe-wrap', view);
-        $swipeBar = $('.swipe-bar', view);
+        const $swipeFrame = $('.swipe-frame', view);
+        const $swipeWrap = $('.swipe-wrap', view);
+        const $swipeBar = $('.swipe-bar', view);
         $swipeFrame.css({
           width: maxWidth + 16,
@@ -148,7 +143,7 @@ export default class ImageFile {
           left: 1,
         });
-        wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
+        const wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
         this.initDraggable($swipeBar, wrapPadding, (e, left) => {
           if (left > 0 && left < $swipeFrame.width() - wrapPadding * 2) {
@@ -159,19 +154,17 @@ export default class ImageFile {
       });
     },
     'onion-skin': function() {
-      var dragTrackWidth, maxHeight, maxWidth;
+      let maxHeight, maxWidth;
       maxWidth = 0;
       maxHeight = 0;
-      dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
+      const dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
       return $('.onion-skin.view', this.file).each((index, view) => {
-        var $frame, $track, $dragger, $frameAdded, framePadding;
-
         const ref = ImageFile.prepareFrames(view);
         [maxWidth, maxHeight] = ref;
-        $frame = $('.onion-skin-frame', view);
-        $frameAdded = $('.frame.added', view);
-        $track = $('.drag-track', view);
-        $dragger = $('.dragger', $track);
+        const $frame = $('.onion-skin-frame', view);
+        const $frameAdded = $('.frame.added', view);
+        const $track = $('.drag-track', view);
+        const $dragger = $('.dragger', $track);
         $frame.css({
           width: maxWidth + 16,
@@ -186,10 +179,10 @@ export default class ImageFile {
         });
         $frameAdded.css('opacity', 1);
-        framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
+        const framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
         this.initDraggable($dragger, framePadding, (e, left) => {
-          var opacity = left / dragTrackWidth;
+          const opacity = left / dragTrackWidth;
           if (opacity >= 0 && opacity <= 1) {
             $dragger.css('left', left);