From 0d7a284d2af1d72aae828f2ed5652429d0b2441c Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 30 Oct 2020 10:55:26 +0300
Subject: [PATCH] Adding search to extension page

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+extensions/extensions.scss    | 11 +++++
 .../components/+extensions/extensions.tsx     | 46 ++++++++++++++++---
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 242853343c..aef5c3117e 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -12,5 +12,16 @@
 
   .info-col {
     flex: 0.6;
+    align-self: flex-start;
+  }
+
+  .SearchInput {
+    margin-top: $margin / 2;
+    margin-bottom: $margin * 2;
+
+    > label {
+      padding: $padding $padding * 2;
+      border-radius: $radius;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index 974b3840fe..b10393b290 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -1,15 +1,26 @@
 import "./extensions.scss";
 
 import React, { Fragment } from "react";
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { Badge } from "../badge";
 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 { extensionManager } from "../../../extensions/extension-manager";
 
 @observer
 export class Extensions extends React.Component {
+  @observable search = ""
+
+  @computed get extensions() {
+    const extensions = extensionLoader.userExtensions
+    return extensions.filter(ext => ext.name.includes(this.search))
+  }
+
   disable(name: string) {
   }
 
@@ -21,23 +32,35 @@ export class Extensions extends React.Component {
           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>.
+          <a href="https://docs.k8slens.dev/extensions/overview/" target="_blank">Check out documentation to learn more</a>
         </p>
       </Fragment>
     )
   }
 
   renderExtensions() {
-    const extensions = extensionLoader.userExtensions;
-    if (!extensions.length) {
-      return (
-        <div className="flex align-center box grow justify-center gaps">
+    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>
+        </>
+      )
+      return (
+        <div className="flex align-center box grow justify-center gaps">
+          {message}
         </div>
       )
     }
-    return extensions.map(extension => {
+    if (!this.extensions.length) {
+      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">
@@ -63,6 +86,15 @@ export class Extensions extends React.Component {
       >
         <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
+            theme="round-black"
+            className="SearchInput"
+            autoFocus
+            placeholder={_i18n._(t`Search Extensions...`)}
+            value={this.search}
+            onChange={(value) => this.search = value}
+          />
           {this.renderExtensions()}
         </div>
       </WizardLayout>