From 6feb13a09c781e4e6b92434dc2e9b64f1f3d8945 Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Wed, 6 Aug 2025 09:11:27 -0400 Subject: [PATCH] Fleet UI: Ensure icon id uniqueness (#31625) --- .../SoftwarePage/components/icons/Brave.tsx | 118 +- .../components/icons/ChromeApp.tsx | 131 +- .../SoftwarePage/components/icons/Edge.tsx | 240 ++-- .../SoftwarePage/components/icons/Excel.tsx | 128 +- .../components/icons/Extension.tsx | 120 +- .../SoftwarePage/components/icons/Figma.tsx | 72 +- .../SoftwarePage/components/icons/Firefox.tsx | 589 +++++---- .../components/icons/IntuneCompanyPortal.tsx | 132 +- .../SoftwarePage/components/icons/Package.tsx | 119 +- .../SoftwarePage/components/icons/Safari.tsx | 1178 +++++++++-------- .../SoftwarePage/components/icons/Santa.tsx | 40 +- .../SoftwarePage/components/icons/Slack.tsx | 61 +- .../components/icons/TeamViewer.tsx | 99 +- .../components/icons/TeamViewerHost.tsx | 14 - .../SoftwarePage/components/icons/Teams.tsx | 154 +-- .../components/icons/VisualStudioCode.tsx | 60 +- .../SoftwarePage/components/icons/Word.tsx | 182 +-- .../SoftwarePage/components/icons/Zoom.tsx | 48 +- .../SoftwarePage/components/icons/index.ts | 3 + 19 files changed, 1800 insertions(+), 1688 deletions(-) delete mode 100644 frontend/pages/SoftwarePage/components/icons/TeamViewerHost.tsx diff --git a/frontend/pages/SoftwarePage/components/icons/Brave.tsx b/frontend/pages/SoftwarePage/components/icons/Brave.tsx index 242f6ed066..ea780aedd9 100644 --- a/frontend/pages/SoftwarePage/components/icons/Brave.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Brave.tsx @@ -1,62 +1,66 @@ import React from "react"; - +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Brave = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - ) => { + const clipPathId = uniqueId("clip-path-"); + const fillPathId = uniqueId("fill-path-"); + return ( + + + + - - - -); + + + + + + + + + + + + + + + + + + + + ); +}; export default Brave; diff --git a/frontend/pages/SoftwarePage/components/icons/ChromeApp.tsx b/frontend/pages/SoftwarePage/components/icons/ChromeApp.tsx index e53cf6a4f5..36dbc51993 100644 --- a/frontend/pages/SoftwarePage/components/icons/ChromeApp.tsx +++ b/frontend/pages/SoftwarePage/components/icons/ChromeApp.tsx @@ -1,67 +1,74 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const ChromeApp = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - -); +const ChromeApp = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + const fillPathBId = uniqueId("fill-path-b-"); + const fillPathCId = uniqueId("fill-path-c-"); + const fillPathDId = uniqueId("fill-path-d-"); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; export default ChromeApp; diff --git a/frontend/pages/SoftwarePage/components/icons/Edge.tsx b/frontend/pages/SoftwarePage/components/icons/Edge.tsx index 3912d25b14..2731e666ec 100644 --- a/frontend/pages/SoftwarePage/components/icons/Edge.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Edge.tsx @@ -1,116 +1,132 @@ import React from "react"; - +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Edge = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); +const Edge = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + const fillPathA = uniqueId("fill-path-a-"); + const fillPathB = uniqueId("fill-path-b-"); + const fillPathC = uniqueId("fill-path-c-"); + const fillPathD = uniqueId("fill-path-d-"); + const fillPathE = uniqueId("fill-path-e-"); + const fillPathF = uniqueId("fill-path-f-"); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export default Edge; diff --git a/frontend/pages/SoftwarePage/components/icons/Excel.tsx b/frontend/pages/SoftwarePage/components/icons/Excel.tsx index cb414339ed..216e6f8661 100644 --- a/frontend/pages/SoftwarePage/components/icons/Excel.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Excel.tsx @@ -1,66 +1,72 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Excel = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - -); +const Excel = (props: SVGProps) => { + const gradientId = uniqueId("gradient-"); + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}; + export default Excel; diff --git a/frontend/pages/SoftwarePage/components/icons/Extension.tsx b/frontend/pages/SoftwarePage/components/icons/Extension.tsx index aca39eabe4..536424fba3 100644 --- a/frontend/pages/SoftwarePage/components/icons/Extension.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Extension.tsx @@ -1,65 +1,65 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Extension = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - -); +const Extension = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}; export default Extension; diff --git a/frontend/pages/SoftwarePage/components/icons/Figma.tsx b/frontend/pages/SoftwarePage/components/icons/Figma.tsx index 91f721bde9..1ed627c2b0 100644 --- a/frontend/pages/SoftwarePage/components/icons/Figma.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Figma.tsx @@ -1,41 +1,45 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Figma = (props: SVGProps) => ( - - - - - - - - - - - +const Figma = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + return ( + + + - - - -); + + + + + + + + + + + + ); +}; export default Figma; diff --git a/frontend/pages/SoftwarePage/components/icons/Firefox.tsx b/frontend/pages/SoftwarePage/components/icons/Firefox.tsx index b4c7f4ead5..6bd84c738c 100644 --- a/frontend/pages/SoftwarePage/components/icons/Firefox.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Firefox.tsx @@ -1,288 +1,311 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Firefox = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); +const Firefox = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + const fillPathB = uniqueId("firefox_svg__b"); + const fillPathC = uniqueId("firefox_svg__c"); + const fillPathD = uniqueId("firefox_svg__d"); + const fillPathE = uniqueId("firefox_svg__e"); + const fillPathF = uniqueId("firefox_svg__f"); + const fillPathG = uniqueId("firefox_svg__g"); + const fillPathH = uniqueId("firefox_svg__h"); + const fillPathI = uniqueId("firefox_svg__i"); + const fillPathJ = uniqueId("firefox_svg__j"); + const fillPathK = uniqueId("firefox_svg__k"); + const fillPathL = uniqueId("firefox_svg__l"); + const fillPathM = uniqueId("firefox_svg__m"); + const fillPathN = uniqueId("firefox_svg__n"); + const fillPathO = uniqueId("firefox_svg__o"); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; export default Firefox; diff --git a/frontend/pages/SoftwarePage/components/icons/IntuneCompanyPortal.tsx b/frontend/pages/SoftwarePage/components/icons/IntuneCompanyPortal.tsx index acb6f4f396..1b8206b2fa 100644 --- a/frontend/pages/SoftwarePage/components/icons/IntuneCompanyPortal.tsx +++ b/frontend/pages/SoftwarePage/components/icons/IntuneCompanyPortal.tsx @@ -1,72 +1,80 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const IntuneCompanyPortal = (props: SVGProps) => ( - - - - +const IntuneCompanyPortal = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + const maskBId = uniqueId("mask-b-"); + const fillPathCId = uniqueId("fill-path-c-"); + const fillPathDId = uniqueId("fill-path-d-"); + + return ( + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - -); + + + + + + + + + + + + + + + ); +}; export default IntuneCompanyPortal; diff --git a/frontend/pages/SoftwarePage/components/icons/Package.tsx b/frontend/pages/SoftwarePage/components/icons/Package.tsx index 4e7941dc7f..f7353dc40c 100644 --- a/frontend/pages/SoftwarePage/components/icons/Package.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Package.tsx @@ -1,61 +1,68 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Package = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - -); +const Package = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; export default Package; diff --git a/frontend/pages/SoftwarePage/components/icons/Safari.tsx b/frontend/pages/SoftwarePage/components/icons/Safari.tsx index aa4234966c..5ebef22dc6 100644 --- a/frontend/pages/SoftwarePage/components/icons/Safari.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Safari.tsx @@ -1,589 +1,599 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Safari = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); +const Safari = (props: SVGProps) => { + const linearGradientAId = uniqueId("Name=safari_svg__a"); + const radialGradientBId = uniqueId("Name=safari_svg__b"); + const linearGradientCId = uniqueId("Name=safari_svg__c"); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; export default Safari; diff --git a/frontend/pages/SoftwarePage/components/icons/Santa.tsx b/frontend/pages/SoftwarePage/components/icons/Santa.tsx index 89158f24f5..12f3d70bb7 100644 --- a/frontend/pages/SoftwarePage/components/icons/Santa.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Santa.tsx @@ -1,23 +1,27 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Santa = (props: SVGProps) => ( - - - - - - - - - - - -); +const Santa = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + return ( + + + + + + + + + + + + ); +}; export default Santa; diff --git a/frontend/pages/SoftwarePage/components/icons/Slack.tsx b/frontend/pages/SoftwarePage/components/icons/Slack.tsx index f35190fafa..eebaf8a99b 100644 --- a/frontend/pages/SoftwarePage/components/icons/Slack.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Slack.tsx @@ -1,33 +1,38 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Slack = (props: SVGProps) => ( - - - - - - - - - - - - - - -); +const Slack = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + return ( + + + + + + + + + + + + + + + ); +}; + export default Slack; diff --git a/frontend/pages/SoftwarePage/components/icons/TeamViewer.tsx b/frontend/pages/SoftwarePage/components/icons/TeamViewer.tsx index a378357ce9..410fd6065b 100644 --- a/frontend/pages/SoftwarePage/components/icons/TeamViewer.tsx +++ b/frontend/pages/SoftwarePage/components/icons/TeamViewer.tsx @@ -1,51 +1,58 @@ import React from "react"; - +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const TeamViewer = (props: SVGProps) => ( - - - - - - - - - - - - - - - - ) => { + const linearGradient0Id = uniqueId("linear-gradient-0-"); + const linearGradient1Id = uniqueId("linear-gradient-1-"); + const clipPathId = uniqueId("clip-path-"); + + return ( + + + - - - -); + + + + + + + + + + + + + + + + + ); +}; + export default TeamViewer; diff --git a/frontend/pages/SoftwarePage/components/icons/TeamViewerHost.tsx b/frontend/pages/SoftwarePage/components/icons/TeamViewerHost.tsx deleted file mode 100644 index 42632e584a..0000000000 --- a/frontend/pages/SoftwarePage/components/icons/TeamViewerHost.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; - -import type { SVGProps } from "react"; - -const AppStore = (props: SVGProps) => ( - - - - -); -export default AppStore; diff --git a/frontend/pages/SoftwarePage/components/icons/Teams.tsx b/frontend/pages/SoftwarePage/components/icons/Teams.tsx index 942aa36c1b..c4e06b0280 100644 --- a/frontend/pages/SoftwarePage/components/icons/Teams.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Teams.tsx @@ -1,80 +1,84 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Teams = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - -); +const Teams = (props: SVGProps) => { + const linearGradientId = uniqueId("linear-gradient-"); + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}; export default Teams; diff --git a/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx b/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx index f5ee519edc..285bb3cb82 100644 --- a/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx +++ b/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx @@ -1,33 +1,37 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const VisualStudioCode = (props: SVGProps) => ( - - - - - - - - - - - - - - -); +const VisualStudioCode = (props: SVGProps) => { + const clipPathId = uniqueId("clip-path-"); + return ( + + + + + + + + + + + + + + + ); +}; export default VisualStudioCode; diff --git a/frontend/pages/SoftwarePage/components/icons/Word.tsx b/frontend/pages/SoftwarePage/components/icons/Word.tsx index adfc24010f..e83189497d 100644 --- a/frontend/pages/SoftwarePage/components/icons/Word.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Word.tsx @@ -1,90 +1,100 @@ import React from "react"; - +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Word = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); +const Word = (props: SVGProps) => { + // Create unique IDs for the SVG gradients + const gradAId = uniqueId("word-gradient-a-"); + const gradBId = uniqueId("word-gradient-b-"); + const gradCId = uniqueId("word-gradient-c-"); + const gradDId = uniqueId("word-gradient-d-"); + const gradEId = uniqueId("word-gradient-e-"); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export default Word; diff --git a/frontend/pages/SoftwarePage/components/icons/Zoom.tsx b/frontend/pages/SoftwarePage/components/icons/Zoom.tsx index b9c81e2ff3..1d616a77ec 100644 --- a/frontend/pages/SoftwarePage/components/icons/Zoom.tsx +++ b/frontend/pages/SoftwarePage/components/icons/Zoom.tsx @@ -1,27 +1,31 @@ import React from "react"; +import { uniqueId } from "lodash"; import type { SVGProps } from "react"; -const Zoom = (props: SVGProps) => ( - - - - - - - - - - -); +const Zoom = (props: SVGProps) => { + const linearGradientId = uniqueId("linear-gradient-"); + return ( + + + + + + + + + + + ); +}; export default Zoom; diff --git a/frontend/pages/SoftwarePage/components/icons/index.ts b/frontend/pages/SoftwarePage/components/icons/index.ts index 6476d2b881..b0d3dd9779 100644 --- a/frontend/pages/SoftwarePage/components/icons/index.ts +++ b/frontend/pages/SoftwarePage/components/icons/index.ts @@ -1,3 +1,6 @@ +// Note: if parts of a icon have a clip path, mask, or gradient, the IDs must be unique +// across all icons to avoid conflicts in the DOM. See uniqueId usage within icon components. + import { HOST_LINUX_PLATFORMS } from "interfaces/platform"; import { ISoftware } from "interfaces/software";