diff --git a/clients/admin-ui/cypress/e2e/action-center.cy.ts b/clients/admin-ui/cypress/e2e/action-center.cy.ts index 628b7728da..fbff87b231 100644 --- 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 index d1aa050a6e..7c43be1ae1 100644 --- 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 index ab18bc6803..31c41d75b7 100644 --- 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 = ( 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 index 3614217ffe..e3d0c07d24 100644 --- 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 = ({ } + avatar={ + } + style={{ + backgroundColor: "transparent", + color: "var(--ant-color-text)", + }} + /> + } title={ - {`${totalUpdates} assets detected${property ? `on ${property}` : ""}`} + {`${totalUpdates} assets detected${property ? ` on ${property}` : ""}`} {!!warning && (