Remove cleanup button for clusters with management project

Cleanup is not always possible with applications installed through a
management project

app/assets/javascripts/clusters/clusters_bundle.js

@@ -222,7 +222,7 @@ export default class Clusters {
   initRemoveClusterActions() {
     const el = document.querySelector('#js-cluster-remove-actions');
     if (el && el.dataset) {
-      const { clusterName, clusterPath } = el.dataset;
+      const { clusterName, clusterPath, hasManagementProject } = el.dataset;
 
       this.removeClusterAction = new Vue({
         el,
@@ -231,6 +231,7 @@ export default class Clusters {
             props: {
               clusterName,
               clusterPath,
+              hasManagementProject,
             },
           });
         },

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

 <script>
 import { escape } from 'lodash';
 import SplitButton from '~/vue_shared/components/split_button.vue';
-import { GlModal, GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
+import { GlModal, GlButton, GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import csrf from '~/lib/utils/csrf';
 
@@ -27,6 +27,7 @@ export default {
   components: {
     SplitButton,
     GlModal,
+    GlButton,
     GlDeprecatedButton,
     GlFormInput,
   },
@@ -39,6 +40,10 @@ export default {
       type: String,
       required: true,
     },
+    hasManagementProject: {
+      type: Boolean,
+      required: false,
+    },
   },
   data() {
     return {
@@ -90,6 +95,9 @@ export default {
     canSubmit() {
       return this.enteredClusterName === this.clusterName;
     },
+    canCleanupResources() {
+      return !this.hasManagementProject;
+    },
   },
   methods: {
     handleClickRemoveCluster(cleanup = false) {
@@ -112,12 +120,21 @@ export default {
 <template>
   <div>
     <split-button
+      v-if="canCleanupResources"
       :action-items="$options.splitButtonActionItems"
       menu-class="dropdown-menu-large"
       variant="danger"
       @remove-cluster="handleClickRemoveCluster(false)"
       @remove-cluster-and-cleanup="handleClickRemoveCluster(true)"
     />
+    <gl-button
+      v-else
+      variant="danger"
+      data-testid="btnRemove"
+      @click="handleClickRemoveCluster(false)"
+    >
+      {{ s__('ClusterIntegration|Remove integration') }}
+    </gl-button>
     <gl-modal
       ref="modal"
       size="lg"

app/views/clusters/clusters/_advanced_settings.html.haml

@@ -40,4 +40,6 @@
     %p
       = s_("ClusterIntegration|Remove this Kubernetes cluster's configuration from this project. This will not delete your actual Kubernetes cluster.")
 
-    #js-cluster-remove-actions{ data: { cluster_path: clusterable.cluster_path(@cluster), cluster_name: @cluster.name } }
+    #js-cluster-remove-actions{ data: { cluster_path: clusterable.cluster_path(@cluster),
+      cluster_name: @cluster.name,
+      has_management_project: @cluster.management_project_id? } }

changelogs/unreleased/cluster-application-disable-cleanup-managed.yml

+---
+title: Hide cleanup button for clusters with management project
+merge_request: 35576
+author:
+type: changed

spec/frontend/clusters/components/remove_cluster_confirmation_spec.js

@@ -28,7 +28,7 @@ describe('Remove cluster confirmation modal', () => {
 
   describe('split button dropdown', () => {
     const findModal = () => wrapper.find(GlModal).vm;
-    const findSplitButton = () => wrapper.find(SplitButton).vm;
+    const findSplitButton = () => wrapper.find(SplitButton);
 
     beforeEach(() => {
       createComponent({ clusterName: 'my-test-cluster' });
@@ -36,7 +36,7 @@ describe('Remove cluster confirmation modal', () => {
     });
 
     it('opens modal with "cleanup" option', () => {
-      findSplitButton().$emit('remove-cluster-and-cleanup');
+      findSplitButton().vm.$emit('remove-cluster-and-cleanup');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findModal().show).toHaveBeenCalled();
@@ -45,12 +45,23 @@ describe('Remove cluster confirmation modal', () => {
     });
 
     it('opens modal without "cleanup" option', () => {
-      findSplitButton().$emit('remove-cluster');
+      findSplitButton().vm.$emit('remove-cluster');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findModal().show).toHaveBeenCalled();
         expect(wrapper.vm.confirmCleanup).toEqual(false);
       });
     });
+
+    describe('with cluster management project', () => {
+      beforeEach(() => {
+        createComponent({ hasManagementProject: true });
+      });
+
+      it('renders regular button instead', () => {
+        expect(findSplitButton().exists()).toBe(false);
+        expect(wrapper.find('[data-testid="btnRemove"]').exists()).toBe(true);
+      });
+    });
   });
 });