Convert getWebsiteIconUrl util to use Brandfetch api (#5712)

ethyca · Feb 3, 2025 · 50f44b8 · 50f44b8
1 parent c4d69cc
commit 50f44b8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/clients/admin-ui/cypress/e2e/action-center.cy.ts b/clients/admin-ui/cypress/e2e/action-center.cy.ts
@@ -65,6 +65,8 @@ describe("Action center", () => {
         const monitorKey = result
           .attr("data-testid")
           .replace("monitor-result-", "");
+        // property icon
+        cy.wrap(result).find(".ant-list-item-meta-avatar").should("exist");
         // linked title
         cy.wrap(result)
           .contains("assets detected")

diff --git a/clients/admin-ui/src/features/common/util.test.ts b/clients/admin-ui/src/features/common/util.test.ts
@@ -5,6 +5,7 @@ import {
   getKeysFromMap,
   getOptionsFromMap,
   getPII,
+  getWebsiteIconUrl,
 } from "~/features/common/utils";
 
 // TODO: add tests for the other utils functions
@@ -84,3 +85,18 @@ describe(getOptionsFromMap.name, () => {
     expect(result).toEqual([]);
   });
 });
+
+describe(getWebsiteIconUrl.name, () => {
+  it("should return the icon URL", () => {
+    const result = getWebsiteIconUrl("example.com");
+    expect(result).toEqual(
+      "https://cdn.brandfetch.io/example.com/icon/theme/light/fallback/404/h/24/w/24?c=1idbRjELpikqQ1PLiqb",
+    );
+  });
+  it("should return the icon URL with a custom size", () => {
+    const result = getWebsiteIconUrl("example.com", 56);
+    expect(result).toEqual(
+      "https://cdn.brandfetch.io/example.com/icon/theme/light/fallback/404/h/56/w/56?c=1idbRjELpikqQ1PLiqb",
+    );
+  });
+});
diff --git a/clients/admin-ui/src/features/common/utils.ts b/clients/admin-ui/src/features/common/utils.ts
@@ -117,6 +117,6 @@ export const getOptionsFromMap = <T = string>(
     value: key,
   }));
 
-export const getWebsiteIconUrl = (hostname: string) => {
-  return `https://icons.duckduckgo.com/ip3/${hostname}.ico`;
+export const getWebsiteIconUrl = (domain: string, size = 24) => {
+  return `https://cdn.brandfetch.io/${domain}/icon/theme/light/fallback/404/h/${size}/w/${size}?c=1idbRjELpikqQ1PLiqb`;
 };
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorResult.tsx
@@ -63,13 +63,23 @@ export const MonitorResult = ({
     <List.Item data-testid={`monitor-result-${key}`} {...props}>
       <Skeleton avatar title={false} loading={showSkeleton} active>
         <List.Item.Meta
-          avatar={!!iconUrl && <Avatar src={iconUrl} size="small" />}
+          avatar={
+            <Avatar
+              src={iconUrl}
+              size="small"
+              icon={<Icons.Wikis />}
+              style={{
+                backgroundColor: "transparent",
+                color: "var(--ant-color-text)",
+              }}
+            />
+          }
           title={
             <NextLink
               href={`${ACTION_CENTER_ROUTE}/${key}`}
               className="whitespace-nowrap"
             >
-              {`${totalUpdates} assets detected${property ? `on ${property}` : ""}`}
+              {`${totalUpdates} assets detected${property ? ` on ${property}` : ""}`}
               {!!warning && (
                 <Tooltip
                   title={typeof warning === "string" ? warning : undefined}