From 7d34bbc250b0856649b7707fbd40b6a1fe9438e2 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Fri, 30 Oct 2020 13:53:05 +0200
Subject: [PATCH] clean up

Signed-off-by: Roman <ixrock@gmail.com>
---
 src/extensions/extension-loader.ts            |  2 +-
 src/main/menu.ts                              |  3 +-
 .../components/+extensions/extensions.scss    | 14 ++--
 .../components/+extensions/extensions.tsx     | 66 +++++++------------
 src/renderer/components/+extensions/index.ts  |  3 +-
 .../cluster-manager/cluster-manager.tsx       |  3 +-
 6 files changed, 36 insertions(+), 55 deletions(-)

diff --git a/src/extensions/extension-loader.ts b/src/extensions/extension-loader.ts
index 2662b05b18..78ccada650 100644
--- a/src/extensions/extension-loader.ts
+++ b/src/extensions/extension-loader.ts
@@ -35,7 +35,7 @@ export class ExtensionLoader {
     }
   }
 
-  @computed get userExtensions() {
+  @computed get userExtensions(): LensExtension[] {
     const builtIn = getBundledExtensions().map(ext => `lens-${ext}`)
     const extensions: LensExtension[] = []
     this.instances.forEach(instance => {
diff --git a/src/main/menu.ts b/src/main/menu.ts
index dc85754b0b..4b2ab20387 100644
--- a/src/main/menu.ts
+++ b/src/main/menu.ts
@@ -6,8 +6,8 @@ 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 { menuRegistry } from "../extensions/registries/menu-registry";
-import { extensionsURL } from "../renderer/components/+extensions";
 import logger from "./logger";
 
 export type MenuTopId = "mac" | "file" | "edit" | "view" | "help"
@@ -73,6 +73,7 @@ export function buildMenu(windowManager: WindowManager) {
       },
       {
         label: 'Extensions',
+        accelerator: 'CmdOrCtrl+Shift+E',
         click() {
           navigate(extensionsURL())
         }
diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 41241ca0bf..c2c1a3a331 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -1,12 +1,10 @@
 .Extensions {
-  .Badge.extension {
-    display: flex;
-    margin-bottom: $margin;
-    padding: $padding $padding * 2;
-
-    .name {
-      color: $textColorAccent;
-      padding-bottom: $padding;
+  .extension-list {
+    .extension {
+      display: flex;
+      margin-bottom: $margin;
+      padding: $padding $padding * 2;
+      background: $colorVague;
     }
   }
 
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index b10393b290..d98384d873 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -1,15 +1,13 @@
 import "./extensions.scss";
-
 import React, { Fragment } from "react";
-import { t, Trans } from "@lingui/macro";
+import { computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Badge } from "../badge";
+import { t, Trans } from "@lingui/macro";
+import { _i18n } from "../../i18n";
 import { Button } from "../button";
-import { extensionLoader } from "../../../extensions/extension-loader";
 import { WizardLayout } from "../layout/wizard-layout";
 import { Input } from "../input";
-import { _i18n } from "../../i18n";
-import { computed, observable } from "mobx";
+import { extensionLoader } from "../../../extensions/extension-loader";
 import { extensionManager } from "../../../extensions/extension-manager";
 
 @observer
@@ -29,69 +27,53 @@ export class Extensions extends React.Component {
       <Fragment>
         <h2>Lens Extension API</h2>
         <p>
-          The Extensions API in Lens allows users to customize and enhance the Lens experience by creating their own menus or page content that is extended from the existing pages. Many of the core features of Lens are built as extensions and use the same Extension API.
+          The Extensions API in Lens allows users to customize and enhance the Lens experience by creating their own menus or page content that is extended from the existing pages. Many of the core
+          features of Lens are built as extensions and use the same Extension API.
         </p>
         <p>
-          <a href="https://docs.k8slens.dev/extensions/overview/" target="_blank">Check out documentation to learn more</a>
+          Check out documentation to <a href="https://docs.k8slens.dev/" target="_blank">learn more</a>
         </p>
       </Fragment>
     )
   }
 
   renderExtensions() {
-    if (!this.extensions.length) {
-      const message = this.search ? <Trans>No search results found</Trans> : (
-        <>
-          <span>There are no extensions found in</span>
-          <Badge>/.k8slens/extensions</Badge>
-        </>
-      )
+    const extensionsPath = extensionManager.localFolderPath;
+    const { extensions, search } = this;
+    if (!extensions.length) {
       return (
         <div className="flex align-center box grow justify-center gaps">
-          {message}
+          {search && <Trans>No search results found</Trans>}
+          {!search && <p>There are no extensions in <code>{extensionsPath}</code></p>}
         </div>
       )
     }
-    if (!this.extensions.length) {
+    return extensions.map(({ id, name, description }) => {
       return (
-        <div className="flex align-center box grow justify-center gaps">
-          <span>There are no extensions found in</span>
-          <Badge>{extensionManager.localFolderPath}</Badge>
-        </div>
-      )
-    }
-    return this.extensions.map(extension => {
-      const { id, name, description } = extension;
-      return (
-        <Badge key={id} className="extension flex gaps align-center justify-space-between">
-          <div>
-            <div className="name">
-              {name}
-            </div>
-            <div className="description">
-              {description}
-            </div>
+        <div key={id} className="extension flex gaps align-center">
+          <div className="box grow flex column gaps">
+            <code className="name">{name}</code>
+            <span className="description">{description}</span>
           </div>
-          <Button onClick={() => this.disable(name)}>Disable</Button>
-        </Badge>
+          <Button plain active onClick={() => this.disable(name)}>
+            Disable
+          </Button>
+        </div>
       )
     })
   }
 
   render() {
     return (
-      <WizardLayout
-        className="Extensions"
-        infoPanel={this.renderInfo()}
-      >
+      <WizardLayout className="Extensions" infoPanel={this.renderInfo()}>
         <h2><Trans>Extensions</Trans></h2>
         <div className="extension-list">
           {/* TODO: Use generic search input after https://github.com/lensapp/lens/pull/1114 will be pushed */}
           <Input
+            autoFocus
             theme="round-black"
             className="SearchInput"
-            autoFocus
-            placeholder={_i18n._(t`Search Extensions...`)}
+            placeholder={_i18n._(t`Search extensions`)}
             value={this.search}
             onChange={(value) => this.search = value}
           />
diff --git a/src/renderer/components/+extensions/index.ts b/src/renderer/components/+extensions/index.ts
index a45b2e7a0b..8946a5f6fe 100644
--- a/src/renderer/components/+extensions/index.ts
+++ b/src/renderer/components/+extensions/index.ts
@@ -1 +1,2 @@
-export * from "./extensions.route"
\ No newline at end of file
+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 d758295500..4a42a0419d 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.tsx
+++ b/src/renderer/components/cluster-manager/cluster-manager.tsx
@@ -16,8 +16,7 @@ import { clusterViewRoute, clusterViewURL } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
 import { globalPageRegistry } from "../../../extensions/registries/page-registry";
-import { extensionsRoute } from "../+extensions";
-import { Extensions } from "../+extensions/extensions";
+import { Extensions, extensionsRoute } from "../+extensions";
 import { getMatchedClusterId } from "../../navigation";
 
 @observer