pagination not working for coral

[vikramsubramanian]

Angular now sends an encoded > (or <, >>, <<) to the endpoints (e.g. /getTopics) now, which works with the new Pager.

Coral sends the pageNo still as "2" etc. There is no error returned for this, just the same list for page "1".

TODO

Since it's more common to send a number than a character as a pageNo, (I think), I think it would make sense to either change Pager in a way to handle both or to handle only numbers (well, integers send as strings) and change Angular api call accordingly.

Also we should think about how we can avoid breaking api changes in the future, there was no way this could have bubbled up to us through typing etc.

[mayil-ai[bot]]

To address the pagination issue where Angular sends encoded characters and Coral sends numeric strings, follow these actionable steps:

1. Backend: Update getTopicRequestsPaged method to handle both encoded characters and numeric strings. Modify the backend method to correctly interpret both types of inputs for pageNo.

   private List<TopicRequest> getTopicRequestsPaged(
        List<TopicRequest> origActivityList, String pageNo, String currentPage) {
   
      List<TopicRequest> newList = new ArrayList<>();
      Env envSelected;
   
      if (origActivityList != null && origActivityList.size() > 0) {
          int totalRecs = origActivityList.size();
          int recsPerPage = 10;
          int totalPages = totalRecs / recsPerPage + (totalRecs % recsPerPage > 0 ? 1 : 0);
   
          pageNo = commonUtilsService.deriveCurrentPage(pageNo, currentPage, totalPages);
          int requestPageNo;
          try {
              requestPageNo = Integer.parseInt(pageNo);
          } catch (NumberFormatException e) {
              // Handle encoded characters
              switch (pageNo) {
                  case ">":
                      requestPageNo = Integer.parseInt(currentPage) + 1;
                      break;
                  case "<":
                      requestPageNo = Integer.parseInt(currentPage) - 1;
                      break;
                  case ">>":
                      requestPageNo = totalPages;
                      break;
                  case "<<":
                      requestPageNo = 1;
                      break;
                  default:
                      requestPageNo = 1;
              }
          }
   
          int startVar = (requestPageNo - 1) * recsPerPage;
          int lastVar = (requestPageNo) * (recsPerPage);
   
          List<String> numList = new ArrayList<>();
          commonUtilsService.getAllPagesList(pageNo, currentPage, totalPages, numList);
   
          for (int i = 0; i < totalRecs; i++) {
              TopicRequest activityLog = origActivityList.get(i);
              if (i >= startVar && i < lastVar) {
                  activityLog.setAllPageNos(numList);
                  activityLog.setTotalNoPages("" + totalPages);
                  activityLog.setCurrentPage(pageNo);
                  envSelected = getEnvDetails(activityLog.getEnvironment());
                  activityLog.setEnvironmentName(envSelected.getName());
                  newList.add(activityLog);
              }
          }
      }
   
      return newList;
   }

2. Frontend: Ensure Angular API calls send numeric strings for pageNo. Update AngularJS functions to send numeric strings instead of encoded characters.

   $scope.getTopics = function(pageNoSelected) {
      if(!$scope.getTopics.envName)
          return;
   
      var serviceInput = {};
      serviceInput['env'] = $scope.getTopics.envName;
      $scope.resultBrowse = [];
      $scope.ShowSpinnerStatusTopics = true;
   
      $http({
          method: "GET",
          url: "getSyncTopics",
          headers : { 'Content-Type' : 'application/json' },
          params: {
              'env' : $scope.getTopics.envName,
              'topicnamesearch' : $scope.getTopics.topicnamesearch,
              'showAllTopics' : "" + $scope.showAllTopics,
              'pageNo' : pageNoSelected,
              'currentPage' : $scope.currentPageSelected
          }
      }).success(function(output) {
          $scope.ShowSpinnerStatusTopics = false;
          $scope.resultBrowse = output["resultSet"];
          if($scope.resultBrowse != null && $scope.resultBrowse.length != 0){
              $scope.resultPages = $scope.resultBrowse[0].allPageNos;
              $scope.resultPageSelected = pageNoSelected;
              $scope.currentPageSelected = $scope.resultBrowse[0].currentPage;
          }
          $scope.alert = "";
      }).error(function(error) {
          $scope.ShowSpinnerStatusTopics = false;
          $scope.resultBrowse = [];
          $scope.handleErrorMessage(error);
      });
   };

