Extract reate cluster apps init into a single func

We are initializing the form to create K8 clusters in three places

- Project level clusters
- Group level clusters
- Instance level clusters

This commit moves duplicated initialization code into a single
fn

app/assets/javascripts/pages/projects/clusters/new/index.js → app/assets/javascripts/create_cluster/init_create_cluster.js

-document.addEventListener('DOMContentLoaded', () => {
+import initGkeDropdowns from './gke_cluster';
+import initGkeNamespace from './gke_cluster_namespace';
+import PersistentUserCallout from '~/persistent_user_callout';
+
+const newClusterViews = [':clusters:new', ':clusters:create_gcp', ':clusters:create_user'];
+
+const isProjectLevelCluster = page => page.startsWith('project:clusters');
+
+export default (document, gon) => {
+  const { page } = document.body.dataset;
+  const isNewClusterView = newClusterViews.some(view => page.endsWith(view));
+
+  if (!isNewClusterView) {
+    return;
+  }
+
+  const callout = document.querySelector('.gcp-signup-offer');
+  PersistentUserCallout.factory(callout);
+
+  initGkeDropdowns();
+
   if (gon.features.createEksClusters) {
     import(/* webpackChunkName: 'eks_cluster' */ '~/create_cluster/eks_cluster')
       .then(({ default: initCreateEKSCluster }) => {
@@ -10,4 +30,8 @@ document.addEventListener('DOMContentLoaded', () => {
       })
       .catch(() => {});
   }
-});
+
+  if (isProjectLevelCluster(page)) {
+    initGkeNamespace();
+  }
+};

app/assets/javascripts/pages/admin/clusters/index.js

-import PersistentUserCallout from '~/persistent_user_callout';
-import initGkeDropdowns from '~/create_cluster/gke_cluster';
-
-function initGcpSignupCallout() {
-  const callout = document.querySelector('.gcp-signup-offer');
-  PersistentUserCallout.factory(callout);
-}
+import initCreateCluster from '~/create_cluster/init_create_cluster';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const { page } = document.body.dataset;
-  const newClusterViews = [
-    'admin:clusters:new',
-    'admin:clusters:create_gcp',
-    'admin:clusters:create_user',
-  ];
-
-  if (newClusterViews.indexOf(page) > -1) {
-    initGcpSignupCallout();
-    initGkeDropdowns();
-  }
+  initCreateCluster(document, gon);
 });

app/assets/javascripts/pages/groups/index.js

-import PersistentUserCallout from '~/persistent_user_callout';
-import initGkeDropdowns from '~/create_cluster/gke_cluster';
-
-function initGcpSignupCallout() {
-  const callout = document.querySelector('.gcp-signup-offer');
-  PersistentUserCallout.factory(callout);
-}
+import initCreateCluster from '~/create_cluster/init_create_cluster';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const { page } = document.body.dataset;
-  const newClusterViews = [
-    'groups:clusters:new',
-    'groups:clusters:create_gcp',
-    'groups:clusters:create_user',
-  ];
-
-  if (newClusterViews.indexOf(page) > -1) {
-    initGcpSignupCallout();
-    initGkeDropdowns();
-  }
+  initCreateCluster(document, gon);
 });

app/assets/javascripts/pages/projects/clusters/show/index.js

 import ClustersBundle from '~/clusters/clusters_bundle';
-import initGkeNamespace from '~/projects/gke_cluster_namespace';
+import initGkeNamespace from '~/create_cluster/gke_cluster_namespace';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ClustersBundle(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/index.js

-import initGkeDropdowns from '~/create_cluster/gke_cluster';
-import initGkeNamespace from '~/projects/gke_cluster_namespace';
-import PersistentUserCallout from '../../persistent_user_callout';
 import Project from './project';
 import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
+import initCreateCluster from '~/create_cluster/init_create_cluster';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const { page } = document.body.dataset;
-  const newClusterViews = [
-    'projects:clusters:new',
-    'projects:clusters:create_gcp',
-    'projects:clusters:create_user',
-  ];
-
-  if (newClusterViews.indexOf(page) > -1) {
-    const callout = document.querySelector('.gcp-signup-offer');
-    PersistentUserCallout.factory(callout);
-
-    initGkeDropdowns();
-    initGkeNamespace();
-  }
+  initCreateCluster(document, gon);
 
   new Project(); // eslint-disable-line no-new
   new ShortcutsNavigation(); // eslint-disable-line no-new

spec/features/admin/clusters/eks_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Instance-level AWS EKS Cluster', :js do
+  let(:user) { create(:admin) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when user does not have a cluster and visits group clusters page' do
+    before do
+      visit admin_clusters_path
+
+      click_link 'Add Kubernetes cluster'
+    end
+
+    context 'when user creates a cluster on AWS EKS' do
+      before do
+        click_link 'Amazon EKS'
+      end
+
+      it 'user sees a form to create an EKS cluster' do
+        expect(page).to have_content('Create new Cluster on EKS')
+      end
+    end
+  end
+end

spec/features/groups/clusters/eks_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Group AWS EKS Cluster', :js do
+  let(:group) { create(:group) }
+  let(:user) { create(:user) }
+
+  before do
+    group.add_maintainer(user)
+    gitlab_sign_in(user)
+
+    allow(Groups::ClustersController).to receive(:STATUS_POLLING_INTERVAL) { 100 }
+    allow_any_instance_of(Clusters::Kubernetes::CreateOrUpdateNamespaceService).to receive(:execute)
+    allow_any_instance_of(Clusters::Cluster).to receive(:retrieve_connection_status).and_return(:connected)
+  end
+
+  context 'when user does not have a cluster and visits group clusters page' do
+    before do
+      visit group_clusters_path(group)
+
+      click_link 'Add Kubernetes cluster'
+    end
+
+    context 'when user creates a cluster on AWS EKS' do
+      before do
+        click_link 'Amazon EKS'
+      end
+
+      it 'user sees a form to create an EKS cluster' do
+        expect(page).to have_content('Create new Cluster on EKS')
+      end
+    end
+  end
+end

spec/features/projects/clusters/eks_spec.rb

@@ -27,7 +27,7 @@ describe 'AWS EKS Cluster', :js do
       end
 
       it 'user sees a form to create an EKS cluster' do
-        expect(page).to have_selector(:css, '.js-create-eks-cluster')
+        expect(page).to have_content('Create new Cluster on EKS')
       end
     end
   end

spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js → spec/frontend/create_cluster/gke_cluster_namespace/gke_cluster_namespace_spec.js

-import initGkeNamespace from '~/projects/gke_cluster_namespace';
+import initGkeNamespace from '~/create_cluster/gke_cluster_namespace';
 
 describe('GKE cluster namespace', () => {
   const changeEvent = new Event('change');
@@ -14,7 +14,7 @@ describe('GKE cluster namespace', () => {
       <input class="js-gl-managed" type="checkbox" value="1" checked />
       <div class="js-namespace">
         <input type="text" />
-      </div>      
+      </div>
       <div class="js-namespace-prefixed">
         <input type="text" />
       </div>

spec/frontend/create_cluster/init_create_cluster_spec.js

+import initCreateCluster from '~/create_cluster/init_create_cluster';
+import initGkeDropdowns from '~/create_cluster/gke_cluster';
+import initGkeNamespace from '~/create_cluster/gke_cluster_namespace';
+import PersistentUserCallout from '~/persistent_user_callout';
+
+jest.mock('~/create_cluster/gke_cluster', () => jest.fn());
+jest.mock('~/create_cluster/gke_cluster_namespace', () => jest.fn());
+jest.mock('~/persistent_user_callout', () => ({
+  factory: jest.fn(),
+}));
+
+describe('initCreateCluster', () => {
+  let document;
+  let gon;
+
+  beforeEach(() => {
+    document = {
+      body: { dataset: {} },
+      querySelector: jest.fn(),
+    };
+    gon = { features: {} };
+  });
+  afterEach(() => {
+    initGkeDropdowns.mockReset();
+    initGkeNamespace.mockReset();
+    PersistentUserCallout.factory.mockReset();
+  });
+
+  describe.each`
+    pageSuffix                 | page
+    ${':clusters:new'}         | ${'project:clusters:new'}
+    ${':clusters:create_gcp'}  | ${'groups:clusters:create_gcp'}
+    ${':clusters:create_user'} | ${'admin:clusters:create_user'}
+  `('when cluster page ends in $pageSuffix', ({ page }) => {
+    beforeEach(() => {
+      document.body.dataset = { page };
+
+      initCreateCluster(document, gon);
+    });
+
+    it('initializes create GKE cluster app', () => {
+      expect(initGkeDropdowns).toHaveBeenCalled();
+    });
+
+    it('initializes gcp signup offer banner', () => {
+      expect(PersistentUserCallout.factory).toHaveBeenCalled();
+    });
+  });
+
+  describe('when creating a project level cluster', () => {
+    it('initializes gke namespace app', () => {
+      document.body.dataset.page = 'project:clusters:new';
+
+      initCreateCluster(document, gon);
+
+      expect(initGkeNamespace).toHaveBeenCalled();
+    });
+  });
+
+  describe.each`
+    clusterLevel        | page
+    ${'group level'}    | ${'groups:clusters:new'}
+    ${'instance level'} | ${'admin:clusters:create_gcp'}
+  `('when creating a $clusterLevel cluster', ({ page }) => {
+    it('does not initialize gke namespace app', () => {
+      document.body.dataset = { page };
+
+      initCreateCluster(document, gon);
+
+      expect(initGkeNamespace).not.toHaveBeenCalled();
+    });
+  });
+});