Merge branch 'master' into dependabot/npm_and_yarn/eslint-plugin-reac…

…t-7.32.1

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

package.json

@@ -392,8 +392,8 @@
     "eslint": "^8.32.0",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.27.4",
-    "eslint-plugin-react": "7.32.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react": "7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "fork-ts-checker-webpack-plugin": "^6.5.2",

src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family.tsx

@@ -5,66 +5,30 @@
 import React from "react";
 import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { UserStore } from "../../../../../../common/user-store";
-import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable";
 import { observer } from "mobx-react";
-import type { SelectOption } from "../../../../../../renderer/components/select";
 import { Select } from "../../../../../../renderer/components/select";
-import type { Logger } from "../../../../../../common/logger";
-import { action } from "mobx";
-import loggerInjectable from "../../../../../../common/logger.injectable";
-import {
-  terminalFontsInjectable,
-} from "../../../../../../renderer/components/dock/terminal/terminal-fonts.injectable";
+import type { TerminalFontPreferencePresenter } from "./terminal-font-options.injectable";
+import terminalFontPreferencePresenterInjectable from "./terminal-font-options.injectable";
 
 interface Dependencies {
-  userStore: UserStore;
-  logger: Logger;
-  terminalFonts: Map<string, string>;
+  model: TerminalFontPreferencePresenter;
 }
 
-const NonInjectedTerminalFontFamily = observer(
-  ({ userStore, logger, terminalFonts }: Dependencies) => {
-    const bundledFonts: SelectOption<string>[] = Array.from(terminalFonts.keys()).map(font => {
-      const { fontFamily, fontSize } = userStore.terminalConfig;
-
-      return {
-        label: (
-          <span style={{ fontFamily: `${font}, var(--font-terminal)`, fontSize }}>
-            {font}
-          </span>
-        ),
-        value: font,
-        isSelected: fontFamily === font,
-      };
-    });
-
-    const onFontFamilyChange = action(({ value: fontFamily }: SelectOption<string>) => {
-      logger.info(`setting terminal font to ${fontFamily}`);
-
-      userStore.terminalConfig.fontFamily = fontFamily; // save to external storage
-    });
-
-
-    return (
-      <section>
-        <SubTitle title="Font family" />
-        <Select
-          themeName="lens"
-          controlShouldRenderValue
-          value={userStore.terminalConfig.fontFamily}
-          options={bundledFonts}
-          onChange={onFontFamilyChange as any}
-        />
-      </section>
-    );
-  },
-);
+const NonInjectedTerminalFontFamily = observer(({ model }: Dependencies) => (
+  <section>
+    <SubTitle title="Font family" />
+    <Select
+      themeName="lens"
+      controlShouldRenderValue
+      value={model.current.get()}
+      options={model.options.get()}
+      onChange={model.onSelection}
+    />
+  </section>
+));
 
 export const TerminalFontFamily = withInjectables<Dependencies>(NonInjectedTerminalFontFamily, {
   getProps: (di) => ({
-    userStore: di.inject(userStoreInjectable),
-    logger: di.inject(loggerInjectable),
-    terminalFonts: di.inject(terminalFontsInjectable),
+    model: di.inject(terminalFontPreferencePresenterInjectable),
   }),
 });

src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-options.injectable.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { IComputedValue } from "mobx";
+import { action, computed } from "mobx";
+import React from "react";
+import type { SingleValue } from "react-select";
+import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable";
+import { defaultTerminalFontFamily } from "../../../../../../common/vars";
+import type { SelectOption } from "../../../../../../renderer/components/select";
+import { terminalFontInjectionToken } from "../../../../../terminal/renderer/fonts/token";
+
+export interface TerminalFontPreferencePresenter {
+  readonly options: IComputedValue<SelectOption<string>[]>;
+  readonly current: IComputedValue<string>;
+  onSelection: (selection: SingleValue<SelectOption<string>>) => void;
+}
+
+const terminalFontPreferencePresenterInjectable = getInjectable({
+  id: "terminal-font-preference-presenter",
+  instantiate: (di): TerminalFontPreferencePresenter => {
+    const userStore = di.inject(userStoreInjectable);
+    const terminalFonts = di.injectMany(terminalFontInjectionToken);
+
+    return {
+      options: computed(() => terminalFonts.map(font => ({
+        label: (
+          <span
+            style={{
+              fontFamily: `${font.name}, var(--font-terminal)`,
+              fontSize: userStore.terminalConfig.fontSize,
+            }}
+          >
+            {font.name}
+          </span>
+        ),
+        value: font.name,
+        isSelected: userStore.terminalConfig.fontFamily === font.name,
+      }))),
+      current: computed(() => userStore.terminalConfig.fontFamily),
+      onSelection: action(selection => {
+        userStore.terminalConfig.fontFamily = selection?.value ?? defaultTerminalFontFamily;
+      }),
+    };
+  },
+});
+
+export default terminalFontPreferencePresenterInjectable;

