.gitlab/ci/rails.gitlab-ci.yml

@@ -38,7 +38,7 @@
   needs: ["setup-test-env", "retrieve-tests-metadata", "compile-test-assets", "detect-tests"]
   script:
     - !reference [.base-script, script]
-    - rspec_paralellized_job "--tag ~quarantine --tag ~geo --tag ~level:migration"
+    - rspec_paralellized_job "--tag ~quarantine --tag ~level:migration"
 
 .base-artifacts:
   artifacts:
@@ -61,7 +61,7 @@
     - .rails:rules:ee-and-foss-migration
   script:
     - !reference [.base-script, script]
-    - rspec_paralellized_job "--tag ~quarantine --tag ~geo --tag level:migration"
+    - rspec_paralellized_job "--tag ~quarantine --tag level:migration"
 
 .rspec-base-pg11:
   extends:
@@ -123,33 +123,6 @@
     - .rspec-base
     - .use-pg13-ee
 
-.rspec-ee-base-geo:
-  extends: .rspec-base
-  script:
-    - !reference [.base-script, script]
-    - rspec_paralellized_job "--tag ~quarantine --tag geo"
-
-.rspec-ee-base-geo-pg11:
-  extends:
-    - .rspec-ee-base-geo
-    - .use-pg11-ee
-
-.rspec-ee-base-geo-pg12:
-  extends:
-    - .rspec-ee-base-geo
-    - .use-pg12-ee
-
-.rspec-jh-base-geo-pg12:
-  extends:
-    - .rspec-jh-base-pg12
-  script:
-    - !reference [.rspec-ee-base-geo, script]
-
-.rspec-ee-base-geo-pg13:
-  extends:
-    - .rspec-ee-base-geo
-    - .use-pg13-ee
-
 .db-job-base:
   extends:
     - .rails-job-base
@@ -172,10 +145,7 @@
   parallel: 22
 
 .rspec-ee-unit-parallel:
-  parallel: 14
-
-.rspec-ee-unit-geo-parallel:
-  parallel: 2
+  parallel: 16
 
 .rspec-integration-parallel:
   parallel: 10
@@ -522,9 +492,6 @@ rspec:deprecations:
     - rspec-ee unit pg12
     - rspec-ee integration pg12
     - rspec-ee system pg12
-    - rspec-ee unit pg12 geo
-    - rspec-ee integration pg12 geo
-    - rspec-ee system pg12 geo
   variables:
     SETUP_DB: "false"
   script:
@@ -576,14 +543,6 @@ rspec:coverage:
     - rspec-ee unit pg12 single-db
     - rspec-ee integration pg12 single-db
     - rspec-ee system pg12 single-db
-    # Geo jobs
-    - rspec-ee unit pg12 geo
-    - rspec-ee integration pg12 geo
-    - rspec-ee system pg12 geo
-    # Geo minimal jobs
-    - rspec-ee unit pg12 geo minimal
-    - rspec-ee integration pg12 geo minimal
-    - rspec-ee system pg12 geo minimal
     # Memory jobs
     - memory-on-boot
     # As-if-FOSS jobs
@@ -878,40 +837,6 @@ rspec-ee system pg12 single-db:
     - .single-db-rspec
     - .rails:rules:single-db
 
-rspec-ee unit pg12 geo:
-  extends:
-    - .rspec-ee-base-geo-pg12
-    - .rails:rules:ee-only-unit
-    - .rspec-ee-unit-geo-parallel
-
-rspec-ee unit pg12 geo minimal:
-  extends:
-    - rspec-ee unit pg12 geo
-    - .minimal-rspec-tests
-    - .rails:rules:ee-only-unit:minimal
-
-rspec-ee integration pg12 geo:
-  extends:
-    - .rspec-ee-base-geo-pg12
-    - .rails:rules:ee-only-integration
-
-rspec-ee integration pg12 geo minimal:
-  extends:
-    - rspec-ee integration pg12 geo
-    - .minimal-rspec-tests
-    - .rails:rules:ee-only-integration:minimal
-
-rspec-ee system pg12 geo:
-  extends:
-    - .rspec-ee-base-geo-pg12
-    - .rails:rules:ee-only-system
-
-rspec-ee system pg12 geo minimal:
-  extends:
-    - rspec-ee system pg12 geo
-    - .minimal-rspec-tests
-    - .rails:rules:ee-only-system:minimal
-
 rspec-ee migration pg12-as-if-jh:
   extends:
     - .rspec-jh-base-pg12
