chore: DOC-1534 update deprecated packs documentation and enhance Pac…

…ksTable component (#5163) (#5166)

- Set 'hide_table_of_contents' to true in deprecated packs documentation.
- Added responsive styles for table container and wrapper in PacksTable.
- Improved search functionality and added unique row keys in PacksTable.
- Updated tests to ensure proper rendering and functionality of the PacksTable component.

(cherry picked from commit de1812f)

Co-authored-by: Karl Cardenas <[email protected]>

docs/docs-content/integrations/deprecated-packs.md

@@ -3,7 +3,7 @@ sidebar_label: "Deprecated Packs"
 title: "Deprecated Packs"
 description: "Deprecated Packs"
 icon: ""
-hide_table_of_contents: false
+hide_table_of_contents: true
 sidebar_position: 40
 tags: ["packs", "deprecation"]
 ---

src/components/PacksTable/PackTable.test.tsx

@@ -3,9 +3,36 @@ import { render, waitFor, screen, fireEvent } from "@testing-library/react";
 import fetchMock from "jest-fetch-mock";
 import FilteredTable from "./PacksTable";
 import { toTitleCase } from "./PacksTable";
+
+// Mock the Docusaurus dependencies
+jest.mock("@docusaurus/theme-common", () => ({
+  useColorMode: () => ({
+    colorMode: "light",
+    setColorMode: jest.fn(),
+  }),
+}));
+
+jest.mock("@theme/Admonition");
+
 // Enable fetch mocking
 fetchMock.enableMocks();
 
+beforeAll(() => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
 describe("FilteredTable Tests", () => {
   const mockPacks = [
     {
@@ -23,6 +50,7 @@ describe("FilteredTable Tests", () => {
       releaseType: "Experimental",
       contributor: "",
       docsURL: "",
+      hash: "mock-hash-1",
     },
     {
       name: "amazon-linux-eks",
@@ -39,6 +67,7 @@ describe("FilteredTable Tests", () => {
       releaseType: "Stable",
       contributor: "",
       docsURL: "",
+      hash: "mock-hash-2",
     },
   ];
 
@@ -49,14 +78,14 @@ describe("FilteredTable Tests", () => {
 
   it("should show loader initially", () => {
     const { container } = render(<FilteredTable />);
-    expect(container.querySelector(".loader")).toBeInTheDocument();
+    expect(container.querySelector(".ant-spin")).toBeInTheDocument();
   });
 
   it("should hide loader and display packs after API call", async () => {
     fetchMock.mockResponseOnce(JSON.stringify({ dateCreated: "2022-08-25", Packs: mockPacks }));
     const { container } = render(<FilteredTable />);
 
-    await waitFor(() => expect(container.querySelector(".loader")).not.toBeInTheDocument());
+    await waitFor(() => expect(container.querySelector(".ant-spin")).not.toBeInTheDocument());
     expect(screen.getByText("Alpine")).toBeInTheDocument();
     expect(screen.getByText("Amazon EKS optimized Linux")).toBeInTheDocument();
   });
@@ -102,6 +131,18 @@ describe("FilteredTable Tests", () => {
 
     expect(screen.getByText("EKS, vSphere")).toBeInTheDocument();
   });
+
+  it("should have unique row keys", async () => {
+    fetchMock.mockResponseOnce(JSON.stringify({ dateCreated: "2022-08-25", Packs: mockPacks }));
+    const { container } = render(<FilteredTable />);
+
+    await waitFor(() => {
+      const rows = container.querySelectorAll(".ant-table-row");
+      const keys = Array.from(rows).map((row) => row.getAttribute("data-row-key"));
+      const uniqueKeys = new Set(keys);
+      expect(keys.length).toBe(uniqueKeys.size);
+    });
+  });
 });
 
 describe("toTitleCase", () => {

src/components/PacksTable/PacksTable.module.scss

@@ -46,6 +46,31 @@
   }
 }
 
+.tableContainer {
+  margin: 16px 0;
+  overflow: auto;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+
+  :global {
+    .ant-input-search {
+      margin-bottom: 16px;
+    }
+  }
+}
+
+.tableWrapper {
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 4px;
+  padding: 16px;
+
+  @media screen and (max-width: 768px) {
+    padding: 8px;
+  }
+}
+
 .green {
   background-color: var(--ifm-color-success-contrast-background);
   color: var(--ifm-color-success-contrast-foreground);
@@ -60,38 +85,46 @@
   border-radius: 16px;
 }
 
-.tableWrapper {
-  border: 1px solid var(--ifm-toc-border-color);
-  padding: 16px;
+.disabled,
+.deleted,
+.deprecated {
   padding: 4px 8px;
-  border-radius: 4px;
+  border-radius: 16px;
+  display: inline-block;
 }
 
 .disabled {
   background-color: var(--ifm-color-warning-contrast-background);
   color: var(--ifm-color-warning-contrast-foreground);
-  padding: 4px 8px;
-  border-radius: 16px;
 }
 
 .deleted {
   background-color: var(--ifm-color-danger-contrast-background);
   color: var(--ifm-color-danger-contrast-foreground);
-  padding: 4px 8px;
-  border-radius: 16px;
 }
 
 .deprecated {
   background-color: var(--ifm-color-info-contrast-background);
   color: var(--ifm-color-info-contrast-foreground);
-  padding: 4px 8px;
-  border-radius: 16px;
 }
 
 .error {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 400px;
-  color: red;
+  color: var(--ifm-color-danger);
+}
+
+.unsupportedMessage {
+  display: none;
+  margin: 16px 0;
+
+  @media screen and (max-width: 768px) {
+    display: block;
+  }
+}
+
+.searchContainer {
+  margin-bottom: 16px;
 }