From 3e92cecbf74adf0759c31167614da49cf724bbc4 Mon Sep 17 00:00:00 2001
From: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
Date: Tue, 26 Nov 2024 15:07:13 +0100
Subject: [PATCH] fix(pci-billing): pair test return of billing history

ref: DTCORE-2895
Signed-off-by: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
---
 .../ArchiveStorageList.component.tsx          |   1 -
 .../consumption/ColdArchiveList.component.tsx |   1 -
 .../consumption/InstanceList.component.tsx    |   1 -
 .../ObjectStorageList.component.tsx           |   1 -
 .../OutgoingTrafficList.component.tsx         |   1 -
 .../ResourceUsageList.component.tsx           |   1 -
 .../consumption/SnapshotList.component.tsx    |  11 +-
 .../consumption/VolumeList.component.tsx      |   1 -
 .../billing/consumption/Consumption.page.tsx  |   2 +-
 .../pages/billing/history/History.page.tsx    | 128 +++++++++---------
 10 files changed, 68 insertions(+), 80 deletions(-)

diff --git a/packages/manager/apps/pci-billing/src/components/consumption/ArchiveStorageList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/ArchiveStorageList.component.tsx
index c52fb527b9cd..0b5b1ab3bd98 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/ArchiveStorageList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/ArchiveStorageList.component.tsx
@@ -128,7 +128,6 @@ export default function ArchiveStorageList({
         totalItems={paginatedStorages.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/components/consumption/ColdArchiveList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/ColdArchiveList.component.tsx
index 03924ffc5ea4..12be7757de75 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/ColdArchiveList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/ColdArchiveList.component.tsx
@@ -119,7 +119,6 @@ export default function ColdArchiveList({
         totalItems={paginatedColdArchives.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/components/consumption/InstanceList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/InstanceList.component.tsx
index bcd16c2ba656..f594dbbcaa87 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/InstanceList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/InstanceList.component.tsx
@@ -292,7 +292,6 @@ export default function InstanceList({
         totalItems={instanceConsumptionDetails.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/components/consumption/ObjectStorageList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/ObjectStorageList.component.tsx
index 2006b28b395e..ef287a5d4598 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/ObjectStorageList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/ObjectStorageList.component.tsx
@@ -103,7 +103,6 @@ export default function ObjectStorageList({
         totalItems={paginatedStorages.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/components/consumption/OutgoingTrafficList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/OutgoingTrafficList.component.tsx
index 742834055f7e..91328d50aad3 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/OutgoingTrafficList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/OutgoingTrafficList.component.tsx
@@ -102,7 +102,6 @@ export default function OutgoingTrafficList({
         totalItems={paginatedInstanceBandWidths.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/components/consumption/ResourceUsageList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/ResourceUsageList.component.tsx
index 97c021df6520..b66582a1cdc5 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/ResourceUsageList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/ResourceUsageList.component.tsx
@@ -101,7 +101,6 @@ export default function ResourceUsageList({
         totalItems={paginatedResourcesUsage.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/components/consumption/SnapshotList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/SnapshotList.component.tsx
index d237eb1b04d8..256ed1a11c24 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/SnapshotList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/SnapshotList.component.tsx
@@ -34,12 +34,10 @@ export default function SnapshotList({
       },
     )}`;
 
-  const paginatedSnapshots = useMemo(() => {
-    const sortedSnapshots = snapshots?.sort((a, b) =>
-      a.region.localeCompare(b.region),
-    );
-    return paginateResults(sortedSnapshots || [], pagination);
-  }, [snapshots, pagination, setPagination]);
+  const paginatedSnapshots = useMemo(
+    () => paginateResults(snapshots || [], pagination),
+    [snapshots, pagination, setPagination],
+  );
 
   const columns = [
     {
@@ -85,7 +83,6 @@ export default function SnapshotList({
         totalItems={paginatedSnapshots.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/components/consumption/VolumeList.component.tsx b/packages/manager/apps/pci-billing/src/components/consumption/VolumeList.component.tsx
index 1f0ec8b19015..896d76605442 100644
--- a/packages/manager/apps/pci-billing/src/components/consumption/VolumeList.component.tsx
+++ b/packages/manager/apps/pci-billing/src/components/consumption/VolumeList.component.tsx
@@ -158,7 +158,6 @@ export default function VolumeList({ volumes }: Readonly<VolumeListProps>) {
         totalItems={paginatedVolumes.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );
diff --git a/packages/manager/apps/pci-billing/src/pages/billing/consumption/Consumption.page.tsx b/packages/manager/apps/pci-billing/src/pages/billing/consumption/Consumption.page.tsx
index bb061b41ae69..13279503b8ee 100644
--- a/packages/manager/apps/pci-billing/src/pages/billing/consumption/Consumption.page.tsx
+++ b/packages/manager/apps/pci-billing/src/pages/billing/consumption/Consumption.page.tsx
@@ -33,7 +33,7 @@ export default function Consumption() {
 
   const { data: consumption, isPending } = useGeTCurrentUsage(projectId);
 
-  const isTrustedZone = availability && availability[TRUSTED_ZONE];
+  const isTrustedZone = availability?.[TRUSTED_ZONE];
 
   const monthlyTotal = `${consumption?.totals?.monthly?.total?.toFixed(2)} ${
     currency.symbol
diff --git a/packages/manager/apps/pci-billing/src/pages/billing/history/History.page.tsx b/packages/manager/apps/pci-billing/src/pages/billing/history/History.page.tsx
index dd5256709ae6..b170f57c446c 100644
--- a/packages/manager/apps/pci-billing/src/pages/billing/history/History.page.tsx
+++ b/packages/manager/apps/pci-billing/src/pages/billing/history/History.page.tsx
@@ -47,80 +47,78 @@ export default function History() {
     TRUSTED_ZONE,
   ]);
 
-  const isTrustedZone = availability && availability[TRUSTED_ZONE];
-  const isPostPaidUsageBilling =
-    availability && availability[PCI_FEATURES_BILLING_POST_PAID];
+  const isTrustedZone = availability?.[TRUSTED_ZONE];
+  const isPostPaidUsageBilling = availability?.[PCI_FEATURES_BILLING_POST_PAID];
 
   return (
     <div>
       <HistoryHeader />
-      <>
-        {isPending ? (
-          <OsdsSpinner
-            className="block text-center"
-            inline
-            size={ODS_SPINNER_SIZE.md}
+
+      {isPending ? (
+        <OsdsSpinner
+          className="block text-center"
+          inline
+          size={ODS_SPINNER_SIZE.md}
+        />
+      ) : (
+        <>
+          <HistoryResume
+            totalPrice={consumption?.totals.total}
+            isPostPaidUsageBilling={isPostPaidUsageBilling}
           />
-        ) : (
-          <>
-            <HistoryResume
-              totalPrice={consumption?.totals.total}
-              isPostPaidUsageBilling={isPostPaidUsageBilling}
-            />
 
-            <div className="flex items-start flex-col xl:flex-row gap-7">
-              <OsdsTile
-                className="shadow-custom-tile"
-                rounded
-                variant={ODS_TILE_VARIANT.flat}
-              >
-                <div className="flex flex-col w-full">
-                  <OsdsText
-                    size={ODS_TEXT_SIZE._400}
-                    level={ODS_TEXT_LEVEL.heading}
-                    color={ODS_THEME_COLOR_INTENT.text}
-                    className="mb-5"
-                  >
-                    {t(
-                      isPostPaidUsageBilling
-                        ? 'cpbhd_monthly_post_paid_header'
-                        : 'cpbhd_monthly_header',
-                      {
-                        ...translationValues,
-                      },
-                    )}
-                  </OsdsText>
+          <div className="flex items-start flex-col xl:flex-row gap-7">
+            <OsdsTile
+              className="shadow-custom-tile"
+              rounded
+              variant={ODS_TILE_VARIANT.flat}
+            >
+              <div className="flex flex-col w-full">
+                <OsdsText
+                  size={ODS_TEXT_SIZE._400}
+                  level={ODS_TEXT_LEVEL.heading}
+                  color={ODS_THEME_COLOR_INTENT.text}
+                  className="mb-5"
+                >
+                  {t(
+                    isPostPaidUsageBilling
+                      ? 'cpbhd_monthly_post_paid_header'
+                      : 'cpbhd_monthly_header',
+                    {
+                      ...translationValues,
+                    },
+                  )}
+                </OsdsText>
 
-                  <MonthlyConsumption consumption={consumption} />
-                </div>
-              </OsdsTile>
+                <MonthlyConsumption consumption={consumption} />
+              </div>
+            </OsdsTile>
 
-              <OsdsTile
-                className="shadow-custom-tile"
-                rounded
-                variant={ODS_TILE_VARIANT.flat}
-              >
-                <div className="flex flex-col w-full">
-                  <OsdsText
-                    size={ODS_TEXT_SIZE._400}
-                    level={ODS_TEXT_LEVEL.heading}
-                    color={ODS_THEME_COLOR_INTENT.text}
-                    className="mb-5"
-                  >
-                    {t('cpbhd_hourly_header', { ...translationValues })}
-                  </OsdsText>
+            <OsdsTile
+              className="shadow-custom-tile"
+              rounded
+              variant={ODS_TILE_VARIANT.flat}
+            >
+              <div className="flex flex-col w-full">
+                <OsdsText
+                  size={ODS_TEXT_SIZE._400}
+                  level={ODS_TEXT_LEVEL.heading}
+                  color={ODS_THEME_COLOR_INTENT.text}
+                  className="mb-5"
+                >
+                  {t('cpbhd_hourly_header', { ...translationValues })}
+                </OsdsText>
 
-                  <HourlyConsumption
-                    consumption={consumption}
-                    isTrustedZone={isTrustedZone}
-                  />
-                </div>
-              </OsdsTile>
-            </div>
-            <Outlet />
-          </>
-        )}
-      </>
+                <HourlyConsumption
+                  consumption={consumption}
+                  isTrustedZone={isTrustedZone}
+                />
+              </div>
+            </OsdsTile>
+          </div>
+          <Outlet />
+        </>
+      )}
     </div>
   );
 }