From 8d99fa940dbdc1595c77c623d1440e535869706a Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 28 Oct 2020 14:17:04 +0300
Subject: [PATCH] Basic extension list view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+extensions/extensions.route.ts           |  2 +-
 .../components/+extensions/extensions.scss    | 15 ++++++-
 .../components/+extensions/extensions.tsx     | 44 ++++++++++++++++++-
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/+extensions/extensions.route.ts b/src/renderer/components/+extensions/extensions.route.ts
index 52300ee059..78c5579901 100644
--- a/src/renderer/components/+extensions/extensions.route.ts
+++ b/src/renderer/components/+extensions/extensions.route.ts
@@ -1,5 +1,5 @@
 import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const extensionsRoute: RouteProps = {
   path: "/extensions"
diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 273293e59b..89d3aeda5b 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -1,3 +1,16 @@
 .Extensions {
-  
+  .content {
+    height: 100%;
+  }
+
+  .Badge.extension {
+    display: flex;
+    margin: 0;
+    padding: $padding $padding * 2;
+
+    .name {
+      color: $textColorAccent;
+      padding-bottom: $padding;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index ce365db0f6..06a7370c5e 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -4,18 +4,58 @@ import React from "react";
 import { Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { PageLayout } from "../layout/page-layout";
+import { Badge } from "../badge";
+import { Button } from "../button";
 
 @observer
 export class Extensions extends React.Component {
   disable() {
-    
+  }
+
+  renderExtensions() {
+    const extensions = [
+      {
+        id: "1",
+        name: "hello-world",
+        description: "Basic hello world example"
+      },
+      {
+        id: "2",
+        name: "light theme",
+        description: "Classic light theme for lens"
+      }
+    ]
+    if (!extensions.length) {
+      return (
+        <div className="flex align-center box grow justify-center gaps">
+          <span>There are no extensions found in</span>
+          <Badge>/.k8slens/extensions</Badge>
+        </div>
+      )
+    }
+    return 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>
+          <Button>Disable</Button>
+        </Badge>
+      )
+    })
   }
 
   render() {
     const header = <h2><Trans>Extensions</Trans></h2>;
     return (
       <PageLayout showOnTop className="Extensions" header={header}>
-        <h2><Trans>List</Trans></h2>
+        {this.renderExtensions()}
       </PageLayout>
     );
   }