Add latest changes from gitlab-org/gitlab@master

4 files changed, 37 insertions, 132 deletions

diff --git a/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue b/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue
index 5a37751410a..251a6680ed3 100644
--- a/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue
+++ b/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue
@@ -2,8 +2,9 @@
 import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
+import NewIssueDropdown from '~/vue_shared/components/new_issue_dropdown/new_issue_dropdown.vue';
 import { i18n } from '../constants';
-import NewIssueDropdown from './new_issue_dropdown.vue';
+import { hasNewIssueDropdown } from '../has_new_issue_dropdown_mixin';
 
 export default {
   i18n,
@@ -16,6 +17,7 @@ export default {
     GlSprintf,
     NewIssueDropdown,
   },
+  mixins: [hasNewIssueDropdown()],
   inject: [
     'canCreateProjects',
     'emptyStateSvgPath',
@@ -75,7 +77,13 @@ export default {
           :export-csv-path="exportCsvPathWithQuery"
           :issuable-count="currentTabCount"
         />
-        <new-issue-dropdown v-if="showNewIssueDropdown" class="gl-align-self-center" />
+        <new-issue-dropdown
+          v-if="showNewIssueDropdown"
+          class="gl-align-self-center"
+          :query="$options.searchProjectsQuery"
+          :query-variables="newIssueDropdownQueryVariables"
+          :extract-projects="extractProjects"
+        />
       </template>
     </gl-empty-state>
     <hr />
diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index e4000184f41..0caf97a9f0c 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -48,6 +48,7 @@ import {
 import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue';
 import { IssuableListTabs, IssuableStates } from '~/vue_shared/issuable/list/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import NewIssueDropdown from '~/vue_shared/components/new_issue_dropdown/new_issue_dropdown.vue';
 import {
   CREATED_DESC,
   defaultTypeTokenOptions,
@@ -82,9 +83,9 @@ import {
   getSortOptions,
   isSortKey,
 } from '../utils';
+import { hasNewIssueDropdown } from '../has_new_issue_dropdown_mixin';
 import EmptyStateWithAnyIssues from './empty_state_with_any_issues.vue';
 import EmptyStateWithoutAnyIssues from './empty_state_without_any_issues.vue';
-import NewIssueDropdown from './new_issue_dropdown.vue';
 
 const UserToken = () => import('~/vue_shared/components/filtered_search_bar/tokens/user_token.vue');
 const EmojiToken = () =>
@@ -117,7 +118,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [glFeatureFlagMixin()],
+  mixins: [glFeatureFlagMixin(), hasNewIssueDropdown()],
   inject: [
     'autocompleteAwardEmojisPath',
     'calendarPath',
@@ -831,7 +832,12 @@ export default {
           {{ $options.i18n.newIssueLabel }}
         </gl-button>
         <slot name="new-objective-button"></slot>
-        <new-issue-dropdown v-if="showNewIssueDropdown" />
+        <new-issue-dropdown
+          v-if="showNewIssueDropdown"
+          :query="$options.searchProjectsQuery"
+          :query-variables="newIssueDropdownQueryVariables"
+          :extract-projects="extractProjects"
+        />
       </template>
 
       <template #timeframe="{ issuable = {} }">
diff --git a/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue b/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue
deleted file mode 100644
index e420c21a11f..00000000000
--- a/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<script>
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownText,
-  GlLoadingIcon,
-  GlSearchBoxByType,
-} from '@gitlab/ui';
-import { createAlert } from '~/flash';
-import { DASH_SCOPE, joinPaths } from '~/lib/utils/url_utility';
-import { __, sprintf } from '~/locale';
-import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
-import searchProjectsQuery from '../queries/search_projects.query.graphql';
-
-export default {
-  i18n: {
-    defaultDropdownText: __('Select project to create issue'),
-    noMatchesFound: __('No matches found'),
-    toggleButtonLabel: __('Toggle project select'),
-  },
-  components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownText,
-    GlLoadingIcon,
-    GlSearchBoxByType,
-  },
-  inject: ['fullPath'],
-  data() {
-    return {
-      projects: [],
-      search: '',
-      selectedProject: {},
-      shouldSkipQuery: true,
-    };
-  },
-  apollo: {
-    projects: {
-      query: searchProjectsQuery,
-      variables() {
-        return {
-          fullPath: this.fullPath,
-          search: this.search,
-        };
-      },
-      update: ({ group }) => group.projects.nodes ?? [],
-      error(error) {
-        createAlert({
-          message: __('An error occurred while loading projects.'),
-          captureError: true,
-          error,
-        });
-      },
-      skip() {
-        return this.shouldSkipQuery;
-      },
-      debounce: DEBOUNCE_DELAY,
-    },
-  },
-  computed: {
-    dropdownHref() {
-      return this.hasSelectedProject
-        ? joinPaths(this.selectedProject.webUrl, DASH_SCOPE, 'issues/new')
-        : undefined;
-    },
-    dropdownText() {
-      return this.hasSelectedProject
-        ? sprintf(__('New issue in %{project}'), { project: this.selectedProject.name })
-        : this.$options.i18n.defaultDropdownText;
-    },
-    hasSelectedProject() {
-      return this.selectedProject.id;
-    },
-    projectsWithIssuesEnabled() {
-      return this.projects.filter((project) => project.issuesEnabled);
-    },
-    showNoSearchResultsText() {
-      return !this.projectsWithIssuesEnabled.length && this.search;
-    },
-  },
-  methods: {
-    handleDropdownClick() {
-      if (!this.dropdownHref) {
-        this.$refs.dropdown.show();
-      }
-    },
-    handleDropdownShown() {
-      if (this.shouldSkipQuery) {
-        this.shouldSkipQuery = false;
-      }
-      this.$refs.search.focusInput();
-    },
-    selectProject(project) {
-      this.selectedProject = project;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown
-    ref="dropdown"
-    right
-    split
-    :split-href="dropdownHref"
-    :text="dropdownText"
-    :toggle-text="$options.i18n.toggleButtonLabel"
-    variant="confirm"
-    @click="handleDropdownClick"
-    @shown="handleDropdownShown"
-  >
-    <gl-search-box-by-type ref="search" v-model.trim="search" />
-    <gl-loading-icon v-if="$apollo.queries.projects.loading" />
-    <template v-else>
-      <gl-dropdown-item
-        v-for="project of projectsWithIssuesEnabled"
-        :key="project.id"
-        @click="selectProject(project)"
-      >
-        {{ project.nameWithNamespace }}
-      </gl-dropdown-item>
-      <gl-dropdown-text v-if="showNoSearchResultsText">
-        {{ $options.i18n.noMatchesFound }}
-      </gl-dropdown-text>
-    </template>
-  </gl-dropdown>
-</template>
diff --git a/app/assets/javascripts/issues/list/has_new_issue_dropdown_mixin.js b/app/assets/javascripts/issues/list/has_new_issue_dropdown_mixin.js
new file mode 100644
index 00000000000..510edf9b78c
--- /dev/null
+++ b/app/assets/javascripts/issues/list/has_new_issue_dropdown_mixin.js
@@ -0,0 +1,18 @@
+import searchProjectsQuery from './queries/search_projects.query.graphql';
+
+export const hasNewIssueDropdown = () => ({
+  inject: ['fullPath'],
+  computed: {
+    newIssueDropdownQueryVariables() {
+      return {
+        fullPath: this.fullPath,
+      };
+    },
+  },
+  methods: {
+    extractProjects(data) {
+      return data?.group?.projects?.nodes;
+    },
+  },
+  searchProjectsQuery,
+});