Add ability from extension to add preferences to application preferences (#4579)

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

@@ -30,6 +30,8 @@ import { isWindows } from "../../../common/vars";
 import { FormSwitch, Switcher } from "../switch";
 import moment from "moment-timezone";
 import { CONSTANTS } from "../../../common/user-store/preferences-helpers";
+import { AppPreferenceRegistry } from "../../../extensions/registries";
+import { ExtensionSettings } from "./extension-settings";
 
 const timezoneOptions: SelectOption<string>[] = moment.tz.names().map(zone => ({
   label: zone,
@@ -50,6 +52,7 @@ export const Application = observer(() => {
     );
 
   const [shell, setShell] = React.useState(UserStore.getInstance().shell || "");
+  const extensionSettings = AppPreferenceRegistry.getInstance().getItems().filter((preference) => preference.showInPreferencesTab === "application");
 
   return (
     <section id="application">
@@ -109,6 +112,10 @@ export const Application = observer(() => {
 
       <hr />
 
+      {extensionSettings.map(setting => (
+        <ExtensionSettings key={setting.id} setting={setting} size="normal" />
+      ))}
+
       <section id="update-channel">
         <SubTitle title="Update Channel"/>
         <Select

src/renderer/components/+preferences/extension-settings.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { SubTitle } from "../layout/sub-title";
+import type { RegisteredAppPreference } from "../../../extensions/registries/app-preference-registry";
+import React from "react";
+import { cssNames } from "../../../renderer/utils";
+
+interface ExtensionSettingsProps {
+  setting: RegisteredAppPreference;
+  size: "small" | "normal"
+}
+
+export function ExtensionSettings({ setting, size }: ExtensionSettingsProps) {
+  const {
+    title,
+    id,
+    components: { Hint, Input },
+  } = setting;
+
+  return (
+    <React.Fragment>
+      <section id={id} className={cssNames(size)}>
+        <SubTitle title={title} />
+        <Input />
+        <div className="hint">
+          <Hint />
+        </div>
+      </section>
+      <hr className={cssNames(size)} />
+    </React.Fragment>
+  );
+}

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

@@ -22,16 +22,16 @@
 import { observer } from "mobx-react";
 import React from "react";
 import { AppPreferenceRegistry } from "../../../extensions/registries";
-import { ExtensionSettings } from "./preferences";
+import { ExtensionSettings } from "./extension-settings";
 
 export const Extensions = observer(() => {
-  const extensions = AppPreferenceRegistry.getInstance().getItems();
+  const settings = AppPreferenceRegistry.getInstance().getItems();
 
   return (
     <section id="extensions">
       <h2>Extensions</h2>
-      {extensions.filter(e => !e.showInPreferencesTab).map((extension) =>
-        <ExtensionSettings key={extension.id} {...extension}/>,
+      {settings.filter(e => !e.showInPreferencesTab).map((setting) =>
+        <ExtensionSettings key={setting.id} setting={setting} size="small" />,
       )}
     </section>
   );

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

@@ -24,7 +24,6 @@ import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { matchPath, Redirect, Route, RouteProps, Switch } from "react-router";
-
 import {
   appRoute,
   appURL,
@@ -40,10 +39,9 @@ import {
   telemetryRoute,
   telemetryURL,
 } from "../../../common/routes";
-import { AppPreferenceRegistry, RegisteredAppPreference } from "../../../extensions/registries/app-preference-registry";
+import { AppPreferenceRegistry } from "../../../extensions/registries/app-preference-registry";
 import { navigateWithoutHistoryChange, navigation } from "../../navigation";
 import { SettingLayout } from "../layout/setting-layout";
-import { SubTitle } from "../layout/sub-title";
 import { Tab, Tabs } from "../tabs";
 import { Application } from "./application";
 import { Kubernetes } from "./kubernetes";
@@ -105,18 +103,3 @@ export class Preferences extends React.Component {
     );
   }
 }
-
-export function ExtensionSettings({ title, id, components: { Hint, Input }}: RegisteredAppPreference) {
-  return (
-    <React.Fragment>
-      <section id={id} className="small">
-        <SubTitle title={title}/>
-        <Input/>
-        <div className="hint">
-          <Hint/>
-        </div>
-      </section>
-      <hr className="small"/>
-    </React.Fragment>
-  );
-}

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

@@ -25,7 +25,7 @@ import { sentryDsn } from "../../../common/vars";
 import { AppPreferenceRegistry } from "../../../extensions/registries";
 import { Checkbox } from "../checkbox";
 import { SubTitle } from "../layout/sub-title";
-import { ExtensionSettings } from "./preferences";
+import { ExtensionSettings } from "./extension-settings";
 
 export const Telemetry = observer(() => {
   const extensions = AppPreferenceRegistry.getInstance().getItems();
@@ -34,7 +34,7 @@ export const Telemetry = observer(() => {
   return (
     <section id="telemetry">
       <h2 data-testid="telemetry-header">Telemetry</h2>
-      {telemetryExtensions.map((extension) => <ExtensionSettings key={extension.id} {...extension}/>)}
+      {telemetryExtensions.map((extension) => <ExtensionSettings key={extension.id} setting={extension} size="small" />)}
       {sentryDsn ? (
         <React.Fragment key='sentry'>
           <section id='sentry' className="small">