Deprecated packs style (#1819)

* save

* chore: fixed edge cases

* chore: removed uneeded logic

src/components/PacksTable/PackTable.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { render, waitFor, screen, fireEvent } from "@testing-library/react";
 import fetchMock from "jest-fetch-mock";
 import FilteredTable from "./PacksTable";
+import { toTitleCase } from "./PacksTable";
 // Enable fetch mocking
 fetchMock.enableMocks();
 
@@ -103,3 +104,20 @@ describe("FilteredTable Tests", () => {
   });
 
 });
+
+
+describe('toTitleCase', () => {
+  it('converts a dasherized string to title case', () => {
+      expect(toTitleCase("my-example-string")).toBe("My Example String");
+  });
+
+  it('converts a camelCase string to title case', () => {
+      expect(toTitleCase("myExampleString")).toBe("My Example String");
+  });
+
+
+  it('converts aws to AWS in a string', () => {
+      expect(toTitleCase("my-example-aws-string")).toBe("My Example AWS String");
+  });
+
+});

src/components/PacksTable/PacksTable.tsx

@@ -142,7 +142,17 @@ const FilteredTable: React.FC = () => {
     fetch("/packs-data/packs_report.json")
       .then((response) => response.json())
       .then((packData: PacksData) => {
-        const deprecatedPackData = packData.Packs.filter((pack) => {  
+        const deprecatedPackData = packData.Packs.filter((pack) => { 
+
+          // Handle the case where the pack name is empty.
+          // This is applicable when the API returns a pack with no name.
+          // The API also does not include the last modified date for these packs.
+          if (pack.displayName == "") {
+            pack.displayName = toTitleCase(pack.name);
+            pack.timeLastUpdated = "-"
+            pack.packLastModifiedDate = "-"
+          }
+
           return pack.prodStatus !== "active" && pack.prodStatus !== "unknown"
         });
         setDeprecatedPacks(deprecatedPackData);
@@ -184,4 +194,22 @@ const FilteredTable: React.FC = () => {
   );
 };
 
+// Convert the pack name to title case
+export function toTitleCase(str:string) {
+  return str
+      .replace(/([a-z])([A-Z])|-/g, '$1 $2')
+      // Split, filter, and capitalize words
+      .split(/\s+/)
+      .map(word => {
+        // Words that should be capitalized
+          if (['CNI', 'CSI', 'OSS', 'EBS', 'AWS'].includes(word.toUpperCase())) {
+              return word.toUpperCase();
+          }
+          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+      })
+      .filter(word => word)
+      .join(' ');
+}
+
+
 export default FilteredTable;