diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-11-15 06:11:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-11-15 06:11:59 +0300 |
commit | 29c6745feab7edf3c0485b34b5e5fffdded9c402 (patch) | |
tree | 0953ef194cd5a2cd4ad750804ffe135539b46f6b /app/assets/javascripts | |
parent | ff45b1aea7367cf98a5b70e8324e4826c119bf87 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
8 files changed, 109 insertions, 14 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue index 6f0a0a1fe79..e7e7e54ce77 100644 --- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue +++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_groups.vue @@ -1,13 +1,24 @@ <script> import { s__ } from '~/locale'; import { MAX_FREQUENT_GROUPS_COUNT } from '~/super_sidebar/constants'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import currentUserFrecentGroupsQuery from '~/super_sidebar/graphql/queries/current_user_frecent_groups.query.graphql'; import FrequentItems from './frequent_items.vue'; export default { name: 'FrequentlyVisitedGroups', + apollo: { + frecentGroups: { + query: currentUserFrecentGroupsQuery, + skip() { + return !this.glFeatures.frecentNamespacesSuggestions; + }, + }, + }, components: { FrequentItems, }, + mixins: [glFeatureFlagsMixin()], inject: ['groupsPath'], data() { const username = gon.current_username; @@ -27,10 +38,12 @@ export default { <template> <frequent-items + :loading="$apollo.queries.frecentGroups.loading" :empty-state-text="$options.i18n.emptyStateText" :group-name="$options.i18n.groupName" :max-items="$options.MAX_FREQUENT_GROUPS_COUNT" :storage-key="storageKey" + :items="frecentGroups" view-all-items-icon="group" :view-all-items-text="$options.i18n.viewAllText" :view-all-items-path="groupsPath" diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue index 5371887ee0f..b0007c21cdc 100644 --- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue +++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item.vue @@ -2,6 +2,7 @@ import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import ProjectAvatar from '~/vue_shared/components/project_avatar.vue'; import { __ } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { name: 'FrequentlyVisitedItem', @@ -12,6 +13,7 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, + mixins: [glFeatureFlagsMixin()], props: { item: { type: Object, @@ -51,6 +53,7 @@ export default { </div> <gl-button + v-if="!glFeatures.frecentNamespacesSuggestions" v-gl-tooltip.left icon="dash" category="tertiary" diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item_skeleton.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item_skeleton.vue new file mode 100644 index 00000000000..dce18b2c46e --- /dev/null +++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_item_skeleton.vue @@ -0,0 +1,17 @@ +<script> +import { GlSkeletonLoader } from '@gitlab/ui'; + +export default { + components: { + GlSkeletonLoader, + }, +}; +</script> + +<template> + <gl-skeleton-loader :width="737" :height="48"> + <rect width="24" height="24" y="12" x="8" /> + <rect width="120" height="12" y="10" x="36" /> + <rect width="100" height="12" y="26" x="36" /> + </gl-skeleton-loader> +</template> diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue index ddadd6856ca..2e431c4f8da 100644 --- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue +++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_items.vue @@ -3,8 +3,10 @@ import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlIcon } from '@gi import { truncateNamespace } from '~/lib/utils/text_utility'; import { getItemsFromLocalStorage, removeItemFromLocalStorage } from '~/super_sidebar/utils'; import { TRACKING_UNKNOWN_PANEL } from '~/super_sidebar/constants'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { TRACKING_CLICK_COMMAND_PALETTE_ITEM } from '../command_palette/constants'; import FrequentItem from './frequent_item.vue'; +import FrequentItemSkeleton from './frequent_item_skeleton.vue'; export default { name: 'FrequentlyVisitedItems', @@ -13,8 +15,15 @@ export default { GlDisclosureDropdownItem, GlIcon, FrequentItem, + FrequentItemSkeleton, }, + mixins: [glFeatureFlagsMixin()], props: { + loading: { + type: Boolean, + required: false, + default: false, + }, emptyStateText: { type: String, required: true, @@ -45,10 +54,15 @@ export default { required: false, default: null, }, + items: { + type: Array, + required: false, + default: () => [], + }, }, data() { return { - items: getItemsFromLocalStorage({ + localItems: getItemsFromLocalStorage({ storageKey: this.storageKey, maxItems: this.maxItems, }), @@ -56,10 +70,11 @@ export default { }, computed: { formattedItems() { + const items = this.glFeatures.frecentNamespacesSuggestions ? this.items : this.localItems; // Each item needs two different representations. One is for the // GlDisclosureDropdownItem, and the other is for the FrequentItem // renderer component inside it. - return this.items.map((item) => ({ + return items.map((item) => ({ forDropdown: { id: item.id, @@ -83,7 +98,7 @@ export default { })); }, showEmptyState() { - return this.items.length === 0; + return !this.loading && this.formattedItems.length === 0; }, viewAllItem() { return { @@ -93,18 +108,21 @@ export default { }, }, created() { - if (!this.storageKey) { + if (!this.glFeatures.frecentNamespacesSuggestions && !this.storageKey) { this.$emit('nothing-to-render'); } }, methods: { removeItem(item) { + if (this.glFeatures.frecentNamespacesSuggestions) { + return; + } removeItemFromLocalStorage({ storageKey: this.storageKey, item, }); - this.items = this.items.filter((i) => i.id !== item.id); + this.localItems = this.localItems.filter((i) => i.id !== item.id); }, }, }; @@ -114,16 +132,21 @@ export default { <gl-disclosure-dropdown-group v-if="storageKey" v-bind="$attrs"> <template #group-label>{{ groupName }}</template> - <gl-disclosure-dropdown-item - v-for="item of formattedItems" - :key="item.forDropdown.id" - :item="item.forDropdown" - class="show-on-focus-or-hover--context" - > - <template #list-item - ><frequent-item :item="item.forRenderer" @remove="removeItem" - /></template> + <gl-disclosure-dropdown-item v-if="loading"> + <frequent-item-skeleton /> </gl-disclosure-dropdown-item> + <template v-else> + <gl-disclosure-dropdown-item + v-for="item of formattedItems" + :key="item.forDropdown.id" + :item="item.forDropdown" + class="show-on-focus-or-hover--context" + > + <template #list-item + ><frequent-item :item="item.forRenderer" @remove="removeItem" + /></template> + </gl-disclosure-dropdown-item> + </template> <gl-disclosure-dropdown-item v-if="showEmptyState" class="gl-cursor-text"> <span class="gl-text-gray-500 gl-font-sm gl-my-3 gl-mx-3">{{ emptyStateText }}</span> diff --git a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue index 35b254099c2..4a269d1b876 100644 --- a/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue +++ b/app/assets/javascripts/super_sidebar/components/global_search/components/frequent_projects.vue @@ -1,13 +1,24 @@ <script> import { s__ } from '~/locale'; import { MAX_FREQUENT_PROJECTS_COUNT } from '~/super_sidebar/constants'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import currentUserFrecentProjectsQuery from '~/super_sidebar/graphql/queries/current_user_frecent_projects.query.graphql'; import FrequentItems from './frequent_items.vue'; export default { name: 'FrequentlyVisitedProjects', + apollo: { + frecentProjects: { + query: currentUserFrecentProjectsQuery, + skip() { + return !this.glFeatures.frecentNamespacesSuggestions; + }, + }, + }, components: { FrequentItems, }, + mixins: [glFeatureFlagsMixin()], inject: ['projectsPath'], data() { const username = gon.current_username; @@ -27,10 +38,12 @@ export default { <template> <frequent-items + :loading="$apollo.queries.frecentProjects.loading" :empty-state-text="$options.i18n.emptyStateText" :group-name="$options.i18n.groupName" :max-items="$options.MAX_FREQUENT_PROJECTS_COUNT" :storage-key="storageKey" + :items="frecentProjects" view-all-items-icon="project" :view-all-items-text="$options.i18n.viewAllText" :view-all-items-path="projectsPath" diff --git a/app/assets/javascripts/super_sidebar/graphql/queries/current_user_frecent_groups.query.graphql b/app/assets/javascripts/super_sidebar/graphql/queries/current_user_frecent_groups.query.graphql new file mode 100644 index 00000000000..82b9a53c36e --- /dev/null +++ b/app/assets/javascripts/super_sidebar/graphql/queries/current_user_frecent_groups.query.graphql @@ -0,0 +1,9 @@ +query CurrentUserFrecentGroups { + frecentGroups { + id + name + namespace: fullName + webUrl + avatarUrl + } +} diff --git a/app/assets/javascripts/super_sidebar/graphql/queries/current_user_frecent_projects.query.graphql b/app/assets/javascripts/super_sidebar/graphql/queries/current_user_frecent_projects.query.graphql new file mode 100644 index 00000000000..4b406d1ea6c --- /dev/null +++ b/app/assets/javascripts/super_sidebar/graphql/queries/current_user_frecent_projects.query.graphql @@ -0,0 +1,9 @@ +query CurrentUserFrecentProjects { + frecentProjects { + id + name + namespace: nameWithNamespace + webUrl + avatarUrl + } +} diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js index 9e540175b48..b4ad9a20b76 100644 --- a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js +++ b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js @@ -1,6 +1,8 @@ import Vue from 'vue'; import { GlToast } from '@gitlab/ui'; +import VueApollo from 'vue-apollo'; import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils'; +import createDefaultClient from '~/lib/graphql'; import { initStatusTriggers } from '../header'; import { JS_TOGGLE_EXPAND_CLASS } from './constants'; import createStore from './components/global_search/store'; @@ -12,6 +14,11 @@ import SuperSidebar from './components/super_sidebar.vue'; import SuperSidebarToggle from './components/super_sidebar_toggle.vue'; Vue.use(GlToast); +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); const getTrialStatusWidgetData = (sidebarData) => { if (sidebarData.trial_status_widget_data_attrs && sidebarData.trial_status_popover_data_attrs) { @@ -90,6 +97,7 @@ export const initSuperSidebar = () => { return new Vue({ el, name: 'SuperSidebarRoot', + apolloProvider, provide: { rootPath, isImpersonating, |