Add latest changes from gitlab-org/gitlab@master

4 files changed, 246 insertions, 4 deletions

diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue
new file mode 100644
index 00000000000..f9465da6fda
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue
@@ -0,0 +1,182 @@
+<script>
+import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
+import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
+import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
+
+export default {
+  components: {
+    DropdownButton,
+    DropdownSearchInput,
+    DropdownHiddenInput,
+  },
+  props: {
+    fieldName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    defaultValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    value: {
+      type: Object,
+      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,
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    searchFieldPlaceholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    emptyText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    searchFn: {
+      type: Function,
+      required: false,
+      default: searchQuery => item => item.name.toLowerCase().indexOf(searchQuery) > -1,
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+      selectedItem: null,
+    };
+  },
+  computed: {
+    toggleText() {
+      if (this.loading && this.loadingText) {
+        return this.loadingText;
+      }
+
+      if (this.disabled && this.disabledText) {
+        return this.disabledText;
+      }
+
+      if (!this.selectedItem) {
+        return this.placeholder;
+      }
+
+      return this.selectedItemLabel;
+    },
+    results() {
+      if (!this.items) {
+        return [];
+      }
+
+      return this.items.filter(this.searchFn(this.searchQuery));
+    },
+    selectedItemLabel() {
+      return this.selectedItem && this.selectedItem[this.labelProperty];
+    },
+    selectedItemValue() {
+      return (this.selectedItem && this.selectedItem[this.valueProperty]) || '';
+    },
+  },
+  methods: {
+    select(item) {
+      this.selectedItem = item;
+      this.$emit('input', item);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="js-gcp-machine-type-dropdown dropdown">
+      <dropdown-hidden-input :name="fieldName" :value="selectedItemValue" />
+      <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" :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 class="js-dropdown-item" type="button" @click.prevent="select(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>
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
index 1ec45c8b651..6e74963dcb0 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
@@ -14,5 +14,12 @@ export default {
 };
 </script>
 <template>
-  <form name="eks-cluster-configuration-form"></form>
+  <form name="eks-cluster-configuration-form">
+    <div class="form-group">
+      <label class="label-bold" name="role" for="eks-role">
+        {{ s__('ClusterIntegration|Role name') }}
+      </label>
+      <role-name-dropdown />
+    </div>
+  </form>
 </template>
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue
index e69de29bb2d..70230b294ac 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue
@@ -0,0 +1,53 @@
+<script>
+import { sprintf, s__ } from '~/locale';
+
+import ClusterFormDropdown from './cluster_form_dropdown.vue';
+
+export default {
+  components: {
+    ClusterFormDropdown,
+  },
+  props: {
+    roles: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    helpText() {
+      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,
+      );
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <cluster-form-dropdown
+      field-id="eks-role-name"
+      field-name="eks-role-name"
+      :items="roles"
+      :loading="loading"
+      :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')"
+    />
+    <p class="form-text text-muted" v-html="helpText"></p>
+  </div>
+</template>
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index 84f0900d9c1..104c68919f0 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -49,12 +49,12 @@
             = render_if_exists 'projects/mirrors/table_pull_row'
             - @project.remote_mirrors.each_with_index do |mirror, index|
               - next if mirror.new_record?
-              %tr.qa-mirrored-repository-row.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?) }
-                %td.qa-mirror-repository-url= mirror.safe_url || _('Invalid URL')
+              %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row' } }
+                %td{ data: { qa_selector: 'mirror_repository_url_cell' } }= mirror.safe_url || _('Invalid URL')
                 %td= _('Push')
                 %td
                   = mirror.last_update_started_at.present? ? time_ago_with_tooltip(mirror.last_update_started_at) : _('Never')
-                %td.qa-mirror-last-update-at= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
+                %td{ data: { qa_selector: 'mirror_last_update_at_cell' } }= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
                 %td
                   - if mirror.disabled?
                     = render 'projects/mirrors/disabled_mirror_badge'