Introduce competition for editor preference tab

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/features/preferences/renderer/preference-items/editor/editor-font-family/editor-font-family-preference-item.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+import { EditorFontFamily } from "./editor-font-family";
+
+const editorFontFamilyPreferenceItemInjectable = getInjectable({
+  id: "editor-font-family-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "editor-font-family",
+    parentId: "editor-page",
+    orderNumber: 50,
+    Component: EditorFontFamily,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default editorFontFamilyPreferenceItemInjectable;

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+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 { Input } from "../../../../../../renderer/components/input";
+import { observer } from "mobx-react";
+
+interface Dependencies {
+  userStore: UserStore;
+}
+
+const NonInjectedEditorFontFamily = observer(({ userStore: { editorConfiguration }}: Dependencies) => (
+  <section>
+    <SubTitle title="Font family" />
+    <Input
+      theme="round-black"
+      type="text"
+      value={editorConfiguration.fontFamily}
+      onChange={value => editorConfiguration.fontFamily = value}
+    />
+  </section>
+));
+
+export const EditorFontFamily = withInjectables<Dependencies>(
+  NonInjectedEditorFontFamily,
+
+  {
+    getProps: (di) => ({
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);

src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size-preference-item.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+import { EditorFontSize } from "./editor-font-size";
+
+const editorFontSizePreferenceItemInjectable = getInjectable({
+  id: "editor-font-size-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "editor-font-size",
+    parentId: "editor-page",
+    orderNumber: 40,
+    Component: EditorFontSize,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default editorFontSizePreferenceItemInjectable;

src/features/preferences/renderer/preference-items/editor/editor-font-size/editor-font-size.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+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 { Input, InputValidators } from "../../../../../../renderer/components/input";
+import { observer } from "mobx-react";
+
+interface Dependencies {
+  userStore: UserStore;
+}
+
+const NonInjectedEditorFontSize = observer(({ userStore: { editorConfiguration }}: Dependencies) => (
+  <section>
+    <SubTitle title="Font size" />
+    <Input
+      theme="round-black"
+      type="number"
+      min={10}
+      validators={InputValidators.isNumber}
+      value={editorConfiguration.fontSize.toString()}
+      onChange={value => editorConfiguration.fontSize = Number(value)}
+    />
+  </section>
+));
+
+export const EditorFontSize = withInjectables<Dependencies>(
+  NonInjectedEditorFontSize,
+
+  {
+    getProps: (di) => ({
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);

src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { preferenceItemInjectionToken } from "../preference-item-injection-token";
+import { EditorPreferencePage } from "./editor-preference-page";
+
+const editorPreferencePageInjectable = getInjectable({
+  id: "editor-preference-page",
+
+  instantiate: () => ({
+    kind: "page" as const,
+    id: "editor-page",
+    parentId: "editor-tab",
+    orderNumber: 0,
+    Component: EditorPreferencePage,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default editorPreferencePageInjectable;

src/features/preferences/renderer/preference-items/editor/editor-preference-page.tsx

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import type { PreferenceItemComponent } from "../preference-item-injection-token";
+
+export const EditorPreferencePage: PreferenceItemComponent = ({ children }) => (
+  <div>
+    <h2 data-testid="editor-configuration-header">Editor configuration</h2>
+
+    {children}
+  </div>
+);

src/features/preferences/renderer/preference-items/editor/editor-preference-tab.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 { preferenceItemInjectionToken } from "../preference-item-injection-token";
+
+const editorPreferenceTabInjectable = getInjectable({
+  id: "editor-preference-tab",
+
+  instantiate: () => ({
+    kind: "tab" as const,
+    id: "editor-tab",
+    parentId: "preference-tabs" as const,
+    pathId: "editor",
+    testId: "editor-preferences-page",
+    label: "Editor",
+    orderNumber: 30,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default editorPreferenceTabInjectable;

src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers-preference-item.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+import { LineNumbers } from "./line-numbers";
+
+const lineNumbersPreferenceItemInjectable = getInjectable({
+  id: "line-numbers-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "line-numbers",
+    parentId: "editor-page",
+    orderNumber: 20,
+    Component: LineNumbers,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default lineNumbersPreferenceItemInjectable;

src/features/preferences/renderer/preference-items/editor/line-numbers/line-numbers.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+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 { Select } from "../../../../../../renderer/components/select";
+import { defaultEditorConfig } from "../../../../../../common/user-store/preferences-helpers";
+import { capitalize } from "lodash/fp";
+import { observer } from "mobx-react";
+
+interface Dependencies {
+  userStore: UserStore;
+}
+
+const lineNumberOptions = ([
+  "on",
+  "off",
+  "relative",
+  "interval",
+] as const).map(lineNumbers => ({
+  value: lineNumbers,
+  label: capitalize(lineNumbers),
+}));
+
+const NonInjectedLineNumbers = observer(({ userStore: { editorConfiguration }}: Dependencies) => (
+  <section>
+    <SubTitle title="Line numbers"/>
+    <Select
+      id="editor-line-numbers-input"
+      options={lineNumberOptions}
+      value={editorConfiguration.lineNumbers}
+      onChange={option => editorConfiguration.lineNumbers = option?.value ?? defaultEditorConfig.lineNumbers}
+      themeName="lens"
+    />
+  </section>
+
+));
+
+export const LineNumbers = withInjectables<Dependencies>(
+  NonInjectedLineNumbers,
+
+  {
+    getProps: (di) => ({
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);

src/features/preferences/renderer/preference-items/editor/minimap/minimap-preference-item.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+import { Minimap } from "./minimap";
+
+const minimapPreferenceItemInjectable = getInjectable({
+  id: "minimap-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "minimap",
+    parentId: "editor-page",
+    orderNumber: 10,
+    Component: Minimap,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default minimapPreferenceItemInjectable;

src/features/preferences/renderer/preference-items/editor/minimap/minimap.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+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 { Switch } from "../../../../../../renderer/components/switch";
+import { SubHeader } from "../../../../../../renderer/components/layout/sub-header";
+import { Select } from "../../../../../../renderer/components/select";
+import { observer } from "mobx-react";
+
+interface Dependencies {
+  userStore: UserStore;
+}
+
+const minimapPositionOptions = (["left", "right"] as const)
+  .map(side => ({
+    value: side,
+    label: side,
+  }));
+
+
+const NonInjectedMinimap = observer(({ userStore: { editorConfiguration }}: Dependencies) => (
+  <section>
+    <SubTitle title="Minimap"/>
+
+    <div className="flex gaps justify-space-between">
+      <div className="flex gaps align-center">
+        <Switch
+          checked={editorConfiguration.minimap.enabled}
+          onChange={() => editorConfiguration.minimap.enabled = !editorConfiguration.minimap.enabled}
+        >
+          Show minimap
+        </Switch>
+      </div>
+      <div className="flex gaps align-center">
+        <SubHeader compact>Position</SubHeader>
+        <Select
+          id="minimap-input"
+          themeName="lens"
+          options={minimapPositionOptions}
+          value={editorConfiguration.minimap.side}
+          onChange={option => editorConfiguration.minimap.side = option?.value}
+        />
+      </div>
+    </div>
+  </section>
+));
+
+export const Minimap = withInjectables<Dependencies>(
+  NonInjectedMinimap,
+
+  {
+    getProps: (di) => ({
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);

src/features/preferences/renderer/preference-items/editor/tab-size/tab-size-preference-item.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { preferenceItemInjectionToken } from "../../preference-item-injection-token";
+import { TabSize } from "./tab-size";
+
+const tabSizePreferenceItemInjectable = getInjectable({
+  id: "tab-size-preference-item",
+
+  instantiate: () => ({
+    kind: "item" as const,
+    id: "tab-size",
+    parentId: "editor-page",
+    orderNumber: 30,
+    Component: TabSize,
+  }),
+
+  injectionToken: preferenceItemInjectionToken,
+});
+
+export default tabSizePreferenceItemInjectable;

src/features/preferences/renderer/preference-items/editor/tab-size/tab-size.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+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 { Input, InputValidators } from "../../../../../../renderer/components/input";
+import { observer } from "mobx-react";
+
+interface Dependencies {
+  userStore: UserStore;
+}
+
+const NonInjectedTabSize = observer(({ userStore: { editorConfiguration }}: Dependencies) => (
+  <section>
+    <SubTitle title="Tab size" />
+    <Input
+      theme="round-black"
+      type="number"
+      min={1}
+      validators={InputValidators.isNumber}
+      value={editorConfiguration.tabSize.toString()}
+      onChange={value => editorConfiguration.tabSize = Number(value)}
+    />
+  </section>
+));
+
+export const TabSize = withInjectables<Dependencies>(
+  NonInjectedTabSize,
+
+  {
+    getProps: (di) => ({
+      userStore: di.inject(userStoreInjectable),
+    }),
+  },
+);