Dereference Extensions getProps() inner contents

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

src/renderer/components/+preferences/extension-preference-model.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 { computed } from "mobx";
+import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
+import currentPathParametersInjectable from "../../routes/current-path-parameters.injectable";
+import { getExtensionPreferenceItems } from "./get-extension-preference-items";
+
+export const extensionPreferencesModelInjectable = getInjectable({
+  id: "extension-preferences-model",
+
+  instantiate: (di) => {
+    const pathParameters = di.inject(currentPathParametersInjectable);
+    const extensions = di.inject(rendererExtensionsInjectable);
+      
+    return computed(() => {
+      const { extensionId, tabId } = pathParameters.get();
+      const targetExtension = extensions.get().find((extension) => extension.sanitizedExtensionId === extensionId);
+      
+      if (!targetExtension) {
+        throw new Error('Tried to get extension preferences for extension that does not exist.')
+      }
+      
+      return {
+        extensionName: targetExtension.manifest.name,
+        preferenceItems: getExtensionPreferenceItems(targetExtension, tabId)
+      }
+    });
+  }
+});

src/renderer/components/+preferences/extensions.tsx

@@ -4,19 +4,16 @@
  */
 
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { IComputedValue } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
+import { extensionPreferencesModelInjectable } from "./extension-preference-model.injectable";
 import { ExtensionSettings } from "./extension-settings";
 import { Preferences } from "./preferences";
-import extensionsPreferenceItemsInjectable from "./extension-preference-items.injectable";
-import currentPathParametersInjectable from "../../routes/current-path-parameters.injectable";
-import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
 
 interface Dependencies {
-  preferenceItems: IComputedValue<RegisteredAppPreference[]>;
+  preferenceItems: RegisteredAppPreference[];
-  extensionName?: string;
+  extensionName: string;
 }
 
 const NonInjectedExtensions = ({ preferenceItems, extensionName }: Dependencies) => (
@@ -27,10 +24,7 @@ const NonInjectedExtensions = ({ preferenceItems, extensionName }: Dependencies)
         {" "}
         preferences
       </h2>
-      {!extensionName && (
+      {preferenceItems.map((preferenceItem, index) => (
-        <div className="flex items-center">No extension found</div>
-      )}
-      {preferenceItems.get().map((preferenceItem, index) => (
         <ExtensionSettings
           key={`${preferenceItem.id}-${index}`}
           setting={preferenceItem}
@@ -47,14 +41,11 @@ export const Extensions = withInjectables<Dependencies>(
 
   {
     getProps: (di) => {
-      const pathParameters = di.inject(currentPathParametersInjectable);
+      const { preferenceItems, extensionName } = di.inject(extensionPreferencesModelInjectable).get();
-      const extensionId = pathParameters.get().extensionId;
-      const extensions = di.inject(rendererExtensionsInjectable);
-      const extension = extensions.get().find((extension) => extension.sanitizedExtensionId === extensionId);
 
       return {
-        preferenceItems: di.inject(extensionsPreferenceItemsInjectable, pathParameters),
+        preferenceItems,
-        extensionName: extension?.manifest.name,
+        extensionName,
       };
     },
   },

src/renderer/components/+preferences/get-extension-preference-items.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
+import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
+
+export function getExtensionPreferenceItems(extension: LensRendererExtension, tabId?: string): RegisteredAppPreference[] {
+  const preferences = extension.appPreferences.map(preference => ({
+    id: preference.id || preference.title,
+    ...preference,
+  }));
+
+  if (tabId) {
+    return preferences.filter(preference => preference.showInPreferencesTab == tabId);
+  }
+
+  return preferences.filter(preference => !preference.showInPreferencesTab);
+}