From bb6aa9c9d10d5f399559b621e39911f0f97c65a6 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Fri, 30 Oct 2020 14:30:34 +0200
Subject: [PATCH] added folder-icon to open extensions in finder, refactoring

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../components/+extensions/extensions.scss    | 16 ++---
 .../components/+extensions/extensions.tsx     | 61 +++++++++++--------
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index c2c1a3a331..5e5ae50cee 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -1,11 +1,13 @@
 .Extensions {
-  .extension-list {
-    .extension {
-      display: flex;
-      margin-bottom: $margin;
-      padding: $padding $padding * 2;
-      background: $colorVague;
-    }
+  .extension {
+    --flex-gap: $padding / 3;
+    padding: $padding $padding * 2;
+    background: $colorVague;
+    border-radius: $radius;
+  }
+
+  .extensions-path {
+    word-break: break-all;
   }
 
   .info-col {
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index d98384d873..88a3bc2662 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -1,5 +1,7 @@
 import "./extensions.scss";
-import React, { Fragment } from "react";
+
+import { shell } from "electron";
+import React from "react";
 import { computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { t, Trans } from "@lingui/macro";
@@ -7,6 +9,7 @@ import { _i18n } from "../../i18n";
 import { Button } from "../button";
 import { WizardLayout } from "../layout/wizard-layout";
 import { Input } from "../input";
+import { Icon } from "../icon";
 import { extensionLoader } from "../../../extensions/extension-loader";
 import { extensionManager } from "../../../extensions/extension-manager";
 
@@ -19,32 +22,43 @@ export class Extensions extends React.Component {
     return extensions.filter(ext => ext.name.includes(this.search))
   }
 
-  disable(name: string) {
+  get extensionsPath() {
+    return extensionManager.localFolderPath;
   }
 
   renderInfo() {
     return (
-      <Fragment>
+      <div className="flex column gaps">
         <h2>Lens Extension API</h2>
-        <p>
+        <div>
           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>
+        </div>
+        <div>
+          Extensions loaded from:
+          <div className="extensions-path flex inline">
+            <code>{this.extensionsPath}</code>
+            <Icon
+              material="folder"
+              tooltip="Open folder"
+              onClick={() => shell.openPath(this.extensionsPath)}
+            />
+          </div>
+        </div>
+        <div>
           Check out documentation to <a href="https://docs.k8slens.dev/" target="_blank">learn more</a>
-        </p>
-      </Fragment>
+        </div>
+      </div>
     )
   }
 
   renderExtensions() {
-    const extensionsPath = extensionManager.localFolderPath;
-    const { extensions, search } = this;
+    const { extensions, extensionsPath, search } = this;
     if (!extensions.length) {
       return (
         <div className="flex align-center box grow justify-center gaps">
           {search && <Trans>No search results found</Trans>}
-          {!search && <p>There are no extensions in <code>{extensionsPath}</code></p>}
+          {!search && <p><Trans>There are no extensions in</Trans> <code>{extensionsPath}</code></p>}
         </div>
       )
     }
@@ -52,10 +66,10 @@ export class Extensions extends React.Component {
       return (
         <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 className="package">Package: <code className="name">{name}</code></div>
+            <div>Description: <span className="text-secondary">{description}</span></div>
           </div>
-          <Button plain active onClick={() => this.disable(name)}>
+          <Button plain active onClick={() => console.log(`//todo: disable ${name}`)}>
             Disable
           </Button>
         </div>
@@ -67,16 +81,15 @@ export class Extensions extends React.Component {
     return (
       <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"
-            placeholder={_i18n._(t`Search extensions`)}
-            value={this.search}
-            onChange={(value) => this.search = value}
-          />
+        <Input
+          autoFocus
+          theme="round-black"
+          className="SearchInput"
+          placeholder={_i18n._(t`Search extensions`)}
+          value={this.search}
+          onChange={(value) => this.search = value}
+        />
+        <div className="extension-list flex column gaps">
           {this.renderExtensions()}
         </div>
       </WizardLayout>