Revert "Upgrade to webpack@5 (#4725)" (#4872)

src/common/catalog-entities/kubernetes-cluster.ts

@@ -11,7 +11,6 @@ import { app } from "electron";
 import type { CatalogEntitySpec } from "../catalog/catalog-entity";
 import { IpcRendererNavigationEvents } from "../../renderer/navigation/events";
 import { requestClusterActivation, requestClusterDisconnection } from "../../renderer/ipc";
-import KubeClusterCategoryIcon from "./icons/kubernetes.svg";
 
 export interface KubernetesClusterPrometheusMetrics {
   address?: {
@@ -139,7 +138,7 @@ class KubernetesClusterCategory extends CatalogCategory {
   public readonly kind = "CatalogCategory";
   public metadata = {
     name: "Clusters",
-    icon: KubeClusterCategoryIcon,
+    icon: require(`!!raw-loader!./icons/kubernetes.svg`).default, // eslint-disable-line
   };
   public spec: CatalogCategorySpec = {
     group: "entity.k8slens.dev",

src/common/catalog/catalog-category-registry.ts

@@ -3,10 +3,10 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { once } from "lodash";
-import { action, computed, makeObservable, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
+import { Disposer, ExtendedMap, iter } from "../utils";
 import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
-import { ExtendedMap, iter, type Disposer } from "../utils";
+import { once } from "lodash";
 
 export type CategoryFilter = (category: CatalogCategory) => any;
 

src/common/getTSLoader.ts

@@ -4,17 +4,18 @@
  */
 
 import esbuild from "esbuild";
-import type { Options as TSLoaderOptions } from "ts-loader";
 
 /**
  * A function returning webpack ts/tsx loader
+ *
  * depends on env LENS_DEV_USE_ESBUILD_LOADER to use esbuild-loader (faster) or good-old ts-loader
+ *
+ * @param testRegExp - the regex for webpack to conditional find the files
  * @returns ts/tsx webpack loader configuration object
  */
-const getTSLoader = (options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp) => {
-  testRegExp ??= /\.tsx?$/; // by default covers react/jsx-stuff
-  options.transpileOnly ??= true;
-
+const getTSLoader = (
+  testRegExp: RegExp, transpileOnly = true,
+) => {
   if (process.env.LENS_DEV_USE_ESBUILD_LOADER === "true") {
     console.info(`\n🚀 using esbuild-loader for ts(x)`);
 
@@ -34,7 +35,9 @@ const getTSLoader = (options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp
     exclude: /node_modules/,
     use: {
       loader: "ts-loader",
-      options,
+      options: {
+        transpileOnly,
+      },
     },
   };
 };

src/common/user-store/user-store.ts

@@ -12,8 +12,7 @@ import { getAppVersion } from "../utils/app-version";
 import { kubeConfigDefaultPath } from "../kube-helpers";
 import { appEventBus } from "../app-event-bus/event-bus";
 import { getOrInsertSet, toggle, toJS } from "../../renderer/utils";
-import { DESCRIPTORS } from "./preferences-helpers";
-import type { EditorConfiguration, ExtensionRegistry, KubeconfigSyncValue, UserPreferencesModel, TerminalConfig } from "./preferences-helpers";
+import { DESCRIPTORS, EditorConfiguration, ExtensionRegistry, KubeconfigSyncValue, UserPreferencesModel, TerminalConfig } from "./preferences-helpers";
 import logger from "../../main/logger";
 
 export interface UserStoreModel {

src/main/catalog/catalog-entity-registry.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { action, computed, type IComputedValue, type IObservableArray, makeObservable, observable } from "mobx";
+import { action, computed, IComputedValue, IObservableArray, makeObservable, observable } from "mobx";
 import { CatalogCategoryRegistry, catalogCategoryRegistry, CatalogEntity, CatalogEntityConstructor } from "../../common/catalog";
 import { iter } from "../../common/utils";
 

src/main/index.ts

@@ -10,7 +10,7 @@ import * as Mobx from "mobx";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsMainApi from "../extensions/main-api";
 import { app, autoUpdater, dialog, powerMonitor } from "electron";
-import { appName, isIntegrationTesting, isMac, isWindows, productName, isDevelopment } from "../common/vars";
+import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
@@ -176,7 +176,7 @@ di.runSetups().then(() => {
 
     try {
       logger.info("🔌 Starting LensProxy");
-      await lensProxy.listen(); // lensProxy.port available
+      await lensProxy.listen();
     } catch (error) {
       dialog.showErrorBox("Lens Error", `Could not start proxy: ${error?.message || "unknown error"}`);
 
@@ -228,16 +228,6 @@ di.runSetups().then(() => {
     logger.info("🖥️  Starting WindowManager");
     const windowManager = WindowManager.createInstance();
 
-    // Override main content view url to local webpack-dev-server to support HMR / live-reload
-    if (isDevelopment) {
-      const { createDevServer } = await import("../../webpack.dev-server");
-      const devServer = createDevServer(lensProxy.port);
-
-      windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
-
-      await devServer.start();
-    }
-
     const menuItems = di.inject(electronMenuItemsInjectable);
     const trayMenuItems = di.inject(trayMenuItemsInjectable);
 

src/main/menu/menu.ts

@@ -9,7 +9,7 @@ import { appName, isMac, isWindows, docsUrl, supportUrl, productName } from "../
 import logger from "../logger";
 import { exitApp } from "../exit-app";
 import { broadcastMessage } from "../../common/ipc";
-import packageJson from "../../../package.json";
+import * as packageJson from "../../../package.json";
 import { preferencesURL, extensionsURL, addClusterURL, catalogURL, welcomeURL } from "../../common/routes";
 import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
 import type { MenuRegistration } from "./menu-registration";

src/main/router.ts

@@ -9,7 +9,7 @@ import type http from "http";
 import path from "path";
 import { readFile } from "fs-extra";
 import type { Cluster } from "../common/cluster/cluster";
-import { apiPrefix, appName, publicPath } from "../common/vars";
+import { apiPrefix, appName, publicPath, isDevelopment, webpackDevServerPort } from "../common/vars";
 import { HelmApiRoute, KubeconfigRoute, MetricsRoute, PortForwardRoute, ResourceApplierApiRoute, VersionRoute } from "./routes";
 import logger from "./logger";
 
@@ -110,7 +110,7 @@ export class Router {
     };
   }
 
-  protected static async handleStaticFile({ params, response }: LensApiRequest): Promise<void> {
+  protected static async handleStaticFile({ params, response, raw: { req }}: LensApiRequest): Promise<void> {
     let filePath = params.path;
 
     for (let retryCount = 0; retryCount < 5; retryCount += 1) {
@@ -124,6 +124,19 @@ export class Router {
       }
 
       try {
+        const filename = path.basename(req.url);
+        // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
+        const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
+
+        if (isDevelopment && toWebpackDevServer) {
+          const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
+
+          response.statusCode = 307;
+          response.setHeader("Location", redirectLocation);
+
+          return response.end();
+        }
+
         const data = await readFile(asset);
 
         response.setHeader("Content-Type", getMimeType(asset));

src/main/window-manager.ts

@@ -28,8 +28,6 @@ export interface SendToViewArgs {
 }
 
 export class WindowManager extends Singleton {
-  public mainContentUrl = `http://localhost:${LensProxy.getInstance().port}`;
-
   protected mainWindow: BrowserWindow;
   protected splashWindow: BrowserWindow;
   protected windowState: windowStateKeeper.State;
@@ -43,6 +41,10 @@ export class WindowManager extends Singleton {
     this.bindEvents();
   }
 
+  get mainUrl() {
+    return `http://localhost:${LensProxy.getInstance().port}`;
+  }
+
   private async initMainWindow(showSplash: boolean) {
     // Manage main window size and position with state persistence
     if (!this.windowState) {
@@ -140,8 +142,8 @@ export class WindowManager extends Singleton {
 
     try {
       if (showSplash) await this.showSplash();
-      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainContentUrl} ...`);
-      await this.mainWindow.loadURL(this.mainContentUrl);
+      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainUrl} ...`);
+      await this.mainWindow.loadURL(this.mainUrl);
     } catch (error) {
       logger.error("Loading main window failed", { error });
       dialog.showErrorBox("ERROR!", error.toString());

src/renderer/api/catalog-entity-registry.ts

@@ -9,7 +9,7 @@ import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegis
 import "../../common/catalog-entities";
 import type { Cluster } from "../../common/cluster/cluster";
 import { ClusterStore } from "../../common/cluster-store/cluster-store";
-import { type Disposer, iter } from "../utils";
+import { Disposer, iter } from "../utils";
 import { once } from "lodash";
 import logger from "../../common/logger";
 import { CatalogRunEvent } from "../../common/catalog/catalog-run-event";

src/renderer/bootstrap.tsx

@@ -136,14 +136,7 @@ export async function bootstrap(di: DependencyInjectionContainer) {
     App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
   }
 
-  try {
-    await initializeApp(rootElem);
-  } catch (error) {
-    console.error(`[BOOTSTRAP]: view initialization error: ${error}`, {
-      origin: location.href,
-      isTopFrameView: process.isMainFrame,
-    });
-  }
+  await initializeApp(rootElem);
 
   render(
     <DiContextProvider value={{ di }}>

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -25,7 +25,7 @@ interface Props<T extends CatalogEntity> {
 @observer
 export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Props<T>> {
   categoryIcon(category: CatalogCategory) {
-    if (Icon.isSvg(category.metadata.icon)) {
+    if (category.metadata.icon.includes("<svg")) {
       return <Icon svg={category.metadata.icon} smallest />;
     } else {
       return <Icon material={category.metadata.icon} smallest />;

src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx

@@ -65,7 +65,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
         continue;
       }
 
-      const key = Icon.isSvg(menuItem.icon) ? "svg" : "material";
+      const key = menuItem.icon.includes("<svg") ? "svg" : "material";
 
       items.push(
         <MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>

src/renderer/components/+catalog/catalog-menu.tsx

@@ -28,7 +28,7 @@ function getCategoryIcon(category: CatalogCategory) {
   const { icon } = category.metadata ?? {};
 
   if (typeof icon === "string") {
-    return Icon.isSvg(icon)
+    return icon.includes("<svg")
       ? <Icon small svg={icon}/>
       : <Icon small material={icon}/>;
   }

src/renderer/components/+cluster/cluster-overview-store/cluster-overview-store.ts

@@ -5,9 +5,9 @@
 
 import { action, observable, reaction, when, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
-import { Cluster, clusterApi, getMetricsByNodeNames, type IClusterMetrics } from "../../../../common/k8s-api/endpoints";
+import { Cluster, clusterApi, getMetricsByNodeNames, IClusterMetrics } from "../../../../common/k8s-api/endpoints";
 import { autoBind, StorageHelper } from "../../../utils";
-import { type IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
+import { IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
 import { nodesStore } from "../../+nodes/nodes.store";
 
 export enum MetricType {

src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -14,7 +14,7 @@ import { boundMethod, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
 import { Button } from "../button";
-import { Select, type SelectOption } from "../select";
+import { Select, SelectOption } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";
 import { withInjectables } from "@ogre-tools/injectable-react";

src/renderer/components/+helm-releases/release-rollback-dialog.tsx

@@ -10,7 +10,7 @@ import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
-import { getReleaseHistory, HelmRelease, type IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
+import { getReleaseHistory, HelmRelease, IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { Select, SelectOption } from "../select";
 import { Notifications } from "../notifications";
 import orderBy from "lodash/orderBy";

src/renderer/components/+namespaces/namespace-details.tsx

@@ -10,7 +10,7 @@ import { computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { boundMethod, cssNames, Disposer } from "../../utils";
-import { getMetricsForNamespace, type IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
+import { getMetricsForNamespace, IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Link } from "react-router-dom";
 import { Spinner } from "../spinner";

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -15,7 +15,7 @@ import { ResourceMetrics } from "../resource-metrics";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object-meta";
-import { getBackendServiceNamePort, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
+import { getBackendServiceNamePort, getMetricsForIngress, IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { boundMethod } from "../../utils";

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -18,7 +18,7 @@ import { systemName, isUrl, isPath } from "../input/input_validators";
 import { SubTitle } from "../layout/sub-title";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
-import { type HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
+import { HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
 import { requestOpenFilePickingDialog } from "../../ipc";
 
 interface Props extends Partial<DialogProps> {

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -15,7 +15,7 @@ import { Link } from "react-router-dom";
 import { ResourceMetrics } from "../resource-metrics";
 import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForPvc, type IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
+import { getMetricsForPvc, IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { KubeObjectMeta } from "../kube-object-meta";

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { daemonSetStore } from "./daemonsets.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { DaemonSet, getMetricsForDaemonSets, type IPodMetrics } from "../../../common/k8s-api/endpoints";
+import { DaemonSet, getMetricsForDaemonSets, IPodMetrics } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { makeObservable, observable, reaction } from "mobx";

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
-import { Deployment, getMetricsForDeployments, type IPodMetrics } from "../../../common/k8s-api/endpoints";
+import { Deployment, getMetricsForDeployments, IPodMetrics } from "../../../common/k8s-api/endpoints";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
 import { podsStore } from "../+workloads-pods/pods.store";

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -17,7 +17,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { podsStore } from "../+workloads-pods/pods.store";
 import { jobStore } from "./job.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForJobs, type IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
+import { getMetricsForJobs, IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { makeObservable, observable, reaction } from "mobx";

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { observable, reaction, makeObservable } from "mobx";
-import { type IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
+import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { boundMethod, cssNames, toJS } from "../../utils";

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "../+workloads-pods/pods.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForReplicaSets, type IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
+import { getMetricsForReplicaSets, IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -16,7 +16,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { podsStore } from "../+workloads-pods/pods.store";
 import { statefulSetStore } from "./statefulset.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForStatefulSets, type IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
+import { getMetricsForStatefulSets, IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";

src/renderer/components/dock/terminal/terminal.ts

@@ -11,7 +11,7 @@ import type { TabId } from "../dock/store";
 import { TerminalApi, TerminalChannels } from "../../../api/terminal-api";
 import { ThemeStore } from "../../../theme.store";
 import { disposer } from "../../../utils";
-import { isMac } from "../../../../common/vars";
+import { isMac, defaultTerminalFontFamily } from "../../../../common/vars";
 import { once } from "lodash";
 import { UserStore } from "../../../../common/user-store";
 import { clipboard } from "electron";
@@ -25,6 +25,14 @@ export class Terminal {
     return document.getElementById("terminal-init");
   }
 
+  static async preloadFonts() {
+    const fontPath = require("../../fonts/roboto-mono-nerd.ttf").default; // eslint-disable-line @typescript-eslint/no-var-requires
+    const fontFace = new FontFace(defaultTerminalFontFamily, `url(${fontPath})`);
+
+    await fontFace.load();
+    document.fonts.add(fontFace);
+  }
+
   private xterm: XTerm | null = new XTerm({
     cursorBlink: true,
     cursorStyle: "bar",

src/renderer/components/dock/upgrade-chart/view.tsx

@@ -15,7 +15,7 @@ import type { UpgradeChartTabStore } from "./store";
 import { Spinner } from "../../spinner";
 import { Badge } from "../../badge";
 import { EditorPanel } from "../editor-panel";
-import { helmChartStore, type IChartVersion } from "../../+helm-charts/helm-chart.store";
+import { helmChartStore, IChartVersion } from "../../+helm-charts/helm-chart.store";
 import type { HelmRelease, IReleaseUpdateDetails, IReleaseUpdatePayload } from "../../../../common/k8s-api/endpoints/helm-releases.api";
 import { Select, SelectOption } from "../../select";
 import { IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";

src/renderer/components/fonts.scss

@@ -13,8 +13,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./fonts/MaterialIcons-Regular.woff2") format("woff");
-  src: url("./fonts/MaterialIcons-Regular.ttf") format("truetype");
+  src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
 }
 
 // Patched RobotoMono font with icons
@@ -22,5 +21,6 @@
 // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
 @font-face {
   font-family: 'RobotoMono';
-  src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
+  src: local('RobotoMono'),
+  url('fonts/roboto-mono-nerd.ttf') format('truetype');
 }

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -47,7 +47,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
       return <Icon material="bug_report" className={className} />;
     }
 
-    if (Icon.isSvg(category.metadata.icon)) {
+    if (category.metadata.icon.includes("<svg")) {
       return <Icon svg={category.metadata.icon} className={className} />;
     } else {
       return <Icon material={category.metadata.icon} className={className} />;

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -12,7 +12,7 @@ import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { HotbarStore } from "../../../common/hotbar-store";
 import type { CatalogEntity } from "../../api/catalog-entity";
-import { DragDropContext, Draggable, Droppable, type DropResult } from "react-beautiful-dnd";
+import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
 import { HotbarSelector } from "./hotbar-selector";
 import { HotbarCell } from "./hotbar-cell";
 import { HotbarIcon } from "./hotbar-icon";

src/renderer/components/icon/icon.tsx

@@ -11,7 +11,6 @@ import type { LocationDescriptor } from "history";
 import { boundMethod, cssNames } from "../../utils";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber";
-import { decode } from "../../../common/utils/base64";
 
 export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   material?: string;          // material-icon, see available names at https://material.io/icons/
@@ -37,10 +36,6 @@ export class Icon extends React.PureComponent<IconProps> {
     focusable: true,
   };
 
-  static isSvg(content: string) {
-    return String(content).includes("svg+xml"); // data-url for raw svg-icon
-  }
-
   get isInteractive() {
     const { interactive, onClick, href, link } = this.props;
 
@@ -63,7 +58,7 @@ export class Icon extends React.PureComponent<IconProps> {
     switch (evt.nativeEvent.code) {
       case "Space":
 
-      // fallthrough
+        // fallthrough
       case "Enter": {
         this.ref.current?.click();
         evt.preventDefault();
@@ -103,12 +98,9 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (typeof svg === "string") {
-      const dataUrlPrefix = "data:image/svg+xml;base64,";
-      const svgIconDataUrl = svg.startsWith(dataUrlPrefix) ? svg : require(`./${svg}.svg`);
-      const svgIconText = typeof svgIconDataUrl == "string" // decode xml from data-url
-        ? decode(svgIconDataUrl.replace(dataUrlPrefix, "")) : "";
+      const svgIconText = svg.includes("<svg") ? svg : require(`!!raw-loader!./${svg}.svg`).default;
 
-      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }} />;
+      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
     }
 
     // render as material-icon
@@ -136,7 +128,7 @@ export class Icon extends React.PureComponent<IconProps> {
     }
 
     if (href) {
-      return <a {...iconProps} href={href} ref={this.ref} />;
+      return <a {...iconProps} href={href} ref={this.ref}/>;
     }
 
     return <i {...iconProps} ref={this.ref} />;

src/renderer/components/select/select.tsx

@@ -10,9 +10,8 @@ import "./select.scss";
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import ReactSelect, { components } from "react-select";
-import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
-import Creatable, { type CreatableProps } from "react-select/creatable";
+import ReactSelect, { ActionMeta, components, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
+import Creatable, { CreatableProps } from "react-select/creatable";
 
 import { ThemeStore } from "../../theme.store";
 import { boundMethod, cssNames } from "../../utils";

src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts

@@ -5,6 +5,7 @@
 import type { Cluster } from "../../../../common/cluster/cluster";
 import type { CatalogEntityRegistry } from "../../../api/catalog-entity-registry";
 import logger from "../../../../main/logger";
+import { Terminal } from "../../../components/dock/terminal/terminal";
 import type { KubernetesCluster } from "../../../../common/catalog-entities";
 import { Notifications } from "../../../components/notifications";
 import type { AppEvent } from "../../../../common/app-event-bus/event-bus";
@@ -39,6 +40,7 @@ export const initClusterFrame =
         `${logPrefix} Init dashboard, clusterId=${hostedCluster.id}, frameId=${frameRoutingId}`,
       );
 
+      await Terminal.preloadFonts();
       await requestSetClusterFrameId(hostedCluster.id);
       await hostedCluster.whenReady; // cluster.activate() is done at this point