From 89f575701d64f52cf180c4300ec1419ac14d40fd Mon Sep 17 00:00:00 2001
From: Lauri Nevala <lauri.nevala@gmail.com>
Date: Thu, 12 Nov 2020 12:57:40 +0200
Subject: [PATCH 1/2] Add extension development instructions for Windows users
 (#1350)

* Add extension development instructions for Windows users

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

Co-authored-by: steve richards <steve.james.richards@gmail.com>
---
 .../get-started/your-first-extension.md       | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/docs/extensions/get-started/your-first-extension.md b/docs/extensions/get-started/your-first-extension.md
index e43103c008..5aa52709f5 100644
--- a/docs/extensions/get-started/your-first-extension.md
+++ b/docs/extensions/get-started/your-first-extension.md
@@ -6,7 +6,7 @@ In this topic, we'll teach you the fundamental concepts for building extensions.
 
 Simple Lens extension that adds "Hello World" page to a cluster menu.
 
-### Linux
+### Setup the extension directory
 
 First you will need to clone the [Lens Extension samples](https://github.com/lensapp/lens-extension-samples) repository to your local machine:
 
@@ -16,12 +16,36 @@ git clone https://github.com/lensapp/lens-extension-samples.git
 
 Next you need to create a symlink from the directory that Lens will monitor for user installed extensions to the sample extension, in this case **helloworld-sample**:
 
+**Linux & MacOS**
 ```sh
 mkdir -p ~/.k8slens/extensions
 cd ~/.k8slens/extensions
-ln -s <lens-extension-samples directory>/helloworld-sample helloworld-sample
+ln -s lens-extension-samples/helloworld-sample helloworld-sample
 ```
 
+**Windows**
+
+Create the directory that Lens will monitor for user installed extensions:
+
+```sh
+mkdir C:\Users\<user>\.k8slens\extensions -force
+cd C:\Users\<user>\.k8slens\extensions
+```
+
+If you have administrator rights, you can create symlink to the sample extension, in this case **helloworld-sample**:
+
+```sh
+cmd /c mklink /D helloworld-sample lens-extension-samples\helloworld-sample
+```
+
+Without administrator rights, you need to copy the extensions sample directory into `C:\Users\<user>\.k8slens\extensions`:
+
+```
+Copy-Item 'lens-extension-samples\helloworld-sample' 'C:\Users\<user>\.k8slens\extensions\helloworld-sample'
+```
+
+### Build the extension
+
 To build the extension you can use `make` or run the `npm` commands manually:
 
 ```sh

From 6432b3bb9ed09b652bb0bce693833b8d7072b52f Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 12 Nov 2020 13:58:59 +0300
Subject: [PATCH 2/2] Removing parental element styles that affect extensions
 (#1331)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 extensions/support-page/renderer.tsx          |  4 +--
 extensions/support-page/src/support.scss      |  6 ++++
 .../cluster-manager/bottom-bar.scss           | 14 ++--------
 .../components/cluster-manager/bottom-bar.tsx |  2 +-
 .../cluster-manager/cluster-manager.scss      | 28 +++++++++----------
 .../cluster-manager/cluster-view.scss         |  2 ++
 .../cluster-manager/cluster-view.tsx          |  2 +-
 .../components/layout/page-layout.scss        |  6 ++++
 8 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/extensions/support-page/renderer.tsx b/extensions/support-page/renderer.tsx
index 87142c79da..b76ef0601c 100644
--- a/extensions/support-page/renderer.tsx
+++ b/extensions/support-page/renderer.tsx
@@ -19,10 +19,10 @@ export default class SupportPageRendererExtension extends LensRendererExtension
     {
       item: (
         <div
-          className="flex align-center gaps hover-highlight"
+          className="SupportPageIcon flex align-center"
           onClick={() => Navigation.navigate(supportPageURL())}
         >
-          <Component.Icon material="help" smallest />
+          <Component.Icon interactive material="help" smallest />
         </div>
       )
     }
diff --git a/extensions/support-page/src/support.scss b/extensions/support-page/src/support.scss
index efc14f2827..1876061fdd 100644
--- a/extensions/support-page/src/support.scss
+++ b/extensions/support-page/src/support.scss
@@ -10,4 +10,10 @@
       margin-left: 2px;
     }
   }
+}
+
+.SupportPageIcon {
+  color: white;
+  font-size: var(--font-size-small);
+  padding-right: calc(var(--padding) / 2);
 }
\ No newline at end of file
diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss
index 833e7b9bfc..0a73bbacbb 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.scss
+++ b/src/renderer/components/cluster-manager/bottom-bar.scss
@@ -2,27 +2,19 @@
   $spacing: $padding / 2;
   --flex-gap: #{$spacing};
 
-  font-size: $font-size-small;
-  background-color: #3d90ce;
+  background-color: var(--blue);
   padding: 0 2px;
-  color: white;
   height: 22px;
 
   #current-workspace {
+    font-size: var(--font-size-small);
+    color: white;
     padding: $padding / 4 $padding / 2;
     cursor: pointer;
-  }
 
-  .hover-highlight {
     &:hover {
       background-color: #ffffff33;
       cursor: pointer;
     }
   }
-
-  .extensions {
-    > * {
-      padding: $padding / 4 $padding / 2;
-    }
-  }
 }
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index fe7876f397..7302469a2a 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -13,7 +13,7 @@ export class BottomBar extends React.Component {
     const { currentWorkspace } = workspaceStore;
     return (
       <div className="BottomBar flex gaps">
-        <div id="current-workspace" className="flex gaps align-center hover-highlight">
+        <div id="current-workspace" className="flex gaps align-center">
           <Icon smallest material="layers"/>
           <span className="workspace-name">{currentWorkspace.name}</span>
         </div>
diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index d0f147ad4e..f1a1f75ed8 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/src/renderer/components/cluster-manager/cluster-manager.scss
@@ -9,20 +9,6 @@
     grid-area: main;
     position: relative;
     display: flex;
-
-    > * {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      background-color: $mainBackground;
-
-      > * {
-        flex: 1;
-      }
-    }
   }
 
   .ClustersMenu {
@@ -32,4 +18,18 @@
   .BottomBar {
     grid-area: bottom-bar;
   }
+
+  #lens-views {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    background-color: $mainBackground;
+
+    iframe {
+      flex: 1;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/cluster-manager/cluster-view.scss b/src/renderer/components/cluster-manager/cluster-view.scss
index eb971eaa19..e1b884370f 100644
--- a/src/renderer/components/cluster-manager/cluster-view.scss
+++ b/src/renderer/components/cluster-manager/cluster-view.scss
@@ -1,4 +1,6 @@
 .ClusterView {
+  flex: 1;
+
   &:empty {
     display: none;
   }
diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx
index be3a955558..613f8ab708 100644
--- a/src/renderer/components/cluster-manager/cluster-view.tsx
+++ b/src/renderer/components/cluster-manager/cluster-view.tsx
@@ -34,7 +34,7 @@ export class ClusterView extends React.Component<Props> {
     const { cluster } = this;
     const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id) || !cluster.ready)
     return (
-      <div className="ClusterView">
+      <div className="ClusterView flex align-center">
         {showStatus && (
           <ClusterStatus key={cluster.id} clusterId={cluster.id} className="box center"/>
         )}
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index 0ae6f54139..b0540b9a15 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/src/renderer/components/layout/page-layout.scss
@@ -5,6 +5,7 @@
   --min-width: 570px;
 
   position: relative;
+  width: 100%;
   height: 100%;
   display: grid !important;
   grid-template-rows: min-content 1fr;
@@ -13,6 +14,11 @@
   &.top {
     position: fixed !important; // allow to cover ClustersMenu
     z-index: 1;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $mainBackground;
 
     // adds extra space for traffic-light top buttons (mac only)
     .is-mac & > .header {