Replace usages of react-component factory with actual components for simplicity

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>

src/features/preferences/renderer/compliance-for-legacy-extension-api/registrator-for-preference-items.injectable.tsx

@@ -7,7 +7,7 @@ import { getInjectable } from "@ogre-tools/injectable";
 import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
 import { preferenceItemInjectionToken } from "../preference-items/preference-item-injection-token";
 import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
-import { getPreferencePage } from "../get-preference-page";
+import { PreferencePageComponent } from "../preference-page-component";
 import { ExtensionPreferenceItem } from "./extension-preference-item";
 import { computed } from "mobx";
 
@@ -35,16 +35,24 @@ const registratorForPreferenceItemsInjectable = getInjectable({
       injectionToken: preferenceItemInjectionToken,
     });
 
-    const pageId = `${commonId}-page`;
+    const primaryPageId = `${commonId}-page`;
     const primaryPageInjectable = getInjectable({
-      id: pageId,
+      id: primaryPageId,
 
       instantiate: () => ({
         kind: "page" as const,
-        id: pageId,
+        id: primaryPageId,
         parentId: tabId,
-        orderNumber: 0,
-        Component: getPreferencePage(`${extension.name} preferences`),
+
+        Component: ({ children }: { children: React.ReactElement }) => (
+          <PreferencePageComponent
+            id={primaryPageId}
+            title={`${extension.name} preferences`}
+          >
+            {children}
+          </PreferencePageComponent>
+        ),
+
         childrenSeparator: () => <hr />,
       }),
 
@@ -85,7 +93,15 @@ const registratorForPreferenceItemsInjectable = getInjectable({
             kind: "page" as const,
             id: additionalPageId,
             parentId: additionalTabId,
-            Component: getPreferencePage(registration.title),
+
+            Component: ({ children }: { children: React.ReactElement }) => (
+              <PreferencePageComponent
+                id={additionalPageId}
+                title={registration.title}
+              >
+                {children}
+              </PreferencePageComponent>
+            ),
           }),
 
           injectionToken: preferenceItemInjectionToken,
@@ -108,7 +124,7 @@ const registratorForPreferenceItemsInjectable = getInjectable({
             ? registration.showInPreferencesTab === "telemetry"
               ? "telemetry-page"
               : `${commonId}-additional-page-${registration.showInPreferencesTab}`
-            : pageId,
+            : primaryPageId,
 
           orderNumber: i * 10,
 

src/features/preferences/renderer/get-preference-page.tsx

@@ -1,17 +0,0 @@
-/**
- * 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,
-  PreferencePage,
-} from "./preference-items/preference-item-injection-token";
-
-export const getPreferencePage = (label: string): PreferenceItemComponent<PreferencePage> => ({ children, item }) => (
-  <section id={item.id} data-preference-page-test={item.id}>
-    <h2 data-preference-page-title-test={true}>{label}</h2>
-
-    {children}
-  </section>
-);

src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx

@@ -3,9 +3,17 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { PreferenceItemComponent, PreferencePage } from "../preference-item-injection-token";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { getPreferencePage } from "../../get-preference-page";
+import { PreferencePageComponent } from "../../preference-page-component";
 import { HorizontalLine } from "../../horizontal-line/horizontal-line";
+import React from "react";
+
+const ApplicationPage: PreferenceItemComponent<PreferencePage> = ({ children, item }) => (
+  <PreferencePageComponent title="Application" id={item.id}>
+    {children}
+  </PreferencePageComponent>
+);
 
 const applicationPreferencePageInjectable = getInjectable({
   id: "application-preference-page",
@@ -14,8 +22,7 @@ const applicationPreferencePageInjectable = getInjectable({
     kind: "page" as const,
     id: "application-page",
     parentId: "application-tab",
-    orderNumber: 0,
-    Component: getPreferencePage("Application"),
+    Component: ApplicationPage,
     childrenSeparator: HorizontalLine,
   }),
 

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

@@ -3,8 +3,16 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { PreferenceItemComponent, PreferencePage } from "../preference-item-injection-token";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { getPreferencePage } from "../../get-preference-page";
+import { PreferencePageComponent } from "../../preference-page-component";
+import React from "react";
+
+const EditorPage: PreferenceItemComponent<PreferencePage> = ({ children, item }) => (
+  <PreferencePageComponent title="Editor" id={item.id}>
+    {children}
+  </PreferencePageComponent>
+);
 
 const editorPreferencePageInjectable = getInjectable({
   id: "editor-preference-page",
@@ -13,8 +21,7 @@ const editorPreferencePageInjectable = getInjectable({
     kind: "page" as const,
     id: "editor-page",
     parentId: "editor-tab",
-    orderNumber: 0,
-    Component: getPreferencePage("Editor"),
+    Component: EditorPage,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx

@@ -3,9 +3,17 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { PreferenceItemComponent, PreferencePage } from "../preference-item-injection-token";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { getPreferencePage } from "../../get-preference-page";
+import { PreferencePageComponent } from "../../preference-page-component";
 import { HorizontalLine } from "../../horizontal-line/horizontal-line";
+import React from "react";
+
+const KubernetesPage: PreferenceItemComponent<PreferencePage> = ({ children, item }) => (
+  <PreferencePageComponent title="Kubernetes" id={item.id}>
+    {children}
+  </PreferencePageComponent>
+);
 
 const kubernetesPreferencePageInjectable = getInjectable({
   id: "kubernetes-preference-page",
@@ -14,8 +22,7 @@ const kubernetesPreferencePageInjectable = getInjectable({
     kind: "page" as const,
     id: "kubernetes-page",
     parentId: "kubernetes-tab",
-    orderNumber: 0,
-    Component: getPreferencePage("Kubernetes"),
+    Component: KubernetesPage,
     childrenSeparator: HorizontalLine,
   }),
 

src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx

@@ -3,11 +3,18 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { PreferenceItemComponent, PreferencePage } from "../preference-item-injection-token";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import React from "react";
-import { getPreferencePage } from "../../get-preference-page";
+import { PreferencePageComponent } from "../../preference-page-component";
 import { HorizontalLine } from "../../horizontal-line/horizontal-line";
 
+const ProxyPage: PreferenceItemComponent<PreferencePage> = ({ children, item }) => (
+  <PreferencePageComponent title="Proxy" id={item.id}>
+    {children}
+  </PreferencePageComponent>
+);
+
 const proxyPreferencePageInjectable = getInjectable({
   id: "proxy-preference-page",
 
@@ -15,8 +22,7 @@ const proxyPreferencePageInjectable = getInjectable({
     kind: "page" as const,
     id: "proxy-page",
     parentId: "proxy-tab",
-    orderNumber: 0,
-    Component: getPreferencePage("Proxy"),
+    Component: ProxyPage,
     childrenSeparator: () => <HorizontalLine small />,
   }),
 

src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx

@@ -3,9 +3,16 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { PreferenceItemComponent, PreferencePage } from "../preference-item-injection-token";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import React from "react";
-import { getPreferencePage } from "../../get-preference-page";
+import { PreferencePageComponent } from "../../preference-page-component";
+
+const TelemetryPage: PreferenceItemComponent<PreferencePage> = ({ children, item }) => (
+  <PreferencePageComponent title="Telemetry" id={item.id}>
+    {children}
+  </PreferencePageComponent>
+);
 
 const telemetryPreferencePageInjectable = getInjectable({
   id: "telemetry-preference-page",
@@ -14,8 +21,7 @@ const telemetryPreferencePageInjectable = getInjectable({
     kind: "page" as const,
     id: "telemetry-page",
     parentId: "telemetry-tab",
-    orderNumber: 0,
-    Component: getPreferencePage("Telemetry"),
+    Component: TelemetryPage,
     childrenSeparator: () => <hr className="small" />,
   }),
 

src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx

@@ -3,8 +3,16 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { PreferenceItemComponent, PreferencePage } from "../preference-item-injection-token";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
-import { getPreferencePage } from "../../get-preference-page";
+import { PreferencePageComponent } from "../../preference-page-component";
+import React from "react";
+
+const TerminalPage: PreferenceItemComponent<PreferencePage> = ({ children, item }) => (
+  <PreferencePageComponent title="Terminal" id={item.id}>
+    {children}
+  </PreferencePageComponent>
+);
 
 const terminalPagePreferenceItemInjectable = getInjectable({
   id: "terminal-preference-page",
@@ -13,8 +21,7 @@ const terminalPagePreferenceItemInjectable = getInjectable({
     kind: "page" as const,
     id: "terminal-page",
     parentId: "terminal-tab",
-    orderNumber: 0,
-    Component: getPreferencePage("Terminal"),
+    Component: TerminalPage,
   }),
 
   injectionToken: preferenceItemInjectionToken,

src/features/preferences/renderer/preference-page-component.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+
+interface PreferencePageComponentProps {
+  children: React.ReactElement;
+  id: string;
+  title: string;
+}
+
+export const PreferencePageComponent = ({ children, id, title }: PreferencePageComponentProps ) => (
+  <section id={id} data-preference-page-test={id}>
+    <h2 data-preference-page-title-test={true}>{title}</h2>
+
+    {children}
+  </section>
+);