Create a telemetry tab with extensions

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

extensions/survey/renderer.tsx

@@ -8,6 +8,7 @@ export default class SurveyRendererExtension extends LensRendererExtension {
   appPreferences = [
     {
       title: "In-App Surveys",
+      showInPreferencesTab: "telemetry",
       components: {
         Hint: () => <SurveyPreferenceHint/>,
         Input: () => <SurveyPreferenceInput survey={surveyPreferencesStore}/>

extensions/telemetry/renderer.tsx

@@ -8,6 +8,7 @@ export default class TelemetryRendererExtension extends LensRendererExtension {
   appPreferences = [
     {
       title: "Telemetry & Usage Tracking",
+      showInPreferencesTab: "telemetry",
       id: "telemetry-tracking",
       components: {
         Hint: () => <TelemetryPreferenceHint/>,

src/extensions/registries/app-preference-registry.ts

@@ -9,6 +9,7 @@ export interface AppPreferenceComponents {
 export interface AppPreferenceRegistration {
   title: string;
   id?: string;
+  showInPreferencesTab?: string;
   components: AppPreferenceComponents;
 }
 

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

@@ -6,7 +6,7 @@ import { disposeOnUnmount, observer } from "mobx-react";
 
 import { userStore } from "../../../common/user-store";
 import { isWindows } from "../../../common/vars";
-import { appPreferenceRegistry } from "../../../extensions/registries/app-preference-registry";
+import { appPreferenceRegistry, RegisteredAppPreference } from "../../../extensions/registries/app-preference-registry";
 import { themeStore } from "../../theme.store";
 import { Input } from "../input";
 import { PageLayout } from "../layout/page-layout";
@@ -22,6 +22,7 @@ enum PreferencesTab {
   Application = "application",
   Proxy = "proxy",
   Kubernetes = "kubernetes",
+  Telemetry = "telemetry",
   Extensions = "extensions",
   Other = "other"
 }
@@ -59,6 +60,8 @@ export class Preferences extends React.Component {
   };
 
   renderNavigation() {
+    const extensions = appPreferenceRegistry.getItems().filter(e => !e.showInPreferencesTab);
+
     return (
       <Tabs className="flex column" scrollable={false} onChange={this.onTabChange}>
         <div className="header">Preferences</div>
@@ -77,11 +80,18 @@ export class Preferences extends React.Component {
           label="Kubernetes"
           active={this.activeTab == PreferencesTab.Kubernetes}
         />
+        <Tab
+          value={PreferencesTab.Telemetry}
+          label="Telemetry"
+          active={this.activeTab == PreferencesTab.Telemetry}
+        />
+        {extensions.length > 0 &&
           <Tab
             value={PreferencesTab.Extensions}
             label="Extensions"
             active={this.activeTab == PreferencesTab.Extensions}
           />
+        }
         <Tab
           value={PreferencesTab.Other}
           label="Other"
@@ -91,8 +101,25 @@ export class Preferences extends React.Component {
     );
   }
 
+  renderExtension({ title, id, components: { Hint, Input } }: RegisteredAppPreference) {
+    return (
+      <React.Fragment key={id}>
+        <section id={id} className="small">
+          <SubTitle title={title}/>
+          <Input/>
+          <div className="hint">
+            <Hint/>
+          </div>
+        </section>
+        <hr className="small"/>
+      </React.Fragment>
+    );
+  }
+
   render() {
     const { preferences } = userStore;
+    const extensions = appPreferenceRegistry.getItems();
+    const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == PreferencesTab.Telemetry);
     let defaultShell = process.env.SHELL || process.env.PTYSHELL;
 
     if (!defaultShell) {
@@ -190,23 +217,17 @@ export class Preferences extends React.Component {
           </section>
         )}
 
+        {this.activeTab == PreferencesTab.Telemetry && (
+          <section id="telemetry">
+            <h2>Telemetry</h2>
+            {telemetryExtensions.map(this.renderExtension)}
+          </section>
+        )}
+
         {this.activeTab == PreferencesTab.Extensions && (
           <section id="extensions">
             <h2>Extensions</h2>
-            {appPreferenceRegistry.getItems().map(({ title, id, components: { Hint, Input } }) => {
+            {extensions.filter(e => !e.showInPreferencesTab).map(this.renderExtension)}
-              return (
-                <>
-                  <section key={id} id={title} className="small">
-                    <SubTitle title={title}/>
-                    <Input/>
-                    <div className="hint">
-                      <Hint/>
-                    </div>
-                  </section>
-                  <hr className="small"/>
-                </>
-              );
-            })}
           </section>
         )}