Add "Load more" pagination to pipeline list

web/src/assets/locales/en.json

@@ -207,6 +207,7 @@
       "config": "Config",
       "files": "Changed files",
       "no_pipelines": "No pipelines have been started yet.",
+      "load_more": "Load more",
       "no_pipeline_steps": "No pipeline steps available!",
       "step_not_started": "This step hasn't started yet.",
       "pipelines_for": "Pipelines for branch \"{branch}\"",

web/src/components/repo/pipeline/PipelineList.vue

@@ -15,10 +15,14 @@
     <Panel v-else-if="pipelines?.length === 0">
       <span class="text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
     </Panel>
+    <div v-if="hasMore && !loading" class="flex justify-center">
+      <Button :text="$t('repo.pipeline.load_more')" @click="$emit('loadMore')" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import Panel from '~/components/layout/Panel.vue';
 import PipelineItem from '~/components/repo/pipeline/PipelineItem.vue';
@@ -27,5 +31,10 @@ import type { Pipeline } from '~/lib/api/types';
 defineProps<{
   pipelines: Pipeline[] | undefined;
   loading?: boolean;
+  hasMore?: boolean;
+}>();
+
+defineEmits<{
+  (event: 'loadMore'): void;
 }>();
 </script>

web/src/store/pipelines.ts

@@ -82,12 +82,16 @@ export const usePipelineStore = defineStore('pipelines', () => {
     setPipeline(repoId, pipeline);
   }
 
+  const perPage = 50;
+  const hasMore = ref(false);
+
   async function loadRepoPipelines(repoId: number, page?: number) {
     loading.value = true;
-    const _pipelines = await apiClient.getPipelineList(repoId, { page });
+    const _pipelines = await apiClient.getPipelineList(repoId, { page, perPage });
     _pipelines.forEach((pipeline) => {
       setPipeline(repoId, pipeline);
     });
+    hasMore.value = _pipelines.length >= perPage;
     loading.value = false;
   }
 
@@ -139,6 +143,7 @@ export const usePipelineStore = defineStore('pipelines', () => {
     getPipeline,
     loadRepoPipelines,
     loadPipeline,
+    hasMore,
     activePipelines,
     pipelineFeed,
     loadPipelineFeed,

web/src/views/repo/RepoPipelines.vue

@@ -1,17 +1,33 @@
 <template>
-  <PipelineList :pipelines="pipelines" :repo="repo" />
+  <PipelineList
+    :pipelines="pipelines"
+    :loading="pipelineStore.loading"
+    :has-more="pipelineStore.hasMore"
+    @load-more="loadMore"
+  />
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import PipelineList from '~/components/repo/pipeline/PipelineList.vue';
 import { requiredInject } from '~/compositions/useInjectProvide';
 import { useWPTitle } from '~/compositions/useWPTitle';
+import { usePipelineStore } from '~/store/pipelines';
 
+// TODO(4626): Refactor to use usePagination with server-side filtering,
+// so pipeline loading can move from RepoWrapper to individual list views.
 const repo = requiredInject('repo');
 const pipelines = requiredInject('pipelines');
+const pipelineStore = usePipelineStore();
+
+const page = ref(1);
+
+async function loadMore() {
+  page.value += 1;
+  await pipelineStore.loadRepoPipelines(repo.value.id, page.value);
+}
 
 const { t } = useI18n();
 useWPTitle(computed(() => [t('repo.activity'), repo.value.full_name]));