@@ -937,22 +862,6 @@ rspec-ee system pg12-as-if-jh:
     - .rails:rules:as-if-jh-rspec
     - .rspec-ee-system-parallel
 
-rspec-ee unit pg12-as-if-jh geo:
-  extends:
-    - .rspec-jh-base-geo-pg12
-    - .rails:rules:as-if-jh-rspec
-    - .rspec-ee-unit-geo-parallel
-
-rspec-ee integration pg12-as-if-jh geo:
-  extends:
-    - .rspec-jh-base-geo-pg12
-    - .rails:rules:as-if-jh-rspec
-
-rspec-ee system pg12-as-if-jh geo:
-  extends:
-    - .rspec-jh-base-geo-pg12
-    - .rails:rules:as-if-jh-rspec
-
 rspec-jh migration pg12-as-if-jh:
   extends:
     - .rspec-jh-base-pg12
@@ -974,21 +883,6 @@ rspec-jh system pg12-as-if-jh:
     - .rspec-jh-base-pg12
     - .rails:rules:as-if-jh-rspec
 
-rspec-jh unit pg12-as-if-jh geo:
-  extends:
-    - .rspec-jh-base-geo-pg12
-    - .rails:rules:as-if-jh-rspec
-
-rspec-jh integration pg12-as-if-jh geo:
-  extends:
-    - .rspec-jh-base-geo-pg12
-    - .rails:rules:as-if-jh-rspec
-
-rspec-jh system pg12-as-if-jh geo:
-  extends:
-    - .rspec-jh-base-geo-pg12
-    - .rails:rules:as-if-jh-rspec
-
 db:rollback geo:
   extends:
     - db:rollback
@@ -1086,22 +980,6 @@ rspec-ee system pg11:
     - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
     - .rspec-ee-system-parallel
 
-rspec-ee unit pg11 geo:
-  extends:
-    - .rspec-ee-base-geo-pg11
-    - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
-    - .rspec-ee-unit-geo-parallel
-
-rspec-ee integration pg11 geo:
-  extends:
-    - .rspec-ee-base-geo-pg11
-    - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
-
-rspec-ee system pg11 geo:
-  extends:
-    - .rspec-ee-base-geo-pg11
-    - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
-
 # PG13
 rspec-ee migration pg13:
   extends:
@@ -1127,22 +1005,6 @@ rspec-ee system pg13:
     - .rspec-ee-base-pg13
     - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
     - .rspec-ee-system-parallel
-
-rspec-ee unit pg13 geo:
-  extends:
-    - .rspec-ee-base-geo-pg13
-    - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
-    - .rspec-ee-unit-geo-parallel
-
-rspec-ee integration pg13 geo:
-  extends:
-    - .rspec-ee-base-geo-pg13
-    - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
-
-rspec-ee system pg13 geo:
-  extends:
-    - .rspec-ee-base-geo-pg13
-    - .rails:rules:default-branch-schedule-nightly--code-backstage-ee-only
 # EE: default branch nightly scheduled jobs #
 #####################################
 

.gitlab/ci/review-apps/qa.gitlab-ci.yml

@@ -152,4 +152,6 @@ knapsack-report:
     - .generate-knapsack-report-base
   stage: post-qa
   variables:
-    QA_KNAPSACK_REPORT_FILE_PATTERN: $CI_PROJECT_DIR/tmp/knapsack/*/*.json
+    # knapsack report upload uses gitlab-qa image with code already there
+    GIT_STRATEGY: none
+    QA_KNAPSACK_REPORT_FILE_PATTERN: $CI_PROJECT_DIR/qa/tmp/knapsack/*/*.json

