fix: fix missing icons for mission control configs

Fixes #2228

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"
   }
-}
+}

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

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",