From 611f7268f54862df69ed11e1cb1cfceb71937aac Mon Sep 17 00:00:00 2001
From: dn55333 <147149405+dn55533@users.noreply.github.com>
Date: Mon, 6 Jan 2025 12:11:28 +0000
Subject: [PATCH] fix(canary-web-components): show the All option of the
 IcPaginationBar items per page dropdown

Show the All option of the items per page dropdown in the IcPaginationBar when there are fewer items
than available options

fix #2843
---
 .../ic-pagination-bar/ic-pagination-bar.tsx   | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
index a2e22947bf..fa3fe46795 100644
--- a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
+++ b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
@@ -91,6 +91,10 @@ export class PaginationBar {
    * If `true`, the 'All' option will be hidden from the 'items per page' select input.
    */
   @Prop() hideAllFromItemsPerPage?: boolean = false;
+  @Watch("hideAllFromItemsPerPage")
+  watchHideAllFromItemsPerPageHandler(): void {
+    this.setPaginationBarContent();
+  }
 
   /**
    * The text which will be used in place of 'Item' on the pagination bar.
@@ -358,7 +362,7 @@ export class PaginationBar {
     this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });
   };
 
-  private setPaginationBarContent = (): void => {
+  private setItemsPerPageOptions = () => {
     const clonedItemsPerPageOptions: {
       label: string;
       value: string;
@@ -379,16 +383,39 @@ export class PaginationBar {
             { label: "100", value: "100" },
             { label: "1000", value: "1000" },
           ]);
-    !this.hideAllFromItemsPerPage &&
-      displayedItemsPerPageOptions.push({
-        label: "All",
-        value: String(this.totalItems),
-      });
 
     this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(
       ({ value }) => this.totalItems >= Number(value)
     );
 
+    const currentItemsLength = this.displayedItemsPerPageOptions.length;
+
+    const addAllOption = () =>
+      this.displayedItemsPerPageOptions.push({
+        label: "All",
+        value: String(this.totalItems),
+      });
+
+    const lastItemsPerPageEqualsTotalItems = () =>
+      Number(
+        this.displayedItemsPerPageOptions[currentItemsLength - 1].value
+      ) === this.totalItems;
+
+    const relabelLastOptionToAll = () =>
+      (this.displayedItemsPerPageOptions[currentItemsLength - 1].label = "All");
+
+    if (currentItemsLength === 0) {
+      addAllOption();
+    } else if (lastItemsPerPageEqualsTotalItems()) {
+      relabelLastOptionToAll();
+    } else if (!this.hideAllFromItemsPerPage) {
+      addAllOption();
+    }
+  };
+
+  private setPaginationBarContent = (): void => {
+    this.setItemsPerPageOptions();
+
     let lastOptionValue = 0;
     const updated = this.displayedItemsPerPageOptions.some(({ value }) => {
       lastOptionValue = Number(value);