Migrate consent reporting table to Ant Design (#7187)

Author: gilluminate

changelog/7187.yaml

@@ -0,0 +1,3 @@
+type: Developer Experience
+description: Migrated consent reporting tables from Fides V2 table to Ant Design table components
+pr: 7187

clients/admin-ui/cypress/e2e/consent-reporting.cy.ts

@@ -31,7 +31,7 @@ describe("Consent reporting", () => {
         },
       });
       cy.visit(CONSENT_REPORTING_ROUTE);
-      cy.getByTestId("consent-reporting");
+      cy.getByTestId("consent-reporting-table").should("exist");
     });
     it("can't access without plus", () => {
       stubPlus(false);
@@ -140,7 +140,9 @@ describe("Consent reporting", () => {
         expect(params.get("request_timestamp_lt")).to.be.null;
       });
 
-      cy.getByTestId("fidesTable-body").children().should("have.length", 22);
+      cy.getByTestId("consent-reporting-table")
+        .find("tr")
+        .should("have.length", 24);
     });
     it("loads the consent report table with date filters", () => {
       cy.intercept(
@@ -177,7 +179,9 @@ describe("Consent reporting", () => {
         );
       });
 
-      cy.getByTestId("fidesTable-body").children().should("have.length", 22);
+      cy.getByTestId("consent-reporting-table")
+        .find("tr")
+        .should("have.length", 24);
     });
   });
 
@@ -198,24 +202,22 @@ describe("Consent reporting", () => {
     });
 
     it("displays TCF badge and is clickable", () => {
-      cy.getByTestId("fidesTable-body")
+      cy.getByTestId("consent-reporting-table")
         .find("tr")
-        .each(($row) => {
-          if ($row.find("td").eq(3).text() === "TCF") {
-            cy.wrap($row).find("button").should("exist").and("be.visible");
-            return false;
-          }
+        .eq(3)
+        .findByTestId("tcf-badge")
+        .within(() => {
+          cy.get("button").should("exist");
         });
     });
 
     it("shows TCF details table and excludes system and vendor records", () => {
-      cy.getByTestId("fidesTable-body")
+      cy.getByTestId("consent-reporting-table")
         .find("tr")
-        .each(($row) => {
-          if ($row.find("td").eq(3).text() === "TCF") {
-            cy.wrap($row).find("button").click();
-            return false;
-          }
+        .eq(3)
+        .findByTestId("tcf-badge")
+        .within(() => {
+          cy.get("button").click();
         });
 
       cy.getByTestId("consent-tcf-detail-modal").should("exist");

clients/admin-ui/src/features/common/table/cells/EllipsisCell.tsx

@@ -0,0 +1,16 @@
+import { Typography } from "fidesui";
+
+interface EllipsisCellProps
+  extends React.ComponentProps<typeof Typography.Text> {
+  children: React.ReactNode;
+}
+
+export const EllipsisCell = ({ children, ...props }: EllipsisCellProps) => {
+  return children && typeof children === "string" ? (
+    <Typography.Text ellipsis={{ tooltip: children }} {...props}>
+      {children}
+    </Typography.Text>
+  ) : (
+    children
+  );
+};

clients/admin-ui/src/features/common/table/cells/LinkCell.tsx

@@ -8,31 +8,34 @@ export const LinkCell = ({
   href,
   children,
   containerProps,
+  strong = true,
   ...props
 }: ComponentProps<typeof LinkText> & {
   containerProps?: FlexProps;
 }) => {
   return (
-    <Flex {...containerProps}>
-      {href ? (
-        <NextLink href={href} passHref legacyBehavior>
-          <LinkText
-            strong
-            ellipsis
-            onClick={(e) => e.stopPropagation()}
-            variant="primary"
-            {...props}
-          >
-            <Text unStyled ellipsis={{ tooltip: children }}>
-              {children}
-            </Text>
-          </LinkText>
-        </NextLink>
-      ) : (
-        <Text strong ellipsis {...props}>
-          {children}
-        </Text>
-      )}
-    </Flex>
+    children && (
+      <Flex {...containerProps}>
+        {href ? (
+          <NextLink href={href} passHref legacyBehavior>
+            <LinkText
+              strong={strong}
+              ellipsis
+              onClick={(e) => e.stopPropagation()}
+              variant="primary"
+              {...props}
+            >
+              <Text unStyled ellipsis={{ tooltip: children }}>
+                {children}
+              </Text>
+            </LinkText>
+          </NextLink>
+        ) : (
+          <Text strong={strong} ellipsis {...props}>
+            {children}
+          </Text>
+        )}
+      </Flex>
+    )
   );
 };