Add Install Extensions page

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

src/common/routes/preferences.ts

@@ -37,6 +37,11 @@ export const extensionRoute: RouteProps = {
 export const terminalRoute: RouteProps = {
   path: `${preferencesRoute.path}/terminal`,
 };
+
+export const installRoute: RouteProps = {
+  path: `${preferencesRoute.path}/install`,
+};
+
 export const preferencesURL = buildURL(preferencesRoute.path);
 export const appURL = buildURL(appRoute.path);
 export const proxyURL = buildURL(proxyRoute.path);
@@ -45,3 +50,4 @@ export const editorURL = buildURL(editorRoute.path);
 export const telemetryURL = buildURL(telemetryRoute.path);
 export const extensionURL = buildURL(extensionRoute.path);
 export const terminalURL = buildURL(terminalRoute.path);
+export const installURL = buildURL(installRoute.path);

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { Icon } from "../icon";
+import { SearchInput } from "../input";
+
+export function Install() {
+  return (
+    <section>
+      <h2><Icon material="add"/> Install Extensions</h2>
+
+      <div className="mt-4">
+        <SearchInput/>
+      </div>
+
+      <div className="mx-7">
+        <hr />
+      </div>
+
+      <h2><Icon material="star"/> Featured Extensions</h2>
+    </section>
+  );
+}

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

@@ -24,6 +24,8 @@ import {
   telemetryURL,
   terminalRoute,
   terminalURL,
+  installURL,
+  installRoute,
 } from "../../../common/routes";
 import { navigateWithoutHistoryChange, navigation } from "../../navigation";
 import { SettingLayout } from "../layout/setting-layout";
@@ -39,6 +41,7 @@ import { sentryDsn } from "../../../common/vars";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
 import appPreferencesInjectable from "./app-preferences/app-preferences.injectable";
+import { Install } from "./install";
 
 interface Dependencies {
   appPreferenceItems: IComputedValue<RegisteredAppPreference[]>
@@ -70,7 +73,7 @@ const NonInjectedPreferences: React.FC<Dependencies> = ({ appPreferenceItems })
         <hr />
 
         <Tab value={"/installed-extensions"} label="Extensions"/>
-        <Tab value={"/install"} label="Install"/>
+        <Tab value={installURL()} label="Install" active={isActive(installRoute)}/>
       </Tabs>
     );
   }
@@ -89,6 +92,7 @@ const NonInjectedPreferences: React.FC<Dependencies> = ({ appPreferenceItems })
         <Route path={terminalURL()} component={Terminal}/>
         <Route path={telemetryURL()} component={Telemetry}/>
         <Route path={extensionURL()} component={Extensions}/>
+        <Route path={installURL()} component={Install}/>
         <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>
       </Switch>
     </SettingLayout>