Add latest changes from gitlab-org/gitlab@42-42-stable-ee

app/assets/javascripts/boards/index.js

@@ -22,7 +22,6 @@ 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 '~/vue_shared/vue_resource_interceptor';
 import {
   NavigationType,
   convertObjectPropsToCamelCase,
@@ -147,7 +146,7 @@ export default () => {
       updateTokens() {
         this.filterManager.updateTokens();
       },
-      updateDetailIssue(newIssue) {
+      updateDetailIssue(newIssue, multiSelect = false) {
         const { sidebarInfoEndpoint } = newIssue;
         if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
           newIssue.setFetchingState('subscriptions', true);
@@ -186,9 +185,23 @@ export default () => {
             });
         }
+        if (multiSelect) {
+          boardsStore.toggleMultiSelect(newIssue);
+
+          if (boardsStore.detail.issue) {
+            boardsStore.clearDetailIssue();
+            return;
+          }
+
+          return;
+        }
+
         boardsStore.setIssueDetail(newIssue);
       },
-      clearDetailIssue() {
+      clearDetailIssue(multiSelect = false) {
+        if (multiSelect) {
+          boardsStore.clearMultiSelect();
+        }
         boardsStore.clearDetailIssue();
       },
       toggleSubscription(id) {

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

 export default {
+  computed: {
+    validIssueWeight() {
+      return false;
+    },
+  },
   methods: {
     filterByWeight() {},
   },

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

@@ -5,6 +5,7 @@ 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';
 import ListMilestone from './milestone';
@@ -176,6 +177,53 @@ class List {
     });
   }
+  addMultipleIssues(issues, listFrom, newIndex) {
+    let moveBeforeId = null;
+    let moveAfterId = null;
+
+    const listHasIssues = issues.every(issue => this.findIssue(issue.id));
+
+    if (!listHasIssues) {
+      if (newIndex !== undefined) {
+        if (this.issues[newIndex - 1]) {
+          moveBeforeId = this.issues[newIndex - 1].id;
+        }
+
+        if (this.issues[newIndex]) {
+          moveAfterId = this.issues[newIndex].id;
+        }
+
+        this.issues.splice(newIndex, 0, ...issues);
+      } else {
+        this.issues.push(...issues);
+      }
+
+      if (this.label) {
+        issues.forEach(issue => issue.addLabel(this.label));
+      }
+
+      if (this.assignee) {
+        if (listFrom && listFrom.type === 'assignee') {
+          issues.forEach(issue => issue.removeAssignee(listFrom.assignee));
+        }
+        issues.forEach(issue => issue.addAssignee(this.assignee));
+      }
+
+      if (IS_EE && this.milestone) {
+        if (listFrom && listFrom.type === 'milestone') {
+          issues.forEach(issue => issue.removeMilestone(listFrom.milestone));
+        }
+        issues.forEach(issue => issue.addMilestone(this.milestone));
+      }
+
+      if (listFrom) {
+        this.issuesSize += issues.length;
+
+        this.updateMultipleIssues(issues, listFrom, moveBeforeId, moveAfterId);
+      }
+    }
+  }
+
   addIssue(issue, listFrom, newIndex) {
     let moveBeforeId = null;
     let moveAfterId = null;
@@ -230,6 +278,23 @@ class List {
     });
   }
+  moveMultipleIssues({ issues, oldIndicies, newIndex, moveBeforeId, moveAfterId }) {
+    oldIndicies.reverse().forEach(index => {
+      this.issues.splice(index, 1);
+    });
+    this.issues.splice(newIndex, 0, ...issues);
+
+    gl.boardService
+      .moveMultipleIssues({
+        ids: issues.map(issue => issue.id),
+        fromListId: null,
+        toListId: null,
+        moveBeforeId,
+        moveAfterId,
+      })
+      .catch(() => flash(__('Something went wrong while moving issues.')));
+  }
+
   updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId) {
     gl.boardService
       .moveIssue(issue.id, listFrom.id, this.id, moveBeforeId, moveAfterId)
@@ -238,10 +303,37 @@ class List {
       });
   }
+  updateMultipleIssues(issues, listFrom, moveBeforeId, moveAfterId) {
+    gl.boardService
+      .moveMultipleIssues({
+        ids: issues.map(issue => issue.id),
+        fromListId: listFrom.id,
+        toListId: this.id,
+        moveBeforeId,
+        moveAfterId,
+      })
+      .catch(() => flash(__('Something went wrong while moving issues.')));
+  }
+
   findIssue(id) {
     return this.issues.find(issue => issue.id === id);
   }