3. Frontend: Update Coral's pagination logic to align with the backend changes. Ensure Coral's pagination component sends numeric strings.

   function Pagination(props: PaginationProps) {
      const { activePage, totalPages, setActivePage } = props;
   
      function onUpdatePage(nextPageNumber: number) {
          setActivePage(nextPageNumber);
      }
   
      const currentPageIsFirstPage = activePage === 1;
      const currentPageIsLastPage = activePage === totalPages;
   
      return (
          <nav
              role="navigation"
              aria-label={`Pagination navigation, you're on page ${activePage} of ${totalPages}`}
          >
              <Box
                  component={"ul"}
                  display={"flex"}
                  colGap={"l1"}
                  alignItems={"center"}
              >
                  <li aria-hidden={currentPageIsFirstPage}>
                      <GhostButton
                          disabled={currentPageIsFirstPage}
                          onClick={() => onUpdatePage(1)}
                      >
                          <span className={"visually-hidden"}>Go to first page</span>
                          <Icon aria-hidden={true} icon={chevronBackward} />
                      </GhostButton>
                  </li>
                  <li aria-hidden={currentPageIsFirstPage}>
                      <GhostButton
                          disabled={currentPageIsFirstPage}
                          onClick={() => onUpdatePage(activePage - 1)}
                      >
                          <span className={"visually-hidden"}>
                              Go to previous page, page {activePage - 1}
                          </span>
                          <Icon aria-hidden={true} icon={chevronLeft} />
                      </GhostButton>
                  </li>
                  <li aria-hidden={true}>
                      Page {activePage} of {totalPages}
                  </li>
                  <li aria-hidden={currentPageIsLastPage}>
                      <GhostButton
                          disabled={currentPageIsLastPage}
                          onClick={() => onUpdatePage(activePage + 1)}
                      >
                          <span className={"visually-hidden"}>
                              Go to next page, page {activePage + 1}
                          </span>
                          <Icon aria-hidden={true} icon={chevronRight} />
                      </GhostButton>
                  </li>
                  <li aria-hidden={currentPageIsLastPage}>
                      <GhostButton
                          disabled={currentPageIsLastPage}
                          onClick={() => onUpdatePage(totalPages)}
                      >
                          <span className={"visually-hidden"}>
                              Go to last page, page {totalPages}
                          </span>
                          <Icon aria-hidden={true} icon={chevronForward} />
                      </GhostButton>
                  </li>
              </Box>
          </nav>
      );
   }

By implementing these changes, the backend will be able to handle both encoded characters and numeric strings for pagination, and the frontend will consistently send numeric strings, ensuring proper pagination functionality.

Here are some code snippets that may help you get started:

• core/src/main/java/io/aiven/klaw/service/TopicControllerService.java:416-1392 | Backend method getTopicRequestsPaged needs to handle both encoded characters and numeric strings for pageNo. This snippet is crucial for implementing the necessary changes.

• core/src/main/resources/static/js/synchronizeTopics.js:360-451 | AngularJS function getTopics needs to be updated to send numeric strings for pageNo. This snippet is essential for ensuring the frontend sends the correct data type.

• coral/src/app/components/Pagination.tsx:1-84 | Coral's pagination component must align with backend changes to send numeric strings for pageNo. This snippet is important for updating the pagination logic.

💡 To rerun Mayil, comment mayil-ai rerun. Mayil will incorporate any new context added to the ticket. Include details in your rerun comment to guide Mayil!