Add latest changes from gitlab-org/gitlab@master

1 files changed, 13 insertions, 1 deletions

diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
index 13e9cb096ee..35a8d3d979a 100644
--- a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
+++ b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
@@ -9,6 +9,7 @@ import { getBulkImportsHistory } from '~/rest_api';
 import ImportStatus from '~/import_entities/components/import_status.vue';
 import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 import { DEFAULT_ERROR } from '../utils/error_messages';
 
@@ -16,6 +17,8 @@ const DEFAULT_PER_PAGE = 20;
 const DEFAULT_TH_CLASSES =
   'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-200! gl-border-b-1! gl-p-5!';
 
+const HISTORY_PAGINATION_SIZE_PERSIST_KEY = 'gl-bulk-imports-history-per-page';
+
 const tableCell = (config) => ({
   thClass: `${DEFAULT_TH_CLASSES}`,
   tdClass: (value, key, item) => {
@@ -37,6 +40,7 @@ export default {
     PaginationBar,
     ImportStatus,
     TimeAgo,
+    LocalStorageSync,
   },
 
   data() {
@@ -85,10 +89,13 @@ export default {
         this.loadHistoryItems();
       },
       deep: true,
-      immediate: true,
     },
   },
 
+  mounted() {
+    this.loadHistoryItems();
+  },
+
   methods: {
     async loadHistoryItems() {
       try {
@@ -116,6 +123,7 @@ export default {
   },
 
   gitlabLogo: window.gon.gitlab_logo,
+  historyPaginationSizePersistKey: HISTORY_PAGINATION_SIZE_PERSIST_KEY,
 };
 </script>
 
@@ -171,5 +179,9 @@ export default {
         @set-page-size="paginationConfig.perPage = $event"
       />
     </template>
+    <local-storage-sync
+      v-model="paginationConfig.perPage"
+      :storage-key="$options.historyPaginationSizePersistKey"
+    />
   </div>
 </template>