+  removeMultipleIssues(removeIssues) {
+    const ids = removeIssues.map(issue => issue.id);
+
+    this.issues = this.issues.filter(issue => {
+      const matchesRemove = ids.includes(issue.id);
+
+      if (matchesRemove) {
+        this.issuesSize -= 1;
+        issue.removeLabel(this.label);
+      }
+
+      return !matchesRemove;
+    });
+  }
+
   removeIssue(removeIssue) {
     this.issues = this.issues.filter(issue => {
       const matchesRemove = removeIssue.id === issue.id;

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

@@ -48,6 +48,16 @@ export default class BoardService {
     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);
   }

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

@@ -11,6 +11,7 @@ import { __ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '../eventhub';
+import { ListType } from '../constants';
 const boardsStore = {
   disabled: false,
@@ -39,6 +40,7 @@ const boardsStore = {
     issue: {},
     list: {},
   },
+  multiSelect: { list: [] },
   setEndpoints({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId, recentBoardsEndpoint }) {
     const listsEndpointGenerate = `${listsEndpoint}/generate.json`;
@@ -51,7 +53,6 @@ const boardsStore = {
       recentBoardsEndpoint: `${recentBoardsEndpoint}.json`,
     };
   },
-
   create() {
     this.state.lists = [];
     this.filter.path = getUrlParamsArray().join('&');
@@ -134,6 +135,107 @@ const boardsStore = {
     Object.assign(this.moving, { list, issue });
   },
+  moveMultipleIssuesToList({ listFrom, listTo, issues, newIndex }) {
+    const issueTo = issues.map(issue => listTo.findIssue(issue.id));
+    const issueLists = _.flatten(issues.map(issue => issue.getLists()));
+    const listLabels = issueLists.map(list => list.label);
+
+    const hasMoveableIssues = _.compact(issueTo).length > 0;
+
+    if (!hasMoveableIssues) {
+      // Check if target list assignee is already present in this issue
+      if (
+        listTo.type === ListType.assignee &&
+        listFrom.type === ListType.assignee &&
+        issues.some(issue => issue.findAssignee(listTo.assignee))
+      ) {
+        const targetIssues = issues.map(issue => listTo.findIssue(issue.id));
+        targetIssues.forEach(targetIssue => targetIssue.removeAssignee(listFrom.assignee));
+      } else if (listTo.type === 'milestone') {
+        const currentMilestones = issues.map(issue => issue.milestone);
+        const currentLists = this.state.lists
+          .filter(list => list.type === 'milestone' && list.id !== listTo.id)
+          .filter(list =>
+            list.issues.some(listIssue => issues.some(issue => listIssue.id === issue.id)),
+          );
+
+        issues.forEach(issue => {
+          currentMilestones.forEach(milestone => {
+            issue.removeMilestone(milestone);
+          });
+        });
+
+        issues.forEach(issue => {
+          issue.addMilestone(listTo.milestone);
+        });
+
+        currentLists.forEach(currentList => {
+          issues.forEach(issue => {
+            currentList.removeIssue(issue);
+          });
+        });
+
+        listTo.addMultipleIssues(issues, listFrom, newIndex);
+      } else {
+        // Add to new lists issues if it doesn't already exist
+        listTo.addMultipleIssues(issues, listFrom, newIndex);
+      }
+    } else {
+      listTo.updateMultipleIssues(issues, listFrom);
+      issues.forEach(issue => {
+        issue.removeLabel(listFrom.label);
+      });
+    }
+
+    if (listTo.type === ListType.closed && listFrom.type !== ListType.backlog) {
+      issueLists.forEach(list => {
+        issues.forEach(issue => {
+          list.removeIssue(issue);
+        });
+      });
+
+      issues.forEach(issue => {
+        issue.removeLabels(listLabels);
+      });
+    } else if (listTo.type === ListType.backlog && listFrom.type === ListType.assignee) {
+      issues.forEach(issue => {
+        issue.removeAssignee(listFrom.assignee);
+      });
+      issueLists.forEach(list => {
+        issues.forEach(issue => {
+          list.removeIssue(issue);
+        });
+      });
+    } else if (listTo.type === ListType.backlog && listFrom.type === ListType.milestone) {
+      issues.forEach(issue => {
+        issue.removeMilestone(listFrom.milestone);
+      });
+      issueLists.forEach(list => {
+        issues.forEach(issue => {
+          list.removeIssue(issue);
+        });
+      });
+    } else if (
+      this.shouldRemoveIssue(listFrom, listTo) &&
+      this.issuesAreContiguous(listFrom, issues)
+    ) {
+      listFrom.removeMultipleIssues(issues);
+    }
+  },
+
+  issuesAreContiguous(list, issues) {
+    // When there's only 1 issue selected, we can return early.
+    if (issues.length === 1) return true;
+
+    // Create list of ids for issues involved.
+    const listIssueIds = list.issues.map(issue => issue.id);
+    const movedIssueIds = issues.map(issue => issue.id);
+
+    // Check if moved issue IDs is sub-array
+    // of source list issue IDs (i.e. contiguous selection).
+    return listIssueIds.join('|').includes(movedIssueIds.join('|'));
+  },
+
   moveIssueToList(listFrom, listTo, issue, newIndex) {
     const issueTo = listTo.findIssue(issue.id);
     const issueLists = issue.getLists();
@@ -195,6 +297,17 @@ const boardsStore = {
     list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
   },
+  moveMultipleIssuesInList({ list, issues, oldIndicies, newIndex, idArray }) {
+    const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
+    const afterId = parseInt(idArray[newIndex + issues.length], 10) || null;
+    list.moveMultipleIssues({
+      issues,
+      oldIndicies,
+      newIndex,
+      moveBeforeId: beforeId,
+      moveAfterId: afterId,
+    });
+  },
   findList(key, val, type = 'label') {
     const filteredList = this.state.lists.filter(list => {
       const byType = type
@@ -260,6 +373,10 @@ const boardsStore = {
     }`;
   },
+  generateMultiDragPath(boardId) {
+    return `${gon.relative_url_root}/-/boards/${boardId ? `${boardId}` : ''}/issues/bulk_move`;
+  },
+
   all() {
     return axios.get(this.state.endpoints.listsEndpoint);
   },
@@ -309,6 +426,16 @@ const boardsStore = {
     });
   },
+  moveMultipleIssues({ ids, fromListId, toListId, moveBeforeId, moveAfterId }) {
+    return axios.put(this.generateMultiDragPath(this.state.endpoints.boardId), {
+      from_list_id: fromListId,
+      to_list_id: toListId,
+      move_before_id: moveBeforeId,
+      move_after_id: moveAfterId,
+      ids,
+    });
+  },
+
   newIssue(id, issue) {
     return axios.post(this.generateIssuesPath(id), {
       issue,
@@ -379,6 +506,25 @@ const boardsStore = {
   setCurrentBoard(board) {
     this.state.currentBoard = board;
   },
+
+  toggleMultiSelect(issue) {
+    const selectedIssueIds = this.multiSelect.list.map(issue => issue.id);
+    const index = selectedIssueIds.indexOf(issue.id);
+
+    if (index === -1) {
+      this.multiSelect.list.push(issue);
+      return;
+    }
+
+    this.multiSelect.list = [
+      ...this.multiSelect.list.slice(0, index),
+      ...this.multiSelect.list.slice(index + 1),
+    ];
+  },
+
+  clearMultiSelect() {
+    this.multiSelect.list = [];
+  },
 };
 BoardsStoreEE.initEESpecific(boardsStore);

app/assets/javascripts/build_artifacts.js

-/* eslint-disable func-names, prefer-arrow-callback */
+/* eslint-disable func-names */
 import $ from 'jquery';
 import { visitUrl } from './lib/utils/url_utility';
@@ -12,11 +12,11 @@ export default class BuildArtifacts {
   }
   // eslint-disable-next-line class-methods-use-this
   disablePropagation() {
-    $('.top-block').on('click', '.download', function(e) {
-      return e.stopPropagation();
+    $('.top-block').on('click', '.download', e => {
+      e.stopPropagation();
     });
-    return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
-      return e.stopImmediatePropagation();
+    return $('.tree-holder').on('click', 'tr[data-link] a', e => {
+      e.stopImmediatePropagation();
     });
   }
   // eslint-disable-next-line class-methods-use-this

app/assets/javascripts/clusters/clusters_bundle.js

@@ -37,10 +37,13 @@ export default class Clusters {
       installJupyterPath,
       installKnativePath,
       updateKnativePath,
+      installElasticStackPath,
       installPrometheusPath,
       managePrometheusPath,
       clusterEnvironmentsPath,
       hasRbac,
+      providerType,
+      preInstalledKnative,
       clusterType,
       clusterStatus,
       clusterStatusReason,
@@ -50,6 +53,7 @@ export default class Clusters {
       environmentsHelpPath,
       clustersHelpPath,
       deployBoardsHelpPath,
+      cloudRunHelpPath,
       clusterId,
     } = document.querySelector('.js-edit-cluster-form').dataset;
@@ -65,10 +69,13 @@ export default class Clusters {
       environmentsHelpPath,
       clustersHelpPath,
       deployBoardsHelpPath,
+      cloudRunHelpPath,
     );
     this.store.setManagePrometheusPath(managePrometheusPath);
     this.store.updateStatus(clusterStatus);
     this.store.updateStatusReason(clusterStatusReason);
+    this.store.updateProviderType(providerType);
+    this.store.updatePreInstalledKnative(preInstalledKnative);
     this.store.updateRbac(hasRbac);
     this.service = new ClustersService({
       endpoint: statusPath,
@@ -80,6 +87,7 @@ export default class Clusters {
       installJupyterEndpoint: installJupyterPath,
       installKnativeEndpoint: installKnativePath,
       updateKnativeEndpoint: updateKnativePath,
+      installElasticStackEndpoint: installElasticStackPath,
       clusterEnvironmentsEndpoint: clusterEnvironmentsPath,
     });
@@ -153,6 +161,9 @@ export default class Clusters {
             ingressHelpPath: this.state.ingressHelpPath,
             managePrometheusPath: this.state.managePrometheusPath,
             ingressDnsHelpPath: this.state.ingressDnsHelpPath,
+            cloudRunHelpPath: this.state.cloudRunHelpPath,
+            providerType: this.state.providerType,
+            preInstalledKnative: this.state.preInstalledKnative,
             rbac: this.state.rbac,
           },
         });

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

@@ -78,6 +78,10 @@ export default {
       required: false,
       default: false,
     },
+    installedVia: {
+      type: String,
+      required: false,
+    },
     version: {
       type: String,
       required: false,
@@ -311,6 +315,11 @@ export default {
           >
           <span v-else class="js-cluster-application-title">{{ title }}</span>
         </strong>
+        <span
+          v-if="installedVia"
+          class="js-cluster-application-installed-via"
+          v-html="installedVia"
+        ></span>
         <slot name="description"></slot>
         <div v-if="hasError" class="cluster-application-error text-danger prepend-top-10">
           <p class="js-cluster-application-general-error-message append-bottom-0">

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

@@ -12,11 +12,12 @@ import certManagerLogo from 'images/cluster_app_logos/cert_manager.png';
 import knativeLogo from 'images/cluster_app_logos/knative.png';
 import meltanoLogo from 'images/cluster_app_logos/meltano.png';
 import prometheusLogo from 'images/cluster_app_logos/prometheus.png';
+import elasticStackLogo from 'images/cluster_app_logos/elastic_stack.png';
 import { s__, sprintf } from '../../locale';
 import applicationRow from './application_row.vue';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import KnativeDomainEditor from './knative_domain_editor.vue';
-import { CLUSTER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
+import { CLUSTER_TYPE, PROVIDER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '~/clusters/event_hub';
@@ -54,11 +55,26 @@ export default {
       required: false,
       default: '',
     },
+    cloudRunHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     managePrometheusPath: {
       type: String,
       required: false,
       default: '',
     },
+    providerType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    preInstalledKnative: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     rbac: {
       type: Boolean,
       required: false,
@@ -76,6 +92,7 @@ export default {
     knativeLogo,
     meltanoLogo,
     prometheusLogo,
+    elasticStackLogo,
   }),
   computed: {
     isProjectCluster() {
@@ -99,6 +116,9 @@ export default {
     certManagerInstalled() {
       return this.applications.cert_manager.status === APPLICATION_STATUS.INSTALLED;
     },
+    enableClusterApplicationElasticStack() {
+      return gon.features && gon.features.enableClusterApplicationElasticStack;
+    },
     ingressDescription() {
       return sprintf(
         _.escape(
@@ -153,9 +173,34 @@ export default {
     jupyterHostname() {
       return this.applications.jupyter.hostname;
     },
+    elasticStackInstalled() {
+      return this.applications.elastic_stack.status === APPLICATION_STATUS.INSTALLED;
+    },
+    elasticStackKibanaHostname() {
+      return this.applications.elastic_stack.kibana_hostname;
+    },
     knative() {
       return this.applications.knative;
     },
+    cloudRun() {
+      return this.providerType === PROVIDER_TYPE.GCP && this.preInstalledKnative;
+    },
+    installedVia() {
+      if (this.cloudRun) {
+        return sprintf(
+          _.escape(s__(`ClusterIntegration|installed via %{installed_via}`)),
+          {
+            installed_via: `<a href="${
+              this.cloudRunHelpPath
+            }" target="_blank" rel="noopener noreferrer">${_.escape(
+              s__('ClusterIntegration|Cloud Run'),
+            )}</a>`,
+          },
+          false,
+        );
+      }
+      return null;
+    },
   },
   created() {
     this.helmInstallIllustration = helmInstallIllustration;
@@ -260,7 +305,7 @@ export default {
                 <span class="input-group-append">
                   <clipboard-button
                     :text="ingressExternalEndpoint"
-                    :title="s__('ClusterIntegration|Copy Ingress Endpoint to clipboard')"
+                    :title="s__('ClusterIntegration|Copy Ingress Endpoint')"
                     class="input-group-text js-clipboard-btn"
                   />
                 </span>
@@ -438,7 +483,7 @@ export default {
                 <span class="input-group-btn">
                   <clipboard-button
                     :text="jupyterHostname"
-                    :title="s__('ClusterIntegration|Copy Jupyter Hostname to clipboard')"
+                    :title="s__('ClusterIntegration|Copy Jupyter Hostname')"
                     class="js-clipboard-btn"
                   />
                 </span>
@@ -468,6 +513,7 @@ export default {
         :installed="applications.knative.installed"
         :install-failed="applications.knative.installFailed"
         :install-application-request-params="{ hostname: applications.knative.hostname }"
+        :installed-via="installedVia"
         :uninstallable="applications.knative.uninstallable"
         :uninstall-successful="applications.knative.uninstallSuccessful"
         :uninstall-failed="applications.knative.uninstallFailed"
@@ -499,7 +545,7 @@ export default {
           </p>
           <knative-domain-editor
-            v-if="knative.installed || (helmInstalled && rbac)"
+            v-if="(knative.installed || (helmInstalled && rbac)) && !preInstalledKnative"
             :knative="knative"
             :ingress-dns-help-path="ingressDnsHelpPath"
             @save="saveKnativeDomain"
@@ -507,6 +553,75 @@ export default {
           />
         </div>
       </application-row>
+      <application-row
+        v-if="enableClusterApplicationElasticStack"
+        id="elastic_stack"
+        :logo-url="elasticStackLogo"
+        :title="applications.elastic_stack.title"
+        :status="applications.elastic_stack.status"
+        :status-reason="applications.elastic_stack.statusReason"
+        :request-status="applications.elastic_stack.requestStatus"
+        :request-reason="applications.elastic_stack.requestReason"
+        :version="applications.elastic_stack.version"
+        :chart-repo="applications.elastic_stack.chartRepo"
+        :update-available="applications.elastic_stack.updateAvailable"
+        :installed="applications.elastic_stack.installed"
+        :install-failed="applications.elastic_stack.installFailed"
+        :update-successful="applications.elastic_stack.updateSuccessful"
+        :update-failed="applications.elastic_stack.updateFailed"
+        :uninstallable="applications.elastic_stack.uninstallable"
+        :uninstall-successful="applications.elastic_stack.uninstallSuccessful"
+        :uninstall-failed="applications.elastic_stack.uninstallFailed"
+        :disabled="!helmInstalled"
+        :install-application-request-params="{
+          kibana_hostname: applications.elastic_stack.kibana_hostname,
+        }"
+        title-link="https://github.com/helm/charts/tree/master/stable/elastic-stack"
+      >
+        <div slot="description">
+          <p>
+            {{
+              s__(
+                `ClusterIntegration|The elastic stack collects logs from all pods in your cluster`,
+              )
+            }}
+          </p>
+
+          <template v-if="ingressExternalEndpoint">
+            <div class="form-group">
+              <label for="elastic-stack-kibana-hostname">{{
+                s__('ClusterIntegration|Kibana Hostname')
+              }}</label>
+
+              <div class="input-group">
+                <input
+                  v-model="applications.elastic_stack.kibana_hostname"
+                  :readonly="elasticStackInstalled"
+                  type="text"
+                  class="form-control js-hostname"
+                />
+                <span class="input-group-btn">
+                  <clipboard-button
+                    :text="elasticStackKibanaHostname"
+                    :title="s__('ClusterIntegration|Copy Kibana Hostname')"
+                    class="js-clipboard-btn"
+                  />
+                </span>
+              </div>
+
+              <p v-if="ingressInstalled" class="form-text text-muted">
+                {{
+                  s__(`ClusterIntegration|Replace this with your own hostname if you want.
+                If you do so, point hostname to Ingress IP Address from above.`)
+                }}
+                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+                  {{ __('More information') }}
+                </a>
+              </p>
+            </div>
+          </template>
+        </div>
+      </application-row>
     </div>
   </section>
 </template>

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

@@ -103,7 +103,7 @@ export default {
           <span class="input-group-append">
             <clipboard-button
               :text="knativeExternalEndpoint"
-              :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
+              :title="s__('ClusterIntegration|Copy Knative Endpoint')"
               class="input-group-text js-knative-endpoint-clipboard-btn"
             />
           </span>

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

@@ -2,11 +2,26 @@
 import { GlModal } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import trackUninstallButtonClickMixin from 'ee_else_ce/clusters/mixins/track_uninstall_button_click';
-import { HELM, INGRESS, CERT_MANAGER, PROMETHEUS, RUNNER, KNATIVE, JUPYTER } from '../constants';
+import {
+  HELM,
+  INGRESS,
+  CERT_MANAGER,
+  PROMETHEUS,
+  RUNNER,
+  KNATIVE,
+  JUPYTER,
+  ELASTIC_STACK,
+} from '../constants';
 const CUSTOM_APP_WARNING_TEXT = {
-  [HELM]: s__(
-    'ClusterIntegration|The associated Tiller pod will be deleted and cannot be restored.',
+  [HELM]: sprintf(
+    s__(
+      'ClusterIntegration|The associated Tiller pod, the %{gitlabManagedAppsNamespace} namespace, and all of its resources will be deleted and cannot be restored.',
+    ),
+    {
+      gitlabManagedAppsNamespace: '<code>gitlab-managed-apps</code>',
+    },
+    false,
   ),
   [INGRESS]: s__(
     'ClusterIntegration|The associated load balancer and IP will be deleted and cannot be restored.',
@@ -22,6 +37,7 @@ const CUSTOM_APP_WARNING_TEXT = {
   [JUPYTER]: s__(
     'ClusterIntegration|All data not committed to GitLab will be deleted and cannot be restored.',
   ),
+  [ELASTIC_STACK]: s__('ClusterIntegration|All data will be deleted and cannot be restored.'),
 };
 export default {
@@ -76,6 +92,7 @@ export default {
     :modal-id="modalId"
     :title="title"
     @ok="confirmUninstall()"
-    >{{ warningText }} {{ customAppWarningText }}</gl-modal
   >
+    {{ warningText }} <span v-html="customAppWarningText"></span>
+  </gl-modal>
 </template>

app/assets/javascripts/clusters/constants.js

@@ -5,6 +5,11 @@ export const CLUSTER_TYPE = {
   PROJECT: 'project_type',
 };
+// These need to match the available providers in app/models/clusters/providers/
+export const PROVIDER_TYPE = {
+  GCP: 'gcp',
+};
+
 // These need to match what is returned from the server
 export const APPLICATION_STATUS = {
   NO_STATUS: null,
@@ -19,6 +24,7 @@ export const APPLICATION_STATUS = {
   UNINSTALLING: 'uninstalling',
   UNINSTALL_ERRORED: 'uninstall_errored',
   ERROR: 'errored',
+  PRE_INSTALLED: 'pre_installed',
 };
 /*
@@ -29,6 +35,7 @@ export const APPLICATION_INSTALLED_STATUSES = [
   APPLICATION_STATUS.INSTALLED,
   APPLICATION_STATUS.UPDATING,
   APPLICATION_STATUS.UNINSTALLING,
+  APPLICATION_STATUS.PRE_INSTALLED,
 ];
 // These are only used client-side
@@ -44,7 +51,17 @@ export const KNATIVE = 'knative';
 export const RUNNER = 'runner';
 export const CERT_MANAGER = 'cert_manager';
 export const PROMETHEUS = 'prometheus';
-export const APPLICATIONS = [HELM, INGRESS, JUPYTER, KNATIVE, RUNNER, CERT_MANAGER, PROMETHEUS];
+export const ELASTIC_STACK = 'elastic_stack';
+export const APPLICATIONS = [
+  HELM,
+  INGRESS,
+  JUPYTER,
+  KNATIVE,
+  RUNNER,
+  CERT_MANAGER,
+  PROMETHEUS,
+  ELASTIC_STACK,
+];
 export const INGRESS_DOMAIN_SUFFIX = '.nip.io';

app/assets/javascripts/clusters/services/application_state_machine.js

@@ -13,6 +13,7 @@ const {
   UPDATE_ERRORED,
   UNINSTALLING,
   UNINSTALL_ERRORED,
+  PRE_INSTALLED,
 } = APPLICATION_STATUS;
 const applicationStateMachine = {
@@ -63,6 +64,9 @@ const applicationStateMachine = {
           uninstallFailed: true,
         },
       },
+      [PRE_INSTALLED]: {
+        target: PRE_INSTALLED,
+      },
     },
   },
   [NOT_INSTALLABLE]: {
@@ -123,6 +127,27 @@ const applicationStateMachine = {
       },
     },
   },
+  [PRE_INSTALLED]: {
+    on: {
+      [UPDATE_EVENT]: {
+        target: UPDATING,
+        effects: {
+          updateFailed: false,
+          updateSuccessful: false,
+        },
+      },
+      [NOT_INSTALLABLE]: {
+        target: NOT_INSTALLABLE,
+      },
+      [UNINSTALL_EVENT]: {
+        target: UNINSTALLING,
+        effects: {
+          uninstallFailed: false,
+          uninstallSuccessful: false,
+        },
+      },
+    },
+  },
   [UPDATING]: {
     on: {
       [UPDATED]: {

app/assets/javascripts/clusters/services/clusters_service.js

@@ -11,6 +11,7 @@ export default class ClusterService {
       prometheus: this.options.installPrometheusEndpoint,
       jupyter: this.options.installJupyterEndpoint,
       knative: this.options.installKnativeEndpoint,
+      elastic_stack: this.options.installElasticStackEndpoint,
     };
     this.appUpdateEndpointMap = {
       knative: this.options.updateKnativeEndpoint,

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -5,6 +5,7 @@ import {
   JUPYTER,
   KNATIVE,
   CERT_MANAGER,
+  ELASTIC_STACK,
   RUNNER,
   APPLICATION_INSTALLED_STATUSES,
   APPLICATION_STATUS,
@@ -35,7 +36,10 @@ export default class ClusterStore {
       environmentsHelpPath: null,
       clustersHelpPath: null,
       deployBoardsHelpPath: null,
+      cloudRunHelpPath: null,
       status: null,
+      providerType: null,
+      preInstalledKnative: false,
       rbac: false,
       statusReason: null,
       applications: {
@@ -82,6 +86,11 @@ export default class ClusterStore {
           updateSuccessful: false,
           updateFailed: false,
         },
+        elastic_stack: {
+          ...applicationInitialState,
+          title: s__('ClusterIntegration|Elastic Stack'),
+          kibana_hostname: null,
+        },
       },
       environments: [],
       fetchingEnvironments: false,
@@ -95,6 +104,7 @@ export default class ClusterStore {
     environmentsHelpPath,
     clustersHelpPath,
     deployBoardsHelpPath,
+    cloudRunHelpPath,
   ) {
     this.state.helpPath = helpPath;
     this.state.ingressHelpPath = ingressHelpPath;
@@ -102,6 +112,7 @@ export default class ClusterStore {
     this.state.environmentsHelpPath = environmentsHelpPath;
     this.state.clustersHelpPath = clustersHelpPath;
     this.state.deployBoardsHelpPath = deployBoardsHelpPath;
+    this.state.cloudRunHelpPath = cloudRunHelpPath;
   }
   setManagePrometheusPath(managePrometheusPath) {
@@ -112,6 +123,14 @@ export default class ClusterStore {
     this.state.status = status;
   }
+  updateProviderType(providerType) {
+    this.state.providerType = providerType;
+  }
+
+  updatePreInstalledKnative(preInstalledKnative) {
+    this.state.preInstalledKnative = parseBoolean(preInstalledKnative);
+  }
+
   updateRbac(rbac) {
     this.state.rbac = parseBoolean(rbac);
   }
@@ -185,12 +204,11 @@ export default class ClusterStore {
         this.state.applications.cert_manager.email =
           this.state.applications.cert_manager.email || serverAppEntry.email;
       } else if (appId === JUPYTER) {
-        this.state.applications.jupyter.hostname =
-          this.state.applications.jupyter.hostname ||
-          serverAppEntry.hostname ||
-          (this.state.applications.ingress.externalIp
-            ? `jupyter.${this.state.applications.ingress.externalIp}.nip.io`
-            : '');
+        this.state.applications.jupyter.hostname = this.updateHostnameIfUnset(
+          this.state.applications.jupyter.hostname,
+          serverAppEntry.hostname,
+          'jupyter',
+        );
       } else if (appId === KNATIVE) {
         if (!this.state.applications.knative.isEditingHostName) {
           this.state.applications.knative.hostname =
@@ -203,10 +221,26 @@ export default class ClusterStore {
       } else if (appId === RUNNER) {
         this.state.applications.runner.version = version;
         this.state.applications.runner.updateAvailable = updateAvailable;
+      } else if (appId === ELASTIC_STACK) {
+        this.state.applications.elastic_stack.kibana_hostname = this.updateHostnameIfUnset(
+          this.state.applications.elastic_stack.kibana_hostname,
+          serverAppEntry.kibana_hostname,
+          'kibana',
+        );
       }
     });
   }
+  updateHostnameIfUnset(current, updated, fallback) {
+    return (
+      current ||
+      updated ||
+      (this.state.applications.ingress.externalIp
+        ? `${fallback}.${this.state.applications.ingress.externalIp}.nip.io`
+        : '')
+    );
+  }
+
   toggleFetchEnvironments(isFetching) {
     this.state.fetchingEnvironments = isFetching;
   }

app/assets/javascripts/commit/image_file.js

-/* eslint-disable func-names, no-var, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, one-var, no-return-assign, no-unused-expressions, no-sequences */
+/* eslint-disable func-names, no-var, no-else-return, consistent-return, one-var, no-return-assign, no-unused-expressions, no-sequences */
 import $ from 'jquery';
@@ -13,14 +13,14 @@ export default class ImageFile {
       $('.two-up.view .frame.deleted img', this.file),
       (function(_this) {
         return function() {
-          return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function() {
+          return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), () => {
             _this.initViewModes();
             // Load two-up view after images are loaded
             // so that we can display the correct width and height information
             const $images = $('.two-up.view img', _this.file);
-            $images.waitForImages(function() {
+            $images.waitForImages(() => {
               _this.initView('two-up');
             });
           });
@@ -49,13 +49,13 @@ export default class ImageFile {
   activateViewMode(viewMode) {
     $('.view-modes-menu li', this.file)
       .removeClass('active')
-      .filter('.' + viewMode)
+      .filter(`.${viewMode}`)
       .addClass('active');
-    return $('.view:visible:not(.' + viewMode + ')', this.file).fadeOut(
+    return $(`.view:visible:not(.${viewMode})`, this.file).fadeOut(
       200,
       (function(_this) {
         return function() {
-          $('.view.' + viewMode, _this.file).fadeIn(200);
+          $(`.view.${viewMode}`, _this.file).fadeIn(200);
           return _this.initView(viewMode);
         };
       })(this),
@@ -138,9 +138,9 @@ export default class ImageFile {
                 return $(this).width(availWidth / 2);
               }
             });
-            return _this.requestImageInfo($('img', wrap), function(width, height) {
-              $('.image-info .meta-width', wrap).text(width + 'px');
-              $('.image-info .meta-height', wrap).text(height + 'px');
+            return _this.requestImageInfo($('img', wrap), (width, height) => {
+              $('.image-info .meta-width', wrap).text(`${width}px`);
+              $('.image-info .meta-height', wrap).text(`${height}px`);
               return $('.image-info', wrap).removeClass('hide');
             });
           };
@@ -175,7 +175,7 @@ export default class ImageFile {
             wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
-            _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
+            _this.initDraggable($swipeBar, wrapPadding, (e, left) => {
               if (left > 0 && left < $swipeFrame.width() - wrapPadding * 2) {
                 $swipeWrap.width(maxWidth + 1 - left);
                 $swipeBar.css('left', left);
@@ -215,7 +215,7 @@ export default class ImageFile {
             $frameAdded.css('opacity', 1);
             framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
-            _this.initDraggable($dragger, framePadding, function(e, left) {
+            _this.initDraggable($dragger, framePadding, (e, left) => {
               var opacity = left / dragTrackWidth;
               if (opacity >= 0 && opacity <= 1) {

app/assets/javascripts/commons/vue.js

 import Vue from 'vue';
-import '../vue_shared/vue_resource_interceptor';
+import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;
 }
+
+Vue.use(GlFeatureFlagsPlugin);

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

@@ -3,6 +3,8 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
+const findItem = (items, valueProp, value) => items.find(item => item[valueProp] === value);
+
 export default {
   components: {
     DropdownButton,
@@ -26,7 +28,7 @@ export default {
       default: '',
     },
     value: {
-      type: Object,
+      type: [Object, String],
       required: false,
       default: () => null,
     },
@@ -93,8 +95,8 @@ export default {
   },
   data() {
     return {
+      selectedItem: findItem(this.items, this.value),
       searchQuery: '',
-      selectedItem: null,
     };
   },
   computed: {
@@ -127,10 +129,15 @@ export default {
       return (this.selectedItem && this.selectedItem[this.valueProperty]) || '';
     },
   },
+  watch: {
+    value(value) {
+      this.selectedItem = findItem(this.items, this.valueProperty, value);
+    },
+  },
   methods: {
     select(item) {
       this.selectedItem = item;
-      this.$emit('input', item);
+      this.$emit('input', item[this.valueProperty]);
     },
   },
 };

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

@@ -7,8 +7,23 @@ export default {
     ServiceCredentialsForm,
     EksClusterConfigurationForm,
   },
+  props: {
+    gitlabManagedClusterHelpPath: {
+      type: String,
+      required: true,
+    },
+    kubernetesIntegrationHelpPath: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 <template>
-  <eks-cluster-configuration-form />
+  <div class="js-create-eks-cluster">
+    <eks-cluster-configuration-form
+      :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
+      :kubernetes-integration-help-path="kubernetesIntegrationHelpPath"
+    />
+  </div>
 </template>

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

 <script>
-import RoleNameDropdown from './role_name_dropdown.vue';
-import SecurityGroupDropdown from './security_group_dropdown.vue';
-import SubnetDropdown from './subnet_dropdown.vue';
-import VPCDropdown from './vpc_dropdown.vue';
+import { createNamespacedHelpers, mapState, mapActions } from 'vuex';
+import { sprintf, s__ } from '~/locale';
+import _ from 'underscore';
+import { GlFormInput, GlFormCheckbox } from '@gitlab/ui';
+import ClusterFormDropdown from './cluster_form_dropdown.vue';
+import RegionDropdown from './region_dropdown.vue';
+import { KUBERNETES_VERSIONS } from '../constants';
+
+const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles');
+const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers(
+  'regions',
+);
+const { mapState: mapKeyPairsState, mapActions: mapKeyPairsActions } = createNamespacedHelpers(
+  'keyPairs',
+);
+const { mapState: mapVpcsState, mapActions: mapVpcActions } = createNamespacedHelpers('vpcs');
+const { mapState: mapSubnetsState, mapActions: mapSubnetActions } = createNamespacedHelpers(
+  'subnets',
+);
+const {
+  mapState: mapSecurityGroupsState,
+  mapActions: mapSecurityGroupsActions,
+} = createNamespacedHelpers('securityGroups');
 export default {
   components: {
-    RoleNameDropdown,
-    SecurityGroupDropdown,
-    SubnetDropdown,
-    VPCDropdown,
+    ClusterFormDropdown,
+    RegionDropdown,
+    GlFormInput,
+    GlFormCheckbox,
+  },
+  props: {
+    gitlabManagedClusterHelpPath: {
+      type: String,
+      required: true,
+    },
+    kubernetesIntegrationHelpPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'clusterName',
+      'environmentScope',
+      'kubernetesVersion',
+      'selectedRegion',
+      'selectedKeyPair',
+      'selectedVpc',
+      'selectedSubnet',
+      'selectedRole',
+      'selectedSecurityGroup',
+      'gitlabManagedCluster',
+    ]),
+    ...mapRolesState({
+      roles: 'items',
+      isLoadingRoles: 'isLoadingItems',
+      loadingRolesError: 'loadingItemsError',
+    }),
+    ...mapRegionsState({
+      regions: 'items',
+      isLoadingRegions: 'isLoadingItems',
+      loadingRegionsError: 'loadingItemsError',
+    }),
+    ...mapKeyPairsState({
+      keyPairs: 'items',
+      isLoadingKeyPairs: 'isLoadingItems',
+      loadingKeyPairsError: 'loadingItemsError',
+    }),
+    ...mapVpcsState({
+      vpcs: 'items',
+      isLoadingVpcs: 'isLoadingItems',
+      loadingVpcsError: 'loadingItemsError',
+    }),
+    ...mapSubnetsState({
+      subnets: 'items',
+      isLoadingSubnets: 'isLoadingItems',
+      loadingSubnetsError: 'loadingItemsError',
+    }),
+    ...mapSecurityGroupsState({
+      securityGroups: 'items',
+      isLoadingSecurityGroups: 'isLoadingItems',
+      loadingSecurityGroupsError: 'loadingItemsError',
+    }),
+    kubernetesVersions() {
+      return KUBERNETES_VERSIONS;
+    },
+    vpcDropdownDisabled() {
+      return !this.selectedRegion;
+    },
+    keyPairDropdownDisabled() {
+      return !this.selectedRegion;
+    },
+    subnetDropdownDisabled() {
+      return !this.selectedVpc;
+    },
+    securityGroupDropdownDisabled() {
+      return !this.selectedVpc;
+    },
+    kubernetesIntegrationHelpText() {
+      const escapedUrl = _.escape(this.kubernetesIntegrationHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.',
+        ),
+        {
+          link_start: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          link_end: '</a>',
+        },
+        false,
+      );
+    },
+    roleDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    keyPairDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services%{endLink}.',
+        ),
+        {
+          startLink:
+            '<a href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    vpcDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services%{endLink}.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/vpc/home?#vpc" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    subnetDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Choose the %{startLink}subnets%{endLink} in your VPC where your worker nodes will run.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/vpc/home?#subnets" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    securityGroupDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Choose the %{startLink}security groups%{endLink} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/vpc/home?#securityGroups" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    gitlabManagedHelpText() {
+      const escapedUrl = _.escape(this.gitlabManagedClusterHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{startLink}More information%{endLink}',
+        ),
+        {
+          startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+  },
+  mounted() {
+    this.fetchRegions();
+    this.fetchRoles();
+  },
+  methods: {
+    ...mapActions([
+      'setClusterName',
+      'setEnvironmentScope',
+      'setKubernetesVersion',
+      'setRegion',
+      'setVpc',
+      'setSubnet',
+      'setRole',
+      'setKeyPair',
+      'setSecurityGroup',
+      'setGitlabManagedCluster',
+    ]),
+    ...mapRegionsActions({ fetchRegions: 'fetchItems' }),
+    ...mapVpcActions({ fetchVpcs: 'fetchItems' }),
+    ...mapSubnetActions({ fetchSubnets: 'fetchItems' }),
+    ...mapRolesActions({ fetchRoles: 'fetchItems' }),
+    ...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }),
+    ...mapSecurityGroupsActions({ fetchSecurityGroups: 'fetchItems' }),
+    setRegionAndFetchVpcsAndKeyPairs(region) {
+      this.setRegion({ region });
+      this.fetchVpcs({ region });
+      this.fetchKeyPairs({ region });
+    },
+    setVpcAndFetchSubnets(vpc) {
+      this.setVpc({ vpc });
+      this.fetchSubnets({ vpc });
+      this.fetchSecurityGroups({ vpc });
+    },
   },
 };
 </script>
 <template>
   <form name="eks-cluster-configuration-form">
+    <h2>
+      {{ s__('ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster') }}
+    </h2>
+    <p v-html="kubernetesIntegrationHelpText"></p>
+    <div class="form-group">
+      <label class="label-bold" for="eks-cluster-name">{{
+        s__('ClusterIntegration|Kubernetes cluster name')
+      }}</label>
+      <gl-form-input
+        id="eks-cluster-name"
+        :value="clusterName"
+        @input="setClusterName({ clusterName: $event })"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-environment-scope">{{
+        s__('ClusterIntegration|Environment scope')
+      }}</label>
+      <gl-form-input
+        id="eks-environment-scope"
+        :value="environmentScope"
+        @input="setEnvironmentScope({ environmentScope: $event })"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-kubernetes-version">{{
+        s__('ClusterIntegration|Kubernetes version')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-kubernetes-version"
+        field-name="eks-kubernetes-version"
+        :value="kubernetesVersion"
+        :items="kubernetesVersions"
+        :empty-text="s__('ClusterIntegration|Kubernetes version not found')"
+        @input="setKubernetesVersion({ kubernetesVersion: $event })"
+      />
+      <p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Role name') }}</label>
+      <cluster-form-dropdown
+        field-id="eks-role"
+        field-name="eks-role"
+        :input="selectedRole"
+        :items="roles"
+        :loading="isLoadingRoles"
+        :loading-text="s__('ClusterIntegration|Loading IAM Roles')"
+        :placeholder="s__('ClusterIntergation|Select role name')"
+        :search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')"
+        :empty-text="s__('ClusterIntegration|No IAM Roles found')"
+        :has-errors="Boolean(loadingRolesError)"
+        :error-message="s__('ClusterIntegration|Could not load IAM roles')"
+        @input="setRole({ role: $event })"
+      />
+      <p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Region') }}</label>
+      <region-dropdown
+        :value="selectedRegion"
+        :regions="regions"
+        :error="loadingRegionsError"
+        :loading="isLoadingRegions"
+        @input="setRegionAndFetchVpcsAndKeyPairs($event)"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-key-pair">{{
+        s__('ClusterIntegration|Key pair name')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-key-pair"
+        field-name="eks-key-pair"
+        :input="selectedKeyPair"
+        :items="keyPairs"
+        :disabled="keyPairDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a region to choose a Key Pair')"
+        :loading="isLoadingKeyPairs"
+        :loading-text="s__('ClusterIntegration|Loading Key Pairs')"
+        :placeholder="s__('ClusterIntergation|Select key pair')"
+        :search-field-placeholder="s__('ClusterIntegration|Search Key Pairs')"
+        :empty-text="s__('ClusterIntegration|No Key Pairs found')"
+        :has-errors="Boolean(loadingKeyPairsError)"
+        :error-message="s__('ClusterIntegration|Could not load Key Pairs')"
+        @input="setKeyPair({ keyPair: $event })"
+      />
+      <p class="form-text text-muted" v-html="keyPairDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-vpc">{{ s__('ClusterIntegration|VPC') }}</label>
+      <cluster-form-dropdown
+        field-id="eks-vpc"
+        field-name="eks-vpc"
+        :input="selectedVpc"
+        :items="vpcs"
+        :loading="isLoadingVpcs"
+        :disabled="vpcDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a region to choose a VPC')"
+        :loading-text="s__('ClusterIntegration|Loading VPCs')"
+        :placeholder="s__('ClusterIntergation|Select a VPC')"
+        :search-field-placeholder="s__('ClusterIntegration|Search VPCs')"
+        :empty-text="s__('ClusterIntegration|No VPCs found')"
+        :has-errors="Boolean(loadingVpcsError)"
+        :error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
+        @input="setVpcAndFetchSubnets($event)"
+      />
+      <p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Subnet') }}</label>
+      <cluster-form-dropdown
+        field-id="eks-subnet"
+        field-name="eks-subnet"
+        :input="selectedSubnet"
+        :items="subnets"
+        :loading="isLoadingSubnets"
+        :disabled="subnetDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a VPC to choose a subnet')"
+        :loading-text="s__('ClusterIntegration|Loading subnets')"
+        :placeholder="s__('ClusterIntergation|Select a subnet')"
+        :search-field-placeholder="s__('ClusterIntegration|Search subnets')"
+        :empty-text="s__('ClusterIntegration|No subnet found')"
+        :has-errors="Boolean(loadingSubnetsError)"
+        :error-message="s__('ClusterIntegration|Could not load subnets for the selected VPC')"
+        @input="setSubnet({ subnet: $event })"
+      />
+      <p class="form-text text-muted" v-html="subnetDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-security-group">{{
+        s__('ClusterIntegration|Security groups')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-security-group"
+        field-name="eks-security-group"
+        :input="selectedSecurityGroup"
+        :items="securityGroups"
+        :loading="isLoadingSecurityGroups"
+        :disabled="securityGroupDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a VPC to choose a security group')"
+        :loading-text="s__('ClusterIntegration|Loading security groups')"
+        :placeholder="s__('ClusterIntergation|Select a security group')"
+        :search-field-placeholder="s__('ClusterIntegration|Search security groups')"
+        :empty-text="s__('ClusterIntegration|No security group found')"
+        :has-errors="Boolean(loadingSecurityGroupsError)"
+        :error-message="
+          s__('ClusterIntegration|Could not load security groups for the selected VPC')
+        "
+        @input="setSecurityGroup({ securityGroup: $event })"
+      />
+      <p class="form-text text-muted" v-html="securityGroupDropdownHelpText"></p>
+    </div>
     <div class="form-group">
-      <label class="label-bold" name="role" for="eks-role">
-        {{ s__('ClusterIntegration|Role name') }}
-      </label>
-      <role-name-dropdown />
+      <gl-form-checkbox
+        :checked="gitlabManagedCluster"
+        @input="setGitlabManagedCluster({ gitlabManagedCluster: $event })"
+        >{{ s__('ClusterIntegration|GitLab-managed cluster') }}</gl-form-checkbox
+      >
+      <p class="form-text text-muted" v-html="gitlabManagedHelpText"></p>
     </div>
   </form>
 </template>