Add latest changes from gitlab-org/gitlab@master

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) } }),
-  });
-}