diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-09 00:10:18 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-09 00:10:18 +0300 |
commit | 5b5ff31460fc5572abbd8b7ee35f303a6f1df196 (patch) | |
tree | 87ca6063a62677ae52d85641d15e9a63c98a15b7 /app/assets | |
parent | fdeb53bebfb91f7cc7182c783310ee7d7bac8550 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
9 files changed, 140 insertions, 83 deletions
diff --git a/app/assets/javascripts/ci/catalog/components/list/catalog_tabs.vue b/app/assets/javascripts/ci/catalog/components/list/catalog_tabs.vue new file mode 100644 index 00000000000..f43255ab76b --- /dev/null +++ b/app/assets/javascripts/ci/catalog/components/list/catalog_tabs.vue @@ -0,0 +1,67 @@ +<script> +import { GlBadge, GlTab, GlTabs, GlLoadingIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { SCOPE } from '../../constants'; + +export default { + components: { + GlBadge, + GlTab, + GlTabs, + GlLoadingIcon, + }, + props: { + isLoading: { + type: Boolean, + required: true, + }, + resourceCounts: { + type: Object, + required: true, + }, + }, + computed: { + tabs() { + return [ + { + text: s__('CiCatalog|All'), + scope: SCOPE.all, + testId: 'resources-all-tab', + count: this.resourceCounts.all, + }, + { + text: s__('CiCatalog|Your resources'), + scope: SCOPE.namespaces, + testId: 'resources-your-tab', + count: this.resourceCounts.namespaces, + }, + ]; + }, + showLoadingIcon() { + return this.isLoading; + }, + }, +}; +</script> + +<template> + <div class="gl-display-flex align-items-lg-center"> + <gl-tabs content-class="gl-py-0" class="gl-w-full"> + <gl-tab + v-for="tab in tabs" + :key="tab.text" + :data-testid="tab.testId" + @click="$emit('setScope', tab.scope)" + > + <template #title> + <span>{{ tab.text }}</span> + <gl-loading-icon v-if="showLoadingIcon" class="gl-ml-3" /> + + <gl-badge v-else size="sm" class="gl-tab-counter-badge"> + {{ tab.count }} + </gl-badge> + </template> + </gl-tab> + </gl-tabs> + </div> +</template> diff --git a/app/assets/javascripts/ci/catalog/components/pages/ci_resources_page.vue b/app/assets/javascripts/ci/catalog/components/pages/ci_resources_page.vue index e1c86f38d7e..08500d3093c 100644 --- a/app/assets/javascripts/ci/catalog/components/pages/ci_resources_page.vue +++ b/app/assets/javascripts/ci/catalog/components/pages/ci_resources_page.vue @@ -3,6 +3,7 @@ import { createAlert } from '~/alert'; import { s__ } from '~/locale'; import { ciCatalogResourcesItemsCount } from '~/ci/catalog/graphql/settings'; import CatalogSearch from '../list/catalog_search.vue'; +import CatalogTabs from '../list/catalog_tabs.vue'; import CiResourcesList from '../list/ci_resources_list.vue'; import CatalogListSkeletonLoader from '../list/catalog_list_skeleton_loader.vue'; import CatalogHeader from '../list/catalog_header.vue'; @@ -10,29 +11,60 @@ import EmptyState from '../list/empty_state.vue'; import getCatalogResources from '../../graphql/queries/get_ci_catalog_resources.query.graphql'; import getCurrentPage from '../../graphql/queries/client/get_current_page.query.graphql'; import updateCurrentPageMutation from '../../graphql/mutations/client/update_current_page.mutation.graphql'; +import getCatalogResourcesCount from '../../graphql/queries/get_ci_catalog_resources_count.query.graphql'; +import { DEFAULT_SORT_VALUE, SCOPE } from '../../constants'; export default { + i18n: { + fetchError: s__('CiCatalog|There was an error fetching CI/CD Catalog resources.'), + countFetchError: s__('CiCatalog|There was an error fetching the CI/CD Catalog resource count.'), + }, components: { CatalogHeader, CatalogListSkeletonLoader, CatalogSearch, + CatalogTabs, CiResourcesList, EmptyState, }, data() { return { catalogResources: [], + catalogResourcesCount: { all: 0, namespaces: 0 }, currentPage: 1, pageInfo: {}, - searchTerm: '', - totalCount: 0, + scope: SCOPE.all, + searchTerm: null, + sortValue: DEFAULT_SORT_VALUE, }; }, apollo: { + catalogResourcesCount: { + query: getCatalogResourcesCount, + variables() { + return { + searchTerm: this.searchTerm, + }; + }, + update({ namespaces, all }) { + return { + namespaces: namespaces.count, + all: all.count, + }; + }, + error(e) { + createAlert({ + message: e.message || this.$options.i18n.countFetchError, + }); + }, + }, catalogResources: { query: getCatalogResources, variables() { return { + scope: this.scope, + searchTerm: this.searchTerm, + sortValue: this.sortValue, first: ciCatalogResourcesItemsCount, }; }, @@ -42,10 +74,9 @@ export default { result({ data }) { const { pageInfo } = data?.ciCatalogResources || {}; this.pageInfo = pageInfo; - this.totalCount = data?.ciCatalogResources?.count || 0; }, error(e) { - createAlert({ message: e.message || this.$options.i18n.fetchError, variant: 'danger' }); + createAlert({ message: e.message || this.$options.i18n.fetchError }); }, }, currentPage: { @@ -62,11 +93,14 @@ export default { isLoading() { return this.$apollo.queries.catalogResources.loading; }, - isSearching() { - return this.searchTerm?.length > 0; + isLoadingCounts() { + return this.$apollo.queries.catalogResourcesCount.loading; + }, + namespacesCount() { + return this.catalogResourcesCount.namespaces; }, - showEmptyState() { - return !this.hasResources && !this.isSearching; + currentTabTotalCount() { + return this.catalogResourcesCount[this.scope.toLowerCase()]; }, }, methods: { @@ -103,6 +137,11 @@ export default { createAlert({ message: e?.message || this.$options.i18n.fetchError, variant: 'danger' }); } }, + handleSetScope(scope) { + if (this.scope === scope) return; + + this.scope = scope; + }, updatePageCount(pageNumber) { this.$apollo.mutate({ mutation: updateCurrentPageMutation, @@ -120,30 +159,28 @@ export default { onUpdateSearchTerm(searchTerm) { this.searchTerm = !searchTerm.length ? null : searchTerm; this.resetPageCount(); - this.$apollo.queries.catalogResources.refetch({ - searchTerm: this.searchTerm, - }); }, onUpdateSorting(sortValue) { + this.sortValue = sortValue; this.resetPageCount(); - this.$apollo.queries.catalogResources.refetch({ - sortValue, - }); }, resetPageCount() { this.updatePageCount(1); }, }, - i18n: { - fetchError: s__('CiCatalog|There was an error fetching CI/CD Catalog resources.'), - }, }; </script> <template> <div> <catalog-header /> + <catalog-tabs + :is-loading="isLoadingCounts" + :resource-counts="catalogResourcesCount" + class="gl-mb-3" + @setScope="handleSetScope" + /> <catalog-search - class="gl-py-4 gl-border-b-1 gl-border-gray-100 gl-border-b-solid gl-border-t-1 gl-border-t-solid" + class="gl-py-2" @update-search-term="onUpdateSearchTerm" @update-sorting="onUpdateSorting" /> @@ -156,7 +193,7 @@ export default { :prev-text="__('Prev')" :next-text="__('Next')" :resources="catalogResources" - :total-count="totalCount" + :total-count="currentTabTotalCount" @onPrevPage="handlePrevPage" @onNextPage="handleNextPage" /> diff --git a/app/assets/javascripts/ci/catalog/constants.js b/app/assets/javascripts/ci/catalog/constants.js index 34c0ac797c1..a180aa84344 100644 --- a/app/assets/javascripts/ci/catalog/constants.js +++ b/app/assets/javascripts/ci/catalog/constants.js @@ -2,8 +2,14 @@ import { helpPagePath } from '~/helpers/help_page_helper'; export const CATALOG_FEEDBACK_DISMISSED_KEY = 'catalog_feedback_dismissed'; +export const SCOPE = { + all: 'ALL', + namespaces: 'NAMESPACES', +}; + export const SORT_OPTION_CREATED = 'CREATED'; export const SORT_ASC = 'ASC'; export const SORT_DESC = 'DESC'; +export const DEFAULT_SORT_VALUE = `${SORT_OPTION_CREATED}_${SORT_DESC}`; export const COMPONENTS_DOCS_URL = helpPagePath('ci/components/index'); diff --git a/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resources.query.graphql b/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resources.query.graphql index 1cf213dec63..24789e9c4ed 100644 --- a/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resources.query.graphql +++ b/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resources.query.graphql @@ -1,6 +1,7 @@ #import "~/ci/catalog/graphql/fragments/catalog_resource.fragment.graphql" query getCatalogResources( + $scope: CiCatalogResourceScope $searchTerm: String $sortValue: CiCatalogResourceSort $after: String @@ -9,6 +10,7 @@ query getCatalogResources( $last: Int ) { ciCatalogResources( + scope: $scope search: $searchTerm sort: $sortValue after: $after @@ -22,7 +24,6 @@ query getCatalogResources( hasNextPage hasPreviousPage } - count nodes { ...CatalogResourceFields } diff --git a/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resources_count.query.graphql b/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resources_count.query.graphql new file mode 100644 index 00000000000..d4a298e7e09 --- /dev/null +++ b/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resources_count.query.graphql @@ -0,0 +1,8 @@ +query getCatalogResourcesCount($searchTerm: String) { + all: ciCatalogResources(scope: ALL, search: $searchTerm) { + count + } + namespaces: ciCatalogResources(scope: NAMESPACES, search: $searchTerm) { + count + } +} diff --git a/app/assets/javascripts/ci/catalog/graphql/settings.js b/app/assets/javascripts/ci/catalog/graphql/settings.js index 4038188a7ce..abc95592b14 100644 --- a/app/assets/javascripts/ci/catalog/graphql/settings.js +++ b/app/assets/javascripts/ci/catalog/graphql/settings.js @@ -15,7 +15,7 @@ export const cacheConfig = { }); }, ciCatalogResources: { - keyArgs: false, + keyArgs: ['scope', 'search', 'sort'], }, }, }, diff --git a/app/assets/javascripts/projects/commit/components/commit_comments_button.vue b/app/assets/javascripts/projects/commit/components/commit_comments_button.vue deleted file mode 100644 index 67b5e1e512c..00000000000 --- a/app/assets/javascripts/projects/commit/components/commit_comments_button.vue +++ /dev/null @@ -1,42 +0,0 @@ -<script> -import { GlButton, GlTooltipDirective } from '@gitlab/ui'; -import { n__ } from '~/locale'; - -export default { - directives: { - GlTooltip: GlTooltipDirective, - }, - components: { - GlButton, - }, - props: { - commentsCount: { - type: Number, - required: true, - }, - }, - computed: { - tooltipText() { - return n__('%d comment on this commit', '%d comments on this commit', this.commentsCount); - }, - showCommentButton() { - return this.commentsCount > 0; - }, - }, -}; -</script> - -<template> - <span - v-if="showCommentButton" - v-gl-tooltip - class="gl-display-none gl-sm-display-inline-block" - tabindex="0" - :title="tooltipText" - data-testid="comment-button-wrapper" - > - <gl-button icon="comment" class="gl-mr-3" disabled> - {{ commentsCount }} - </gl-button> - </span> -</template> diff --git a/app/assets/javascripts/projects/commit/index.js b/app/assets/javascripts/projects/commit/index.js index d8d30c4332c..4eb51d566c5 100644 --- a/app/assets/javascripts/projects/commit/index.js +++ b/app/assets/javascripts/projects/commit/index.js @@ -1,11 +1,9 @@ import initCherryPickCommitModal from './init_cherry_pick_commit_modal'; -import initCommitCommentsButton from './init_commit_comments_button'; import initCommitOptionsDropdown from './init_commit_options_dropdown'; import initRevertCommitModal from './init_revert_commit_modal'; export default () => { initRevertCommitModal(); initCherryPickCommitModal(); - initCommitCommentsButton(); initCommitOptionsDropdown(); }; diff --git a/app/assets/javascripts/projects/commit/init_commit_comments_button.js b/app/assets/javascripts/projects/commit/init_commit_comments_button.js deleted file mode 100644 index d70f7cb65f3..00000000000 --- a/app/assets/javascripts/projects/commit/init_commit_comments_button.js +++ /dev/null @@ -1,18 +0,0 @@ -import Vue from 'vue'; -import CommitCommentsButton from './components/commit_comments_button.vue'; - -export default function initCommitCommentsButton() { - const el = document.querySelector('#js-commit-comments-button'); - - if (!el) { - return false; - } - - const { commentsCount } = el.dataset; - - return new Vue({ - el, - render: (createElement) => - createElement(CommitCommentsButton, { props: { commentsCount: Number(commentsCount) } }), - }); -} |