fix(pci-billing): pair test return of billing history

ref: DTCORE-2895 Signed-off-by: LIDRISSI Hamid <[email protected]>
ovh · Nov 26, 2024 · 3e92cec · 3e92cec
1 parent b6fe5ac
commit 3e92cec
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 80 deletions.
diff --git a/...ages/manager/apps/pci-billing/src/components/consumption/ArchiveStorageList.component.tsx b/...ages/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
@@ -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
@@ -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
@@ -103,7 +103,6 @@ export default function ObjectStorageList({
         totalItems={paginatedStorages.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

diff --git a/...ges/manager/apps/pci-billing/src/components/consumption/OutgoingTrafficList.component.tsx b/...ges/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }