ENG-9720 | fix(addons): Fix GitLab pagination Load More button not showing (#847)

Author: sh-andriy

src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.spec.ts

@@ -2,9 +2,11 @@ import { MockComponents, MockProvider } from 'ng-mocks';
 
 import { DialogService } from 'primeng/dynamicdialog';
 
+import { signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { OperationNames } from '@shared/enums/operation-names.enum';
+import { OperationInvocation } from '@shared/models/addons/operation-invocation.model';
 import { AddonsSelectors } from '@shared/stores/addons';
 
 import { GoogleFilePickerComponent } from '../../google-file-picker/google-file-picker.component';
@@ -20,9 +22,11 @@ describe('StorageItemSelectorComponent', () => {
   let component: StorageItemSelectorComponent;
   let fixture: ComponentFixture<StorageItemSelectorComponent>;
   let mockDialogService: ReturnType<DialogServiceMockBuilder['build']>;
+  let mockOperationInvocation: WritableSignal<OperationInvocation | null>;
 
   beforeEach(async () => {
     mockDialogService = DialogServiceMockBuilder.create().withOpenMock().build();
+    mockOperationInvocation = signal<OperationInvocation | null>(null);
 
     await TestBed.configureTestingModule({
       imports: [
@@ -45,6 +49,10 @@ describe('StorageItemSelectorComponent', () => {
               selector: AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting,
               value: false,
             },
+            {
+              selector: AddonsSelectors.getOperationInvocation,
+              value: mockOperationInvocation,
+            },
           ],
         }),
         MockProvider(DialogService, mockDialogService),
@@ -53,6 +61,10 @@ describe('StorageItemSelectorComponent', () => {
 
     fixture = TestBed.createComponent(StorageItemSelectorComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('isGoogleFilePicker', false);
+    fixture.componentRef.setInput('accountName', 'test-account');
+    fixture.componentRef.setInput('accountId', 'test-id');
+    fixture.componentRef.setInput('operationInvocationResult', []);
   });
 
   it('should create', () => {
@@ -115,4 +127,97 @@ describe('StorageItemSelectorComponent', () => {
     expect(breadcrumbs[0].id).toBe(itemId);
     expect(breadcrumbs[0].label).toBe(itemName);
   });
+
+  describe('showLoadMoreButton', () => {
+    it('should return false when operationInvocation is null', () => {
+      mockOperationInvocation.set(null);
+      fixture.detectChanges();
+
+      expect(component.showLoadMoreButton()).toBe(false);
+    });
+
+    it('should return false when nextSampleCursor is not present', () => {
+      mockOperationInvocation.set({
+        id: 'test-id',
+        type: 'operation-invocation',
+        invocationStatus: 'success',
+        operationName: 'list_root_items',
+        operationKwargs: {},
+        operationResult: [],
+        itemCount: 10,
+        thisSampleCursor: 'cursor-1',
+      });
+      fixture.detectChanges();
+
+      expect(component.showLoadMoreButton()).toBe(false);
+    });
+
+    it('should return true when nextSampleCursor differs from thisSampleCursor', () => {
+      mockOperationInvocation.set({
+        id: 'test-id',
+        type: 'operation-invocation',
+        invocationStatus: 'success',
+        operationName: 'list_root_items',
+        operationKwargs: {},
+        operationResult: [],
+        itemCount: 20,
+        thisSampleCursor: 'cursor-1',
+        nextSampleCursor: 'cursor-2',
+      });
+      fixture.detectChanges();
+
+      expect(component.showLoadMoreButton()).toBe(true);
+    });
+
+    it('should return true for opaque/base64 cursors like GitLab uses', () => {
+      // GitLab uses base64-encoded cursors where lexicographic comparison doesn't work
+      mockOperationInvocation.set({
+        id: 'test-id',
+        type: 'operation-invocation',
+        invocationStatus: 'success',
+        operationName: 'list_root_items',
+        operationKwargs: {},
+        operationResult: [],
+        itemCount: 20,
+        thisSampleCursor: 'eyJpZCI6MTIzfQ==',
+        nextSampleCursor: 'eyJpZCI6MTQ1fQ==',
+      });
+      fixture.detectChanges();
+
+      expect(component.showLoadMoreButton()).toBe(true);
+    });
+
+    it('should return false when nextSampleCursor equals thisSampleCursor', () => {
+      mockOperationInvocation.set({
+        id: 'test-id',
+        type: 'operation-invocation',
+        invocationStatus: 'success',
+        operationName: 'list_root_items',
+        operationKwargs: {},
+        operationResult: [],
+        itemCount: 10,
+        thisSampleCursor: 'cursor-1',
+        nextSampleCursor: 'cursor-1',
+      });
+      fixture.detectChanges();
+
+      expect(component.showLoadMoreButton()).toBe(false);
+    });
+
+    it('should return true when nextSampleCursor exists but thisSampleCursor is undefined', () => {
+      mockOperationInvocation.set({
+        id: 'test-id',
+        type: 'operation-invocation',
+        invocationStatus: 'success',
+        operationName: 'list_root_items',
+        operationKwargs: {},
+        operationResult: [],
+        itemCount: 20,
+        nextSampleCursor: 'cursor-2',
+      });
+      fixture.detectChanges();
+
+      expect(component.showLoadMoreButton()).toBe(true);
+    });
+  });
 });

src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts

@@ -199,10 +199,10 @@ export class StorageItemSelectorComponent implements OnInit {
 
   readonly showLoadMoreButton = computed(() => {
     const invocation = this.operationInvocation();
-    if (!invocation?.nextSampleCursor || !invocation?.thisSampleCursor) {
+    if (!invocation?.nextSampleCursor) {
       return false;
     }
-    return invocation.nextSampleCursor > invocation.thisSampleCursor;
+    return invocation.nextSampleCursor !== invocation.thisSampleCursor;
   });
 
   handleCreateOperationInvocation(