.gitlab/ci/test-metadata.gitlab-ci.yml

@@ -38,9 +38,6 @@ update-tests-metadata:
     - rspec-ee unit pg12
     - rspec-ee integration pg12
     - rspec-ee system pg12
-    - rspec-ee unit pg12 geo
-    - rspec-ee integration pg12 geo
-    - rspec-ee system pg12 geo
   script:
     - run_timed_command "retry gem install fog-aws mime-types activesupport rspec_profiling postgres-copy --no-document"
     - source ./scripts/rspec_helpers.sh

.rubocop_todo/rspec/any_instance_of.yml

@@ -164,7 +164,6 @@ RSpec/AnyInstanceOf:
   - spec/controllers/snippets/notes_controller_spec.rb
   - spec/controllers/snippets_controller_spec.rb
   - spec/features/admin/admin_mode/login_spec.rb
-  - spec/features/groups/clusters/eks_spec.rb
   - spec/features/groups/members/tabs_spec.rb
   - spec/features/ide/static_object_external_storage_csp_spec.rb
   - spec/features/issuables/issuable_list_spec.rb

GITALY_SERVER_VERSION

-372599313791cb92e579e0ff02279f33cbcd71b5
+dd2e90412e63dceb13e58638549c203ab5f6723c

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

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { mapState } from 'vuex';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 
 export default {
@@ -10,13 +10,11 @@ export default {
       'ClusterIntegration|Enter details about your cluster. %{linkStart}How do I use a certificate to connect to my cluster?%{linkEnd}',
     ),
   },
+  clusterConnectHelpPath: helpPagePath('user/project/clusters/add_existing_cluster'),
   components: {
     GlLink,
     GlSprintf,
   },
-  computed: {
-    ...mapState(['clusterConnectHelpPath']),
-  },
 };
 </script>
 
@@ -26,7 +24,7 @@ export default {
     <p>
       <gl-sprintf :message="$options.i18n.information">
         <template #link="{ content }">
-          <gl-link :href="clusterConnectHelpPath" target="_blank">{{ content }}</gl-link>
+          <gl-link :href="$options.clusterConnectHelpPath">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </p>

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

@@ -159,7 +159,7 @@ export default {
         )
       }}</span>
       <template #modal-footer>
-        <gl-button variant="secondary" @click="handleCancel">{{ __('Cancel') }}</gl-button>
+        <gl-button @click="handleCancel">{{ __('Cancel') }}</gl-button>
         <template v-if="confirmCleanup">
           <gl-button
             :disabled="!canSubmit"

app/assets/javascripts/clusters/new_cluster.js

 import Vue from 'vue';
 import NewCluster from './components/new_cluster.vue';
