Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

.gitlab/CODEOWNERS

@@ -459,7 +459,7 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/administration/operations/gitlab_sshd.md @aqualls
 /doc/administration/operations/moving_repositories.md @eread
 /doc/administration/package_information/ @axil
-/doc/administration/packages/ @dianalogan
+/doc/administration/packages/ @marcel.amirault
 /doc/administration/pages/ @ashrafkhamis
 /doc/administration/polling.md @axil
 /doc/administration/postgresql/ @aqualls
@@ -505,10 +505,10 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/api/bulk_imports.md @eread
 /doc/api/cluster_agents.md @phillipwells
 /doc/api/commits.md @aqualls
-/doc/api/container_registry.md @dianalogan
+/doc/api/container_registry.md @marcel.amirault
 /doc/api/custom_attributes.md @msedlakjakubowski
 /doc/api/dependencies.md @rdickenson
-/doc/api/dependency_proxy.md @dianalogan
+/doc/api/dependency_proxy.md @marcel.amirault
 /doc/api/deploy_keys.md @rdickenson
 /doc/api/deploy_tokens.md @rdickenson
 /doc/api/deployments.md @rdickenson
@@ -587,8 +587,8 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/api/notification_settings.md @msedlakjakubowski
 /doc/api/oauth2.md @jglassman1
 /doc/api/openapi/ @ashrafkhamis
-/doc/api/packages.md @dianalogan
-/doc/api/packages/ @dianalogan
+/doc/api/packages.md @marcel.amirault
+/doc/api/packages/ @marcel.amirault
 /doc/api/pages.md @ashrafkhamis
 /doc/api/pages_domains.md @ashrafkhamis
 /doc/api/personal_access_tokens.md @eread
@@ -648,7 +648,7 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/api/usage_data.md @dianalogan
 /doc/api/users.md @jglassman1
 /doc/api/version.md @phillipwells
-/doc/api/visual_review_discussions.md @marcel.amirault
+/doc/api/visual_review_discussions.md @drcatherinepope
 /doc/api/vulnerabilities.md @dianalogan
 /doc/api/vulnerability_exports.md @dianalogan
 /doc/api/vulnerability_findings.md @dianalogan
@@ -665,30 +665,33 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/ci/environments/ @rdickenson
 /doc/ci/examples/authenticating-with-hashicorp-vault/ @marcel.amirault
 /doc/ci/examples/deployment/ @rdickenson
-/doc/ci/examples/end_to_end_testing_webdriverio/ @marcel.amirault
-/doc/ci/examples/semantic-release.md @dianalogan
+/doc/ci/examples/semantic-release.md @marcel.amirault
 /doc/ci/interactive_web_terminal/ @fneill
-/doc/ci/jobs/job_control.md @marcel.amirault
+/doc/ci/introduction/ @marcel.amirault
+/doc/ci/jobs/ @marcel.amirault
 /doc/ci/large_repositories/ @fneill
 /doc/ci/lint.md @marcel.amirault
 /doc/ci/migration/ @marcel.amirault
 /doc/ci/pipeline_editor/ @marcel.amirault
 /doc/ci/pipelines/downstream_pipelines.md @marcel.amirault
 /doc/ci/pipelines/index.md @marcel.amirault
 /doc/ci/pipelines/job_artifacts.md @marcel.amirault
+/doc/ci/pipelines/pipeline_architectures.md @marcel.amirault
 /doc/ci/pipelines/pipeline_artifacts.md @marcel.amirault
 /doc/ci/quick_start/ @marcel.amirault
 /doc/ci/resource_groups/ @rdickenson
-/doc/ci/review_apps/ @marcel.amirault
 /doc/ci/runners/ @fneill
 /doc/ci/secrets/ @marcel.amirault
 /doc/ci/secure_files/ @marcel.amirault
 /doc/ci/services/ @fneill
+/doc/ci/ssh_keys/ @marcel.amirault
 /doc/ci/test_cases/ @msedlakjakubowski
-/doc/ci/testing/ @marcel.amirault
 /doc/ci/testing/code_quality.md @rdickenson
+/doc/ci/triggers/ @marcel.amirault
+/doc/ci/troubleshooting.md @marcel.amirault
 /doc/ci/variables/ @marcel.amirault
 /doc/ci/yaml/ @marcel.amirault
