Add latest changes from gitlab-org/gitlab@master

2 files changed, 143 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js b/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js
new file mode 100644
index 00000000000..e31446f4bb8
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js
@@ -0,0 +1,40 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+import PaginationBar from './pagination_bar.vue';
+
+export default {
+  component: PaginationBar,
+  title: 'vue_shared/components/pagination_bar/pagination_bar',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { PaginationBar },
+  props: Object.keys(argTypes),
+  template: `<pagination-bar v-bind="$props" v-on="{ 'set-page-size': setPageSize, 'set-page': setPage }" />`,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  pageInfo: {
+    perPage: 20,
+    page: 2,
+    total: 83,
+    totalPages: 5,
+  },
+  pageSizes: [20, 50, 100],
+};
+
+Default.argTypes = {
+  pageInfo: {
+    description: 'Page info object',
+    control: { type: 'object' },
+  },
+  pageSizes: {
+    description: 'Array of possible page sizes',
+    control: { type: 'array' },
+  },
+
+  // events
+  setPageSize: { action: 'set-page-size' },
+  setPage: { action: 'set-page' },
+};
diff --git a/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.vue b/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.vue
new file mode 100644
index 00000000000..b4d565991f5
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.vue
@@ -0,0 +1,103 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+
+const DEFAULT_PAGE_SIZES = [20, 50, 100];
+
+export default {
+  components: {
+    PaginationLinks,
+    GlDropdown,
+    GlDropdownItem,
+    GlIcon,
+    GlSprintf,
+  },
+  props: {
+    pageInfo: {
+      required: true,
+      type: Object,
+    },
+    pageSizes: {
+      required: false,
+      type: Array,
+      default: () => DEFAULT_PAGE_SIZES,
+    },
+  },
+
+  computed: {
+    humanizedTotal() {
+      return this.pageInfo.total >= 1000 ? __('1000+') : this.pageInfo.total;
+    },
+
+    paginationInfo() {
+      const { page, perPage, totalPages, total } = this.pageInfo;
+      const itemsCount = page === totalPages ? total - (page - 1) * perPage : perPage;
+      const start = (page - 1) * perPage + 1;
+      const end = start + itemsCount - 1;
+
+      return { start, end };
+    },
+  },
+
+  methods: {
+    setPage(page) {
+      // eslint-disable-next-line spaced-comment
+      /**
+       * Emitted when selected page is updated
+       *
+       * @event set-page
+       **/
+      this.$emit('set-page', page);
+    },
+
+    setPageSize(pageSize) {
+      // eslint-disable-next-line spaced-comment
+      /**
+       * Emitted when page size is updated
+       *
+       * @event set-page-size
+       **/
+      this.$emit('set-page-size', pageSize);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center">
+    <pagination-links :change="setPage" :page-info="pageInfo" class="gl-m-0" />
+    <gl-dropdown category="tertiary" class="gl-ml-auto" data-testid="page-size">
+      <template #button-content>
+        <span class="gl-font-weight-bold">
+          <gl-sprintf :message="__('%{count} items per page')">
+            <template #count>
+              {{ pageInfo.perPage }}
+            </template>
+          </gl-sprintf>
+        </span>
+        <gl-icon class="gl-button-icon dropdown-chevron" name="chevron-down" />
+      </template>
+      <gl-dropdown-item v-for="size in pageSizes" :key="size" @click="setPageSize(size)">
+        <gl-sprintf :message="__('%{count} items per page')">
+          <template #count>
+            {{ size }}
+          </template>
+        </gl-sprintf>
+      </gl-dropdown-item>
+    </gl-dropdown>
+    <div class="gl-ml-2" data-testid="information">
+      <gl-sprintf :message="s__('BulkImport|Showing %{start}-%{end} of %{total}')">
+        <template #start>
+          {{ paginationInfo.start }}
+        </template>
+        <template #end>
+          {{ paginationInfo.end }}
+        </template>
+        <template #total>
+          {{ humanizedTotal }}
+        </template>
+      </gl-sprintf>
+    </div>
+  </div>
+</template>