From 0d7231267a0e512f50bd49c09c456c17d52b11e6 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 4 Sep 2024 12:08:33 +0300
Subject: [PATCH] fix: fix missing icons for mission control configs

Fixes #2228
---
 package-lock.json                          | 10 +--
 package.json                               |  4 +-
 src/components/Configs/ConfigsTypeIcon.tsx | 13 ++--
 src/ui/Icons/Icon.tsx                      | 75 +++++++++++++++++-----
 4 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f5b7c44a0..9ff4680a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,12 +6,12 @@
   "packages": {
     "": {
       "name": "@flanksource/flanksource-ui",
-      "version": "1.0.748",
+      "version": "1.0.760",
       "dependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@clerk/nextjs": "^5.3.0",
         "@dagrejs/dagre": "^1.1.1",
-        "@flanksource/icons": "^1.0.29",
+        "@flanksource/icons": "^1.0.30",
         "@floating-ui/react": "^0.26.9",
         "@headlessui/react": "^2.1.2",
         "@heroicons/react": "^1.0.3",
@@ -3381,9 +3381,9 @@
       "dev": true
     },
     "node_modules/@flanksource/icons": {
-      "version": "1.0.29",
-      "resolved": "https://registry.npmjs.org/@flanksource/icons/-/icons-1.0.29.tgz",
-      "integrity": "sha512-6X0378WJ22mvR/0mtrSL2/3OPTZiuBJhBHNFp60U61dc8Pr8bZTcBpbkWu7wF3sRP2t1WgXAD9zLHbnkxC/NUg==",
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/@flanksource/icons/-/icons-1.0.30.tgz",
+      "integrity": "sha512-WdqcevcWiIB7eIxBJepYlrCDbXiVGnDGw5oH1EVBjQWft90mRxOtd9eE4mWYy8+ctSlmuVzey/NyZad64K5x3Q==",
       "peerDependencies": {
         "react": "*"
       }
diff --git a/package.json b/package.json
index d31434721..373a1ac84 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@clerk/nextjs": "^5.3.0",
     "@dagrejs/dagre": "^1.1.1",
-    "@flanksource/icons": "^1.0.29",
+    "@flanksource/icons": "^1.0.30",
     "@floating-ui/react": "^0.26.9",
     "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^1.0.3",
@@ -220,4 +220,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Configs/ConfigsTypeIcon.tsx b/src/components/Configs/ConfigsTypeIcon.tsx
index 05d9593e8..f3cf543d5 100644
--- a/src/components/Configs/ConfigsTypeIcon.tsx
+++ b/src/components/Configs/ConfigsTypeIcon.tsx
@@ -1,6 +1,6 @@
+import { ConfigItem } from "@flanksource-ui/api/types/configs";
+import { areTwoIconNamesEqual, Icon } from "@flanksource-ui/ui/Icons/Icon";
 import { useMemo } from "react";
-import { ConfigItem } from "../../api/types/configs";
-import { Icon } from "../../ui/Icons/Icon";
 
 export type ConfigIconProps = {
   config?: Pick<ConfigItem, "type">;
@@ -23,13 +23,17 @@ export default function ConfigsTypeIcon({
 
   const [primaryIcon, secondaryIcon] = useMemo(() => {
     if (configType?.split("::").length === 1) {
-      return [configType, null];
+      return [configType, undefined];
     }
     const primaryIcon = configType?.split("::")[0];
-    let secondaryIcon = configType;
+    let secondaryIcon = configType ?? undefined;
     return [primaryIcon, secondaryIcon];
   }, [configType]);
 
+  const isPrimaryIconSameAsSecondaryIcon = useMemo(() => {
+    return areTwoIconNamesEqual(primaryIcon, secondaryIcon);
+  }, [primaryIcon, secondaryIcon]);
+
   const value = useMemo(() => {
     if (configType?.split("::").length === 1) {
       return configType;
@@ -55,6 +59,7 @@ export default function ConfigsTypeIcon({
           />
         )}
         {showSecondaryIcon &&
+          !isPrimaryIconSameAsSecondaryIcon &&
           secondaryIcon &&
           primaryIcon !== secondaryIcon && (
             <Icon
diff --git a/src/ui/Icons/Icon.tsx b/src/ui/Icons/Icon.tsx
index 6e79052a7..c4360dae8 100644
--- a/src/ui/Icons/Icon.tsx
+++ b/src/ui/Icons/Icon.tsx
@@ -178,7 +178,6 @@ export const aliases: IconMap = {
   authorizesecuritygroupingress: "add-firewall",
   azuredevops: "azure-devops",
   backoff: "snail",
-
   backofflimitexceeded: "snail",
   podcrashlooping: "error",
   bindgithubaccounttokentoapplication: "git",
@@ -599,10 +598,12 @@ export var prefixes: IconMap = {
   isup: "heart",
   killing: "stop",
   lookup: "search",
+  missioncontrol: "mission-control",
   modify: "edit",
   monitor: "graph",
   move: "settings",
   operator: "operatorframework",
+  playbook: "playbook",
   poll: "list",
   post: "upload",
   preview: "show",
@@ -686,7 +687,7 @@ export var prefixes: IconMap = {
   wipe: "trash"
 };
 
-const find = function (name?: string): IconType | undefined {
+export function findIconName(name?: string): IconType | undefined {
   if (isEmpty(name) || !name) {
     return undefined;
   }
@@ -715,50 +716,94 @@ const find = function (name?: string): IconType | undefined {
   }
 
   return undefined;
-};
-
-export const findByName = function (name?: string): IconType | undefined {
-  if (isEmpty(name) || !name) {
-    return undefined;
-  }
+}
 
-  name = name
+export function processIconNameSearch(name: string): string {
+  return name
     .replaceAll("--", "-")
     .replaceAll("::", "-")
     .toLowerCase()
     .replaceAll("k8-", "k8s-")
     .replaceAll("kubernetes-", "k8s-");
+}
+
+export function areTwoIconNamesEqual(
+  firstIconName?: string,
+  secondIconName?: string
+) {
+  if (!firstIconName || !secondIconName) {
+    return false;
+  }
+
+  const firstIcon = processIconNameSearch(firstIconName);
+  const secondIcon = processIconNameSearch(secondIconName);
+  if (firstIcon === secondIcon) {
+    return true;
+  }
+  // ensure they aren't aliased to each other
+  const firstIconAlias = aliases[firstIcon as keyof typeof aliases];
+  const secondIconAlias = aliases[secondIcon as keyof typeof aliases];
+
+  if (firstIconAlias === secondIcon || secondIconAlias === firstIcon) {
+    return true;
+  }
+  if (firstIconAlias === secondIconAlias) {
+    return true;
+  }
 
-  var icon = find(name);
+  // replace k8s with nothing
+  if (firstIcon.replace("k8s-", "") === secondIcon) {
+    return true;
+  }
+
+  if (secondIcon.replace("k8s-", "") === firstIcon) {
+    return true;
+  }
+
+  if (firstIcon.replace("k8s-", "") === secondIcon.replace("k8s-", "")) {
+    return true;
+  }
+
+  return false;
+}
+
+export function findByName(name?: string): IconType | undefined {
+  if (isEmpty(name) || !name) {
+    return undefined;
+  }
+
+  name = processIconNameSearch(name);
+
+  var icon = findIconName(name);
 
   if (icon != null) {
     return icon;
   }
 
-  icon = find(name.replace("k8s-", ""));
+  icon = findIconName(name.replace("k8s-", ""));
 
   if (icon != null) {
     return icon;
   }
 
   if (icon == null) {
-    icon = find("aws-" + name);
+    icon = findIconName("aws-" + name);
   } else if (icon != null) {
     return icon;
   }
   if (icon == null) {
-    icon = find("azure-" + name);
+    icon = findIconName("azure-" + name);
   } else if (icon != null) {
     return icon;
   }
   if (icon == null) {
-    icon = find("k8s-" + name);
+    icon = findIconName("k8s-" + name);
   } else if (icon != null) {
     return icon;
   }
 
   return icon;
-};
+}
 
 const iconColorsClasssNamesMap = {
   error: "fill-red-500",