Fix crash in HelmChartDetails (#5667)

* Fix crash in HelmChartDetails

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix bug in helm chart icon fallback

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Update snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Factor out HelmChartIcon for better reusability

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix compile error

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix remaining type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove HelmChart list figure background

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing dangerouslySetInnerHTML usage

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Snapshots update

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using currentColor from cascade instead of specific one

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/notifications/notifications.store.tsx

@@ -19,6 +19,12 @@ export enum NotificationStatus {
   INFO = "info",
 }
 
+export interface CreateNotificationOptions {
+  id?: NotificationId;
+  timeout?: number;
+  onClose?(): void;
+}
+
 export interface Notification {
   id?: NotificationId;
   message: NotificationMessage;

src/renderer/components/notifications/notifications.tsx

@@ -9,14 +9,22 @@ import React from "react";
 import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
+import type { Disposer } from "../../utils";
 import { cssNames, prevDefault } from "../../utils";
-import type { Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
-import { NotificationStatus } from "./notifications.store";
+import type { CreateNotificationOptions, Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
 import { Animate } from "../animate";
 import { Icon } from "../icon";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
 import notificationsStoreInjectable from "./notifications-store.injectable";
+import { asLegacyGlobalFunctionForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-function-for-extension-api";
+import showSuccessNotificationInjectable from "./show-success-notification.injectable";
+import type { ShowCheckedErrorNotification } from "./show-checked-error.injectable";
+import showCheckedErrorNotificationInjectable from "./show-checked-error.injectable";
+import showErrorNotificationInjectable from "./show-error-notification.injectable";
+import showInfoNotificationInjectable from "./show-info-notification.injectable";
+import showShortInfoNotificationInjectable from "./show-short-info.injectable";
+
+export type ShowNotification = (message: NotificationMessage, opts?: CreateNotificationOptions) => Disposer;
 
 interface Dependencies {
   store: NotificationsStore;
@@ -103,58 +111,16 @@ export const Notifications = withInjectables<Dependencies>(
     }),
   },
 ) as React.FC & {
-  ok: (message: NotificationMessage) => () => void;
-  checkedError: (message: unknown, fallback: string, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
-  error: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
-  shortInfo: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
-  info: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+  ok: ShowNotification;
+  checkedError: ShowCheckedErrorNotification;
+  error: ShowNotification;
+  shortInfo: ShowNotification;
+  info: ShowNotification;
 };
 
-/**
- * @deprecated
- */
-const _notificationStore = asLegacyGlobalForExtensionApi(notificationsStoreInjectable);
-
-Notifications.ok = (message: NotificationMessage) => {
-  return _notificationStore.add({
-    message,
-    timeout: 2_500,
-    status: NotificationStatus.OK,
-  });
-};
-
-Notifications.checkedError = (message, fallback, customOpts = {}) => {
-  if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
-    return Notifications.error(message, customOpts);
-  }
-
-  console.warn("Unknown notification error message, falling back to default", message);
-
-  return Notifications.error(fallback, customOpts);
-};
-
-Notifications.error = (message, customOpts= {}) => {
-  return _notificationStore.add({
-    message,
-    timeout: 10_000,
-    status: NotificationStatus.ERROR,
-    ...customOpts,
-  });
-};
-
-Notifications.shortInfo = (message, customOpts = {}) => {
-  return Notifications.info(message, {
-    timeout: 5_000,
-    ...customOpts,
-  });
-};
-
-Notifications.info = (message, customOpts = {}) => {
-  return _notificationStore.add({
-    status: NotificationStatus.INFO,
-    timeout: 0,
-    message,
-    ...customOpts,
-  });
-};
+Notifications.ok = asLegacyGlobalFunctionForExtensionApi(showSuccessNotificationInjectable);
+Notifications.error = asLegacyGlobalFunctionForExtensionApi(showErrorNotificationInjectable);
+Notifications.checkedError = asLegacyGlobalFunctionForExtensionApi(showCheckedErrorNotificationInjectable);
+Notifications.info = asLegacyGlobalFunctionForExtensionApi(showInfoNotificationInjectable);
+Notifications.shortInfo = asLegacyGlobalFunctionForExtensionApi(showShortInfoNotificationInjectable);
 

src/renderer/components/notifications/show-checked-error.injectable.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
+import loggerInjectable from "../../../common/logger.injectable";
+import type { Disposer } from "../../utils";
+import type { CreateNotificationOptions } from "./notifications.store";
+import showErrorNotificationInjectable from "./show-error-notification.injectable";
+
+export type ShowCheckedErrorNotification = (message: unknown, fallback: string, opts?: CreateNotificationOptions) => Disposer;
+
+const showCheckedErrorNotificationInjectable = getInjectable({
+  id: "show-checked-error-notififcation",
+  instantiate: (di): ShowCheckedErrorNotification => {
+    const showErrorNotification = di.inject(showErrorNotificationInjectable);
+    const logger = di.inject(loggerInjectable);
+
+    return (message, fallback, opts) => {
+      if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
+        return showErrorNotification(message, opts);
+      }
+
+      logger.warn("[NOTIFICATIONS]: Unknown notification error message, falling back to default", message);
+
+      return showErrorNotification(fallback, opts);
+    };
+  },
+});
+
+export default showCheckedErrorNotificationInjectable;

src/renderer/components/notifications/show-error-notification.injectable.ts

@@ -3,17 +3,17 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import type { NotificationMessage, Notification } from "./notifications.store";
+import type { ShowNotification } from "./notifications";
 import { NotificationStatus } from "./notifications.store";
 import notificationsStoreInjectable from "./notifications-store.injectable";
 
 const showErrorNotificationInjectable = getInjectable({
   id: "show-error-notification",
 
-  instantiate: (di) => {
+  instantiate: (di): ShowNotification => {
     const notificationsStore = di.inject(notificationsStoreInjectable);
 
-    return (message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) =>
+    return (message, customOpts = {}) =>
       notificationsStore.add({
         status: NotificationStatus.ERROR,
         timeout: 5000,

src/renderer/components/notifications/show-info-notification.injectable.ts

@@ -3,17 +3,17 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import type { NotificationMessage, Notification } from "./notifications.store";
+import type { ShowNotification } from "./notifications";
 import { NotificationStatus } from "./notifications.store";
 import notificationsStoreInjectable from "./notifications-store.injectable";
 
 const showInfoNotificationInjectable = getInjectable({
   id: "show-info-notification",
 
-  instantiate: (di) => {
+  instantiate: (di): ShowNotification => {
     const notificationsStore = di.inject(notificationsStoreInjectable);
 
-    return (message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) =>
+    return (message, customOpts = {}) =>
       notificationsStore.add({
         status: NotificationStatus.INFO,
         timeout: 5000,

src/renderer/components/notifications/show-short-info.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ShowNotification } from "./notifications";
+import showInfoNotificationInjectable from "./show-info-notification.injectable";
+
+const showShortInfoNotificationInjectable = getInjectable({
+  id: "show-short-info-notification",
+  instantiate: (di): ShowNotification => {
+    const showInfoNotification = di.inject(showInfoNotificationInjectable);
+
+    return (message, customOpts = {}) => {
+      return showInfoNotification(message, {
+        timeout: 5_000,
+        ...customOpts,
+      });
+    };
+  },
+});
+
+export default showShortInfoNotificationInjectable;

src/renderer/components/notifications/show-success-notification.injectable.ts

@@ -3,17 +3,17 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import type { NotificationMessage, Notification } from "./notifications.store";
+import type { ShowNotification } from "./notifications";
 import { NotificationStatus } from "./notifications.store";
 import notificationsStoreInjectable from "./notifications-store.injectable";
 
 const showSuccessNotificationInjectable = getInjectable({
   id: "show-success-notification",
 
-  instantiate: (di) => {
+  instantiate: (di): ShowNotification => {
     const notificationsStore = di.inject(notificationsStoreInjectable);
 
-    return (message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) =>
+    return (message, customOpts = {}) =>
       notificationsStore.add({
         status: NotificationStatus.OK,
         timeout: 5000,