Add latest changes from gitlab-org/gitlab@13-3-stable-ee

13 files changed, 241 insertions, 117 deletions

diff --git a/spec/frontend/clusters/clusters_bundle_spec.js b/spec/frontend/clusters/clusters_bundle_spec.js
index a9870e4db57..d3277cdb7cc 100644
--- a/spec/frontend/clusters/clusters_bundle_spec.js
+++ b/spec/frontend/clusters/clusters_bundle_spec.js
@@ -1,14 +1,8 @@
 import MockAdapter from 'axios-mock-adapter';
-import $ from 'jquery';
 import { loadHTMLFixture } from 'helpers/fixtures';
 import { setTestTimeout } from 'helpers/timeout';
 import Clusters from '~/clusters/clusters_bundle';
-import {
-  APPLICATION_STATUS,
-  INGRESS_DOMAIN_SUFFIX,
-  APPLICATIONS,
-  RUNNER,
-} from '~/clusters/constants';
+import { APPLICATION_STATUS, APPLICATIONS, RUNNER } from '~/clusters/constants';
 import axios from '~/lib/utils/axios_utils';
 import initProjectSelectDropdown from '~/project_select';
 
@@ -63,25 +57,6 @@ describe('Clusters', () => {
     });
   });
 
-  describe('toggle', () => {
-    it('should update the button and the input field on click', done => {
-      const toggleButton = document.querySelector(
-        '.js-cluster-enable-toggle-area .js-project-feature-toggle',
-      );
-      const toggleInput = document.querySelector(
-        '.js-cluster-enable-toggle-area .js-project-feature-toggle-input',
-      );
-
-      $(toggleInput).one('trigger-change', () => {
-        expect(toggleButton.classList).not.toContain('is-checked');
-        expect(toggleInput.getAttribute('value')).toEqual('false');
-        done();
-      });
-
-      toggleButton.click();
-    });
-  });
-
   describe('checkForNewInstalls', () => {
     const INITIAL_APP_MAP = {
       helm: { status: null, title: 'Helm Tiller' },
@@ -328,7 +303,6 @@ describe('Clusters', () => {
       return promise.then(() => {
         expect(cluster.store.state.applications.helm.status).toEqual(INSTALLED);
         expect(cluster.store.state.applications.helm.uninstallFailed).toBe(true);
-
         expect(cluster.store.state.applications.helm.requestReason).toBeDefined();
       });
     });
@@ -354,10 +328,8 @@ describe('Clusters', () => {
   describe('handleClusterStatusSuccess', () => {
     beforeEach(() => {
       jest.spyOn(cluster.store, 'updateStateFromServer').mockReturnThis();
-      jest.spyOn(cluster, 'toggleIngressDomainHelpText').mockReturnThis();
       jest.spyOn(cluster, 'checkForNewInstalls').mockReturnThis();
       jest.spyOn(cluster, 'updateContainer').mockReturnThis();
-
       cluster.handleClusterStatusSuccess({ data: {} });
     });
 
@@ -369,53 +341,11 @@ describe('Clusters', () => {
       expect(cluster.checkForNewInstalls).toHaveBeenCalled();
     });
 
-    it('toggles ingress domain help text', () => {
-      expect(cluster.toggleIngressDomainHelpText).toHaveBeenCalled();
-    });
-
     it('updates message containers', () => {
       expect(cluster.updateContainer).toHaveBeenCalled();
     });
   });
 
-  describe('toggleIngressDomainHelpText', () => {
-    let ingressPreviousState;
-    let ingressNewState;
-
-    beforeEach(() => {
-      ingressPreviousState = { externalIp: null };
-      ingressNewState = { externalIp: '127.0.0.1' };
-    });
-
-    describe(`when ingress have an external ip assigned`, () => {
-      beforeEach(() => {
-        cluster.toggleIngressDomainHelpText(ingressPreviousState, ingressNewState);
-      });
-
-      it('displays custom domain help text', () => {
-        expect(cluster.ingressDomainHelpText.classList.contains('hide')).toEqual(false);
-      });
-
-      it('updates ingress external ip address', () => {
-        expect(cluster.ingressDomainSnippet.textContent).toEqual(
-          `${ingressNewState.externalIp}${INGRESS_DOMAIN_SUFFIX}`,
-        );
-      });
-    });
-
-    describe(`when ingress does not have an external ip assigned`, () => {
-      it('hides custom domain help text', () => {
-        ingressPreviousState.externalIp = '127.0.0.1';
-        ingressNewState.externalIp = null;
-        cluster.ingressDomainHelpText.classList.remove('hide');
-
-        cluster.toggleIngressDomainHelpText(ingressPreviousState, ingressNewState);
-
-        expect(cluster.ingressDomainHelpText.classList.contains('hide')).toEqual(true);
-      });
-    });
-  });
-
   describe('updateApplication', () => {
     const params = { version: '1.0.0' };
     let storeUpdateApplication;
diff --git a/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap
index 92237590550..3328ec724fd 100644
--- a/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap
+++ b/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap
@@ -17,6 +17,22 @@ exports[`Applications Cert-Manager application shows the correct description 1`]
 </p>
 `;
 
+exports[`Applications Cilium application shows the correct description 1`] = `
+<p
+  data-testid="ciliumDescription"
+>
+  Protect your clusters with GitLab Container Network Policies by enforcing how pods communicate with each other and other network endpoints. 
+  <a
+    class="gl-link"
+    href="cilium-help-path"
+    rel="noopener"
+    target="_blank"
+  >
+    Learn more about configuring Network Policies here.
+  </a>
+</p>
+`;
+
 exports[`Applications Crossplane application shows the correct description 1`] = `
 <p
   data-testid="crossplaneDescription"
diff --git a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
index d4269bf14ba..93b757e008a 100644
--- a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
+++ b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Remove cluster confirmation modal renders splitbutton with modal included 1`] = `
-<div>
+<div
+  class="gl-display-flex gl-justify-content-end"
+>
   <div
     class="dropdown b-dropdown gl-dropdown btn-group"
   >
diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js
index 94bdd7b7778..b97d4dbf355 100644
--- a/spec/frontend/clusters/components/application_row_spec.js
+++ b/spec/frontend/clusters/components/application_row_spec.js
@@ -83,6 +83,12 @@ describe('Application Row', () => {
       checkButtonState('Installing', true, true);
     });
 
+    it('has disabled "Install" when APPLICATION_STATUS.UNINSTALLED', () => {
+      mountComponent({ status: APPLICATION_STATUS.UNINSTALLED });
+
+      checkButtonState('Install', false, true);
+    });
+
     it('has disabled "Installed" when application is installed and not uninstallable', () => {
       mountComponent({
         status: APPLICATION_STATUS.INSTALLED,
@@ -112,6 +118,15 @@ describe('Application Row', () => {
       checkButtonState('Install', false, false);
     });
 
+    it('has disabled "Install" when installation disabled', () => {
+      mountComponent({
+        status: APPLICATION_STATUS.INSTALLABLE,
+        installable: false,
+      });
+
+      checkButtonState('Install', false, true);
+    });
+
     it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => {
       mountComponent({ status: APPLICATION_STATUS.INSTALLABLE });
 
diff --git a/spec/frontend/clusters/components/applications_spec.js b/spec/frontend/clusters/components/applications_spec.js
index 7fc771201c1..e0ccf36e868 100644
--- a/spec/frontend/clusters/components/applications_spec.js
+++ b/spec/frontend/clusters/components/applications_spec.js
@@ -14,10 +14,9 @@ describe('Applications', () => {
 
   beforeEach(() => {
     gon.features = gon.features || {};
-    gon.features.managedAppsLocalTiller = false;
   });
 
-  const createApp = ({ applications, type } = {}, isShallow) => {
+  const createApp = ({ applications, type, props } = {}, isShallow) => {
     const mountMethod = isShallow ? shallowMount : mount;
 
     wrapper = mountMethod(Applications, {
@@ -25,6 +24,7 @@ describe('Applications', () => {
       propsData: {
         type,
         applications: { ...APPLICATIONS_MOCK_STATE, ...applications },
+        ...props,
       },
     });
   };
@@ -40,10 +40,6 @@ describe('Applications', () => {
       createApp({ type: CLUSTER_TYPE.PROJECT });
     });
 
-    it('renders a row for Helm Tiller', () => {
-      expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true);
-    });
-
     it('renders a row for Ingress', () => {
       expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
     });
@@ -79,6 +75,9 @@ describe('Applications', () => {
     it('renders a row for Fluentd', () => {
       expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
     });
+    it('renders a row for Cilium', () => {
+      expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
+    });
   });
 
   describe('Group cluster applications', () => {
@@ -86,10 +85,6 @@ describe('Applications', () => {
       createApp({ type: CLUSTER_TYPE.GROUP });
     });
 
-    it('renders a row for Helm Tiller', () => {
-      expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true);
-    });
-
     it('renders a row for Ingress', () => {
       expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
     });
@@ -125,6 +120,10 @@ describe('Applications', () => {
     it('renders a row for Fluentd', () => {
       expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
     });
+
+    it('renders a row for Cilium', () => {
+      expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
+    });
   });
 
   describe('Instance cluster applications', () => {
@@ -132,10 +131,6 @@ describe('Applications', () => {
       createApp({ type: CLUSTER_TYPE.INSTANCE });
     });
 
-    it('renders a row for Helm Tiller', () => {
-      expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true);
-    });
-
     it('renders a row for Ingress', () => {
       expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
     });
@@ -171,18 +166,16 @@ describe('Applications', () => {
     it('renders a row for Fluentd', () => {
       expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
     });
+
+    it('renders a row for Cilium', () => {
+      expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
+    });
   });
 
   describe('Helm application', () => {
-    describe('when managedAppsLocalTiller enabled', () => {
-      beforeEach(() => {
-        gon.features.managedAppsLocalTiller = true;
-      });
-
-      it('does not render a row for Helm Tiller', () => {
-        createApp();
-        expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(false);
-      });
+    it('does not render a row for Helm Tiller', () => {
+      createApp();
+      expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(false);
     });
   });
 
@@ -240,7 +233,6 @@ describe('Applications', () => {
                 externalHostname: 'localhost.localdomain',
                 modsecurity_enabled: false,
               },
-              helm: { title: 'Helm Tiller' },
               cert_manager: { title: 'Cert-Manager' },
               crossplane: { title: 'Crossplane', stack: '' },
               runner: { title: 'GitLab Runner' },
@@ -249,6 +241,7 @@ describe('Applications', () => {
               knative: { title: 'Knative', hostname: '' },
               elastic_stack: { title: 'Elastic Stack' },
               fluentd: { title: 'Fluentd' },
+              cilium: { title: 'GitLab Container Network Policies' },
             },
           });
 
@@ -365,7 +358,11 @@ describe('Applications', () => {
       it('renders readonly input', () => {
         createApp({
           applications: {
-            ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' },
+            ingress: {
+              title: 'Ingress',
+              status: 'installed',
+              externalIp: '1.1.1.1',
+            },
             jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' },
           },
         });
@@ -386,14 +383,6 @@ describe('Applications', () => {
           false,
         );
       });
-
-      it('renders disabled install button', () => {
-        expect(
-          wrapper
-            .find('.js-cluster-application-row-jupyter .js-cluster-application-install-button')
-            .attributes('disabled'),
-        ).toEqual('disabled');
-      });
     });
   });
 
@@ -513,7 +502,7 @@ describe('Applications', () => {
 
   describe('Elastic Stack application', () => {
     describe('with elastic stack installable', () => {
-      it('renders hostname active input', () => {
+      it('renders the install button enabled', () => {
         createApp();
 
         expect(
@@ -522,7 +511,7 @@ describe('Applications', () => {
               '.js-cluster-application-row-elastic_stack .js-cluster-application-install-button',
             )
             .attributes('disabled'),
-        ).toEqual('disabled');
+        ).toBeUndefined();
       });
     });
 
@@ -552,4 +541,11 @@ describe('Applications', () => {
       expect(wrapper.find(FluentdOutputSettings).exists()).toBe(true);
     });
   });
+
+  describe('Cilium application', () => {
+    it('shows the correct description', () => {
+      createApp({ props: { ciliumHelpPath: 'cilium-help-path' } });
+      expect(findByTestId('ciliumDescription').element).toMatchSnapshot();
+    });
+  });
 });
diff --git a/spec/frontend/clusters/components/fluentd_output_settings_spec.js b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
index f03f2535947..0bc4eb73bf9 100644
--- a/spec/frontend/clusters/components/fluentd_output_settings_spec.js
+++ b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlDeprecatedDropdown, GlFormCheckbox } from '@gitlab/ui';
 import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue';
 import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
-import { GlAlert, GlDropdown, GlFormCheckbox } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
 
 const { UPDATING } = APPLICATION_STATUS;
@@ -36,7 +36,7 @@ describe('FluentdOutputSettings', () => {
   };
   const findSaveButton = () => wrapper.find({ ref: 'saveBtn' });
   const findCancelButton = () => wrapper.find({ ref: 'cancelBtn' });
-  const findProtocolDropdown = () => wrapper.find(GlDropdown);
+  const findProtocolDropdown = () => wrapper.find(GlDeprecatedDropdown);
   const findCheckbox = name =>
     wrapper.findAll(GlFormCheckbox).wrappers.find(x => x.text() === name);
   const findHost = () => wrapper.find('#fluentd-host');
diff --git a/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js b/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js
index 683f2e5c35a..3a9a608b2e2 100644
--- a/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js
+++ b/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlToggle, GlDeprecatedDropdown } from '@gitlab/ui';
 import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue';
 import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants';
-import { GlAlert, GlToggle, GlDropdown } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
 
 const { UPDATING } = APPLICATION_STATUS;
@@ -31,7 +31,7 @@ describe('IngressModsecuritySettings', () => {
   const findSaveButton = () => wrapper.find('.btn-success');
   const findCancelButton = () => wrapper.find('[variant="secondary"]');
   const findModSecurityToggle = () => wrapper.find(GlToggle);
-  const findModSecurityDropdown = () => wrapper.find(GlDropdown);
+  const findModSecurityDropdown = () => wrapper.find(GlDeprecatedDropdown);
 
   describe('when ingress is installed', () => {
     beforeEach(() => {
diff --git a/spec/frontend/clusters/components/knative_domain_editor_spec.js b/spec/frontend/clusters/components/knative_domain_editor_spec.js
index 73d08661199..a07258dcc69 100644
--- a/spec/frontend/clusters/components/knative_domain_editor_spec.js
+++ b/spec/frontend/clusters/components/knative_domain_editor_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { APPLICATION_STATUS } from '~/clusters/constants';
@@ -113,7 +113,7 @@ describe('KnativeDomainEditor', () => {
       createComponent({ knative: { ...knative, availableDomains: [newDomain] } });
       jest.spyOn(wrapper.vm, 'selectDomain');
 
-      wrapper.find(GlDropdownItem).vm.$emit('click');
+      wrapper.find(GlDeprecatedDropdownItem).vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.selectDomain).toHaveBeenCalledWith(newDomain);
diff --git a/spec/frontend/clusters/forms/components/integration_form_spec.js b/spec/frontend/clusters/forms/components/integration_form_spec.js
new file mode 100644
index 00000000000..3a3700eb0b7
--- /dev/null
+++ b/spec/frontend/clusters/forms/components/integration_form_spec.js
@@ -0,0 +1,112 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlToggle, GlButton } from '@gitlab/ui';
+import IntegrationForm from '~/clusters/forms/components/integration_form.vue';
+import { createStore } from '~/clusters/forms/stores/index';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('ClusterIntegrationForm', () => {
+  let wrapper;
+
+  const defaultStoreValues = {
+    enabled: true,
+    editable: true,
+    environmentScope: '*',
+    baseDomain: 'testDomain',
+    applicationIngressExternalIp: null,
+  };
+
+  const createWrapper = (storeValues = defaultStoreValues) => {
+    wrapper = shallowMount(IntegrationForm, {
+      localVue,
+      store: createStore(storeValues),
+      provide: {
+        autoDevopsHelpPath: 'topics/autodevops/index',
+        externalEndpointHelpPath: 'user/clusters/applications.md',
+      },
+    });
+  };
+
+  const destroyWrapper = () => {
+    wrapper.destroy();
+    wrapper = null;
+  };
+
+  const findSubmitButton = () => wrapper.find(GlButton);
+  const findGlToggle = () => wrapper.find(GlToggle);
+
+  afterEach(() => {
+    destroyWrapper();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => createWrapper());
+
+    it('enables toggle if editable is true', () => {
+      expect(findGlToggle().props('disabled')).toBe(false);
+    });
+    it('sets the envScope to default', () => {
+      expect(wrapper.find('[id="cluster_environment_scope"]').attributes('value')).toBe('*');
+    });
+
+    it('sets the baseDomain to default', () => {
+      expect(wrapper.find('[id="cluster_base_domain"]').attributes('value')).toBe('testDomain');
+    });
+
+    describe('when editable is false', () => {
+      beforeEach(() => {
+        createWrapper({ ...defaultStoreValues, editable: false });
+      });
+
+      it('disables toggle if editable is false', () => {
+        expect(findGlToggle().props('disabled')).toBe(true);
+      });
+
+      it('does not render the save button', () => {
+        expect(findSubmitButton().exists()).toBe(false);
+      });
+    });
+
+    it('does not render external IP block if applicationIngressExternalIp was not passed', () => {
+      createWrapper({ ...defaultStoreValues });
+
+      expect(wrapper.find('.js-ingress-domain-help-text').exists()).toBe(false);
+    });
+
+    it('renders external IP block if applicationIngressExternalIp was passed', () => {
+      createWrapper({ ...defaultStoreValues, applicationIngressExternalIp: '127.0.0.1' });
+
+      expect(wrapper.find('.js-ingress-domain-help-text').exists()).toBe(true);
+    });
+  });
+
+  describe('reactivity', () => {
+    beforeEach(() => createWrapper());
+
+    it('enables the submit button on changing toggle to different value', () => {
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          // setData is a bad approach because it changes the internal implementation which we should not touch
+          // but our GlFormInput lacks the ability to set a new value.
+          wrapper.setData({ toggleEnabled: !defaultStoreValues.enabled });
+        })
+        .then(() => {
+          expect(findSubmitButton().props('disabled')).toBe(false);
+        });
+    });
+
+    it('enables the submit button on changing input values', () => {
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          wrapper.setData({ envScope: `${defaultStoreValues.environmentScope}1` });
+        })
+        .then(() => {
+          expect(findSubmitButton().props('disabled')).toBe(false);
+        });
+    });
+  });
+});
diff --git a/spec/frontend/clusters/services/application_state_machine_spec.js b/spec/frontend/clusters/services/application_state_machine_spec.js
index b27cd2c80fd..7eee54949fa 100644
--- a/spec/frontend/clusters/services/application_state_machine_spec.js
+++ b/spec/frontend/clusters/services/application_state_machine_spec.js
@@ -19,6 +19,7 @@ const {
   UPDATE_ERRORED,
   UNINSTALLING,
   UNINSTALL_ERRORED,
+  UNINSTALLED,
 } = APPLICATION_STATUS;
 
 const NO_EFFECTS = 'no effects';
@@ -40,6 +41,7 @@ describe('applicationStateMachine', () => {
       ${INSTALLED}       | ${UPDATE_ERRORED}    | ${{ updateFailed: true }}
       ${UNINSTALLING}    | ${UNINSTALLING}      | ${NO_EFFECTS}
       ${INSTALLED}       | ${UNINSTALL_ERRORED} | ${{ uninstallFailed: true }}
+      ${UNINSTALLED}     | ${UNINSTALLED}       | ${NO_EFFECTS}
     `(`transitions to $expectedState on $event event and applies $effects`, data => {
       const { expectedState, event, effects } = data;
       const currentAppState = {
@@ -74,8 +76,9 @@ describe('applicationStateMachine', () => {
     it.each`
       expectedState      | event              | effects
       ${INSTALLING}      | ${INSTALL_EVENT}   | ${{ installFailed: false }}
-      ${INSTALLED}       | ${INSTALLED}       | ${NO_EFFECTS}
+      ${INSTALLED}       | ${INSTALLED}       | ${{ installFailed: false }}
       ${NOT_INSTALLABLE} | ${NOT_INSTALLABLE} | ${NO_EFFECTS}
+      ${UNINSTALLED}     | ${UNINSTALLED}     | ${{ installFailed: false }}
     `(`transitions to $expectedState on $event event and applies $effects`, data => {
       const { expectedState, event, effects } = data;
       const currentAppState = {
@@ -113,6 +116,8 @@ describe('applicationStateMachine', () => {
       ${UPDATING}        | ${UPDATE_EVENT}    | ${{ updateFailed: false, updateSuccessful: false }}
       ${UNINSTALLING}    | ${UNINSTALL_EVENT} | ${{ uninstallFailed: false, uninstallSuccessful: false }}
       ${NOT_INSTALLABLE} | ${NOT_INSTALLABLE} | ${NO_EFFECTS}
+      ${UNINSTALLED}     | ${UNINSTALLED}     | ${NO_EFFECTS}
+      ${INSTALLABLE}     | ${ERROR}           | ${{ installFailed: true }}
     `(`transitions to $expectedState on $event event and applies $effects`, data => {
       const { expectedState, event, effects } = data;
       const currentAppState = {
@@ -162,6 +167,23 @@ describe('applicationStateMachine', () => {
     });
   });
 
+  describe(`current state is ${UNINSTALLED}`, () => {
+    it.each`
+      expectedState  | event        | effects
+      ${INSTALLED}   | ${INSTALLED} | ${NO_EFFECTS}
+      ${INSTALLABLE} | ${ERROR}     | ${{ installFailed: true }}
+    `(`transitions to $expectedState on $event event and applies $effects`, data => {
+      const { expectedState, event, effects } = data;
+      const currentAppState = {
+        status: UNINSTALLED,
+      };
+
+      expect(transitionApplicationState(currentAppState, event)).toEqual({
+        status: expectedState,
+        ...noEffectsToEmptyObject(effects),
+      });
+    });
+  });
   describe('current state is undefined', () => {
     it('returns the current state without having any effects', () => {
       const currentAppState = {};
diff --git a/spec/frontend/clusters/services/crossplane_provider_stack_spec.js b/spec/frontend/clusters/services/crossplane_provider_stack_spec.js
index 3e5f8de8e7b..57c538d2650 100644
--- a/spec/frontend/clusters/services/crossplane_provider_stack_spec.js
+++ b/spec/frontend/clusters/services/crossplane_provider_stack_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';
 
 describe('CrossplaneProviderStack component', () => {
@@ -37,7 +37,7 @@ describe('CrossplaneProviderStack component', () => {
     createComponent({ crossplane });
   });
 
-  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
   const findFirstDropdownElement = () => findDropdownElements().at(0);
 
   afterEach(() => {
diff --git a/spec/frontend/clusters/services/mock_data.js b/spec/frontend/clusters/services/mock_data.js
index c5ec3f6e6a8..4f8b27d623c 100644
--- a/spec/frontend/clusters/services/mock_data.js
+++ b/spec/frontend/clusters/services/mock_data.js
@@ -151,7 +151,11 @@ const DEFAULT_APPLICATION_STATE = {
 
 const APPLICATIONS_MOCK_STATE = {
   helm: { title: 'Helm Tiller', status: 'installable' },
-  ingress: { title: 'Ingress', status: 'installable', modsecurity_enabled: false },
+  ingress: {
+    title: 'Ingress',
+    status: 'installable',
+    modsecurity_enabled: false,
+  },
   crossplane: { title: 'Crossplane', status: 'installable', stack: '' },
   cert_manager: { title: 'Cert-Manager', status: 'installable' },
   runner: { title: 'GitLab Runner' },
@@ -160,6 +164,10 @@ const APPLICATIONS_MOCK_STATE = {
   knative: { title: 'Knative ', status: 'installable', hostname: '' },
   elastic_stack: { title: 'Elastic Stack', status: 'installable' },
   fluentd: { title: 'Fluentd', status: 'installable' },
+  cilium: {
+    title: 'GitLab Container Network Policies',
+    status: 'not_installable',
+  },
 };
 
 export { CLUSTERS_MOCK_DATA, DEFAULT_APPLICATION_STATE, APPLICATIONS_MOCK_STATE };
diff --git a/spec/frontend/clusters/stores/clusters_store_spec.js b/spec/frontend/clusters/stores/clusters_store_spec.js
index 36e99c37be5..ed862818c7b 100644
--- a/spec/frontend/clusters/stores/clusters_store_spec.js
+++ b/spec/frontend/clusters/stores/clusters_store_spec.js
@@ -66,6 +66,7 @@ describe('Clusters Store', () => {
             status: mockResponseData.applications[0].status,
             statusReason: mockResponseData.applications[0].status_reason,
             requestReason: null,
+            installable: true,
             installed: false,
             installFailed: false,
             uninstallable: false,
@@ -80,6 +81,7 @@ describe('Clusters Store', () => {
             requestReason: null,
             externalIp: null,
             externalHostname: null,
+            installable: true,
             installed: false,
             isEditingModSecurityEnabled: false,
             isEditingModSecurityMode: false,
@@ -100,6 +102,7 @@ describe('Clusters Store', () => {
             version: mockResponseData.applications[2].version,
             updateAvailable: mockResponseData.applications[2].update_available,
             chartRepo: 'https://gitlab.com/gitlab-org/charts/gitlab-runner',
+            installable: true,
             installed: false,
             installFailed: false,
             updateFailed: false,
@@ -114,6 +117,7 @@ describe('Clusters Store', () => {
             status: APPLICATION_STATUS.INSTALLABLE,
             statusReason: mockResponseData.applications[3].status_reason,
             requestReason: null,
+            installable: true,
             installed: false,
             installFailed: true,
             uninstallable: false,
@@ -130,6 +134,7 @@ describe('Clusters Store', () => {
             ciliumLogEnabled: null,
             host: null,
             protocol: null,
+            installable: true,
             installed: false,
             isEditingSettings: false,
             installFailed: false,
@@ -145,6 +150,7 @@ describe('Clusters Store', () => {
             statusReason: mockResponseData.applications[4].status_reason,
             requestReason: null,
             hostname: '',
+            installable: true,
             installed: false,
             installFailed: false,
             uninstallable: false,
@@ -161,6 +167,7 @@ describe('Clusters Store', () => {
             isEditingDomain: false,
             externalIp: null,
             externalHostname: null,
+            installable: true,
             installed: false,
             installFailed: false,
             uninstallable: false,
@@ -177,6 +184,7 @@ describe('Clusters Store', () => {
             statusReason: mockResponseData.applications[6].status_reason,
             requestReason: null,
             email: mockResponseData.applications[6].email,
+            installable: true,
             installed: false,
             uninstallable: false,
             uninstallSuccessful: false,
@@ -189,6 +197,7 @@ describe('Clusters Store', () => {
             installFailed: true,
             statusReason: mockResponseData.applications[7].status_reason,
             requestReason: null,
+            installable: true,
             installed: false,
             uninstallable: false,
             uninstallSuccessful: false,
@@ -201,12 +210,26 @@ describe('Clusters Store', () => {
             installFailed: true,
             statusReason: mockResponseData.applications[8].status_reason,
             requestReason: null,
+            installable: true,
             installed: false,
             uninstallable: false,
             uninstallSuccessful: false,
             uninstallFailed: false,
             validationError: null,
           },
+          cilium: {
+            title: 'GitLab Container Network Policies',
+            status: null,
+            statusReason: null,
+            requestReason: null,
+            installable: false,
+            installed: false,
+            installFailed: false,
+            uninstallable: false,
+            uninstallSuccessful: false,
+            uninstallFailed: false,
+            validationError: null,
+          },
         },
         environments: [],
         fetchingEnvironments: false,