From 515b231c5c44d4b4e6cbf4cc4e454029a2774113 Mon Sep 17 00:00:00 2001
From: Lenny Chen <55669665+lennessyy@users.noreply.github.com>
Date: Tue, 31 Oct 2023 16:07:40 -0700
Subject: [PATCH] chore: add cloud types column to deprecated packs list
 (DOC-903) (#1731)

* chore: add cloud types column to deprecated packs list

* Update src/components/PacksTable/PacksTable.tsx

Co-authored-by: Karl Cardenas <karl@spectrocloud.com>

---------

Co-authored-by: Lenny Chen <lenny.chen@spectrocloud.com>
Co-authored-by: Karl Cardenas <karl@spectrocloud.com>
---
 src/components/PacksTable/PackTable.test.tsx | 17 +++++++++
 src/components/PacksTable/PacksTable.tsx     | 39 ++++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/src/components/PacksTable/PackTable.test.tsx b/src/components/PacksTable/PackTable.test.tsx
index 15f0d79c44..08bc4eb144 100644
--- a/src/components/PacksTable/PackTable.test.tsx
+++ b/src/components/PacksTable/PackTable.test.tsx
@@ -85,4 +85,21 @@ describe("FilteredTable Tests", () => {
       expect(screen.getByText("Failed to load Deprecated Packs")).toBeInTheDocument();
     });
   });
+
+  it("should properly format cloud types", async () => {
+    const customMockPacks = [
+      {
+        ...mockPacks[0],
+        cloudTypesFormatted: "eks,vsphere"
+      }
+    ];
+
+    fetchMock.mockResponseOnce(JSON.stringify({ dateCreated: "2022-08-25", Packs: customMockPacks }));
+    render(<FilteredTable />);
+
+    await waitFor(() => screen.getByText("Alpine"));
+    
+    expect(screen.getByText("EKS, vSphere")).toBeInTheDocument();
+  });
+
 });
diff --git a/src/components/PacksTable/PacksTable.tsx b/src/components/PacksTable/PacksTable.tsx
index beda1595f9..ef2ab8ff60 100644
--- a/src/components/PacksTable/PacksTable.tsx
+++ b/src/components/PacksTable/PacksTable.tsx
@@ -27,6 +27,37 @@ const statusClassNames: Record<string, string> = {
   disabled: styles.disabled,
 };
 
+
+// Format the cloud type strings so they display properly 
+const formatCloudType = (type: string): string => {
+  const cloudTypeMapping: Record<string, string> = {
+    "aws": "AWS",
+    "eks": "EKS",
+    "vsphere": "vSphere",
+    "maas": "MaaS",
+    "gcp": "GCP",
+    "libvirt": "libvirt",
+    "openstack": "OpenStack",
+    "edge-native": "Edge",
+    "tke": "TKE",
+    "aks": "AKS",
+    "coxedge": "Cox Edge",
+    "gke": "GKE",
+    "all": "All",
+    "azure": "Azure"
+    // ... add other special cases as needed
+  };
+
+  return type.split(',')
+    .map(part => cloudTypeMapping[part.trim()] || capitalizeWord(part))
+    .join(', ');
+}
+
+// Capitalize the word as a default option
+const capitalizeWord = (string: string): string => {
+  return string.toUpperCase();
+}
+
 interface PacksColumn {
   title: string;
   dataIndex: keyof Pack;
@@ -44,6 +75,14 @@ const columns: PacksColumn[] = [
     sorter: (a: Pack, b: Pack) => a.displayName.localeCompare(b.displayName),
     width: 200,
   },
+  {
+    title: "Cloud Types",
+    dataIndex: "cloudTypesFormatted",
+    key: "cloudTypesFormatted",
+    sorter: (a: Pack, b: Pack) => a.cloudTypesFormatted.localeCompare(b.cloudTypesFormatted),
+    render: (value: string) => formatCloudType(value),
+    width: 200,
+  },
   {
     title: "Version",
     dataIndex: "version",