-import { createStore } from './stores/new_cluster';
 
 export default () => {
-  const entryPoint = document.querySelector('#js-cluster-new');
+  const el = document.querySelector('#js-cluster-new');
 
-  if (!entryPoint) {
+  if (!el) {
     return null;
   }
 
   return new Vue({
-    el: '#js-cluster-new',
-    store: createStore(entryPoint.dataset),
+    el,
     render(createElement) {
       return createElement(NewCluster);
     },

app/assets/javascripts/clusters/stores/new_cluster/index.js

-import Vue from 'vue';
-import Vuex from 'vuex';
-import state from './state';
-
-Vue.use(Vuex);
-
-export const createStore = (initialState) =>
-  new Vuex.Store({
-    state: state(initialState),
-  });
-
-export default createStore;

app/assets/javascripts/clusters/stores/new_cluster/state.js

-export default (initialState = {}) => ({
-  clusterConnectHelpPath: initialState.clusterConnectHelpPath,
-});

app/assets/javascripts/clusters_list/components/clusters_actions.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
 
 import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
@@ -7,6 +7,7 @@ export default {
   i18n: CLUSTERS_ACTIONS,
   INSTALL_AGENT_MODAL_ID,
   components: {
+    GlButton,
     GlDropdown,
     GlDropdownItem,
     GlTooltip,
@@ -15,7 +16,6 @@ export default {
     GlModalDirective,
   },
   inject: [
-    'newClusterPath',
     'addClusterPath',
     'newClusterDocsPath',
     'canAddCluster',
@@ -42,20 +42,59 @@ export default {
       }
       return this.addClusterPath;
     },
+    actionItems() {
+      const createCluster = {
+        href: this.newClusterDocsPath,
+        title: this.$options.i18n.createCluster,
+        testid: 'create-cluster-link',
+      };
+      const connectCluster = {
+        href: this.addClusterPath,
+        title: this.$options.i18n.connectClusterCertificate,
+        testid: 'connect-cluster-link',
+      };
+      const actions = [];
+
+      if (this.displayClusterAgents) {
+        actions.push(createCluster);
+      }
+      if (this.displayClusterAgents && this.certificateBasedClustersEnabled) {
+        actions.push(connectCluster);
+      }
+
+      return actions;
+    },
+  },
+  methods: {
+    getTooltipTarget() {
+      return this.actionItems.length ? this.$refs.actions.$el : this.$refs.actionsContainer;
+    },
   },
 };
 </script>
 
 <template>
-  <div class="nav-controls gl-ml-auto">
+  <div ref="actionsContainer" class="nav-controls gl-ml-auto">
     <gl-tooltip
       v-if="!canAddCluster"
-      :target="() => $refs.dropdown.$el"
-      :title="$options.i18n.dropdownDisabledHint"
+      :target="() => getTooltipTarget()"
+      :title="$options.i18n.actionsDisabledHint"
     />
 
+    <gl-button
+      v-if="!actionItems.length"
+      data-qa-selector="clusters_actions_button"
+      category="primary"
+      variant="confirm"
+      :disabled="!canAddCluster"
+      :href="defaultActionUrl"
+    >
+      {{ defaultActionText }}
+    </gl-button>
+
     <gl-dropdown
-      ref="dropdown"
+      v-else
+      ref="actions"
       v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
       data-qa-selector="clusters_actions_button"
       category="primary"
@@ -67,31 +106,13 @@ export default {
       right
     >
       <gl-dropdown-item
-        v-if="displayClusterAgents"
-        :href="newClusterDocsPath"
-        data-testid="create-cluster-link"
-        @click.stop
-      >
-        {{ $options.i18n.createCluster }}
-      </gl-dropdown-item>
-
-      <template v-if="displayClusterAgents && certificateBasedClustersEnabled">
-        <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
-          {{ $options.i18n.createClusterCertificate }}
-        </gl-dropdown-item>
-
-        <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
-          {{ $options.i18n.connectClusterCertificate }}
-        </gl-dropdown-item>
-      </template>
-
-      <gl-dropdown-item
-        v-if="certificateBasedClustersEnabled && !displayClusterAgents"
-        :href="newClusterPath"
-        data-testid="new-cluster-link"
+        v-for="action in actionItems"
+        :key="action.title"
+        :href="action.href"
+        :data-testid="action.testid"
         @click.stop
       >
-        {{ $options.i18n.createClusterDeprecated }}
+        {{ action.title }}
       </gl-dropdown-item>
     </gl-dropdown>
   </div>

app/assets/javascripts/clusters_list/constants.js

@@ -234,11 +234,9 @@ export const CLUSTERS_ACTIONS = {
   connectCluster: s__('ClusterAgents|Connect a cluster'),
   connectWithAgent: s__('ClusterAgents|Connect a cluster (agent)'),
   connectClusterDeprecated: s__('ClusterAgents|Connect a cluster (deprecated)'),
-  createClusterDeprecated: s__('ClusterAgents|Create a cluster (deprecated)'),
   createCluster: s__('ClusterAgents|Create a cluster'),
-  createClusterCertificate: s__('ClusterAgents|Create a cluster (certificate - deprecated)'),
   connectClusterCertificate: s__('ClusterAgents|Connect a cluster (certificate - deprecated)'),
-  dropdownDisabledHint: s__(
+  actionsDisabledHint: s__(
     'ClusterAgents|Requires a Maintainer or greater role to perform these actions',
   ),
 };

app/assets/javascripts/clusters_list/index.js

@@ -23,7 +23,6 @@ export default () => {
     defaultBranchName,
     projectPath,
     kasAddress,
-    newClusterPath,
     addClusterPath,
     newClusterDocsPath,
     emptyStateHelpText,
@@ -42,7 +41,6 @@ export default () => {
       emptyStateImage,
       projectPath,
       kasAddress,
-      newClusterPath,
       addClusterPath,
       newClusterDocsPath,
       emptyStateHelpText,

app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue

-<script>
-import { GlIcon } from '@gitlab/ui';
-import $ from 'jquery';
-import { isNil } from 'lodash';
-import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
-import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
-
-const toArray = (value) => (isNil(value) ? [] : [].concat(value));
-const itemsProp = (items, prop) => items.map((item) => item[prop]);
-const defaultSearchFn = (searchQuery, labelProp) => (item) =>
-  item[labelProp].toLowerCase().indexOf(searchQuery) > -1;
-
-export default {
-  components: {
-    DropdownButton,
-    DropdownSearchInput,
-    DropdownHiddenInput,
-    GlIcon,
-  },
-  props: {
-    fieldName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    defaultValue: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    value: {
-      type: [Object, Array, String],
-      required: false,
-      default: () => null,
-    },
-    labelProperty: {
-      type: String,
-      required: false,
-      default: 'name',
-    },
-    valueProperty: {
-      type: String,
-      required: false,
-      default: 'value',
-    },
-    items: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    loadingText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    disabledText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    hasErrors: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    multiple: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    searchFieldPlaceholder: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    emptyText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    searchFn: {
-      type: Function,
-      required: false,
-      default: defaultSearchFn,
-    },
-  },
-  data() {
-    return {
-      searchQuery: '',
-      focusOnSearch: false,
-    };
-  },
-  computed: {
-    toggleText() {
-      if (this.loading && this.loadingText) {
-        return this.loadingText;
-      }
-
-      if (this.disabled && this.disabledText) {
-        return this.disabledText;
-      }
-
-      if (!this.selectedItems.length) {
-        return this.placeholder;
-      }
-
-      return this.selectedItemsLabels;
-    },
-    results() {
-      return this.getItemsOrEmptyList().filter(this.searchFn(this.searchQuery, this.labelProperty));
-    },
-    selectedItems() {
-      const valueProp = this.valueProperty;
-      const valueList = toArray(this.value);
-      const items = this.getItemsOrEmptyList();
-
-      return items.filter((item) => valueList.some((value) => item[valueProp] === value));
-    },
-    selectedItemsLabels() {
-      return itemsProp(this.selectedItems, this.labelProperty).join(', ');
-    },
-    selectedItemsValues() {
-      return itemsProp(this.selectedItems, this.valueProperty).join(', ');
-    },
-  },
-  mounted() {
-    $(this.$refs.dropdown)
-      .on('shown.bs.dropdown', () => {
-        this.focusOnSearch = true;
-      })
-      .on('hidden.bs.dropdown', () => {
-        this.focusOnSearch = false;
-      });
-  },
-  beforeDestroy() {
-    // eslint-disable-next-line @gitlab/no-global-event-off
-    $(this.$refs.dropdown).off();
-  },
-  methods: {
-    getItemsOrEmptyList() {
-      return this.items || [];
-    },
-    selectSingle(item) {
-      this.$emit('input', item[this.valueProperty]);
-    },
-    selectMultiple(item) {
-      const value = toArray(this.value);
-      const itemValue = item[this.valueProperty];
-      const itemValueIndex = value.indexOf(itemValue);
-
-      if (itemValueIndex > -1) {
-        value.splice(itemValueIndex, 1);
-      } else {
-        value.push(itemValue);
-      }
-
-      this.$emit('input', value);
-    },
-    isSelected(item) {
-      return this.selectedItems.includes(item);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div ref="dropdown" class="dropdown">
-      <dropdown-hidden-input :name="fieldName" :value="selectedItemsValues" />
-      <dropdown-button
-        :class="{ 'border-danger': hasErrors }"
-        :is-disabled="disabled"
-        :is-loading="loading"
-        :toggle-text="toggleText"
-      />
-      <div class="dropdown-menu dropdown-select">
-        <dropdown-search-input
-          v-model="searchQuery"
-          :focused="focusOnSearch"
-          :placeholder-text="searchFieldPlaceholder"
-        />
-        <div class="dropdown-content">
-          <ul>
-            <li v-if="!results.length">
-              <span class="js-empty-text menu-item">{{ emptyText }}</span>
-            </li>
-            <li v-for="item in results" :key="item.id">
-              <button
-                v-if="multiple"
-                class="js-dropdown-item d-flex align-items-center"
-                type="button"
-                @click.stop.prevent="selectMultiple(item)"
-              >
-                <gl-icon
-                  :class="[{ invisible: !isSelected(item) }, 'mr-1']"
-                  name="mobile-issue-close"
-                />
-                <slot name="item" :item="item">{{ item.name }}</slot>
-              </button>
-              <button
-                v-else
-                class="js-dropdown-item"
-                type="button"
-                @click.prevent="selectSingle(item)"
-              >
-                <slot name="item" :item="item">{{ item.name }}</slot>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <span
-      v-if="hasErrors && errorMessage"
-      :class="[
-        'form-text js-eks-dropdown-error-message',
-        {
-          'text-danger': hasErrors,
-          'text-muted': !hasErrors,
-        },
-      ]"
-      >{{ errorMessage }}</span
-    >
-  </div>
-</template>

app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue

-<script>
-import { mapState } from 'vuex';
-import EksClusterConfigurationForm from './eks_cluster_configuration_form.vue';
-import ServiceCredentialsForm from './service_credentials_form.vue';
-
-export default {
-  components: {
-    ServiceCredentialsForm,
-    EksClusterConfigurationForm,
-  },
-  props: {
-    gitlabManagedClusterHelpPath: {
-      type: String,
-      required: true,
-    },
-    namespacePerEnvironmentHelpPath: {
-      type: String,
-      required: true,
-    },
-    kubernetesIntegrationHelpPath: {
-      type: String,
-      required: true,
-    },
-    accountAndExternalIdsHelpPath: {
-      type: String,
-      required: true,
-    },
-    createRoleArnHelpPath: {
-      type: String,
-      required: true,
-    },
-    externalLinkIcon: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['hasCredentials']),
-  },
-};
-</script>
-<template>
-  <div class="js-create-eks-cluster">
-    <eks-cluster-configuration-form
-      v-if="hasCredentials"
-      :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
-      :namespace-per-environment-help-path="namespacePerEnvironmentHelpPath"
-      :kubernetes-integration-help-path="kubernetesIntegrationHelpPath"
-      :external-link-icon="externalLinkIcon"
-    />
-    <service-credentials-form
-      v-else
-      :create-role-arn-help-path="createRoleArnHelpPath"
-      :account-and-external-ids-help-path="accountAndExternalIdsHelpPath"
-      :external-link-icon="externalLinkIcon"
-    />
-  </div>
-</template>

app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue

-<script>
-import { GlButton, GlFormGroup, GlFormInput, GlIcon, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
-import { mapState, mapActions } from 'vuex';
-import { s__, __ } from '~/locale';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import { DEFAULT_REGION } from '../constants';
-
-export default {
-  components: {
-    GlButton,
-    GlFormGroup,
-    GlFormInput,
-    GlIcon,
-    GlLink,
-    GlSprintf,
-    ClipboardButton,
-    GlAlert,
-  },
-  props: {
-    accountAndExternalIdsHelpPath: {
-      type: String,
-      required: true,
-    },
-    createRoleArnHelpPath: {
-      type: String,
-      required: true,
-    },
-    externalLinkIcon: {
-      type: String,
-      required: true,
-    },
-  },
-  i18n: {
-    regionInputLabel: s__('ClusterIntegration|Cluster Region'),
-    regionHelpPath: 'https://aws.amazon.com/about-aws/global-infrastructure/regions_az/',
-    regionHelpText: s__(
-      'ClusterIntegration|Select the region you want to create the new cluster in. Make sure you have access to this region for your role to be able to authenticate. If no region is selected, we will use %{codeStart}DEFAULT_REGION%{codeEnd}. Learn more about %{linkStart}Regions%{linkEnd}.',
-    ),
-    accountAndExternalIdsHelpText: s__(
-      'ClusterIntegration|The Amazon Resource Name (ARN) associated with your role. If you do not have a provisioned role, first create one on %{awsLinkStart}Amazon Web Services %{awsLinkEnd} using the above account and external IDs. %{moreInfoStart}More information%{moreInfoEnd}',
-    ),
-    regionHelpTextDefaultRegion: DEFAULT_REGION,
-  },
-  data() {
-    return {
-      roleArn: this.$store.state.roleArn,
-      selectedRegion: this.$store.state.selectedRegion,
-    };
-  },
-  computed: {
-    ...mapState(['accountId', 'externalId', 'isCreatingRole', 'createRoleError']),
-    submitButtonDisabled() {
-      return this.isCreatingRole || !this.roleArn;
-    },
-    submitButtonLabel() {
-      return this.isCreatingRole
-        ? __('Authenticating')
-        : s__('ClusterIntegration|Authenticate with AWS');
-    },
-    awsHelpLink() {
-      return 'https://console.aws.amazon.com/iam/home?#roles';
-    },
-  },
-  methods: {
-    ...mapActions(['createRole']),
-  },
-};
-</script>
-<template>
-  <form name="service-credentials-form">
-    <h4>{{ s__('ClusterIntegration|Authenticate with Amazon Web Services') }}</h4>
-    <p>
-      {{
-        s__(
-          'ClusterIntegration|You must grant access to your organization’s AWS resources in order to create a new EKS cluster. To grant access, create a provision role using the account and external ID below and provide us the ARN.',
-        )
-      }}
-    </p>
-    <gl-alert
-      v-if="createRoleError"
-      class="js-invalid-credentials gl-mb-5"
-      variant="danger"
-      :dismissible="false"
-    >
-      {{ createRoleError }}
-    </gl-alert>
-    <div class="form-row">
-      <div class="form-group col-md-6">
-        <label for="gitlab-account-id">{{ __('Account ID') }}</label>
-        <div class="input-group">
-          <gl-form-input id="gitlab-account-id" type="text" readonly :value="accountId" />
-          <div class="input-group-append">
-            <clipboard-button
-              :text="accountId"
-              :title="__('Copy Account ID to clipboard')"
-              class="input-group-text js-copy-account-id-button"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="form-group col-md-6">
-        <label for="eks-external-id">{{ __('External ID') }}</label>
-        <div class="input-group">
-          <gl-form-input id="eks-external-id" type="text" readonly :value="externalId" />
-          <div class="input-group-append">
-            <clipboard-button
-              :text="externalId"
-              :title="__('Copy External ID to clipboard')"
-              class="input-group-text js-copy-external-id-button"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="col-12 mb-3 mt-n3">
-        <p class="form-text text-muted">
-          <gl-sprintf :message="$options.i18n.accountAndExternalIdsHelpText">
-            <template #awsLink="{ content }">
-              <gl-link :href="awsHelpLink" target="_blank">
-                {{ content }}
-                <gl-icon name="external-link" class="gl-vertical-align-middle" />
-              </gl-link>
-            </template>
-            <template #moreInfo="{ content }">
-              <gl-link :href="accountAndExternalIdsHelpPath" target="_blank">
-                {{ content }}
-              </gl-link>
-            </template>
-          </gl-sprintf>
-        </p>
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="eks-provision-role-arn">{{ s__('ClusterIntegration|Provision Role ARN') }}</label>
-      <gl-form-input id="eks-provision-role-arn" v-model="roleArn" />
-      <p class="form-text text-muted">
-        <gl-sprintf :message="$options.i18n.accountAndExternalIdsHelpText">
-          <template #awsLink="{ content }">
-            <gl-link :href="awsHelpLink" target="_blank">
-              {{ content }}
-              <gl-icon name="external-link" class="gl-vertical-align-middle" />
-            </gl-link>
-          </template>
-          <template #moreInfo="{ content }">
-            <gl-link :href="accountAndExternalIdsHelpPath" target="_blank">
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </div>
-
-    <gl-form-group :label="$options.i18n.regionInputLabel">
-      <gl-form-input id="eks-region" v-model="selectedRegion" type="text" />
-
-      <template #description>
-        <gl-sprintf :message="$options.i18n.regionHelpText">
-          <template #code>
-            <code>{{ $options.i18n.regionHelpTextDefaultRegion }}</code>
-          </template>
-
-          <template #link="{ content }">
-            <gl-link :href="$options.i18n.regionHelpPath" target="_blank">
-              {{ content }}
-              <gl-icon name="external-link" />
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </template>
-    </gl-form-group>
-
-    <gl-button
-      variant="success"
-      category="primary"
-      type="submit"
-      :disabled="submitButtonDisabled"
-      :loading="isCreatingRole"
-      @click.prevent="createRole({ roleArn, selectedRegion, externalId })"
-    >
-      {{ submitButtonLabel }}
-    </gl-button>
-  </form>
-</template>

app/assets/javascripts/create_cluster/eks_cluster/constants.js

-export const DEFAULT_REGION = 'us-east-2';
-
-export const KUBERNETES_VERSIONS = [
-  { name: '1.16', value: '1.16' },
-  { name: '1.17', value: '1.17' },
-  { name: '1.18', value: '1.18' },
-  { name: '1.19', value: '1.19' },
-  { name: '1.20', value: '1.20', default: true },
-];

app/assets/javascripts/create_cluster/eks_cluster/index.js

-import Vue from 'vue';
-import Vuex from 'vuex';
-import { parseBoolean } from '~/lib/utils/common_utils';
-import CreateEksCluster from './components/create_eks_cluster.vue';
-import createStore from './store';
-
-Vue.use(Vuex);
-
-export default (el) => {
-  const {
-    gitlabManagedClusterHelpPath,
-    namespacePerEnvironmentHelpPath,
-    kubernetesIntegrationHelpPath,
-    accountAndExternalIdsHelpPath,
-    createRoleArnHelpPath,
-    externalId,
-    accountId,
-    instanceTypes,
-    hasCredentials,
-    createRolePath,
-    createClusterPath,
-    externalLinkIcon,
-    roleArn,
-  } = el.dataset;
-
-  return new Vue({
-    el,
-    store: createStore({
-      initialState: {
-        hasCredentials: parseBoolean(hasCredentials),
-        externalId,
-        accountId,
-        instanceTypes: JSON.parse(instanceTypes),
-        createRolePath,
-        createClusterPath,
-        roleArn,
-      },
-    }),
-    components: {
-      CreateEksCluster,
-    },
-    render(createElement) {
-      return createElement('create-eks-cluster', {
-        props: {
-          gitlabManagedClusterHelpPath,
-          namespacePerEnvironmentHelpPath,
-          kubernetesIntegrationHelpPath,
-          accountAndExternalIdsHelpPath,
-          createRoleArnHelpPath,
-          externalLinkIcon,
-        },
-      });
-    },
-  });
-};