From 5001663e7a5fcf0958e9ce50987309aef7713c1e Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Thu, 3 Sep 2020 20:37:47 +0300
Subject: [PATCH] extensions-api -- added initial extensions listing/managing
 page available from app menu/hotkey

Signed-off-by: Roman <ixrock@gmail.com>
---
 src/main/menu.ts                              | 11 ++++++-
 .../+extensions/extensions.route.ts           | 11 +++++++
 .../components/+extensions/extensions.scss    |  4 +++
 .../components/+extensions/extensions.tsx     | 31 +++++++++++++++++++
 src/renderer/components/+extensions/index.ts  |  2 ++
 .../cluster-manager/cluster-manager.tsx       |  2 ++
 6 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/+extensions/extensions.route.ts
 create mode 100644 src/renderer/components/+extensions/extensions.scss
 create mode 100644 src/renderer/components/+extensions/extensions.tsx
 create mode 100644 src/renderer/components/+extensions/index.ts

diff --git a/src/main/menu.ts b/src/main/menu.ts
index f319b5a479..b6f49cd261 100644
--- a/src/main/menu.ts
+++ b/src/main/menu.ts
@@ -6,6 +6,7 @@ import { addClusterURL } from "../renderer/components/+add-cluster/add-cluster.r
 import { preferencesURL } from "../renderer/components/+preferences/preferences.route";
 import { whatsNewURL } from "../renderer/components/+whats-new/whats-new.route";
 import { clusterSettingsURL } from "../renderer/components/+cluster-settings/cluster-settings.route";
+import { extensionsURL } from "../renderer/components/+extensions/extensions.route";
 import logger from "./logger";
 
 export function initMenu(windowManager: WindowManager) {
@@ -67,12 +68,20 @@ export function buildMenu(windowManager: WindowManager) {
       { type: 'separator' },
       {
         label: 'Preferences',
-        accelerator: 'Cmd+,',
+        accelerator: 'CmdOrCtrl+,',
         click() {
           navigate(preferencesURL())
         }
       },
       { type: 'separator' },
+      {
+        label: 'Extensions',
+        accelerator: 'CmdOrCtrl+Shift+E',
+        click() {
+          navigate(extensionsURL())
+        }
+      },
+      { type: 'separator' },
       { role: 'services' },
       { type: 'separator' },
       { role: 'hide' },
diff --git a/src/renderer/components/+extensions/extensions.route.ts b/src/renderer/components/+extensions/extensions.route.ts
new file mode 100644
index 0000000000..5744aabb0e
--- /dev/null
+++ b/src/renderer/components/+extensions/extensions.route.ts
@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const extensionsRoute: RouteProps = {
+  path: "/extensions"
+}
+
+export interface IExtensionsRouteParams {
+}
+
+export const extensionsURL = buildURL<IExtensionsRouteParams>(extensionsRoute.path);
diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
new file mode 100644
index 0000000000..496b03c161
--- /dev/null
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -0,0 +1,4 @@
+.Extensions {
+  $spacing: $padding * 2;
+  padding: $spacing;
+}
\ No newline at end of file
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
new file mode 100644
index 0000000000..18e1b2aeec
--- /dev/null
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -0,0 +1,31 @@
+import "./extensions.scss"
+import React from "react";
+import { observer } from "mobx-react";
+import { extensionStore } from "../../../extensions/extension-store";
+import { WizardLayout } from "../layout/wizard-layout";
+import { Icon } from "../icon";
+
+@observer
+export class Extensions extends React.Component {
+  // todo: add input-select to customize extensions loading folder(s)
+  renderInfoPanel() {
+    return (
+      <div className="info-panel flex gaps align-center">
+        <Icon material="info"/>
+        <p>Extensions available to install</p>
+      </div>
+    );
+  }
+
+  render() {
+    const { installed: installedExtensions } = extensionStore;
+    return (
+      <WizardLayout className="Extensions" infoPanel={this.renderInfoPanel()}>
+        <h2>Extensions</h2>
+        <pre>
+          {JSON.stringify(installedExtensions.toJSON(), null, 2)}
+        </pre>
+      </WizardLayout>
+    );
+  }
+}
diff --git a/src/renderer/components/+extensions/index.ts b/src/renderer/components/+extensions/index.ts
new file mode 100644
index 0000000000..8946a5f6fe
--- /dev/null
+++ b/src/renderer/components/+extensions/index.ts
@@ -0,0 +1,2 @@
+export * from "./extensions.route"
+export * from "./extensions"
diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx
index 6011549e8c..987f22658d 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.tsx
+++ b/src/renderer/components/cluster-manager/cluster-manager.tsx
@@ -11,6 +11,7 @@ import { Workspaces, workspacesRoute } from "../+workspaces";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
 import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
+import { Extensions, extensionsRoute } from "../+extensions";
 import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
@@ -60,6 +61,7 @@ export class ClusterManager extends React.Component {
             <Route component={AddCluster} {...addClusterRoute}/>
             <Route component={ClusterView} {...clusterViewRoute}/>
             <Route component={ClusterSettings} {...clusterSettingsRoute}/>
+            <Route component={Extensions} {...extensionsRoute}/>
             <Redirect exact to={this.startUrl}/>
           </Switch>
         </main>