+/doc/ci/yaml/artifacts_reports.md @drcatherinepope
 /doc/development/application_limits.md @axil
 /doc/development/audit_event_guide/ @eread
 /doc/development/auto_devops.md @phillipwells
@@ -719,7 +722,7 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/development/fe_guide/dark_mode.md @sselhorn
 /doc/development/fe_guide/graphql.md @sselhorn
 /doc/development/fe_guide/merge_request_widget_extensions.md @aqualls
-/doc/development/fe_guide/source_editor.md @ashrafkhamis
+/doc/development/fe_guide/source_editor.md @aqualls
 /doc/development/fe_guide/view_component.md @rdickenson
 /doc/development/feature_categorization/ @sselhorn
 /doc/development/feature_development.md @sselhorn
@@ -737,10 +740,7 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/development/image_scaling.md @lciutacu
 /doc/development/import_export.md @eread
 /doc/development/index.md @sselhorn
-/doc/development/integrations/codesandbox.md @sselhorn
-/doc/development/integrations/index.md @ashrafkhamis
-/doc/development/integrations/jenkins.md @ashrafkhamis
-/doc/development/integrations/jira_connect.md @ashrafkhamis
+/doc/development/integrations/ @ashrafkhamis
 /doc/development/integrations/secure.md @rdickenson
 /doc/development/integrations/secure_partner_integration.md @rdickenson
 /doc/development/internal_api/ @aqualls
@@ -752,8 +752,10 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/development/logging.md @msedlakjakubowski
 /doc/development/maintenance_mode.md @axil
 /doc/development/merge_request_concepts/ @aqualls
+/doc/development/migration_style_guide.md @aqualls
+/doc/development/navigation_sidebar.md @rdickenson
 /doc/development/omnibus.md @axil
-/doc/development/packages/ @dianalogan
+/doc/development/packages/ @marcel.amirault
 /doc/development/pages/ @ashrafkhamis
 /doc/development/permissions.md @jglassman1
 /doc/development/policies.md @jglassman1
@@ -856,7 +858,7 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/user/admin_area/settings/incident_management_rate_limits.md @msedlakjakubowski
 /doc/user/admin_area/settings/index.md @aqualls
 /doc/user/admin_area/settings/instance_template_repository.md @aqualls
-/doc/user/admin_area/settings/package_registry_rate_limits.md @dianalogan
+/doc/user/admin_area/settings/package_registry_rate_limits.md @marcel.amirault
 /doc/user/admin_area/settings/project_integration_management.md @ashrafkhamis
 /doc/user/admin_area/settings/push_event_activities_limit.md @aqualls
 /doc/user/admin_area/settings/rate_limit_on_issues_creation.md @msedlakjakubowski
@@ -900,7 +902,7 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/user/group/iterations/ @msedlakjakubowski
 /doc/user/group/planning_hierarchy/ @msedlakjakubowski
 /doc/user/group/reporting/ @phillipwells
-/doc/user/group/repositories_analytics/ @marcel.amirault
+/doc/user/group/repositories_analytics/ @drcatherinepope
 /doc/user/group/roadmap/ @msedlakjakubowski
 /doc/user/group/saml_sso/ @jglassman1
 /doc/user/group/settings/ @jglassman1
