Add latest changes from gitlab-org/gitlab@12-7-stable-ee

app/assets/javascripts/behaviors/markdown/editor_extensions.js

@@ -53,7 +53,7 @@ import InlineHTML from './marks/inline_html';
 // The nodes and marks referenced here transform that same HTML to GFM to be copied to the clipboard.
 // Every filter in lib/banzai/pipeline/gfm_pipeline.rb that generates HTML
 // from GFM should have a node or mark here.
-// The GFM-to-HTML-to-GFM cycle is tested in spec/features/copy_as_gfm_spec.rb.
+// The GFM-to-HTML-to-GFM cycle is tested in spec/features/markdown/copy_as_gfm_spec.rb.
 export default [
   new Doc(),

app/assets/javascripts/behaviors/markdown/paste_markdown_table.js

+const maxColumnWidth = (rows, columnIndex) => Math.max(...rows.map(row => row[columnIndex].length));
+
+export default class PasteMarkdownTable {
+  constructor(clipboardData) {
+    this.data = clipboardData;
+    this.columnWidths = [];
+    this.rows = [];
+    this.tableFound = this.parseTable();
+  }
+
+  isTable() {
+    return this.tableFound;
+  }
+
+  convertToTableMarkdown() {
+    this.calculateColumnWidths();
+
+    const markdownRows = this.rows.map(
+      row =>
+        // | Name         | Title | Email Address  |
+        // |--------------|-------|----------------|
+        // | Jane Atler   | CEO   | jane@acme.com  |
+        // | John Doherty | CTO   | john@acme.com  |
+        // | Sally Smith  | CFO   | sally@acme.com |
+        `| ${row.map((column, index) => this.formatColumn(column, index)).join(' | ')} |`,
+    );
+
+    // Insert a header break (e.g. -----) to the second row
+    markdownRows.splice(1, 0, this.generateHeaderBreak());
+
+    return markdownRows.join('\n');
+  }
+
+  // Private methods below
+
+  // To determine whether the cut data is a table, the following criteria
+  // must be satisfied with the clipboard data:
+  //
+  // 1. MIME types "text/plain" and "text/html" exist
+  // 2. The "text/html" data must have a single <table> element
+  // 3. The number of rows in the "text/plain" data matches that of the "text/html" data
+  // 4. The max number of columns in "text/plain" matches that of the "text/html" data
+  parseTable() {
+    if (!this.data.types.includes('text/html') || !this.data.types.includes('text/plain')) {
+      return false;
+    }
+
+    const htmlData = this.data.getData('text/html');
+    this.doc = new DOMParser().parseFromString(htmlData, 'text/html');
+    const tables = this.doc.querySelectorAll('table');
+
+    // We're only looking for exactly one table. If there happens to be
+    // multiple tables, it's possible an application copied data into
+    // the clipboard that is not related to a simple table. It may also be
+    // complicated converting multiple tables into Markdown.
+    if (tables.length !== 1) {
+      return false;
+    }
+
+    const text = this.data.getData('text/plain').trim();
+    const splitRows = text.split(/[\n\u0085\u2028\u2029]|\r\n?/g);
+
+    // Now check that the number of rows matches between HTML and text
+    if (this.doc.querySelectorAll('tr').length !== splitRows.length) {
+      return false;
+    }
+
+    this.rows = splitRows.map(row => row.split('\t'));
+    this.normalizeRows();
+
+    // Check that the max number of columns in the HTML matches the number of
+    // columns in the text. GitHub, for example, copies a line number and the
+    // line itself into the HTML data.
+    if (!this.columnCountsMatch()) {
+      return false;
+    }
+
+    return true;
+  }
+
+  // Ensure each row has the same number of columns
+  normalizeRows() {
+    const rowLengths = this.rows.map(row => row.length);
+    const maxLength = Math.max(...rowLengths);
+
+    this.rows.forEach(row => {
+      while (row.length < maxLength) {
+        row.push('');
+      }
+    });
+  }
+
+  calculateColumnWidths() {
+    this.columnWidths = this.rows[0].map((_column, columnIndex) =>
+      maxColumnWidth(this.rows, columnIndex),
+    );
+  }
+
+  columnCountsMatch() {
+    const textColumnCount = this.rows[0].length;
+    let htmlColumnCount = 0;
+
+    this.doc.querySelectorAll('table tr').forEach(row => {
+      htmlColumnCount = Math.max(row.cells.length, htmlColumnCount);
+    });
+
+    return textColumnCount === htmlColumnCount;
+  }
+
+  formatColumn(column, index) {
+    const spaces = Array(this.columnWidths[index] - column.length + 1).join(' ');
+    return column + spaces;
+  }
+
+  generateHeaderBreak() {
+    // Add 3 dashes to line things up: there is additional spacing for the pipe characters
+    const dashes = this.columnWidths.map((width, index) =>
+      Array(this.columnWidths[index] + 3).join('-'),
+    );
+    return `|${dashes.join('|')}|`;
+  }
+}

app/assets/javascripts/boards/components/board.js

@@ -3,7 +3,7 @@ import Sortable from 'sortablejs';
 import Vue from 'vue';
 import { GlButtonGroup, GlButton, GlTooltip } from '@gitlab/ui';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
-import { n__, s__ } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import AccessorUtilities from '../../lib/utils/accessor';
@@ -67,10 +67,13 @@ export default Vue.extend({
         !this.disabled && this.list.type !== ListType.closed && this.list.type !== ListType.blank
       );
     },
-    counterTooltip() {
+    issuesTooltip() {
       const { issuesSize } = this.list;
-      return `${n__('%d issue', '%d issues', issuesSize)}`;
+
+      return sprintf(__('%{issuesSize} issues'), { issuesSize });
     },
+    // Only needed to make karma pass.
+    weightCountToolTip() {}, // eslint-disable-line vue/return-in-computed-property
     caretTooltip() {
       return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
     },

app/assets/javascripts/boards/components/board_list.vue

@@ -256,7 +256,7 @@ export default {
         let toList;
         if (to) {
           const containerEl = to.closest('.js-board-list');
-          toList = boardsStore.findList('id', Number(containerEl.dataset.board));
+          toList = boardsStore.findList('id', Number(containerEl.dataset.board), '');
         }
         /**

app/assets/javascripts/boards/components/boards_selector.vue

@@ -9,7 +9,6 @@ import {
   GlDropdownItem,
 } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
 import httpStatusCodes from '~/lib/utils/http_status';
 import boardsStore from '../stores/boards_store';
 import BoardForm from './board_form.vue';
@@ -19,7 +18,6 @@ const MIN_BOARDS_TO_VIEW_RECENT = 10;
 export default {
   name: 'BoardsSelector',
   components: {
-    Icon,
     BoardForm,
     GlLoadingIcon,
     GlSearchBoxByType,

app/assets/javascripts/boards/components/modal/list.vue

 <script>
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import Icon from '~/vue_shared/components/icon.vue';
-import bp from '../../../breakpoints';
 import ModalStore from '../../stores/modal_store';
 import IssueCardInner from '../issue_card_inner.vue';
@@ -105,9 +105,9 @@ export default {
     setColumnCount() {
       const breakpoint = bp.getBreakpointSize();
-      if (breakpoint === 'lg' || breakpoint === 'md') {
+      if (breakpoint === 'xl' || breakpoint === 'lg') {
         this.columns = 3;
-      } else if (breakpoint === 'sm') {
+      } else if (breakpoint === 'md') {
         this.columns = 2;
       } else {
         this.columns = 1;

app/assets/javascripts/breakpoints.js

-export const breakpoints = {
-  lg: 1200,
-  md: 992,
-  sm: 768,
-  xs: 0,
-};
-
-const BreakpointInstance = {
-  windowWidth: () => window.innerWidth,
-  getBreakpointSize() {
-    const windowWidth = this.windowWidth();
-
-    const breakpoint = Object.keys(breakpoints).find(key => windowWidth > breakpoints[key]);
-
-    return breakpoint;
-  },
-  isDesktop() {
-    return ['lg', 'md'].includes(this.getBreakpointSize());
-  },
-};
-
-export default BreakpointInstance;

app/assets/javascripts/clusters/clusters_bundle.js

@@ -53,6 +53,7 @@ export default class Clusters {
       helpPath,
       ingressHelpPath,
       ingressDnsHelpPath,
+      ingressModSecurityHelpPath,
       environmentsHelpPath,
       clustersHelpPath,
       deployBoardsHelpPath,
@@ -69,6 +70,7 @@ export default class Clusters {
       helpPath,
       ingressHelpPath,
       ingressDnsHelpPath,
+      ingressModSecurityHelpPath,
       environmentsHelpPath,
       clustersHelpPath,
       deployBoardsHelpPath,
@@ -169,6 +171,7 @@ export default class Clusters {
             ingressHelpPath: this.state.ingressHelpPath,
             managePrometheusPath: this.state.managePrometheusPath,
             ingressDnsHelpPath: this.state.ingressDnsHelpPath,
+            ingressModSecurityHelpPath: this.state.ingressModSecurityHelpPath,
             cloudRunHelpPath: this.state.cloudRunHelpPath,
             providerType: this.state.providerType,
             preInstalledKnative: this.state.preInstalledKnative,

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

@@ -2,7 +2,6 @@
 /* eslint-disable vue/require-default-prop */
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlLink, GlModalDirective } from '@gitlab/ui';
-import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 import { s__, __, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 import identicon from '../../vue_shared/components/identicon.vue';
@@ -16,7 +15,6 @@ export default {
   components: {
     loadingButton,
     identicon,
-    TimeagoTooltip,
     GlLink,
     UninstallApplicationButton,
     UninstallApplicationConfirmationModal,
@@ -292,6 +290,7 @@ export default {
       disabled && 'cluster-application-disabled',
     ]"
     class="cluster-application-row gl-responsive-table-row gl-responsive-table-row-col-span"
+    :data-qa-selector="id"
   >
     <div class="gl-responsive-table-row-layout" role="row">
       <div class="table-section append-right-8 section-align-top" role="gridcell">
@@ -383,12 +382,16 @@ export default {
             :disabled="disabled || installButtonDisabled"
             :label="installButtonLabel"
             class="js-cluster-application-install-button"
+            data-qa-selector="install_button"
+            :data-qa-application="id"
             @click="installClicked"
           />
           <uninstall-application-button
             v-if="displayUninstallButton"
             v-gl-modal-directive="'uninstall-' + id"
             :status="status"
+            data-qa-selector="uninstall_button"
+            :data-qa-application="id"
             class="js-cluster-application-uninstall-button"
           />
           <uninstall-application-confirmation-modal

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

@@ -19,7 +19,6 @@ 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, PROVIDER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '~/clusters/event_hub';
 import CrossplaneProviderStack from './crossplane_provider_stack.vue';
@@ -27,7 +26,6 @@ export default {
   components: {
     applicationRow,
     clipboardButton,
-    LoadingButton,
     GlLoadingIcon,
     KnativeDomainEditor,
     CrossplaneProviderStack,
@@ -58,6 +56,11 @@ export default {
       required: false,
       default: '',
     },
+    ingressModSecurityHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     cloudRunHelpPath: {
       type: String,
       required: false,
@@ -114,6 +117,9 @@ export default {
     ingressInstalled() {
       return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
     },
+    ingressEnableModsecurity() {
+      return this.applications.ingress.modsecurity_enabled;
+    },
     ingressExternalEndpoint() {
       return this.applications.ingress.externalIp || this.applications.ingress.externalHostname;
     },
@@ -123,12 +129,21 @@ export default {
     crossplaneInstalled() {
       return this.applications.crossplane.status === APPLICATION_STATUS.INSTALLED;
     },
-    enableClusterApplicationCrossplane() {
-      return gon.features && gon.features.enableClusterApplicationCrossplane;
-    },
     enableClusterApplicationElasticStack() {
       return gon.features && gon.features.enableClusterApplicationElasticStack;
     },
+    ingressModSecurityDescription() {
+      const escapedUrl = _.escape(this.ingressModSecurityHelpPath);
+
+      return sprintf(
+        s__('ClusterIntegration|Learn more about %{startLink}ModSecurity%{endLink}'),
+        {
+          startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
     ingressDescription() {
       return sprintf(
         _.escape(
@@ -137,9 +152,9 @@ export default {
           ),
         ),
         {
-          pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
+          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb"
               target="_blank" rel="noopener noreferrer">
-              ${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
+              ${_.escape(s__('ClusterIntegration|pricing'))}</a>`,
         },
         false,
       );
@@ -204,9 +219,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
     elasticStackInstalled() {
       return this.applications.elastic_stack.status === APPLICATION_STATUS.INSTALLED;
     },
-    elasticStackKibanaHostname() {
-      return this.applications.elastic_stack.kibana_hostname;
-    },
     knative() {
       return this.applications.knative;
     },
@@ -313,6 +325,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :request-reason="applications.ingress.requestReason"
         :installed="applications.ingress.installed"
         :install-failed="applications.ingress.installFailed"
+        :install-application-request-params="{
+          modsecurity_enabled: applications.ingress.modsecurity_enabled,
+        }"
         :uninstallable="applications.ingress.uninstallable"
         :uninstall-successful="applications.ingress.uninstallSuccessful"
         :uninstall-failed="applications.ingress.uninstallFailed"
@@ -328,6 +343,26 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
             }}
           </p>
+          <template>
+            <div class="form-group">
+              <div class="form-check form-check-inline">
+                <input
+                  v-model="applications.ingress.modsecurity_enabled"
+                  :disabled="ingressInstalled"
+                  type="checkbox"
+                  autocomplete="off"
+                  class="form-check-input"
+                />
+                <label class="form-check-label label-bold" for="ingress-enable-modsecurity">
+                  {{ s__('ClusterIntegration|Enable Web Application Firewall') }}
+                </label>
+              </div>
+              <p class="form-text text-muted">
+                <strong v-html="ingressModSecurityDescription"></strong>
+              </p>
+            </div>
+          </template>
+
           <template v-if="ingressInstalled">
             <div class="form-group">
               <label for="ingress-endpoint">{{ s__('ClusterIntegration|Ingress Endpoint') }}</label>
@@ -377,7 +412,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
             </p>
           </template>
           <template v-if="!ingressInstalled">
-            <div class="bs-callout bs-callout-info" v-html="ingressDescription"></div>
+            <div class="bs-callout bs-callout-info">
+              <strong v-html="ingressDescription"></strong>
+            </div>
           </template>
         </div>
       </application-row>
@@ -479,7 +516,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         </div>
       </application-row>
       <application-row
-        v-if="enableClusterApplicationCrossplane"
         id="crossplane"
         :logo-url="crossplaneLogo"
         :title="applications.crossplane.title"
@@ -638,9 +674,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :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">
@@ -651,40 +684,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
               )
             }}
           </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>

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

@@ -5,7 +5,6 @@ import {
   JUPYTER,
   KNATIVE,
   CERT_MANAGER,
-  ELASTIC_STACK,
   CROSSPLANE,
   RUNNER,
   APPLICATION_INSTALLED_STATUSES,
@@ -52,6 +51,7 @@ export default class ClusterStore {
         ingress: {
           ...applicationInitialState,
           title: s__('ClusterIntegration|Ingress'),
+          modsecurity_enabled: false,
           externalIp: null,
           externalHostname: null,
         },
@@ -96,7 +96,6 @@ export default class ClusterStore {
         elastic_stack: {
           ...applicationInitialState,
           title: s__('ClusterIntegration|Elastic Stack'),
-          kibana_hostname: null,
         },
       },
       environments: [],
@@ -108,6 +107,7 @@ export default class ClusterStore {
     helpPath,
     ingressHelpPath,
     ingressDnsHelpPath,
+    ingressModSecurityHelpPath,
     environmentsHelpPath,
     clustersHelpPath,
     deployBoardsHelpPath,
@@ -116,6 +116,7 @@ export default class ClusterStore {
     this.state.helpPath = helpPath;
     this.state.ingressHelpPath = ingressHelpPath;
     this.state.ingressDnsHelpPath = ingressDnsHelpPath;
+    this.state.ingressModSecurityHelpPath = ingressModSecurityHelpPath;
     this.state.environmentsHelpPath = environmentsHelpPath;
     this.state.clustersHelpPath = clustersHelpPath;
     this.state.deployBoardsHelpPath = deployBoardsHelpPath;
@@ -207,6 +208,8 @@ export default class ClusterStore {
       if (appId === INGRESS) {
         this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
         this.state.applications.ingress.externalHostname = serverAppEntry.external_hostname;
+        this.state.applications.ingress.modsecurity_enabled =
+          serverAppEntry.modsecurity_enabled || this.state.applications.ingress.modsecurity_enabled;
       } else if (appId === CERT_MANAGER) {
         this.state.applications.cert_manager.email =
           this.state.applications.cert_manager.email || serverAppEntry.email;
@@ -231,12 +234,6 @@ 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',
-        );
       }
     });
   }

app/assets/javascripts/commit/image_file.js

@@ -40,7 +40,10 @@ export default class ImageFile {
       .removeClass('active')
       .filter(`.${viewMode}`)
       .addClass('active');
+
+    // eslint-disable-next-line no-jquery/no-fade
     return $(`.view:visible:not(.${viewMode})`, this.file).fadeOut(200, () => {
+      // eslint-disable-next-line no-jquery/no-fade
       $(`.view.${viewMode}`, this.file).fadeIn(200);
       return this.initView(viewMode);
     });

app/assets/javascripts/commit/pipelines/pipelines_table.vue

 <script>
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import PipelinesService from '~/pipelines/services/pipelines_service';
 import PipelineStore from '~/pipelines/stores/pipelines_store';
 import pipelinesMixin from '~/pipelines/mixins/pipelines';
@@ -7,7 +8,6 @@ import eventHub from '~/pipelines/event_hub';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
-import bp from '~/breakpoints';
 export default {
   components: {

app/assets/javascripts/contextual_sidebar.js

 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import _ from 'underscore';
-import bp from './breakpoints';
+import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
-// NOTE: at 1200px nav sidebar should not overlap the content
-// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/24555#note_134136110
-const NAV_SIDEBAR_BREAKPOINT = 1200;
-
 export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed';
 export default class ContextualSidebar {
@@ -50,9 +46,10 @@ export default class ContextualSidebar {
     $(window).on('resize', () => _.debounce(this.render(), 100));
   }
-  // TODO: use the breakpoints from breakpoints.js once they have been updated for bootstrap 4
   // See documentation: https://design.gitlab.com/regions/navigation#contextual-navigation
-  static isDesktopBreakpoint = () => bp.windowWidth() >= NAV_SIDEBAR_BREAKPOINT;
+  // NOTE: at 1200px nav sidebar should not overlap the content
+  // https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/24555#note_134136110
+  static isDesktopBreakpoint = () => bp.windowWidth() >= breakpoints.xl;
   static setCollapsedCookie(value) {
     if (!ContextualSidebar.isDesktopBreakpoint()) {
       return;
@@ -63,12 +60,13 @@ export default class ContextualSidebar {
   toggleSidebarNav(show) {
     const breakpoint = bp.getBreakpointSize();
     const dbp = ContextualSidebar.isDesktopBreakpoint();
+    const supportedSizes = ['xs', 'sm', 'md'];
     this.$sidebar.toggleClass(SIDEBAR_COLLAPSED_CLASS, !show);
     this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
     this.$overlay.toggleClass(
       'mobile-nav-open',
-      breakpoint === 'xs' || breakpoint === 'sm' ? show : false,
+      supportedSizes.includes(breakpoint) ? show : false,
     );
     this.$sidebar.removeClass('sidebar-collapsed-desktop');
   }
@@ -76,13 +74,14 @@ export default class ContextualSidebar {
   toggleCollapsedSidebar(collapsed, saveCookie) {
     const breakpoint = bp.getBreakpointSize();
     const dbp = ContextualSidebar.isDesktopBreakpoint();
+    const supportedSizes = ['xs', 'sm', 'md'];
     if (this.$sidebar.length) {
       this.$sidebar.toggleClass(`sidebar-collapsed-desktop ${SIDEBAR_COLLAPSED_CLASS}`, collapsed);
       this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
       this.$page.toggleClass(
         'page-with-icon-sidebar',
-        breakpoint === 'xs' || breakpoint === 'sm' ? true : collapsed,
+        supportedSizes.includes(breakpoint) ? true : collapsed,
       );
     }

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

@@ -3,7 +3,7 @@ import { createNamespacedHelpers, mapState, mapActions } from 'vuex';
 import _ from 'underscore';
 import { GlFormInput, GlFormCheckbox } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import ClusterFormDropdown from './cluster_form_dropdown.vue';
+import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
 import { KUBERNETES_VERSIONS } from '../constants';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
@@ -149,11 +149,11 @@ export default {
     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 %{externalLinkIcon} %{endLink}.',
+          'ClusterIntegration|Your service role is distinct from the provision role used when authenticating. It will allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}.',
         ),
         {
           startLink:
-            '<a href="https://docs.aws.amazon.com/eks/latest/userguide/getting-started-console.html#role-create" target="_blank" rel="noopener noreferrer">',
+            '<a href="https://docs.aws.amazon.com/eks/latest/userguide/service_IAM_role.html#create-service-role" target="_blank" rel="noopener noreferrer">',
           externalLinkIcon: this.externalLinkIcon,
           endLink: '</a>',
         },
@@ -342,10 +342,9 @@ export default {
         :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>
+      <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Service role') }}</label>
       <cluster-form-dropdown
         field-id="eks-role"
         field-name="eks-role"
@@ -353,7 +352,7 @@ export default {
         :items="roles"
         :loading="isLoadingRoles"
         :loading-text="s__('ClusterIntegration|Loading IAM Roles')"
-        :placeholder="s__('ClusterIntergation|Select role name')"
+        :placeholder="s__('ClusterIntergation|Select service role')"
         :search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')"
         :empty-text="s__('ClusterIntegration|No IAM Roles found')"
         :has-errors="Boolean(loadingRolesError)"

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

@@ -82,7 +82,7 @@ export default {
 };
 </script>
 <template>
-  <form name="service-credentials-form" @submit.prevent="createRole({ roleArn, externalId })">
+  <form name="service-credentials-form">
     <h2>{{ s__('ClusterIntegration|Authenticate with Amazon Web Services') }}</h2>
     <p>
       {{
@@ -136,6 +136,7 @@ export default {
       :disabled="submitButtonDisabled"
       :loading="isCreatingRole"
       :label="submitButtonLabel"
+      @click.prevent="createRole({ roleArn, externalId })"
     />
   </form>
 </template>

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

@@ -4,7 +4,7 @@ import * as getters from './getters';
 import mutations from './mutations';
 import state from './state';
-import clusterDropdownStore from './cluster_dropdown';
+import clusterDropdownStore from '~/create_cluster/store/cluster_dropdown';
 import {
   fetchRoles,

app/assets/javascripts/create_cluster/gke_cluster/components/gke_network_dropdown.vue

+<script>
+import { createNamespacedHelpers, mapState, mapGetters, mapActions } from 'vuex';
+
+import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
+
+const { mapState: mapDropdownState } = createNamespacedHelpers('networks');
+const { mapActions: mapSubnetworkActions } = createNamespacedHelpers('subnetworks');
+
+export default {
+  components: {
+    ClusterFormDropdown,
+  },
+  props: {
+    fieldName: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['selectedNetwork']),
+    ...mapDropdownState(['items', 'isLoadingItems', 'loadingItemsError']),
+    ...mapGetters(['hasZone', 'projectId', 'region']),
+  },
+  methods: {
+    ...mapActions(['setNetwork', 'setSubnetwork']),
+    ...mapSubnetworkActions({ fetchSubnetworks: 'fetchItems' }),
+    setNetworkAndFetchSubnetworks(network) {
+      const { projectId: project, region } = this;
+
+      this.setSubnetwork('');
+      this.setNetwork(network);
+      this.fetchSubnetworks({ project, region, network: network.selfLink });
+    },
+  },
+};
+</script>
+<template>
+  <cluster-form-dropdown
+    :field-name="fieldName"
+    :value="selectedNetwork"
+    :items="items"
+    :disabled="!hasZone"
+    :loading="isLoadingItems"
+    :has-errors="Boolean(loadingItemsError)"
+    :loading-text="s__('ClusterIntegration|Loading networks')"
+    :placeholder="s__('ClusterIntergation|Select a network')"
+    :search-field-placeholder="s__('ClusterIntegration|Search networks')"
+    :empty-text="s__('ClusterIntegration|No networks found')"
+    :error-message="s__('ClusterIntegration|Could not load networks')"
+    :disabled-text="s__('ClusterIntegration|Select a zone to choose a network')"
+    @input="setNetworkAndFetchSubnetworks"
+  />
+</template>

app/assets/javascripts/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue

+<script>
+import { createNamespacedHelpers, mapState, mapGetters, mapActions } from 'vuex';
+
+import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
+
+const { mapState: mapDropdownState } = createNamespacedHelpers('subnetworks');
+
+export default {
+  components: {
+    ClusterFormDropdown,
+  },
+  props: {
+    fieldName: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['selectedSubnetwork']),
+    ...mapDropdownState(['items', 'isLoadingItems', 'loadingItemsError']),
+    ...mapGetters(['hasNetwork']),
+  },
+  methods: {
+    ...mapActions(['setSubnetwork']),
+  },
+};
+</script>
+<template>
+  <cluster-form-dropdown
+    :field-name="fieldName"
+    :value="selectedSubnetwork"
+    :items="items"
+    :disabled="!hasNetwork"
+    :loading="isLoadingItems"
+    :has-errors="Boolean(loadingItemsError)"
+    :loading-text="s__('ClusterIntegration|Loading subnetworks')"
+    :placeholder="s__('ClusterIntergation|Select a subnetwork')"
+    :search-field-placeholder="s__('ClusterIntegration|Search subnetworks')"
+    :empty-text="s__('ClusterIntegration|No subnetworks found')"
+    :error-message="s__('ClusterIntegration|Could not load subnetworks')"
+    :disabled-text="s__('ClusterIntegration|Select a network to choose a subnetwork')"
+    @input="setSubnetwork"
+  />
+</template>