src/features/terminal/renderer/fonts/anonymous-pro.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import AnonymousPro from "./AnonymousPro-Regular.ttf";
+
+const anonymousProTerminalFontInjectable = getInjectable({
+  id: "anonymous-pro-terminal-font",
+  instantiate: () => ({
+    name:"Anonymous Pro",
+    url: AnonymousPro,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default anonymousProTerminalFontInjectable;

src/features/terminal/renderer/fonts/fonts.injectable.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+
+const terminalFontsInjectable = getInjectable({
+  id: "terminal-fonts",
+  instantiate: (di) => di.injectMany(terminalFontInjectionToken),
+});
+
+export default terminalFontsInjectable;

src/features/terminal/renderer/fonts/ibm-plex-mono.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import IBMPlexMono from "./IBMPlexMono-Regular.ttf";
+
+const ibmPlexMonoTerminalFontInjectable = getInjectable({
+  id: "ibm-plex-mono-terminal-font",
+  instantiate: () => ({
+    name: "IBM Plex Mono",
+    url: IBMPlexMono,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default ibmPlexMonoTerminalFontInjectable;

src/features/terminal/renderer/fonts/jetbrains-mono.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import JetBrainsMono from "./JetBrainsMono-Regular.ttf";
+
+const jetbrainsMonoTerminalFontInjectable = getInjectable({
+  id: "jetbrains-mono-terminal-font",
+  instantiate: () => ({
+    name: "JetBrains Mono",
+    url: JetBrainsMono,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default jetbrainsMonoTerminalFontInjectable;

src/renderer/components/dock/terminal/terminal-fonts.global-override-for-injectable.ts → src/features/terminal/renderer/fonts/load-font.global-override-for-injectable.ts

@@ -2,13 +2,8 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
+
 import { getGlobalOverride } from "../../../../common/test-utils/get-global-override";
-import { preloadAllTerminalFontsInjectable } from "./terminal-fonts.injectable";
+import loadTerminalFontInjectable from "./load-font.injectable";
 
-export default getGlobalOverride(preloadAllTerminalFontsInjectable, () => {
-  return {
-    id: "",
-    async run() {
-    },
-  };
-});
+export default getGlobalOverride(loadTerminalFontInjectable, () => async () => {});

src/features/terminal/renderer/fonts/load-font.injectable.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 { TerminalFont } from "./token";
+
+export type LoadTerminalFont = (font: TerminalFont) => Promise<void>;
+
+const loadTerminalFontInjectable = getInjectable({
+  id: "load-terminal-font",
+  instantiate: (): LoadTerminalFont => async (font) => {
+    const fontLoaded = document.fonts.check(`10px ${font.name}`);
+
+    if (fontLoaded) {
+      return;
+    }
+
+    const fontFace = new FontFace(font.name, `url(${font.url})`);
+
+    document.fonts.add(fontFace);
+    await fontFace.load();
+  },
+  causesSideEffects: true,
+});
+
+export default loadTerminalFontInjectable;

src/features/terminal/renderer/fonts/preload-fonts.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 { beforeFrameStartsFirstInjectionToken } from "../../../../renderer/before-frame-starts/tokens";
+import terminalFontsInjectable from "./fonts.injectable";
+import loadTerminalFontInjectable from "./load-font.injectable";
+
+const preloadTerminalFontsInjectable = getInjectable({
+  id: "preload-terminal-fonts",
+  instantiate: (di) => ({
+    id: "preload-terminal-fonts",
+    run: async () => {
+      const terminalFonts = di.inject(terminalFontsInjectable);
+      const loadTerminalFont = di.inject(loadTerminalFontInjectable);
+
+      await Promise.allSettled(terminalFonts.map(loadTerminalFont));
+    },
+  }),
+  injectionToken: beforeFrameStartsFirstInjectionToken,
+});
+
+export default preloadTerminalFontsInjectable;

src/features/terminal/renderer/fonts/red-hat-mono.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import RedHatMono from "./RedHatMono-Regular.ttf";
+
+const redHatMonoTerminalFontInjectable = getInjectable({
+  id: "red-hat-mono-terminal-font",
+  instantiate: () => ({
+    name: "Red Hat Mono",
+    url: RedHatMono,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default redHatMonoTerminalFontInjectable;

src/features/terminal/renderer/fonts/roboto-mono.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import RobotoMono from "./Roboto-Mono.ttf"; // patched font with icons
+
+const robotoMonoTerminalFontInjectable = getInjectable({
+  id: "roboto-mono-terminal-font",
+  instantiate: () => ({
+    name: "RobotoMono",
+    url: RobotoMono,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default robotoMonoTerminalFontInjectable;

src/features/terminal/renderer/fonts/source-code-pro.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import SourceCodePro from "./SourceCodePro-Regular.ttf";
+
+const sourceCodeProTerminalFontInjectable = getInjectable({
+  id: "source-code-pro-terminal-font",
+  instantiate: () => ({
+    name: "Source Code Pro",
+    url: SourceCodePro,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default sourceCodeProTerminalFontInjectable;

src/features/terminal/renderer/fonts/space-mono.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import SpaceMono from "./SpaceMono-Regular.ttf";
+
+const spaceMonoTerminalFontInjectable = getInjectable({
+  id: "space-mono-terminal-font",
+  instantiate: () => ({
+    name: "Space Mono",
+    url: SpaceMono,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default spaceMonoTerminalFontInjectable;

src/features/terminal/renderer/fonts/token.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectionToken } from "@ogre-tools/injectable";
+
+export interface TerminalFont {
+  name: string;
+  url: string;
+}
+
+export const terminalFontInjectionToken = getInjectionToken<TerminalFont>({
+  id: "terminal-font-token",
+});

src/features/terminal/renderer/fonts/ubuntu-mono.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { terminalFontInjectionToken } from "./token";
+import UbuntuMono from "./UbuntuMono-Regular.ttf";
+
+const ubunutuMonoTerminalFontInjectable = getInjectable({
+  id: "ubunutu-mono-terminal-font",
+  instantiate: () => ({
+    name: "Ubuntu Mono",
+    url: UbuntuMono,
+  }),
+  injectionToken: terminalFontInjectionToken,
+});
+
+export default ubunutuMonoTerminalFontInjectable;