@@ -910,7 +912,7 @@ lib/gitlab/checks/** @proglottis @toon @zj-gitlab
 /doc/user/namespace/ @lciutacu
 /doc/user/okrs.md @msedlakjakubowski
 /doc/user/operations_dashboard/ @rdickenson
-/doc/user/packages/ @dianalogan
+/doc/user/packages/ @marcel.amirault
 /doc/user/permissions.md @jglassman1
 /doc/user/product_analytics/ @lciutacu
 /doc/user/profile/ @jglassman1

app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue

@@ -1,22 +1,27 @@
 <script>
-import { GlTokenSelector } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownItem,
+  GlIcon,
+  GlLoadingIcon,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { __, sprintf } from '~/locale';
 
 export default {
   components: {
-    GlTokenSelector,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownItem,
+    GlSearchBoxByType,
+    GlIcon,
+    GlLoadingIcon,
   },
   inject: ['environmentsEndpoint'],
-  props: {
-    selected: {
-      type: Array,
-      required: true,
-    },
-  },
   data() {
     return {
       environmentSearch: '',
@@ -27,54 +32,24 @@ export default {
   translations: {
     addEnvironmentsLabel: __('Add environment'),
     noResultsLabel: __('No matching results'),
-    loadingResultsLabel: __('Loading...'),
-    allEnvironments: __('All environments'),
   },
   computed: {
     createEnvironmentLabel() {
       return sprintf(__('Create %{environment}'), { environment: this.environmentSearch });
     },
-    selectedEnvironmentNames() {
-      return this.selected.map(({ name }) => name);
-    },
-    dropdownItems() {
-      return this.results.filter(({ name }) => !this.isSelected(name));
-    },
-    hasNoSearchResults() {
-      return !this.dropdownItems.length;
-    },
-    searchItemAlreadySelected() {
-      return this.isSelected(this.environmentSearch);
-    },
-  },
-  created() {
-    this.debouncedHandleSearch = debounce(this.handleSearch, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
-  },
-  destroyed() {
-    this.debouncedHandleSearch.cancel();
   },
   methods: {
-    isSelected(name) {
-      return this.selectedEnvironmentNames.includes(name);
-    },
-    addEnvironment({ name }) {
-      this.$emit('add', name);
-      this.environmentSearch = '';
-    },
-    removeEnvironment({ name }) {
-      this.$emit('remove', name);
+    addEnvironment(newEnvironment) {
+      this.$emit('add', newEnvironment);
       this.environmentSearch = '';
+      this.results = [];
     },
-    handleSearch(query = '') {
-      this.environmentSearch = query;
-      this.fetchEnvironments();
-    },
-    async fetchEnvironments() {
+    fetchEnvironments: debounce(function debouncedFetchEnvironments() {
       this.isLoading = true;
-      await axios
+      axios
         .get(this.environmentsEndpoint, { params: { query: this.environmentSearch } })
-        .then(({ data = [] }) => {
-          this.results = data.map((text, index) => ({ id: index, name: text }));
+        .then(({ data }) => {
+          this.results = data || [];
         })
         .catch(() => {
           createAlert({
@@ -84,28 +59,44 @@ export default {
         .finally(() => {
           this.isLoading = false;
         });
+    }, 250),
+    setFocus() {
+      this.$refs.searchBox.focusInput();
     },
   },
 };
 </script>
 <template>
-  <gl-token-selector
-    data-testid="new-environment-selector"
-    :selected-tokens="selected"
-    :label-text="$options.translations.addEnvironmentsLabel"
-    :dropdown-items="dropdownItems"
-    :loading="isLoading"
-    :hide-dropdown-with-no-items="searchItemAlreadySelected && hasNoSearchResults"
-    :allow-user-defined-tokens="!searchItemAlreadySelected"
-    @focus.once="fetchEnvironments"
-    @text-input="debouncedHandleSearch"
-    @token-add="addEnvironment"
-    @token-remove="removeEnvironment"
-  >
-    <template #user-defined-token-content>
-      {{ createEnvironmentLabel }}
+  <gl-dropdown class="js-new-environments-dropdown" @shown="setFocus">
+    <template #button-content>
+      <span class="d-md-none mr-1">
+        {{ $options.translations.addEnvironmentsLabel }}
+      </span>
+      <gl-icon class="d-none d-md-inline-flex gl-mr-1" name="plus" />
+    </template>
+    <gl-search-box-by-type
+      ref="searchBox"
+      v-model.trim="environmentSearch"
+      @focus="fetchEnvironments"
+      @keyup="fetchEnvironments"
+    />
+    <gl-loading-icon v-if="isLoading" size="sm" />
+    <gl-dropdown-item
+      v-for="environment in results"
+      v-else-if="results.length"
+      :key="environment"
+      @click="addEnvironment(environment)"
+    >
+      {{ environment }}
+    </gl-dropdown-item>
+    <template v-else-if="environmentSearch.length">
+      <span ref="noResults" class="text-secondary gl-p-3">
+        {{ $options.translations.noMatchingResults }}
+      </span>
+      <gl-dropdown-divider />
+      <gl-dropdown-item @click="addEnvironment(environmentSearch)">
+        {{ createEnvironmentLabel }}
+      </gl-dropdown-item>
     </template>
-    <template #no-results-content>{{ $options.translations.noResultsLabel }}</template>
-    <template #loading-content>{{ $options.translations.loadingResultsLabel }}</template>
-  </gl-token-selector>
+  </gl-dropdown>
 </template>