Merge branch 'master' into improve-badges-v2

# Conflicts:
#	src/renderer/components/badge/badge.tsx

.azure-pipelines.yml

@@ -30,17 +30,16 @@ jobs:
         displayName: Install Node.js
       - task: Cache@2
         inputs:
-          key: yarn | $(Agent.OS) | yarn.lock
+          key: 'yarn | "$(Agent.OS)"" | yarn.lock'
           restoreKeys: |
             yarn | "$(Agent.OS)"
-            yarn
           path: $(YARN_CACHE_FOLDER)
         displayName: Cache Yarn packages
-      - script: make install-deps
+      - script: make node_modules
         displayName: Install dependencies
       - script: make build-npm
         displayName: Generate npm package
-      - script: make build-extensions
+      - script: make -j2 build-extensions
         displayName: Build bundled extensions
       - script: make integration-win
         displayName: Run integration tests
@@ -70,17 +69,16 @@ jobs:
         displayName: Install Node.js
       - task: Cache@2
         inputs:
-          key: yarn | $(Agent.OS) | yarn.lock
+          key: 'yarn | "$(Agent.OS)" | yarn.lock'
           restoreKeys: |
             yarn | "$(Agent.OS)"
-            yarn
           path: $(YARN_CACHE_FOLDER)
         displayName: Cache Yarn packages
-      - script: make install-deps
+      - script: make node_modules
         displayName: Install dependencies
       - script: make build-npm
         displayName: Generate npm package
-      - script: make build-extensions
+      - script: make -j2 build-extensions
         displayName: Build bundled extensions
       - script: make test
         displayName: Run tests
@@ -116,19 +114,18 @@ jobs:
         displayName: Install Node.js
       - task: Cache@2
         inputs:
-          key: yarn | $(Agent.OS) | yarn.lock
+          key: 'yarn | "$(Agent.OS)" | yarn.lock'
           restoreKeys: |
             yarn | "$(Agent.OS)"
-            yarn
           path: $(YARN_CACHE_FOLDER)
         displayName: Cache Yarn packages
-      - script: make install-deps
+      - script: make node_modules
         displayName: Install dependencies
       - script: make lint
         displayName: Lint
       - script: make build-npm
         displayName: Generate npm package
-      - script: make build-extensions
+      - script: make -j2 build-extensions
         displayName: Build bundled extensions
       - script: make test
         displayName: Run tests
@@ -164,4 +161,4 @@ jobs:
         displayName: Publish npm package
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
         env:
-          NPM_TOKEN: $(NPM_TOKEN)
+          NPM_TOKEN: $(NPM_TOKEN)

.eslintrc.js

@@ -1,5 +1,8 @@
-module.exports =  {
+module.exports = {
-  ignorePatterns: ["src/extensions/npm/extensions/dist/**/*"],
+  ignorePatterns: [
+    "**/node_modules/**/*",
+    "**/dist/**/*",
+  ],
   overrides: [
     {
       files: [
@@ -13,13 +16,17 @@ module.exports =  {
       env: {
         node: true
       },
-      parserOptions:  {
+      parserOptions: {
         ecmaVersion: 2018,
         sourceType: 'module',
       },
       rules: {
-        "indent": ["error", 2],
+        "indent": ["error", 2, {
+          "SwitchCase": 1,
+        }],
         "no-unused-vars": "off",
+        "semi": ["error", "always"],
+        "object-shorthand": "error",
       }
     },
     {
@@ -32,10 +39,10 @@ module.exports =  {
         "__mocks__/*.ts",
       ],
       parser: "@typescript-eslint/parser",
-      extends:  [
+      extends: [
         'plugin:@typescript-eslint/recommended',
       ],
-      parserOptions:  {
+      parserOptions: {
         ecmaVersion: 2018,
         sourceType: 'module',
       },
@@ -47,7 +54,12 @@ module.exports =  {
         "@typescript-eslint/ban-types": "off",
         "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/no-empty-interface": "off",
-        "indent": ["error", 2]
+        "indent": ["error", 2, {
+          "SwitchCase": 1,
+        }],
+        "semi": "off",
+        "@typescript-eslint/semi": ["error"],
+        "object-shorthand": "error",
       },
     },
     {
@@ -55,10 +67,10 @@ module.exports =  {
         "src/renderer/**/*.tsx",
       ],
       parser: "@typescript-eslint/parser",
-      extends:  [
+      extends: [
         'plugin:@typescript-eslint/recommended',
       ],
-      parserOptions:  {
+      parserOptions: {
         ecmaVersion: 2018,
         sourceType: 'module',
         jsx: true,
@@ -75,7 +87,12 @@ module.exports =  {
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/ban-types": "off",
         "@typescript-eslint/no-empty-function": "off",
-        "indent": ["error", 2]
+        "indent": ["error", 2, {
+          "SwitchCase": 1,
+        }],
+        "semi": "off",
+        "@typescript-eslint/semi": ["error"],
+        "object-shorthand": "error",
       },
     }
   ]

.github/workflows/main.yml

@@ -3,7 +3,9 @@ on:
   push:
     branches:
       - master
-
+  release:
+    types: 
+      - published
 jobs:
   build:
     name: Deploy docs
@@ -27,13 +29,12 @@ jobs:
       - name: Checkout Release from lens
         uses: actions/checkout@v2
         with:
-          repository: lensapp/lens
+          fetch-depth: 0
 
       - name: git config
         run: |
            git config --local user.email "action@github.com"
            git config --local user.name "GitHub Action"
-           git pull
 
       - name: Using Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
@@ -45,17 +46,19 @@ jobs:
            yarn install
            yarn typedocs-extensions-api
 
-      - name: mkdocs deploy latest
+      - name: mkdocs deploy master
+        if: contains(github.ref, 'refs/heads/master')
         run: |
-           mike deploy --push latest
+           mike deploy --push master
 
-
+      - name: Get the release version
-      - name: mkdocs deploy new release / tag
+        if: contains(github.ref, 'refs/tags/v') # && !github.event.release.prerelease (generate pre-release docs until Lens 4.0.0 is GA, see #1408)
-        if: contains(github.ref, 'refs/tags/v')
+        id: get_version
+        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
+  
+      - name: mkdocs deploy new release
+        if: contains(github.ref, 'refs/tags/v') # && !github.event.release.prerelease (generate pre-release docs until Lens 4.0.0 is GA, see #1408)
         run: |
-           mike deploy --push--update-aliases ${{ github.ref }} latest
+           mike deploy --push --update-aliases ${{ steps.get_version.outputs.VERSION }} latest
-           mike set-default --push ${{ github.ref }}
+           mike set-default --push ${{ steps.get_version.outputs.VERSION }}
-
+           
-
-
-

.github/workflows/mkdocs-delete-version.yml

@@ -0,0 +1,38 @@
+name: Delete Documentation Version
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version string to be deleted (e.g."v0.0.1")'
+        required: true
+jobs:
+  build:
+    name: Delete docs Version
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Python 3.7
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.x'
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install git+https://${{ secrets.GH_TOKEN }}@github.com/lensapp/mkdocs-material-insiders.git
+          pip install mike
+          
+      - name: Checkout Release from lens
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: git config
+        run: |
+           git config --local user.email "action@github.com"
+           git config --local user.name "GitHub Action"
+
+
+      - name: mkdocs delete version
+        run: |
+           mike delete --push ${{ github.event.inputs.version }}
+           

.github/workflows/mkdocs-set-default-version.yml

@@ -0,0 +1,38 @@
+name: Update Default Documentation Version
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version string to be default (e.g."v0.0.1")'
+        required: true
+jobs:
+  build:
+    name: Update default docs Version
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Python 3.7
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.x'
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install git+https://${{ secrets.GH_TOKEN }}@github.com/lensapp/mkdocs-material-insiders.git
+          pip install mike
+          
+      - name: Checkout Release from lens
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: git config
+        run: |
+           git config --local user.email "action@github.com"
+           git config --local user.name "GitHub Action"
+
+
+      - name: mkdocs update default version
+        run: |
+           mike set-default --push ${{ github.event.inputs.version }}
+           

CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+info@k8slens.dev.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
+at [https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing to Lens
+
+See [Contributing to Lens](https://docs.k8slens.dev/latest/contributing/) documentation.

Makefile

@@ -1,4 +1,7 @@
 EXTENSIONS_DIR = ./extensions
+extensions = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir})
+extension_node_modules = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir}/node_modules)
+extension_dists = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir}/dist)
 
 ifeq ($(OS),Windows_NT)
     DETECTED_OS := Windows
@@ -6,29 +9,23 @@ else
     DETECTED_OS := $(shell uname)
 endif
 
-.PHONY: init
+binaries/client:
-init: install-deps download-bins compile-dev
-	echo "Init done"
-
-.PHONY: download-bins
-download-bins:
 	yarn download-bins
 
-.PHONY: install-deps
+node_modules:
-install-deps:
 	yarn install --frozen-lockfile --verbose
 	yarn check --verify-tree --integrity
 
+static/build/LensDev.html:
+	yarn compile:renderer
+
 .PHONY: compile-dev
 compile-dev:
 	yarn compile:main --cache
 	yarn compile:renderer --cache
 
 .PHONY: dev
-dev:
+dev: node_modules binaries/client build-extensions static/build/LensDev.html
-ifeq ("$(wildcard static/build/main.js)","")
-	make init
-endif
 	yarn dev
 
 .PHONY: lint
@@ -36,7 +33,7 @@ lint:
 	yarn lint
 
 .PHONY: test
-test: download-bins
+test: binaries/client
 	yarn test
 
 .PHONY: integration-linux
@@ -59,20 +56,25 @@ test-app:
 	yarn test
 
 .PHONY: build
-build: install-deps download-bins build-extensions
+build: node_modules binaries/client build-extensions
 ifeq "$(DETECTED_OS)" "Windows"
 	yarn dist:win
 else
 	yarn dist
 endif
 
+$(extension_node_modules):
+	cd $(@:/node_modules=) && npm install --no-audit --no-fund
+
+$(extension_dists): src/extensions/npm/extensions/dist
+	cd $(@:/dist=) && npm run build
+
 .PHONY: build-extensions
-build-extensions:
+build-extensions: $(extension_node_modules) $(extension_dists)
-	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), (cd $(dir) && npm install && npm run build || exit $?);)
 
 .PHONY: test-extensions
-test-extensions:
+test-extensions: $(extension_node_modules)
-	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), (cd $(dir) && npm install --dev && npm run test || exit $?);)
+	$(foreach dir, $(extensions), (cd $(dir) && npm run test || exit $?);)
 
 .PHONY: copy-extension-themes
 copy-extension-themes:
@@ -97,6 +99,20 @@ publish-npm: build-npm
 	npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
 	cd src/extensions/npm/extensions && npm publish --access=public
 
+.PHONY: docs
+docs:
+	yarn mkdocs-serve-local
+
+.PHONY: clean-extensions
+clean-extensions:
+ifeq "$(DETECTED_OS)" "Windows"
+	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), if exist $(dir)\dist del /s /q $(dir)\dist)
+	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), if exist $(dir)\node_modules del /s /q $(dir)\node_modules)
+else
+	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), rm -rf $(dir)/dist)
+	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), rm -rf $(dir)/node_modules)
+endif
+
 .PHONY: clean-npm
 clean-npm:
 ifeq "$(DETECTED_OS)" "Windows"
@@ -110,13 +126,13 @@ else
 endif
 
 .PHONY: clean
-clean: clean-npm
+clean: clean-npm clean-extensions
 ifeq "$(DETECTED_OS)" "Windows"
-	if exist binaries\client del /s /q binaries\client\*.*
+	if exist binaries\client del /s /q binaries\client
 	if exist dist del /s /q dist\*.*
 	if exist static\build del /s /q static\build\*.*
 else
-	rm -rf binaries/client/*
+	rm -rf binaries/client
 	rm -rf dist/*
 	rm -rf static/build/*
 endif

README.md

@@ -1,7 +1,7 @@
 # Lens | The Kubernetes IDE
 
 [![Build Status](https://dev.azure.com/lensapp/lensapp/_apis/build/status/lensapp.lens?branchName=master)](https://dev.azure.com/lensapp/lensapp/_build/latest?definitionId=1&branchName=master)
-[![Releases](https://img.shields.io/github/downloads/lensapp/lens/total.svg)](https://github.com/lensapp/lens/releases)
+[![Releases](https://img.shields.io/github/downloads/lensapp/lens/total.svg)](https://github.com/lensapp/lens/releases?label=Downloads)
 [![Chat on Slack](https://img.shields.io/badge/chat-on%20slack-blue.svg?logo=slack&longCache=true&style=flat)](https://join.slack.com/t/k8slens/shared_invite/enQtOTc5NjAyNjYyOTk4LWU1NDQ0ZGFkOWJkNTRhYTc2YjVmZDdkM2FkNGM5MjhiYTRhMDU2NDQ1MzIyMDA4ZGZlNmExOTc0N2JmY2M3ZGI)
 
 World’s most popular Kubernetes IDE provides a simplified, consistent entry point for developers, testers, integrators, and DevOps, to ship code faster at scale.  Lens is the only IDE you’ll ever need to take control of your Kubernetes clusters. It is a standalone application for MacOS, Windows and Linux operating systems.  Lens is an open source project and free!
@@ -25,50 +25,12 @@ World’s most popular Kubernetes IDE provides a simplified, consistent entry po
 
 ## Installation
 
-Download a pre-built package from the [releases](https://github.com/lensapp/lens/releases) page. Lens can be also installed via [snapcraft](https://snapcraft.io/kontena-lens) (Linux only).
+See [Getting Started](https://docs.k8slens.dev/latest/getting-started/) page.
-
-Alternatively on Mac:
-```
-brew cask install lens
-```
 
 ## Development
 
-> Prerequisites: Nodejs v12, make, yarn
+See [Development](https://docs.k8slens.dev/latest/contributing/development/) page.
-
-* `make init` - initial compilation, installing deps, etc.
-* `make dev` - builds and starts the app
-* `make test` - run tests
-
-## Development (advanced)
-
-Allows for faster separate re-runs of some of the more involved processes:
-
-1. `yarn dev:main` compiles electron's main process app part
-1. `yarn dev:renderer` compiles electron's renderer app part
-1. `yarn dev:extension-types` compile declaration types for `@k8slens/extensions`
-1. `yarn dev-run` runs app in dev-mode and auto-restart when main process file has changed
-
-## Development (documentation)
-
-Run a local instance of `mkdocs serve` in a docker container for developing the Lens Documentation.
-
-> Prerequisites: docker, yarn
-
-* `yarn mkdocs-serve-local` - local build and serve of mkdocs with auto update enabled
-
-Go to [localhost:8000](http://127.0.0.1:8000)
-
-## Developer's ~~RTFM~~ recommended list:
-
-- [TypeScript](https://www.typescriptlang.org/docs/home.html) (front-end/back-end)
-- [ReactJS](https://reactjs.org/docs/getting-started.html) (front-end, ui)
-- [MobX](https://mobx.js.org/) (app-state-management, back-end/front-end)
-- [ElectronJS](https://www.electronjs.org/docs) (chrome/node)
-- [NodeJS](https://nodejs.org/dist/latest-v12.x/docs/api/) (api docs)
-
-
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/lensapp/lens.
+See [Contributing](https://docs.k8slens.dev/latest/contributing/) page.

__mocks__/electron.ts

@@ -5,7 +5,7 @@ module.exports = {
     getVersion: jest.fn().mockReturnValue("3.0.0"),
     getLocale: jest.fn().mockRejectedValue("en"),
     getPath: jest.fn((name: string) => {
-      return "tmp"
+      return "tmp";
     }),
   },
   remote: {

build/build_tray_icon.ts

@@ -1,9 +1,9 @@
 // Generate tray icons from SVG to PNG + different sizes and colors (B&W)
 // Command: `yarn build:tray-icons`
-import path from "path"
+import path from "path";
 import sharp from "sharp";
-import jsdom from "jsdom"
+import jsdom from "jsdom";
-import fs from "fs-extra"
+import fs from "fs-extra";
 
 export async function generateTrayIcon(
   {
@@ -14,15 +14,15 @@ export async function generateTrayIcon(
     pixelSize = 32,
     shouldUseDarkColors = false, // managed by electron.nativeTheme.shouldUseDarkColors
   } = {}) {
-  outputFilename += shouldUseDarkColors ? "_dark" : ""
+  outputFilename += shouldUseDarkColors ? "_dark" : "";
-  dpiSuffix = dpiSuffix !== "1x" ? `@${dpiSuffix}` : ""
+  dpiSuffix = dpiSuffix !== "1x" ? `@${dpiSuffix}` : "";
-  const pngIconDestPath = path.resolve(outputFolder, `${outputFilename}${dpiSuffix}.png`)
+  const pngIconDestPath = path.resolve(outputFolder, `${outputFilename}${dpiSuffix}.png`);
   try {
     // Modify .SVG colors
     const trayIconColor = shouldUseDarkColors ? "white" : "black";
     const svgDom = await jsdom.JSDOM.fromFile(svgIconPath);
     const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
-    svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`
+    svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`;
     const svgIconBuffer = Buffer.from(svgRoot.outerHTML);
 
     // Resize and convert to .PNG

build/download_helm.ts

@@ -1,3 +1,3 @@
-import { helmCli } from "../src/main/helm/helm-cli"
+import { helmCli } from "../src/main/helm/helm-cli";
 
-helmCli.ensureBinary()
+helmCli.ensureBinary();

build/download_kubectl.ts

@@ -1,20 +1,20 @@
-import packageInfo from "../package.json"
+import packageInfo from "../package.json";
-import fs from "fs"
+import fs from "fs";
-import request from "request"
+import request from "request";
-import md5File from "md5-file"
+import md5File from "md5-file";
-import requestPromise from "request-promise-native"
+import requestPromise from "request-promise-native";
-import { ensureDir, pathExists } from "fs-extra"
+import { ensureDir, pathExists } from "fs-extra";
-import path from "path"
+import path from "path";
 
 class KubectlDownloader {
-  public kubectlVersion: string
+  public kubectlVersion: string;
-  protected url: string
+  protected url: string;
   protected path: string;
-  protected dirname: string
+  protected dirname: string;
 
   constructor(clusterVersion: string, platform: string, arch: string, target: string) {
     this.kubectlVersion = clusterVersion;
-    const binaryName = platform === "windows" ? "kubectl.exe" : "kubectl"
+    const binaryName = platform === "windows" ? "kubectl.exe" : "kubectl";
     this.url = `https://storage.googleapis.com/kubernetes-release/release/v${this.kubectlVersion}/bin/${platform}/${arch}/${binaryName}`;
     this.dirname = path.dirname(target);
     this.path = target;
@@ -25,83 +25,85 @@ class KubectlDownloader {
       method: "HEAD",
       uri: this.url,
       resolveWithFullResponse: true
-    }).catch((error) => { console.log(error) })
+    }).catch((error) => { console.log(error); });
 
     if (response.headers["etag"]) {
-      return response.headers["etag"].replace(/"/g, "")
+      return response.headers["etag"].replace(/"/g, "");
     }
-    return ""
+    return "";
   }
 
   public async checkBinary() {
-    const exists = await pathExists(this.path)
+    const exists = await pathExists(this.path);
     if (exists) {
-      const hash = md5File.sync(this.path)
+      const hash = md5File.sync(this.path);
-      const etag = await this.urlEtag()
+      const etag = await this.urlEtag();
       if(hash == etag) {
-        console.log("Kubectl md5sum matches the remote etag")
+        console.log("Kubectl md5sum matches the remote etag");
-        return true
+        return true;
       }
 
-      console.log("Kubectl md5sum " + hash + " does not match the remote etag " + etag + ", unlinking and downloading again")
+      console.log("Kubectl md5sum " + hash + " does not match the remote etag " + etag + ", unlinking and downloading again");
-      await fs.promises.unlink(this.path)
+      await fs.promises.unlink(this.path);
     }
 
-    return false
+    return false;
   }
 
   public async downloadKubectl() {
     const exists = await this.checkBinary();
     if(exists) {
-      console.log("Already exists and is valid")
+      console.log("Already exists and is valid");
-      return
+      return;
     }
-    await ensureDir(path.dirname(this.path), 0o755)
+    await ensureDir(path.dirname(this.path), 0o755);
 
-    const file = fs.createWriteStream(this.path)
+    const file = fs.createWriteStream(this.path);
-    console.log(`Downloading kubectl ${this.kubectlVersion} from ${this.url} to ${this.path}`)
+    console.log(`Downloading kubectl ${this.kubectlVersion} from ${this.url} to ${this.path}`);
     const requestOpts: request.UriOptions & request.CoreOptions = {
       uri: this.url,
       gzip: true
-    }
+    };
-    const stream = request(requestOpts)
+    const stream = request(requestOpts);
 
     stream.on("complete", () => {
-      console.log("kubectl binary download finished")
+      console.log("kubectl binary download finished");
-      file.end(() => {})
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
-    })
+      file.end(() => {});
+    });
 
     stream.on("error", (error) => {
-      console.log(error)
+      console.log(error);
-      fs.unlink(this.path, () => {})
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      throw(error)
+      fs.unlink(this.path, () => {});
-    })
+      throw(error);
+    });
     return new Promise((resolve, reject) => {
       file.on("close", () => {
-        console.log("kubectl binary download closed")
+        console.log("kubectl binary download closed");
         fs.chmod(this.path, 0o755, (err) => {
           if (err) reject(err);
-        })
+        });
-        resolve()
+        resolve();
-      })
+      });
-      stream.pipe(file)
+      stream.pipe(file);
-    })
+    });
   }
 }
 
 const downloadVersion = packageInfo.config.bundledKubectlVersion;
-const baseDir = path.join(process.env.INIT_CWD, 'binaries', 'client')
+const baseDir = path.join(process.env.INIT_CWD, 'binaries', 'client');
 const downloads = [
   { platform: 'linux', arch: 'amd64', target: path.join(baseDir, 'linux', 'x64', 'kubectl') },
   { platform: 'darwin', arch: 'amd64', target: path.join(baseDir, 'darwin', 'x64', 'kubectl') },
   { platform: 'windows', arch: 'amd64', target: path.join(baseDir, 'windows', 'x64', 'kubectl.exe') },
   { platform: 'windows', arch: '386', target: path.join(baseDir, 'windows', 'ia32', 'kubectl.exe') }
-]
+];
 
 downloads.forEach((dlOpts) => {
-  console.log(dlOpts)
+  console.log(dlOpts);
   const downloader = new KubectlDownloader(downloadVersion, dlOpts.platform, dlOpts.arch, dlOpts.target);
   console.log("Downloading: " + JSON.stringify(dlOpts));
-  downloader.downloadKubectl().then(() => downloader.checkBinary().then(() => console.log("Download complete")))
+  downloader.downloadKubectl().then(() => downloader.checkBinary().then(() => console.log("Download complete")));
-})
+});
 

build/notarize.js

@@ -1,4 +1,4 @@
-const { notarize } = require('electron-notarize')
+const { notarize } = require('electron-notarize');
 
 exports.default = async function notarizing(context) {
   const { electronPlatformName, appOutDir } = context;

build/set_npm_version.ts

@@ -1,9 +1,9 @@
-import * as fs from "fs"
+import * as fs from "fs";
-import * as path from "path"
+import * as path from "path";
-import packageInfo from "../src/extensions/npm/extensions/package.json"
+import packageInfo from "../src/extensions/npm/extensions/package.json";
-import appInfo from "../package.json"
+import appInfo from "../package.json";
 
-const packagePath = path.join(__dirname, "../src/extensions/npm/extensions/package.json")
+const packagePath = path.join(__dirname, "../src/extensions/npm/extensions/package.json");
 
-packageInfo.version = appInfo.version
+packageInfo.version = appInfo.version;
-fs.writeFileSync(packagePath, JSON.stringify(packageInfo, null, 2) + "\n")
+fs.writeFileSync(packagePath, JSON.stringify(packageInfo, null, 2) + "\n");

docs/clusters/adding-clusters.md

@@ -1,6 +1,6 @@
 # Adding Clusters
 
-Add clusters by clicking the **Add Cluster** button in the left-side menu. 
+Add clusters by clicking the **Add Cluster** button in the left-side menu.
 
 1. Click the **Add Cluster** button (indicated with a '+' icon).
 2. Enter the path to your kubeconfig file. You'll need to have a kubeconfig file for the cluster you want to add. You can either browse for the path from the file system or or enter it directly.
@@ -13,4 +13,10 @@ Selected [cluster contexts](https://kubernetes.io/docs/concepts/configuration/or
 
 For more information on kubeconfig see [Kubernetes docs](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/).
 
-To see your currently-enabled config with `kubectl`, enter `kubectl config view --minify --raw` in your terminal.
+To see your currently-enabled config with `kubectl`, enter `kubectl config view --minify --raw` in your terminal.
+
+When connecting to a cluster, make sure you have a valid and working kubeconfig for the cluster. Following lists known "gotchas" in some authentication types used in kubeconfig with Lens app.
+
+## Exec auth plugins
+
+When using [exec auth](https://kubernetes.io/docs/reference/access-authn-authz/authentication/#configuration) plugins make sure the paths that are used to call any binaries are full paths as Lens app might not be able to call binaries with relative paths. Make also sure that you pass all needed information either as arguments or env variables in the config, Lens app might not have all login shell env variables set automatically.

docs/contributing/README.md

@@ -1,17 +1,17 @@
 # Contributing
 
-There are multiple ways you can contribute to Lens - even if you are not a developer, you can still contribute. We are always looking for assistance with creating or updating documentation, testing the application, reporting and troubleshooting issues.
+There are multiple ways you can contribute to Lens. Even if you are not a developer, you can still contribute. We are always looking for assistance with creating or updating documentation, testing the application, reporting, and troubleshooting issues.
 
-Here are some ideas how you can contribute!
+Here are some ways you can contribute!
 
-* [Development](./development.md) – Help making Lens better.
+* [Development](./development.md) – Help make Lens better.
-* [Maintaining the Project](./maintainers.md) – Become community maintainer and help us maintain the project.
+* [Maintaining the Project](./maintainers.md) – Become a community maintainer and help us maintain the project.
 * [Extension Development](../extensions) – Add integrations via Lens Extensions.
 * [Documentation](./documentation.md) – Help improve Lens documentation.
-* [Promotion](./promotion.md) – Show your support, be an ambassador to Lens, write blogs and make videos!
+* [Promotion](./promotion.md) – Show your support, be an ambassador to Lens, write blogs, and make videos!
 
-If you are an influencer, blogger or journalist, feel free to [spread the word](./promotion.md)!
+If you are an influencer, blogger, or journalist, feel free to [spread the word](./promotion.md)!
 
 ## Code of Conduct
 
-This project adheres to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct. By participating and contributing to Lens, you are expected to uphold this code. Please report unacceptable behaviour to info@k8slens.dev
+This project adheres to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct. By participating and contributing to Lens, you are expected to uphold this code. Please report unacceptable behaviour to info@k8slens.dev.

docs/contributing/development.md

@@ -1,3 +1,40 @@
 # Development
 
-TBD
+Thank you for taking the time to make a contribution to Lens. The following document is a set of guidelines and instructions for contributing to Lens.
+
+When contributing to this repository, please consider first discussing the change you wish to make by opening an issue.
+
+## Recommended Reading:
+
+- [TypeScript](https://www.typescriptlang.org/docs/home.html) (front-end/back-end)
+- [ReactJS](https://reactjs.org/docs/getting-started.html) (front-end, ui)
+- [MobX](https://mobx.js.org/) (app-state-management, back-end/front-end)
+- [ElectronJS](https://www.electronjs.org/docs) (chrome/node)
+- [NodeJS](https://nodejs.org/dist/latest-v12.x/docs/api/) (api docs)
+
+## Local Development Environment
+
+> Prerequisites: Nodejs v12, make, yarn
+
+* `make dev` - builds and starts the app
+* `make clean` - cleanup local environment build artifacts
+
+
+## Github Workflow
+
+We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), so all code changes are tracked via Pull Requests.
+A detailed guide on the recommended workflow can be found below:
+
+* [Github Workflow](./github_workflow.md)
+
+## Code Testing
+
+All submitted PRs go through a set of tests and reviews. You can run most of these tests *before* a PR is submitted.
+In fact, we recommend it, because it will save on many possible review iterations and automated tests.
+The testing guidelines can be found here:
+
+* [Contributor's Guide to Testing](./testing.md)
+
+## License
+
+By contributing, you agree that your contributions will be licensed as described in [LICENSE](https://github.com/lensapp/lens/blob/master/LICENSE).

docs/contributing/documentation.md

@@ -1,14 +1,14 @@
 # Documentation
 
-We are glad to see you are interested in contributing to Lens documentation. If this is the first Open Source project you will contribute to, we strongly suggest reading GitHub's excellent guide: [How to Contribute to Open Source](https://opensource.guide/how-to-contribute).
+We are glad to see you're interested in contributing to the Lens documentation. If this is the first Open Source project you've contributed to, we strongly suggest reading GitHub's excellent guide: [How to Contribute to Open Source](https://opensource.guide/how-to-contribute).
 
 ## Finding Documentation Issues to Work On
 
-You can find a list of open documentation related issues [here](https://github.com/lensapp/lens/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Fdocumentation). When you find something you would like to work on:
+You can find a list of open documentation-related issues [here](https://github.com/lensapp/lens/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Fdocumentation). When you find something you would like to work on:
 
 1. Express your interest to start working on an issue via comments.
 2. One of the maintainers will assign the issue for you.
-3. You can start working on the issue. Once done, simply submit a pull request.
+3. You can start working on the issue. When you're done, simply submit a pull request.
 
 ## Requirements for Documentation Pull Requests
 
@@ -18,5 +18,16 @@ When you create a new pull request, we expect some requirements to be met.
   * When adding new documentation, add `New Documentation:` before the title. E.g. `New Documentation: Getting Started`
   * When fixing documentation, add `Fix Documentation:` before the title. E.g. `Fix Documentation: Getting Started`
   * When updating documentation, add `Update Documentation:` before the title. E.g. `Update Documentation: Getting Started`
-* If your Pull Request closes an issue you need to write `Closes #ISSUE_NUMBER` where the ISSUE_NUMBER is the number in the end of the link url that will link your pull request to the issue, when merged will close that issue.
+* If your Pull Request closes an issue, you must write `Closes #ISSUE_NUMBER` where the ISSUE_NUMBER is the number in the end of the link url or the relevent issue. This will link your pull request to the issue, and when it is merged, the issue will close.
-* For each pull request made, we run tests to check if there are any broken links, the markdown formatting is valid and the linter is passing.
+* For each pull request made, we run tests to check if there are any broken links, the markdown formatting is valid, and the linter is passing.
+
+
+## Testing Documentation Site Locally
+
+Run a local instance of `mkdocs` in a docker container for developing the Lens Documentation.
+
+> Prerequisites: docker, yarn
+
+* `make docs` - local build and serve of mkdocs with auto update enabled
+
+Go to [localhost:8000](http://127.0.0.1:8000).

docs/contributing/github_workflow.md

@@ -0,0 +1,148 @@
+# Github Workflow
+
+<!-- TOC -->
+- [Fork The Project](#fork-the-project)
+- [Adding the Forked Remote](#adding-the-forked-remote)
+- [Create & Rebase Your Feature Branch](#create--rebase-your-feature-branch)
+- [Commit & Push](#commit--push)
+- [Open a Pull Request](#open-a-pull-request)
+  - [Get a code review](#get-a-code-review)
+  - [Squash commits](#squash-commits)
+  - [Push Your Final Changes](#push-your-final-changes)
+
+<!-- /TOC -->
+This guide assumes you have already cloned the upstream repo to your system via git clone.
+
+## Fork The Project
+
+1. Go to [http://github.com/lensapp/lens](http://github.com/lensapp/lens)
+2. On the top, right-hand side, click on "fork" and select your username for the fork destination.
+
+## Adding the Forked Remote
+
+```
+export GITHUB_USER={ your github's username }
+
+cd $WORKDIR/lens
+git remote add $GITHUB_USER git@github.com:${GITHUB_USER}/lens.git
+
+# Prevent push to Upstream
+git remote set-url --push origin no_push
+
+# Set your fork remote as a default push target
+git push --set-upstream $GITHUB_USER master
+```
+
+Your remotes should look something like this:
+
+```
+➜ git remote -v
+origin  https://github.com/lensapp/lens (fetch)
+origin  no_push (push)
+my_fork git@github.com:{ github_username }/lens.git (fetch)
+my_fork git@github.com:{ github_username }/lens.git (push)
+```
+
+## Create & Rebase Your Feature Branch
+
+Create a feature branch:
+
+```
+git branch -b my_feature_branch
+```
+
+Rebase your branch:
+
+```
+git fetch origin
+
+git rebase origin/master
+Current branch my_feature_branch is up to date.
+```
+
+Please don't use `git pull` instead of the above `fetch / rebase`. `git pull` does a merge, which leaves merge commits. These make the commit history messy and violate the principle that commits ought to be individually understandable and useful.
+
+## Commit & Push
+
+Commit and sign your changes:
+
+```
+git commit -m "my commit title" --signoff
+```
+
+You can go back and edit/build/test some more, then `commit --amend` in a few cycles.
+
+When ready, push your changes to your fork's repository:
+
+```
+git push --set-upstream my_fork my_feature_branch
+```
+
+## Open a Pull Request
+
+See [Github Docs](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork).
+
+### Get a code review
+
+Once your pull request has been opened it will be assigned to one or more reviewers, and will go through a series of smoke tests.
+
+Commit changes made in response to review comments should be added to the same branch on your fork.
+
+Very small PRs are easy to review. Very large PRs are very difficult to review.
+
+### Squashing Commits
+Commits on your branch should represent meaningful milestones or units of work.
+Small commits that contain typo fixes, rebases, review feedbacks, etc should be squashed.
+
+To do that, it's best to perform an [interactive rebase](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History):
+
+#### Example
+If you PR has 3 commits, count backwards from your last commit using `HEAD~3`:
+```
+git rebase -i HEAD~3
+```
+Output would be similar to this:
+```
+pick f7f3f6d Changed some code
+pick 310154e fixed some typos
+pick a5f4a0d made some review changes
+
+# Rebase 710f0f8..a5f4a0d onto 710f0f8
+#
+# Commands:
+# p, pick <commit> = use commit
+# r, reword <commit> = use commit, but edit the commit message
+# e, edit <commit> = use commit, but stop for amending
+# s, squash <commit> = use commit, but meld into previous commit
+# f, fixup <commit> = like "squash", but discard this commit's log message
+# x, exec <command> = run command (the rest of the line) using shell
+# b, break = stop here (continue rebase later with 'git rebase --continue')
+# d, drop <commit> = remove commit
+# l, label <label> = label current HEAD with a name
+# t, reset <label> = reset HEAD to a label
+# m, merge [-C <commit> | -c <commit>] <label> [# <oneline>]
+# .       create a merge commit using the original merge commit's
+# .       message (or the oneline, if no original merge commit was
+# .       specified). Use -c <commit> to reword the commit message.
+#
+# These lines can be re-ordered; they are executed from top to bottom.
+#
+# However, if you remove everything, the rebase will be aborted.
+#
+# Note that empty commits are commented out
+```
+Use a command line text editor to change the word `pick` to `fixup` for the commits you want to squash, then save your changes and continue the rebase:
+
+Per the output above, you can see that:
+```
+fixup <commit> = like "squash", but discard this commit's log message
+```
+Which means that when rebased, the commit message "fixed some typos" will be removed, and squashed with the parent commit.
+
+### Push Your Final Changes
+
+Once done, you can push the final commits to your branch:
+```
+git push --force
+```
+You can run multiple iteration of `rebase`/`push -f`, if needed.

docs/contributing/maintainers.md

@@ -1,6 +1,6 @@
 # Maintainers
 
-We are looking for community maintainers for the Lens project. Maintainers will be added to a special team with write permissions. These permissions consist of opening, closing, tagging and editing issues, and pull requests, as well as create and delete non protected branches.
+We are looking for community maintainers for the Lens project. Maintainers will be added to a special team with write permissions. These permissions consist of opening, closing, tagging, and editing issues and pull requests, as well as creating and deleting non-protected branches.
 
 The responsibilities of a community maintainer are listed below.
 
@@ -9,7 +9,7 @@ The responsibilities of a community maintainer are listed below.
 * **Labeling Issues:** Label issues accordingly.
 * **Finding Duplicates:** Finding and closing duplicate issues.
 * **Doing First Level Contact:** Getting more information on the issues (like version number or asking for clarification) if needed.
-* **Closing Irrelevant Issues:** Closing issues that are determined irrelevant, no longer needed, not relevant to the project and/or doesn't follow the issues guidelines.
+* **Closing Irrelevant Issues:** Closing issues that are determined irrelevant, no longer needed, not relevant to the project and/or don't follow the issues guidelines.
 
 ## Help with Contributions
 

docs/contributing/promotion.md

@@ -1,17 +1,17 @@
-# Promoting
+# Promotion
 
-Help promote Lens! If you are not a developer (or even if you are), you can still contribute to the project, a lot, by helping us promote it. As we are a free open source project, the community is our most important asset, so here are some ways that you can help the project continue to grow.
+Help promote Lens! If you are not a developer (or even if you are), you can still contribute to the project – a lot – by helping us to promote it. As we are a free and open source project, the community is our most important asset. Here are some ways that you can help the project continue to grow.
 
 ## Follow, Like, Recommend, Favorite, Vote and Star Us
 
-There are many sites where you can vote, recommend, favorite and star us.
+There are many sites where you can vote, recommend, favorite, and star us.
 
-* [Twitter](https://twitter.com/k8slens) - Like, comment and retweet our posts, and follow us on Twitter
+* [Twitter](https://twitter.com/k8slens) - Like, comment and retweet our posts, and follow us on Twitter.
-* [Medium](https://medium.com/k8slens) - Give claps to our articles and follow us on Medium
+* [Medium](https://medium.com/k8slens) - Give claps to our articles and follow us on Medium.
-* [GitHub](https://github.com/lensapp/lens) - Become a stargazer on GitHub
+* [GitHub](https://github.com/lensapp/lens) - Become a stargazer on GitHub.
-* [StackShare](https://stackshare.io/lens) - Indicate you are using Lens and follow us on StackShare
+* [StackShare](https://stackshare.io/lens) - Indicate you are using Lens and follow us on StackShare.
-* [Reddit](https://www.reddit.com/search/?q=lens%20kubernetes&sort=new) - Upvote and be an ambassador of Lens by participating relevant discussions on Reddit
+* [Reddit](https://www.reddit.com/search/?q=lens%20kubernetes&sort=new) - Upvote and be a Lens ambassador by participating in relevant discussions on Reddit.
-* [Hacker News](https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=lens%20kubernetes&sort=byDate&type=story) - Upvote and be an ambassador of Lens by participating relevant discussions on Hacker News
+* [Hacker News](https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=lens%20kubernetes&sort=byDate&type=story) - Upvote and be a Lens ambassador by participating in relevant discussions on Hacker News.
 
 ## Write Blogs or Make Videos About Us
 

docs/contributing/testing.md

@@ -0,0 +1,45 @@
+## Testing Your Code
+
+Lens uses github actions to run automated tests on any PR, before merging.
+However, a PR will not be reviewed before all tests are green, so to save time and prevent your PR from going stale, it is best to test it before submitting the PR.
+
+### Run Local Verifications
+
+Please run the following style and formatting commands and fix/check-in any changes:
+
+#### 1. Linting
+
+We use [ESLing](https://eslint.org/) for style verification.
+In the repository's root directory, simply run:
+
+```
+make lint
+```
+
+#### 3. Pre-submit Flight Checks
+
+In the repository root directory, make sure that:
+
+ * `make build` runs successfully.
+ * `make test` runs successfully.
+ * `make integration` runs successfully (some tests require minikube running).
+
+ Please note that this last test is prone to "flakiness", so it might fail on occasion. If it fails constantly, take a deeper look at your code to find the source of the problem.
+
+If you find that all tests passed, you may open a pull request upstream.
+
+### Opening A Pull Request
+
+#### Draft Mode
+
+You may open a pull request in [draft mode](https://github.blog/2019-02-14-introducing-draft-pull-requests).
+All automated tests will still run against the PR, but the PR will not be assigned for review.
+Once a PR is ready for review, transition it from Draft mode, and code owners will be notified.
+
+#### Pre-Requisites for PR Merge
+
+In order for a PR to be merged, the following conditions should exist:
+1. The PR has passed all the automated tests (style, build & conformance tests).
+2. PR commits have been signed with the `--signoff` option.
+3. PR was reviewed and approved by a code owner.
+4. PR is rebased against upstream's master branch.

docs/extensions/README.md

@@ -20,12 +20,11 @@ For an overview of the Lens Extension API, refer to the [Common Capabilities](ca
 
 Here is what each section of the Lens Extension API docs can help you with:
 
-* **Get Started** teaches fundamental concepts for building extensions with the Hello World sample.
+* **Getting Started** teaches fundamental concepts for building extensions with the Hello World sample.
 * **Extension Capabilities** dissects Lens's Extension API into smaller categories and points you to more detailed topics.
 * **Extension Guides** includes guides and code samples that explain specific usages of Lens Extension API.
 * **Testing and Publishing** includes in-depth guides on various extension development topics, such as testing and publishing extensions.
-* **Advanced Topics** explains advanced concepts such as integrating with 3rd party applications/services.
+* **API Reference** contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics.
-* **References** contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics.
 
 ## What's New
 

docs/extensions/capabilities/color-reference.md

@@ -1,7 +1,7 @@
-# Theme color reference
+# Theme Color Reference
 You can use theme-based CSS Variables to style an extension according to the active theme.
 
-## Base colors
+## Base Colors
 - `--blue`: blue color.
 - `--magenta`: magenta color.
 - `--golden`: gold/yellow color.
@@ -17,16 +17,16 @@ You can use theme-based CSS Variables to style an extension according to the act
 - `--colorTerminated`: terminated, closed, stale color.
 - `--boxShadow`: semi-transparent box-shadow color.
 
-## Text colors
+## Text Colors
 - `--textColorPrimary`: foreground text color.
 - `--textColorSecondary`: foreground text color for different paragraps, parts of text.
 - `--textColorAccent`: foreground text color to highlight its parts.
 
-## Border colors
+## Border Colors
 - `--borderColor`: border color.
 - `--borderFaintColor`: fainted (lighter or darker, which depends on the theme) border color.
 
-## Layout colors
+## Layout Colors
 - `--mainBackground`: main background color for the app.
 - `--contentColor`: background color for panels contains some data.
 - `--layoutBackground`: background color for layout parts.
@@ -34,19 +34,19 @@ You can use theme-based CSS Variables to style an extension according to the act
 - `--layoutTabsActiveColor`: foreground color for general tabs.
 - `--layoutTabsLineColor`: background color for lines under general tabs.
 
-## Sidebar colors
+## Sidebar Colors
 - `--sidebarLogoBackground`: background color behind logo in sidebar.
 - `--sidebarActiveColor`: foreground color for active menu items in sidebar.
 - `--sidebarSubmenuActiveColor`: foreground color for active submenu items in sidebar.
 - `--sidebarBackground`: background color for sidebar.
 
-## Button colors
+## Button Colors
 - `--buttonPrimaryBackground`: button background color for primary actions.
 - `--buttonDefaultBackground`: default button background color.
 - `--buttonAccentBackground`: accent button background color.
 - `--buttonDisabledBackground`: disabled button background color.
 
-## Table colors
+## Table Colors
 - `--tableBgcStripe`: background color for odd rows in table.
 - `--tableBgcSelected`: background color for selected row in table.
 - `--tableHeaderBackground`: background color for table header.
@@ -55,12 +55,12 @@ You can use theme-based CSS Variables to style an extension according to the act
 - `--tableHeaderColor`: foreground color for table header.
 - `--tableSelectedRowColor`: foreground color for selected row in table.
 
-## Dock colors
+## Dock Colors
 - `--dockHeadBackground`: background color for dock's header.
 - `--dockInfoBackground`: background color for dock's info panel.
 - `--dockInfoBorderColor`: border color for dock's info panel.
 
-## Helm chart colors
+## Helm Chart Colors
 - `--helmLogoBackground`: background color for chart logo.
 - `--helmImgBackground`: background color for chart image.
 - `--helmStableRepo`: background color for stable repo.
@@ -77,7 +77,7 @@ You can use theme-based CSS Variables to style an extension according to the act
 - `--helmDescriptionPreBackground`: Helm chart description pre background color.
 - `--helmDescriptionPreColor`: Helm chart description pre foreground color.
 
-## Terminal colors
+## Terminal Colors
 - `--terminalBackground`: Terminal background color.
 - `--terminalForeground`: Terminal foreground color.
 - `--terminalCursor`: Terminal cursor color.
@@ -100,17 +100,17 @@ You can use theme-based CSS Variables to style an extension according to the act
 - `--terminalBrightCyan`: Terminal bright cyan color.
 - `--terminalBrightWhite`: Terminal bright white color.
 
-## Dialog colors
+## Dialog Colors
 - `--dialogHeaderBackground`: background color for dialog header.
 - `--dialogFooterBackground`: background color for dialog footer.
 
-## Detail panel (Drawer) colors
+## Detail Panel (Drawer) Colors
 - `--drawerTitleText`: drawer title foreground color.
 - `--drawerSubtitleBackground`: drawer subtitle foreground color.
 - `--drawerItemNameColor`: foreground color for item name in drawer.
 - `--drawerItemValueColor`: foreground color for item value in drawer.
 
-## Misc colors
+## Misc Colors
 - `--logsBackground`: background color for pod logs.
 - `--clusterMenuBackground`: background color for cluster menu.
 - `--clusterMenuBorderColor`: border color for cluster menu.

docs/extensions/capabilities/common-capabilities.md

@@ -1,14 +1,14 @@
 # Common Capabilities
 
-Common Capabilities are important building blocks for your extensions. Almost all extensions use some of these functionalities. Here is how you can take advantage of them.
+Here we will discuss common and important building blocks for your extensions, and explain how you can use them. Almost all extensions use some of these functionalities.
 
 ## Main Extension
 
-A main extension runs in the background and, apart from app menu items, does not add content to the Lens UI. If you want to see logs from this extension you need to start Lens from the command line.
+The main extension runs in the background. It adds app menu items to the Lens UI. In order to see logs from this extension, you need to start Lens from the command line.
 
 ### Activate
 
-An extension can register a custom callback that is executed when an extension is activated (started).
+This extension can register a custom callback that is executed when an extension is activated (started).
 
 ``` javascript
 import { LensMainExtension } from "@k8slens/extensions"
@@ -22,7 +22,7 @@ export default class ExampleMainExtension extends LensMainExtension {
 
 ### Deactivate
 
-An extension can register a custom callback that is executed when an extension is deactivated (stopped).
+This extension can register a custom callback that is executed when an extension is deactivated (stopped).
 
 ``` javascript
 import { LensMainExtension } from "@k8slens/extensions"
@@ -36,7 +36,7 @@ export default class ExampleMainExtension extends LensMainExtension {
 
 ### App Menus
 
-An extension can register custom App menus that will be displayed on OS native menus.
+This extension can register custom app menus that will be displayed on OS native menus.
 
 Example:
 
@@ -58,11 +58,11 @@ export default class ExampleMainExtension extends LensMainExtension {
 
 ## Renderer Extension
 
-A renderer extension runs in a browser context and it's visible directly via Lens main window. If you want to see logs from this extension you need to check them via View -> Toggle Developer Tools -> Console.
+The renderer extension runs in a browser context, and is visible in Lens's main window. In order to see logs from this extension you need to check them via **View** > **Toggle Developer Tools** > **Console**.
 
 ### Activate
 
-An extension can register a custom callback that is executed when an extension is activated (started).
+This extension can register a custom callback that is executed when an extension is activated (started).
 
 ``` javascript
 import { LensRendererExtension } from "@k8slens/extensions"
@@ -76,7 +76,7 @@ export default class ExampleExtension extends LensRendererExtension {
 
 ### Deactivate
 
-An extension can register a custom callback that is executed when an extension is deactivated (stopped).
+This extension can register a custom callback that is executed when an extension is deactivated (stopped).
 
 ``` javascript
 import { LensRendererExtension } from "@k8slens/extensions"
@@ -90,7 +90,7 @@ export default class ExampleMainExtension extends LensRendererExtension {
 
 ### Global Pages
 
-An extension can register custom global pages (views) to Lens main window. Global page is a full screen page that hides all the other content from a window.
+This extension can register custom global pages (views) to Lens's main window. The global page is a full-screen page that hides all other content from a window.
 
 ``` typescript
 import React from "react"
@@ -101,7 +101,6 @@ export default class ExampleRendererExtension extends LensRendererExtension {
   globalPages = [
     {
       id: "example",
-      routePath: "/example",
       components: {
         Page: ExamplePage,
       }
@@ -122,7 +121,7 @@ export default class ExampleRendererExtension extends LensRendererExtension {
 
 ### App Preferences
 
-An extension can register custom app preferences. An extension is responsible for storing a state for custom preferences.
+This extension can register custom app preferences. It is responsible for storing a state for custom preferences.
 
 ``` typescript
 import React from "react"
@@ -146,7 +145,7 @@ export default class ExampleRendererExtension extends LensRendererExtension {
 
 ### Cluster Pages
 
-An extension can register custom cluster pages which are visible in a cluster menu when a cluster is opened.
+This extension can register custom cluster pages. These pages are visible in a cluster menu when a cluster is opened.
 
 ``` typescript
 import React from "react"
@@ -156,7 +155,7 @@ import { ExampleIcon, ExamplePage } from "./src/page"
 export default class ExampleExtension extends LensRendererExtension {
   clusterPages = [
     {
-      routePath: "/extension-example", // optional
+      id: "extension-example", // optional
       exact: true, // optional
       components: {
         Page: () => <ExamplePage extension={this}/>,
@@ -179,7 +178,7 @@ export default class ExampleExtension extends LensRendererExtension {
 
 ### Cluster Features
 
-An extension can register installable features for a cluster. A cluster feature is visible in "Cluster Settings" page.
+This extension can register installable features for a cluster. These features are visible in the "Cluster Settings" page.
 
 ``` typescript
 import React from "react"
@@ -208,7 +207,7 @@ export default class ExampleExtension extends LensRendererExtension {
 
 ### Status Bar Items
 
-An extension can register custom icons/texts to a status bar area.
+This extension can register custom icons and text to a status bar area.
 
 ``` typescript
 import React from "react";
@@ -230,7 +229,7 @@ export default class ExampleExtension extends LensRendererExtension {
 
 ### Kubernetes Object Menu Items
 
-An extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.
+This extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.
 
 ``` typescript
 import React from "react"
@@ -253,7 +252,7 @@ export default class ExampleExtension extends LensRendererExtension {
 
 ### Kubernetes Object Details
 
-An extension can register custom details (content) for specified Kubernetes kinds/apiVersions.
+This extension can register custom details (content) for specified Kubernetes kinds/apiVersions.
 
 ``` typescript
 import React from "react"

docs/extensions/capabilities/styling.md

@@ -4,14 +4,12 @@ Lens provides a set of global styles and UI components that can be used by any e
 
 ## Layout
 
-For layout tasks Lens is using [flex.box](https://www.npmjs.com/package/flex.box) library which provides helpful class names to specify some of the [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) properties. For example, `div` with class names:
+For layout tasks, Lens uses the [flex.box](https://www.npmjs.com/package/flex.box) library which provides helpful class names to specify some of the [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) properties. For example, consider the following HTML and its associated CSS properties:
 
 ```html
 <div className="flex column align-center"></div>
 ```
 
-at the end will have following css properties:
-
 ```css
 div {
   display: flex;
@@ -20,11 +18,11 @@ div {
 }
 ```
 
-However, feel free to use any styling technique or framework like [Emotion](https://github.com/emotion-js/emotion) or just plain CSS if you prefer.
+However, you are free to use any styling technique or framework you like, including [Emotion](https://github.com/emotion-js/emotion) or even plain CSS.
 
 ### Layout Variables
 
-There is a set of CSS Variables available for extensions to use for basic layout needs. They are located inside `:root` and are defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss):
+There is a set of CSS variables available for for basic layout needs. They are located inside `:root` and are defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss):
 
 ```css
 --unit: 8px;
@@ -33,7 +31,7 @@ There is a set of CSS Variables available for extensions to use for basic layout
 --border-radius: 3px;
 ```
 
-They are intended to set consistent margins and paddings across components, e.g.
+These variables are intended to set consistent margins and paddings across components. For example:
 
 ```css
 .status {
@@ -44,18 +42,18 @@ They are intended to set consistent margins and paddings across components, e.g.
 
 ## Themes
 
-Lens is using two built-in themes defined in [the themes directory](https://github.com/lensapp/lens/tree/master/src/renderer/themes), one for light, and one for dark color schemes.
+Lens uses two built-in themes defined in [the themes directory](https://github.com/lensapp/lens/tree/master/src/renderer/themes) – one light and one dark.
 
 ### Theme Variables
 
-When Lens is loaded, it transforms the selected theme `json` file into a list of [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) which then gets injected into the `:root` element so any of the down-level components can use them.
+When Lens is loaded, it transforms the selected theme's `json` file into a list of [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). This list then gets injected into the `:root` element so that any of the down-level components can use them.
 ![CSS vars listed in devtools](images/css-vars-in-devtools.png)
 
-When the user changes the theme, the process is repeated, and new CSS Variables appear instead of previous ones.
+When the user changes the theme, the above process is repeated, and new CSS variables appear, replacing the previous ones.
 
-If you want to follow a selected theme to keep the 'native' Lens look and feel, respecting the light/dark appearance of your extension, you can use the provided variables and built-in Lens components such as `Button`, `Select`, `Table`, etc.
+If you want to preserve Lens's native look and feel, with respect to the lightness or darkness of your extension, you can use the provided variables and built-in Lens components such as `Button`, `Select`, `Table`, and so on.
 
-There is a set of CSS Variables available for extensions to use for theming. They are all located inside `:root` and are defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss):
+There is a set of CSS variables available for extensions to use for theming. They are all located inside `:root` and are defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss):
 
 ```css
 --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
@@ -90,7 +88,7 @@ as well as in [the theme modules](https://github.com/lensapp/lens/tree/master/sr
 ...
 ```
 
-They can be used in form of `var(--magenta)`, e.g.
+These variables can be used in the following form: `var(--magenta)`. For example:
 
 ```css
 .status {
@@ -99,14 +97,14 @@ They can be used in form of `var(--magenta)`, e.g.
 }
 ```
 
-A complete list of all themable colors can be found in the [color reference](../color-reference).
+A complete list of themable colors can be found in the [Color Reference](../color-reference).
 
 ### Theme Switching
 
-When the light theme is active, the `<body>` element gets a "theme-light" class, `<body class="theme-light">`. If the class isn't there, assume the theme is dark. The active theme can be changed in the `Preferences` page:
+When the light theme is active, the `<body>` element gets a "theme-light" class, or: `<body class="theme-light">`. If the class isn't there, the theme defaults to dark. The active theme can be changed in the **Preferences** page:
 ![Color Theme](images/theme-selector.png)
 
-Currently, there is no prescribed way of detecting changes to the theme in JavaScript. [This issue](https://github.com/lensapp/lens/issues/1336) hopes to improve on this. In the meantime, you can use a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to observe the `<body>` element's `class` attribute to see if the "theme-light" class gets added to it:
+Currently, there is no prescribed way of detecting changes to the theme in JavaScript. [This issue](https://github.com/lensapp/lens/issues/1336) has been raised to resolve this problem. In the meantime, you can use a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) in order to observe the `<body>` element's `class` attribute in order to see if the "theme-light" class gets added to it:
 
 ```javascript
 ...
@@ -137,9 +135,9 @@ Currently, there is no prescribed way of detecting changes to the theme in JavaS
 
 ## Injected Styles
 
-Every extension is affected by list of default global styles defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss). These are basic browser resets and element styles like setting the `box-sizing` property for every element, default text and background colors, default font sizes, basic heading formatting, etc.
+Every extension is affected by the list of default global styles defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss). These are basic browser resets and element styles, including setting the `box-sizing` property for every element, default text and background colors, default font sizes, basic heading formatting, and so on.
 
-Extension may overwrite these if needed. They have low CSS specificity, so overriding them should be fairly easy.
+Extensions may overwrite these defaults if needed. They have low CSS specificity, so overriding them should be fairly easy.
 
 ## CSS-in-JS
 

docs/extensions/get-started/anatomy.md

@@ -85,7 +85,7 @@ import React from "react"
 export default class ExampleExtension extends LensRendererExtension {
   clusterPages = [
     {
-      routePath: "/extension-example",
+      id: "extension-example",
       components: {
         Page: () => <ExamplePage extension={this}/>,
       }
@@ -94,4 +94,4 @@ export default class ExampleExtension extends LensRendererExtension {
 }
 ```
 
-The Hello World sample extension uses the `Cluster Page` capability, which is just one of the Lens extension API's capabilities. The [Common Capabilities](../capabilities/common-capabilities.md) page will help you home in on the right capabilities to use with your own extensions. 
+The Hello World sample extension uses the `Cluster Page` capability, which is just one of the Lens extension API's capabilities. The [Common Capabilities](../capabilities/common-capabilities.md) page will help you home in on the right capabilities to use with your own extensions.

docs/extensions/get-started/your-first-extension.md

@@ -1,5 +1,11 @@
 # Your First Extension
 
+We recommend to always use [Yeoman generator for Lens Extension](https://github.com/lensapp/generator-lens-ext) to start new extension project. [Read the generator guide here](../guides/generator.md).
+
+If you want to setup the project manually, please continue reading.
+
+## First Extension
+
 In this topic, you'll learn the basics of building extensions by creating an extension that adds a "Hello World" page to a cluster menu.
 
 ## Install the Extension

docs/extensions/guides/README.md

@@ -0,0 +1,29 @@
+# Extension Guides
+
+The basics of the Lens Extension API are covered in [Your First Extension](../get-started/your-first-extension.md). In this section detailed code guides and samples are used to explain how to use specific Lens Extension APIs.
+
+Each guide or sample will include:
+
+- Clearly commented source code.
+- Instructions for running the sample extension.
+- Image of the sample extension's appearance and usage.
+- Listing of Extension API being used.
+- Explanation of Extension API concepts.
+
+## Guides
+
+| Guide | APIs |
+| ----- | ----- |
+| [Main process extension](main-extension.md) | LensMainExtension |
+| [Renderer process extension](renderer-extension.md) | LensRendererExtension |
+| [Stores](stores.md) | |
+| [Components](components.md) | |
+| [KubeObjectListLayout](kube-object-list-layout.md) | |
+| [Working with mobx](working-with-mobx.md) | |
+
+## Samples
+
+| Sample | APIs |
+| ----- | ----- |
+[helloworld](https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample) | LensMainExtension <br> LensRendererExtension <br> Component.Icon <br> Component.IconProps |
+[minikube](https://github.com/lensapp/lens-extension-samples/tree/master/minikube-sample) | LensMainExtension <br> Store.clusterStore <br> Store.workspaceStore |

docs/extensions/guides/generator.md

@@ -0,0 +1,65 @@
+# New Extension Project with Generator
+
+The [Lens Extension Generator](https://github.com/lensapp/generator-lens-ext) scaffolds a project ready for development. Install Yeoman and Lens Extension Generator with:
+
+```bash
+npm install -g yo generator-lens-ext
+```
+
+Run the generator and fill out a few fields for a TypeScript project:
+
+```bash
+yo lens-ext
+# ? What type of extension do you want to create? New Extension (TypeScript)
+# ? What's the name of your extension? my-first-lens-ext
+# ? What's the description of your extension? My hello world extension
+# ? What's your extension's publisher name? @my-org/my-first-lens-ext
+# ? Initialize a git repository? Yes
+# ? Install dependencies after initialization? Yes
+# ? Which package manager to use? yarn
+# ? symlink created extension folder to ~/.k8slens/extensions (mac/linux) or :User
+s\<user>\.k8slens\extensions (windows)? Yes
+```
+
+Start webpack, which watches the `my-first-lens-ext` folder.
+
+```bash
+cd my-first-lens-ext
+npm start # start the webpack server in watch mode
+```
+
+Then, open Lens, you should see a Hello World item in the menu:
+
+![Hello World](images/hello-world.png)
+
+## Developing the Extension
+
+Try to change `my-first-lens-ext/renderer.tsx` to "Hello Lens!":
+
+```tsx
+clusterPageMenus = [
+    {
+        target: { pageId: "hello" },
+        title: "Hello Lens",
+        components: {
+            Icon: ExampleIcon,
+        }
+    }
+]
+```
+
+Then, Reload Lens by CMD+R (Mac) / Ctrl+R (Linux/Windows), you should see the menu item text changes:
+
+![Hello World](images/hello-lens.png)
+
+## Debugging the Extension
+
+[Testing](../testing-and-publishing/testing.md)
+
+## Next steps
+
+You can take a closer look at [Common Capabilities](../capabilities/common-capabilities.md) of extension, how to [style](../capabilities/styling.md) the extension. Or the [Extension Anatomy](anatomy.md).
+
+You are welcome to raise an [issue](https://github.com/lensapp/generator-lens-ext/issues) for Lens Extension Generator, if you find problems, or have feature requests.
+
+The source code of the generator is hosted at [Github](https://github.com/lensapp/generator-lens-ext)

docs/extensions/guides/main-extension.md

@@ -0,0 +1,76 @@
+# Main Extension
+
+The main extension api is the interface to Lens' main process (Lens runs in main and renderer processes). It allows you to access, configure, and customize Lens data, add custom application menu items, and generally run custom code in Lens' main process.
+
+## `LensMainExtension` Class
+
+To create a main extension simply extend the `LensMainExtension` class:
+
+``` typescript
+import { LensMainExtension } from "@k8slens/extensions";
+
+export default class ExampleExtensionMain extends LensMainExtension {
+  onActivate() {
+    console.log('custom main process extension code started');
+  }
+
+  onDeactivate() {
+    console.log('custom main process extension de-activated');
+  }
+}
+```
+
+There are two methods that you can implement to facilitate running your custom code. `onActivate()` is called when your extension has been successfully enabled. By implementing `onActivate()` you can initiate your custom code. `onDeactivate()` is called when the extension is disabled (typically from the [Lens Extensions Page]()) and when implemented gives you a chance to clean up after your extension, if necessary. The example above simply logs messages when the extension is enabled and disabled. Note that to see standard output from the main process there must be a console connected to it. This is typically achieved by starting Lens from the command prompt.
+
+The following example is a little more interesting in that it accesses some Lens state data and periodically logs the name of the currently active cluster in Lens.
+
+``` typescript
+import { LensMainExtension, Store } from "@k8slens/extensions";
+
+const clusterStore = Store.clusterStore
+
+export default class ActiveClusterExtensionMain extends LensMainExtension {
+
+  timer: NodeJS.Timeout
+
+  onActivate() {
+    console.log("Cluster logger activated");
+    this.timer = setInterval(() => {
+      if (!clusterStore.active) {
+        console.log("No active cluster");
+        return;
+      }
+      console.log("active cluster is", clusterStore.active.contextName)
+    }, 5000)
+  }
+
+  onDeactivate() {
+      clearInterval(this.timer)
+      console.log("Cluster logger deactivated");
+  }
+}
+```
+
+See the [Stores](../stores) guide for more details on accessing Lens state data.
+
+### `appMenus`
+
+The only UI feature customizable in the main extension api is the application menu. Custom menu items can be inserted and linked to custom functionality, such as navigating to a specific page. The following example demonstrates adding a menu item to the Help menu.
+
+``` typescript
+import { LensMainExtension } from "@k8slens/extensions";
+
+export default class SamplePageMainExtension extends LensMainExtension {
+  appMenus = [
+    {
+      parentId: "help",
+      label: "Sample",
+      click() {
+        console.log("Sample clicked");
+      }
+    }
+  ]
+}
+```
+
+`appMenus` is an array of objects satisfying the `MenuRegistration` interface. `MenuRegistration` extends React's `MenuItemConstructorOptions` interface. `parentId` is the id of the menu to put this menu item under (todo: is this case sensitive and how do we know what the available ids are?), `label` is the text to show on the menu item, and `click()` is called when the menu item is selected. In this example we simply log a message, but typically you would navigate to a specific page or perform some operation. Pages are associated with the [`LensRendererExtension`](renderer-extension.md) class and can be defined when you extend it. 

docs/extensions/guides/renderer-extension.md

@@ -1 +1,425 @@
 # Renderer Extension
+
+The renderer extension api is the interface to Lens' renderer process (Lens runs in main and renderer processes). It allows you to access, configure, and customize Lens data, add custom Lens UI elements, and generally run custom code in Lens' renderer process. The custom Lens UI elements that can be added include global pages, cluster pages, cluster page menus, cluster features, app preferences, status bar items, KubeObject menu items, and KubeObject details items. These UI elements are based on React components.
+
+## `LensRendererExtension` Class
+
+To create a renderer extension simply extend the `LensRendererExtension` class:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions";
+
+export default class ExampleExtensionMain extends LensRendererExtension {
+  onActivate() {
+    console.log('custom renderer process extension code started');
+  }
+
+  onDeactivate() {
+    console.log('custom renderer process extension de-activated');
+  }
+}
+```
+
+There are two methods that you can implement to facilitate running your custom code. `onActivate()` is called when your extension has been successfully enabled. By implementing `onActivate()` you can initiate your custom code. `onDeactivate()` is called when the extension is disabled (typically from the [Lens Extensions Page]()) and when implemented gives you a chance to clean up after your extension, if necessary. The example above simply logs messages when the extension is enabled and disabled. 
+
+### `clusterPages`
+
+Cluster pages appear as part of the cluster dashboard. They are accessible from the side bar, and are shown in the menu list after *Custom Resources*. It is conventional to use a cluster page to show information or provide functionality pertaining to the active cluster, along with custom data and functionality your extension may have. However, it is not limited to the active cluster. Also, your extension can gain access to the Kubernetes resources in the active cluster in a straightforward manner using the [`clusterStore`](../stores#clusterstore). 
+
+The following example adds a cluster page definition to a `LensRendererExtension` subclass:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page"
+import React from "react"
+
+export default class ExampleExtension extends LensRendererExtension {
+  clusterPages = [
+    {
+      id: "hello",
+      components: {
+        Page: () => <ExamplePage extension={this}/>,
+      }
+    }
+  ];
+}
+```
+
+Cluster pages are objects matching the `PageRegistration` interface. The `id` field identiifies the page, and at its simplest is just a string identifier, as shown in the example above. The 'id' field can also convey route path details, such as variable parameters provided to a page ([See example below]()). The `components` field matches the `PageComponents` interface for wich there is one field, `Page`.  `Page` is of type ` React.ComponentType<any>`, which gives you great flexibility in defining the appearance and behaviour of your page. For the example above `ExamplePage` can be defined in `page.tsx`:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions";
+import React from "react"
+
+export class ExamplePage extends React.Component<{ extension: LensRendererExtension }> {
+  render() {
+    return (
+      <div>
+        <p>Hello world!</p>
+      </div>
+    )
+  }
+}
+```
+
+Note that the `ExamplePage` class defines a property named `extension`. This allows the `ExampleExtension` object to be passed in React-style in the cluster page definition, so that `ExamplePage` can access any `ExampleExtension` subclass data.
+
+### `clusterPageMenus`
+
+The above example code shows how to create a cluster page but not how to make it available to the Lens user. Cluster pages are typically made available through a menu item in the cluster dashboard sidebar. Expanding on the above example a cluster page menu is added to the `ExampleExtension` definition:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page"
+import React from "react"
+
+export default class ExampleExtension extends LensRendererExtension {
+  clusterPages = [
+    {
+      id: "hello",
+      components: {
+        Page: () => <ExamplePage extension={this}/>,
+      }
+    }
+  ];
+
+  clusterPageMenus = [
+    {
+      target: { pageId: "hello" },
+      title: "Hello World",
+      components: {
+        Icon: ExampleIcon,
+      }
+    },
+  ];
+}
+```
+
+Cluster page menus are objects matching the `ClusterPageMenuRegistration` interface. They define the appearance of the cluster page menu item in the cluster dashboard sidebar and the behaviour when the cluster page menu item is activated (typically by a mouse click). The example above uses the `target` field to set the behaviour as a link to the cluster page with `id` of `"hello"`. This is done by setting `target`'s `pageId` field to `"hello"`. The cluster page menu item's appearance is defined by setting the `title` field to the text that is to be displayed in the cluster dashboard sidebar. The `components` field is used to set an icon that appears to the left of the `title` text in the sidebar. Thus when the `"Hello World"` menu item is activated the cluster dashboard will show the contents of `ExamplePage`. This example requires the definition of another React-based component, `ExampleIcon`, which has been added to `page.tsx`:
+
+``` typescript
+import { LensRendererExtension, Component } from "@k8slens/extensions";
+import React from "react"
+
+export function ExampleIcon(props: Component.IconProps) {
+  return <Component.Icon {...props} material="pages" tooltip={"Hi!"}/>
+}
+
+export class ExamplePage extends React.Component<{ extension: LensRendererExtension }> {
+  render() {
+    return (
+      <div>
+        <p>Hello world!</p>
+      </div>
+    )
+  }
+}
+```
+
+`ExampleIcon` introduces one of Lens' built-in components available to extension developers, the `Component.Icon`. Built in are the [Material Design](https://material.io) [icons](https://material.io/resources/icons/). One can be selected by name via the `material` field. `ExampleIcon` also sets a tooltip, shown when the Lens user hovers over the icon with a mouse, by setting the `tooltip` field.
+
+A cluster page menu can also be used to define a foldout submenu in the cluster dashboard sidebar. This enables the grouping of cluster pages. The following example shows how to specify a submenu having two menu items:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page"
+import React from "react"
+
+export default class ExampleExtension extends LensRendererExtension {
+  clusterPages = [
+    {
+      id: "hello",
+      components: {
+        Page: () => <ExamplePage extension={this}/>,
+      }
+    },
+    {
+      id: "bonjour", 
+      components: {
+        Page: () => <ExemplePage extension={this}/>,
+      }
+    }
+  ];
+
+  clusterPageMenus = [
+    {
+      id: "example",
+      title: "Greetings",
+      components: {
+        Icon: ExampleIcon,
+      }
+    },
+    {
+      parentId: "example",
+      target: { pageId: "hello" },
+      title: "Hello World",
+      components: {
+        Icon: ExampleIcon,
+      }
+    },
+    {
+      parentId: "example",
+      target: { pageId: "bonjour" },
+      title: "Bonjour le monde",
+      components: {
+        Icon: ExempleIcon,
+      }
+    }
+  ];
+}
+```
+
+The above defines two cluster pages and three cluster page menu objects. The cluster page definitons are straightforward. The first cluster page menu object defines the parent of a foldout submenu. Setting the `id` field in a cluster page menu definition implies that it is defining a foldout submenu. Also note that the `target` field is not specified (it is ignored if the `id` field is specified). This cluster page menu object specifies the `title` and `components` fields, which are used in displaying the menu item in the cluster dashboard sidebar. Initially the submenu is hidden. Activating this menu item toggles on and off the appearance of the submenu below it. The remaining two cluster page menu objects define the contents of the submenu. A cluster page menu object is defined to be a submenu item by setting the `parentId` field to the id of the parent of a foldout submenu, `"example"` in this case
+
+### `globalPages`
+
+Global pages appear independently of the cluster dashboard and they fill the Lens UI space. A global page is typically triggered from the cluster menu using a [global page menu](#globalpagemenus). They can also be triggered by a [custom app menu selection](../main-extension#appmenus) from a Main Extension or a [custom status bar item](#statusbaritems). Global pages can appear even when there is no active cluster, unlike cluster pages. It is conventional to use a global page to show information and provide functionality relevant across clusters, along with custom data and functionality that your extension may have. 
+
+The following example defines a `LensRendererExtension` subclass with a single global page definition:
+
+``` typescript
+import { LensRendererExtension } from '@k8slens/extensions';
+import { HelpPage } from './page';
+import React from 'react';
+
+export default class HelpExtension extends LensRendererExtension {
+  globalPages = [
+    {
+      id: "help",
+      components: {
+        Page: () => <HelpPage extension={this}/>,
+      }
+    }
+  ];
+}
+```
+
+Global pages are objects matching the `PageRegistration` interface. The `id` field identiifies the page, and at its simplest is just a string identifier, as shown in the example above. The 'id' field can also convey route path details, such as variable parameters provided to a page ([See example below]()). The `components` field matches the `PageComponents` interface for which there is one field, `Page`.  `Page` is of type ` React.ComponentType<any>`, which gives you great flexibility in defining the appearance and behaviour of your page. For the example above `HelpPage` can be defined in `page.tsx`:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions";
+import React from "react"
+
+export class HelpPage extends React.Component<{ extension: LensRendererExtension }> {
+  render() {
+    return (
+      <div>
+        <p>Help yourself</p>
+      </div>
+    )
+  }
+}
+```
+
+Note that the `HelpPage` class defines a property named `extension`. This allows the `HelpExtension` object to be passed in React-style in the global page definition, so that `HelpPage` can access any `HelpExtension` subclass data. 
+
+This example code shows how to create a global page but not how to make it available to the Lens user. Global pages are typically made available through a number of ways. Menu items can be added to the Lens app menu system and set to open a global page when activated (See [`appMenus` in the Main Extension guide](../main-extension#appmenus)). Interactive elements can be placed on the status bar (the blue strip along the bottom of the Lens UI) and can be configured to link to a global page when activated (See [`statusBarItems`](#statusbaritems)). As well, global pages can be made accessible from the cluster menu, which is the vertical strip along the left side of the Lens UI showing the available cluster icons, and the Add Cluster icon. Global page menu icons that are defined using [`globalPageMenus`](#globalpagemenus) appear below the Add Cluster icon.
+
+### `globalPageMenus`
+
+Global page menus connect a global page to the cluster menu, which is the vertical strip along the left side of the Lens UI showing the available cluster icons, and the Add Cluster icon. Expanding on the example from [`globalPages`](#globalPages) a global page menu is added to the `HelpExtension` definition:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions";
+import { HelpIcon, HelpPage } from "./page"
+import React from "react"
+
+export default class HelpExtension extends LensRendererExtension {
+  clusterPages = [
+    {
+      id: "help",
+      components: {
+        Page: () => <HelpPage extension={this}/>,
+      }
+    }
+  ];
+
+  globalPageMenus = [
+    {
+      target: { pageId: "help" },
+      title: "Help",
+      components: {
+        Icon: HelpIcon,
+      }
+    },
+  ];
+}
+```
+
+Global page menus are objects matching the `PageMenuRegistration` interface. They define the appearance of the global page menu item in the cluster menu and the behaviour when the global page menu item is activated (typically by a mouse click). The example above uses the `target` field to set the behaviour as a link to the global page with `id` of `"help"`. This is done by setting `target`'s `pageId` field to `"help"`. The global page menu item's appearance is defined by setting the `title` field to the text that is to be displayed as a tooltip in the cluster menu. The `components` field is used to set an icon that appears in the cluster menu. Thus when the `"Help"` icon is activated the contents of `ExamplePage` will be shown. This example requires the definition of another React-based component, `HelpIcon`, which has been added to `page.tsx`:
+
+``` typescript
+import { LensRendererExtension, Component } from "@k8slens/extensions";
+import React from "react"
+
+export function HelpIcon(props: Component.IconProps) {
+  return <Component.Icon {...props} material="help"/>
+}
+
+export class HelpPage extends React.Component<{ extension: LensRendererExtension }> {
+  render() {
+    return (
+      <div>
+        <p>Help</p>
+      </div>
+    )
+  }
+}
+```
+
+`HelpIcon` introduces one of Lens' built-in components available to extension developers, the `Component.Icon`. Built in are the [Material Design](https://material.io) [icons](https://material.io/resources/icons/). One can be selected by name via the `material` field. 
+
+
+
+
+*********************************************************************
+WIP below!
+*********************************************************************
+
+
+
+### `clusterFeatures`
+
+Cluster features are Kubernetes resources that can applied and managed to the active cluster. They can be installed/uninstalled from the [cluster settings page](). 
+The following example shows how to add a cluster feature:
+
+``` typescript
+import { LensRendererExtension } from "@k8slens/extensions"
+import { MetricsFeature } from "./src/metrics-feature"
+import React from "react"
+
+export default class ClusterMetricsFeatureExtension extends LensRendererExtension {
+  clusterFeatures = [
+    {
+      title: "Metrics Stack",
+      components: {
+        Description: () => {
+          return (
+            <span>
+                Enable timeseries data visualization (Prometheus stack) for your cluster.
+                Install this only if you don't have existing Prometheus stack installed.
+                You can see preview of manifests <a href="https://github.com/lensapp/lens/tree/master/extensions/lens-metrics/resources" target="_blank">here</a>.
+              </span>
+          )
+        }
+      },
+      feature: new MetricsFeature()
+    }
+  ];
+}
+```
+The `title` and `components.Description` fields appear on the cluster settings page. The cluster feature must extend the abstract class `ClusterFeature.Feature`, and specifically implement the following methods:
+
+``` typescript
+  abstract install(cluster: Cluster): Promise<void>;
+  abstract upgrade(cluster: Cluster): Promise<void>;
+  abstract uninstall(cluster: Cluster): Promise<void>;
+  abstract updateStatus(cluster: Cluster): Promise<ClusterFeatureStatus>;
+```
+
+### `appPreferences`
+
+The Preferences page is essentially a global page. Extensions can add custom preferences to the Preferences page, thus providing a single location for users to configure global, for Lens and extensions alike.
+
+``` typescript
+import React from "react"
+import { LensRendererExtension } from "@k8slens/extensions"
+import { myCustomPreferencesStore } from "./src/my-custom-preferences-store"
+import { MyCustomPreferenceHint, MyCustomPreferenceInput } from "./src/my-custom-preference"
+
+
+export default class ExampleRendererExtension extends LensRendererExtension {
+  appPreferences = [
+    {
+      title: "My Custom Preference",
+      components: {
+        Hint: () => <MyCustomPreferenceHint/>,
+        Input: () => <MyCustomPreferenceInput store={myCustomPreferencesStore}/>
+      }
+    }
+  ];
+}
+```
+
+### `statusBarItems`
+
+The Status bar is the blue strip along the bottom of the Lens UI. Status bar items are `React.ReactNode` types, which can be used to convey status information, or act as a link to a global page.
+
+The following example adds a status bar item definition, as well as a global page definition, to a `LensRendererExtension` subclass, and configures the status bar item to navigate to the global upon a mouse click:
+
+``` typescript
+import { LensRendererExtension, Navigation } from '@k8slens/extensions';
+import { MyStatusBarIcon, MyPage } from './page';
+import React from 'react';
+
+export default class ExtensionRenderer extends LensRendererExtension {
+  globalPages = [
+    {
+      path: "/my-extension-path",
+      hideInMenu: true,
+      components: {
+        Page: () => <MyPage extension={this} />,
+      },
+    },
+  ];
+
+  statusBarItems = [
+    {
+      item: (
+        <div
+          className="flex align-center gaps hover-highlight"
+          onClick={() => Navigation.navigate(this.globalPages[0].path)}
+        >
+          <MyStatusBarIcon />
+          <span>My Status Bar Item</span>
+        </div>
+      ),
+    },
+  ];
+}
+```
+
+### `kubeObjectMenuItems`
+
+An extension can add custom menu items (including actions) for specified Kubernetes resource kinds/apiVersions. These menu items appear under the `...` for each listed resource, and on the title bar of the details page for a specific resource.
+
+``` typescript
+import React from "react"
+import { LensRendererExtension } from "@k8slens/extensions";
+import { CustomMenuItem, CustomMenuItemProps } from "./src/custom-menu-item"
+
+export default class ExampleExtension extends LensRendererExtension {
+  kubeObjectMenuItems = [
+    {
+      kind: "Node",
+      apiVersions: ["v1"],
+      components: {
+        MenuItem: (props: CustomMenuItemProps) => <CustomMenuItem {...props} />
+      }
+    }
+  ];
+}
+
+```
+
+### `kubeObjectDetailItems`
+
+An extension can add custom details (content) for specified Kubernetes resource kinds/apiVersions. These custom details appear on the details page for a specific resource.
+
+``` typescript
+import React from "react"
+import { LensRendererExtension } from "@k8slens/extensions";
+import { CustomKindDetails, CustomKindDetailsProps } from "./src/custom-kind-details"
+
+export default class ExampleExtension extends LensRendererExtension {
+  kubeObjectMenuItems = [
+    {
+      kind: "CustomKind",
+      apiVersions: ["custom.acme.org/v1"],
+      components: {
+        Details: (props: CustomKindDetailsProps) => <CustomKindDetails {...props} />
+      }
+    }
+  ];
+}
+```

docs/extensions/guides/working-with-mobx.md

@@ -0,0 +1,23 @@
+# Working with mobx
+
+## Introduction
+
+Lens uses `mobx` as its state manager on top of React's state management system.
+This helps with having a more declarative style of managing state, as opposed to `React`'s native `setState` mechanism.
+You should already have a basic understanding of how `React` handles state ([read here](https://reactjs.org/docs/faq-state.html) for more information).
+However, if you do not, here is a quick overview.
+
+- A `React.Component` is generic over both `Props` and `State` (with default empty object types).
+- `Props` should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.
+- `State` is a component's internal state and can be read by accessing the parent field `state`.
+- `State` **must** be updated using the `setState` parent method which merges the new data with the old state.
+- `React` does do some optimizations around re-rendering components after quick successions of `setState` calls.
+
+## How mobx works:
+
+`mobx` is a package that provides an abstraction over `React`'s state management. The three main concepts are:
+- `observable`: data stored in the component's `state`
+- `action`: a function that modifies any `observable` data
+- `computed`: data that is derived from `observable` data but is not actually stored. Think of this as computing `isEmpty` vs an `observable` field called `count`.
+
+Further reading is available from `mobx`'s [website](https://mobx.js.org/the-gist-of-mobx.html).

docs/extensions/testing-and-publishing/testing.md

@@ -2,29 +2,35 @@
 
 ## Console.log
 
-`console.log()` might be handy for extension developers to prints out info/errors from extensions. To use `console.log`, note that Lens is based on Electron. Electron has two types of processes: [Main and Renderer](https://www.electronjs.org/docs/tutorial/quick-start#main-and-renderer-processes).
+Extension developers might find `console.log()` useful for printing out information and errors from extensions. To use `console.log()`, note that Lens is based on Electron, and that Electron has two types of processes: [Main and Renderer](https://www.electronjs.org/docs/tutorial/quick-start#main-and-renderer-processes).
 
 ### Renderer Process Logs
 
-`console.log()` in Renderer process is printed in the Console in Developer Tools (View > Toggle Developer Tools).
+In the Renderer process, `console.log()` is printed in the Console in Developer Tools (**View** > **Toggle Developer Tools**).
 
 ### Main Process Logs
 
-To view the logs from the main process is a bit trickier, since you cannot open developer tools for them. On MacOSX, one way is to run Lens from the terminal.
+Viewing the logs from the Main process is a little trickier, since they cannot be printed using Developer Tools. 
+
+#### macOS
+
+On macOS, view the Main process logs by running Lens from the terminal:
 
 ```bash
 /Applications/Lens.app/Contents/MacOS/Lens
 ```
 
-You can alos use [Console.app](https://support.apple.com/en-gb/guide/console/welcome/mac) to view logs from Lens.
+You can also use [Console.app](https://support.apple.com/en-gb/guide/console/welcome/mac) to view the Main process logs.
 
-On linux, you can get PID of Lens first
+#### Linux
+
+On Linux, you can access the Main process logs using the Lens PID. First get the PID:
 
 ```bash
 ps aux | grep Lens | grep -v grep
 ```
 
-And get logs by the PID
+Then get the Main process logs using the PID:
 
 ```bash
 tail -f /proc/[pid]/fd/1 # stdout (console.log)

docs/support/README.md

@@ -0,0 +1,16 @@
+# Support
+
+Here you will find different ways of getting support for Lens IDE.
+
+## Community Support
+
+* [Community Slack](https://join.slack.com/t/k8slens/shared_invite/enQtOTc5NjAyNjYyOTk4LWU1NDQ0ZGFkOWJkNTRhYTc2YjVmZDdkM2FkNGM5MjhiYTRhMDU2NDQ1MzIyMDA4ZGZlNmExOTc0N2JmY2M3ZGI) - Request for support and help from the Lens community via Slack.
+* [Github Issues](https://github.com/lensapp/lens/issues) - Submit your issues and feature requests to Lens IDE via Github.
+
+## Commercial Support & Services
+
+If you are interested in paid support options, professional services or training, please see the offerings from the following vendors:
+
+* [Mirantis](https://www.mirantis.com/software/lens/) offers commercial support for officially released versions of Lens IDE on MacOS, Windows and Linux operating systems. In addition, Mirantis offers professional services to create proprietary / custom Lens IDE extensions and custom `msi` packaging to meet enterprise IT policies for software distribution and configuration. Training is also available.
+
+If you'd like to get your business listed in here, please contact us via email [info@k8slens.dev](mailto:info@k8slens.dev)

docs/supporting/requirements.md

@@ -13,7 +13,7 @@ We recommend:
 
 Lens has been tested on the following platforms:
 
-* OS X
+* macOS
 * Windows
 * Linux
 

extensions/example-extension/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "extension-example",
+  "name": "example-extension",
   "version": "1.0.0",
   "description": "Example extension",
   "main": "dist/main.js",

extensions/example-extension/page.tsx

@@ -1,22 +1,22 @@
 import { LensRendererExtension, Component } from "@k8slens/extensions";
 import { CoffeeDoodle } from "react-open-doodles";
 import path from "path";
-import React from "react"
+import React from "react";
 
 export function ExampleIcon(props: Component.IconProps) {
-  return <Component.Icon {...props} material="pages" tooltip={path.basename(__filename)}/>
+  return <Component.Icon {...props} material="pages" tooltip={path.basename(__filename)}/>;
 }
 
 export class ExamplePage extends React.Component<{ extension: LensRendererExtension }> {
   deactivate = () => {
     const { extension } = this.props;
     extension.disable();
-  }
+  };
 
   render() {
     const doodleStyle = {
       width: "200px"
-    }
+    };
     return (
       <div className="flex column gaps align-flex-start">
         <div style={doodleStyle}><CoffeeDoodle accent="#3d90ce" /></div>
@@ -24,6 +24,6 @@ export class ExamplePage extends React.Component<{ extension: LensRendererExtens
         <p>File: <i>{__filename}</i></p>
         <Component.Button accent label="Deactivate" onClick={this.deactivate}/>
       </div>
-    )
+    );
   }
 }

extensions/example-extension/renderer.tsx

@@ -1,18 +1,17 @@
 import { LensRendererExtension } from "@k8slens/extensions";
-import { ExampleIcon, ExamplePage } from "./page"
+import { ExampleIcon, ExamplePage } from "./page";
-import React from "react"
+import React from "react";
 
 export default class ExampleExtension extends LensRendererExtension {
   clusterPages = [
     {
       id: "example",
-      routePath: "/extension-example",
       title: "Example Extension",
       components: {
         Page: () => <ExamplePage extension={this}/>,
       }
     }
-  ]
+  ];
 
   clusterPageMenus = [
     {
@@ -22,5 +21,5 @@ export default class ExampleExtension extends LensRendererExtension {
         Icon: ExampleIcon,
       }
     }
-  ]
+  ];
 }

extensions/kube-object-event-status/renderer.tsx

@@ -1,5 +1,5 @@
 import { LensRendererExtension, K8sApi } from "@k8slens/extensions";
-import { resolveStatus, resolveStatusForCronJobs, resolveStatusForPods } from "./src/resolver"
+import { resolveStatus, resolveStatusForCronJobs, resolveStatusForPods } from "./src/resolver";
 
 export default class EventResourceStatusRendererExtension extends LensRendererExtension {
   kubeObjectStatusTexts = [
@@ -38,5 +38,5 @@ export default class EventResourceStatusRendererExtension extends LensRendererEx
       apiVersions: ["batch/v1"],
       resolve: (cronJob: K8sApi.CronJob) => resolveStatusForCronJobs(cronJob)
     },
-  ]
+  ];
 }

extensions/kube-object-event-status/src/resolver.tsx

@@ -1,9 +1,9 @@
 import { K8sApi } from "@k8slens/extensions";
 
 export function resolveStatus(object: K8sApi.KubeObject): K8sApi.KubeObjectStatus {
-  const eventStore = K8sApi.apiManager.getStore(K8sApi.eventApi)
+  const eventStore = K8sApi.apiManager.getStore(K8sApi.eventApi);
   const events = (eventStore as K8sApi.EventStore).getEventsByObject(object);
-  let warnings = events.filter(evt => evt.isWarning());
+  const warnings = events.filter(evt => evt.isWarning());
   if (!events.length || !warnings.length) {
     return null;
   }
@@ -12,16 +12,16 @@ export function resolveStatus(object: K8sApi.KubeObject): K8sApi.KubeObjectStatu
     level: K8sApi.KubeObjectStatusLevel.WARNING,
     text: `${event.message}`,
     timestamp: event.metadata.creationTimestamp
-  }
+  };
 }
 
 export function resolveStatusForPods(pod: K8sApi.Pod): K8sApi.KubeObjectStatus {
   if (!pod.hasIssues()) {
-    return null
+    return null;
   }
-  const eventStore = K8sApi.apiManager.getStore(K8sApi.eventApi)
+  const eventStore = K8sApi.apiManager.getStore(K8sApi.eventApi);
   const events = (eventStore as K8sApi.EventStore).getEventsByObject(pod);
-  let warnings = events.filter(evt => evt.isWarning());
+  const warnings = events.filter(evt => evt.isWarning());
   if (!events.length || !warnings.length) {
     return null;
   }
@@ -30,13 +30,13 @@ export function resolveStatusForPods(pod: K8sApi.Pod): K8sApi.KubeObjectStatus {
     level: K8sApi.KubeObjectStatusLevel.WARNING,
     text: `${event.message}`,
     timestamp: event.metadata.creationTimestamp
-  }
+  };
 }
 
 export function resolveStatusForCronJobs(cronJob: K8sApi.CronJob): K8sApi.KubeObjectStatus {
-  const eventStore = K8sApi.apiManager.getStore(K8sApi.eventApi)
+  const eventStore = K8sApi.apiManager.getStore(K8sApi.eventApi);
   let events = (eventStore as K8sApi.EventStore).getEventsByObject(cronJob);
-  let warnings = events.filter(evt => evt.isWarning());
+  const warnings = events.filter(evt => evt.isWarning());
   if (cronJob.isNeverRun()) {
     events = events.filter(event => event.reason != "FailedNeedsStart");
   }
@@ -48,5 +48,5 @@ export function resolveStatusForCronJobs(cronJob: K8sApi.CronJob): K8sApi.KubeOb
     level: K8sApi.KubeObjectStatusLevel.WARNING,
     text: `${event.message}`,
     timestamp: event.metadata.creationTimestamp
-  }
+  };
 }

extensions/license-menu-item/main.ts

@@ -6,8 +6,8 @@ export default class LicenseLensMainExtension extends LensMainExtension {
       parentId: "help",
       label: "License",
       async click() {
-        Util.openExternal("https://k8slens.dev/licenses/eula.md")
+        Util.openExternal("https://k8slens.dev/licenses/eula");
       }
     }
-  ]
+  ];
 }

extensions/license-menu-item/webpack.config.ts

@@ -1,4 +1,4 @@
-import path from "path"
+import path from "path";
 
 const outputPath = path.resolve(__dirname, 'dist');
 

extensions/metrics-cluster-feature/renderer.tsx

@@ -1,6 +1,6 @@
-import { LensRendererExtension } from "@k8slens/extensions"
+import { LensRendererExtension } from "@k8slens/extensions";
-import { MetricsFeature } from "./src/metrics-feature"
+import { MetricsFeature } from "./src/metrics-feature";
-import React from "react"
+import React from "react";
 
 export default class ClusterMetricsFeatureExtension extends LensRendererExtension {
   clusterFeatures = [
@@ -10,14 +10,14 @@ export default class ClusterMetricsFeatureExtension extends LensRendererExtensio
         Description: () => {
           return (
             <span>
-                Enable timeseries data visualization (Prometheus stack) for your cluster.
+              Enable timeseries data visualization (Prometheus stack) for your cluster.
-                Install this only if you don't have existing Prometheus stack installed.
+              Install this only if you don't have existing Prometheus stack installed.
-                You can see preview of manifests <a href="https://github.com/lensapp/lens/tree/master/extensions/lens-metrics/resources" target="_blank">here</a>.
+              You can see preview of manifests <a href="https://github.com/lensapp/lens/tree/master/extensions/lens-metrics/resources" target="_blank">here</a>.
-              </span>
+            </span>
-          )
+          );
         }
       },
       feature: new MetricsFeature()
     }
-  ]
+  ];
 }

extensions/metrics-cluster-feature/src/metrics-feature.ts

@@ -1,6 +1,6 @@
-import { ClusterFeature, Store, K8sApi } from "@k8slens/extensions"
+import { ClusterFeature, Store, K8sApi } from "@k8slens/extensions";
-import semver from "semver"
+import semver from "semver";
-import * as path from "path"
+import * as path from "path";
 
 export interface MetricsConfiguration {
   // Placeholder for Metrics config structure
@@ -25,10 +25,10 @@ export interface MetricsConfiguration {
 }
 
 export class MetricsFeature extends ClusterFeature.Feature {
-  name = "metrics"
+  name = "metrics";
-  latestVersion = "v2.17.2-lens1"
+  latestVersion = "v2.17.2-lens1";
 
-  config: MetricsConfiguration = {
+  templateContext: MetricsConfiguration = {
     persistence: {
       enabled: false,
       storageClass: null,
@@ -51,46 +51,46 @@ export class MetricsFeature extends ClusterFeature.Feature {
 
   async install(cluster: Store.Cluster): Promise<void> {
     // Check if there are storageclasses
-    const storageClassApi = K8sApi.forCluster(cluster, K8sApi.StorageClass)
+    const storageClassApi = K8sApi.forCluster(cluster, K8sApi.StorageClass);
-    const scs = await storageClassApi.list()
+    const scs = await storageClassApi.list();
-    this.config.persistence.enabled = scs.some(sc => (
+    this.templateContext.persistence.enabled = scs.some(sc => (
       sc.metadata?.annotations?.['storageclass.kubernetes.io/is-default-class'] === 'true' ||
       sc.metadata?.annotations?.['storageclass.beta.kubernetes.io/is-default-class'] === 'true'
     ));
 
-    super.applyResources(cluster, super.renderTemplates(path.join(__dirname, "../resources/")))
+    super.applyResources(cluster, path.join(__dirname, "../resources/"));
   }
 
   async upgrade(cluster: Store.Cluster): Promise<void> {
-    return this.install(cluster)
+    return this.install(cluster);
   }
 
   async updateStatus(cluster: Store.Cluster): Promise<ClusterFeature.FeatureStatus> {
     try {
-      const statefulSet = K8sApi.forCluster(cluster, K8sApi.StatefulSet)
+      const statefulSet = K8sApi.forCluster(cluster, K8sApi.StatefulSet);
-      const prometheus = await statefulSet.get({name: "prometheus", namespace: "lens-metrics"})
+      const prometheus = await statefulSet.get({name: "prometheus", namespace: "lens-metrics"});
       if (prometheus?.kind) {
         this.status.installed = true;
         this.status.currentVersion = prometheus.spec.template.spec.containers[0].image.split(":")[1];
         this.status.canUpgrade = semver.lt(this.status.currentVersion, this.latestVersion, true);
       } else {
-        this.status.installed = false
+        this.status.installed = false;
       }
     } catch(e) {
       if (e?.error?.code === 404) {
-        this.status.installed = false
+        this.status.installed = false;
       }
     }
 
-    return this.status
+    return this.status;
   }
 
   async uninstall(cluster: Store.Cluster): Promise<void> {
-    const namespaceApi = K8sApi.forCluster(cluster, K8sApi.Namespace)
+    const namespaceApi = K8sApi.forCluster(cluster, K8sApi.Namespace);
-    const clusterRoleBindingApi = K8sApi.forCluster(cluster, K8sApi.ClusterRoleBinding)
+    const clusterRoleBindingApi = K8sApi.forCluster(cluster, K8sApi.ClusterRoleBinding);
-    const clusterRoleApi = K8sApi.forCluster(cluster, K8sApi.ClusterRole)
+    const clusterRoleApi = K8sApi.forCluster(cluster, K8sApi.ClusterRole);
 
-    await namespaceApi.delete({name: "lens-metrics"})
+    await namespaceApi.delete({name: "lens-metrics"});
-    await clusterRoleBindingApi.delete({name: "lens-prometheus"})
+    await clusterRoleBindingApi.delete({name: "lens-prometheus"});
-    await clusterRoleApi.delete({name: "lens-prometheus"})  }
+    await clusterRoleApi.delete({name: "lens-prometheus"});  }
 }

extensions/node-menu/renderer.tsx

@@ -1,6 +1,6 @@
 import { LensRendererExtension } from "@k8slens/extensions";
-import React from "react"
+import React from "react";
-import { NodeMenu, NodeMenuProps } from "./src/node-menu"
+import { NodeMenu, NodeMenuProps } from "./src/node-menu";
 
 export default class NodeMenuRendererExtension extends LensRendererExtension {
   kubeObjectMenuItems = [
@@ -11,5 +11,5 @@ export default class NodeMenuRendererExtension extends LensRendererExtension {
         MenuItem: (props: NodeMenuProps) => <NodeMenu {...props} />
       }
     }
-  ]
+  ];
 }

extensions/node-menu/src/node-menu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Component, K8sApi, Navigation} from "@k8slens/extensions"
+import { Component, K8sApi, Navigation} from "@k8slens/extensions";
 
 export interface NodeMenuProps extends Component.KubeObjectMenuProps<K8sApi.Node> {
 }
@@ -15,7 +15,7 @@ export function NodeMenu(props: NodeMenuProps) {
       newTab: true,
     });
     Navigation.hideDetails();
-  }
+  };
 
   const shell = () => {
     Component.createTerminalTab({
@@ -23,15 +23,15 @@ export function NodeMenu(props: NodeMenuProps) {
       node: nodeName,
     });
     Navigation.hideDetails();
-  }
+  };
 
   const cordon = () => {
     sendToTerminal(`kubectl cordon ${nodeName}`);
-  }
+  };
 
   const unCordon = () => {
-    sendToTerminal(`kubectl uncordon ${nodeName}`)
+    sendToTerminal(`kubectl uncordon ${nodeName}`);
-  }
+  };
 
   const drain = () => {
     const command = `kubectl drain ${nodeName} --delete-local-data --ignore-daemonsets --force`;
@@ -43,8 +43,8 @@ export function NodeMenu(props: NodeMenuProps) {
           Are you sure you want to drain <b>{nodeName}</b>?
         </p>
       ),
-    })
+    });
-  }
+  };
 
   return (
     <>

extensions/pod-menu/renderer.tsx

@@ -1,7 +1,7 @@
 import { LensRendererExtension } from "@k8slens/extensions";
-import { PodShellMenu, PodShellMenuProps } from "./src/shell-menu"
+import { PodShellMenu, PodShellMenuProps } from "./src/shell-menu";
-import { PodLogsMenu, PodLogsMenuProps } from "./src/logs-menu"
+import { PodLogsMenu, PodLogsMenuProps } from "./src/logs-menu";
-import React from "react"
+import React from "react";
 
 export default class PodMenuRendererExtension extends LensRendererExtension {
   kubeObjectMenuItems = [
@@ -19,5 +19,5 @@ export default class PodMenuRendererExtension extends LensRendererExtension {
         MenuItem: (props: PodLogsMenuProps) => <PodLogsMenu {...props} />
       }
     }
-  ]
+  ];
 }

extensions/pod-menu/src/logs-menu.tsx

@@ -19,7 +19,7 @@ export class PodLogsMenu extends React.Component<PodLogsMenuProps> {
   }
 
   render() {
-    const { object: pod, toolbar } = this.props
+    const { object: pod, toolbar } = this.props;
     const containers = pod.getAllContainers();
     const statuses = pod.getContainerStatuses();
     if (!containers.length) return null;
@@ -33,25 +33,25 @@ export class PodLogsMenu extends React.Component<PodLogsMenuProps> {
             <Component.SubMenu>
               {
                 containers.map(container => {
-                  const { name } = container
+                  const { name } = container;
                   const status = statuses.find(status => status.name === name);
                   const brick = status ? (
                     <Component.StatusBrick
                       className={Util.cssNames(Object.keys(status.state)[0], { ready: status.ready })}
                     />
-                  ) : null
+                  ) : null;
                   return (
                     <Component.MenuItem key={name} onClick={Util.prevDefault(() => this.showLogs(container))} className="flex align-center">
                       {brick}
                       {name}
                     </Component.MenuItem>
-                  )
+                  );
                 })
               }
             </Component.SubMenu>
           </>
         )}
       </Component.MenuItem>
-    )
+    );
   }
 }

extensions/pod-menu/src/shell-menu.tsx

@@ -9,16 +9,16 @@ export interface PodShellMenuProps extends Component.KubeObjectMenuProps<K8sApi.
 export class PodShellMenu extends React.Component<PodShellMenuProps> {
   async execShell(container?: string) {
     Navigation.hideDetails();
-    const { object: pod } = this.props
+    const { object: pod } = this.props;
-    const containerParam = container ? `-c ${container}` : ""
+    const containerParam = container ? `-c ${container}` : "";
-    let command = `kubectl exec -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam} "--"`
+    let command = `kubectl exec -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam} "--"`;
     if (window.navigator.platform !== "Win32") {
-      command = `exec ${command}`
+      command = `exec ${command}`;
     }
     if (pod.getSelectedNodeOs() === "windows") {
-      command = `${command} powershell`
+      command = `${command} powershell`;
     } else {
-      command = `${command} sh -c "clear; (bash || ash || sh)"`
+      command = `${command} sh -c "clear; (bash || ash || sh)"`;
     }
 
     const shell = Component.createTerminalTab({
@@ -32,7 +32,7 @@ export class PodShellMenu extends React.Component<PodShellMenuProps> {
   }
 
   render() {
-    const { object, toolbar } = this.props
+    const { object, toolbar } = this.props;
     const containers = object.getRunningContainers();
     if (!containers.length) return null;
     return (
@@ -51,13 +51,13 @@ export class PodShellMenu extends React.Component<PodShellMenuProps> {
                       <Component.StatusBrick/>
                       {name}
                     </Component.MenuItem>
-                  )
+                  );
                 })
               }
             </Component.SubMenu>
           </>
         )}
       </Component.MenuItem>
-    )
+    );
   }
 }

extensions/support-page/main.ts

@@ -1,13 +0,0 @@
-import { LensMainExtension } from "@k8slens/extensions";
-
-export default class SupportPageMainExtension extends LensMainExtension {
-  appMenus = [
-    {
-      parentId: "help",
-      label: "Support",
-      click: () => {
-        this.navigate();
-      }
-    }
-  ]
-}

extensions/support-page/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "lens-support-page",
-  "version": "0.1.0",
-  "description": "Lens support page",
-  "main": "dist/main.js",
-  "renderer": "dist/renderer.js",
-  "scripts": {
-    "build": "webpack -p",
-    "dev": "webpack --watch",
-    "test": "jest --passWithNoTests --env=jsdom src $@"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "@types/react": "^16.9.53",
-    "@types/react-router": "^5.1.8",
-    "@types/webpack": "^4.41.17",
-    "css-loader": "^5.0.0",
-    "jest": "^26.6.3",
-    "mobx": "^5.15.5",
-    "react": "^16.13.1",
-    "sass-loader": "^10.0.4",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^8.0.4",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.3",
-    "webpack": "^4.44.2"
-  }
-}

extensions/support-page/renderer.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { Component, Interface, LensRendererExtension } from "@k8slens/extensions";
-import { SupportPage } from "./src/support";
-
-export default class SupportPageRendererExtension extends LensRendererExtension {
-  globalPages: Interface.PageRegistration[] = [
-    {
-      components: {
-        Page: SupportPage,
-      }
-    }
-  ]
-
-  statusBarItems: Interface.StatusBarRegistration[] = [
-    {
-      item: (
-        <div className="SupportPageIcon flex align-center" onClick={() => this.navigate()}>
-          <Component.Icon interactive material="help" smallest/>
-        </div>
-      )
-    }
-  ]
-}

extensions/support-page/src/support.scss

@@ -1,19 +0,0 @@
-.SupportPage {
-  a[target=_blank] {
-    text-decoration: none;
-    border-bottom: 1px solid;
-
-    &:after {
-      content: "launch";
-      font: small "Material Icons";
-      vertical-align: middle;
-      margin-left: 2px;
-    }
-  }
-}
-
-.SupportPageIcon {
-  color: white;
-  font-size: var(--font-size-small);
-  padding-right: calc(var(--padding) / 2);
-}

extensions/support-page/src/support.tsx

@@ -1,29 +0,0 @@
-// TODO: support localization / figure out how to extract / consume i18n strings
-
-import "./support.scss"
-import React from "react"
-import { observer } from "mobx-react"
-import { App, Component } from "@k8slens/extensions";
-
-@observer
-export class SupportPage extends React.Component {
-  render() {
-    const { PageLayout } = Component;
-    const { slackUrl, issuesTrackerUrl } = App;
-    return (
-      <PageLayout showOnTop className="SupportPage" header={<h2>Support</h2>}>
-        <h2>Community Slack Channel</h2>
-        <p>
-          Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
-        </p>
-
-        <h2>Report an Issue</h2>
-        <p>
-          Review existing issues or open a new one <a href={issuesTrackerUrl} target="_blank">here</a>
-        </p>
-
-        {/*<h2><Trans>Commercial Support</Trans></h2>*/}
-      </PageLayout>
-    );
-  }
-}

extensions/support-page/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "dist",
-    "baseUrl": ".",
-    "module": "CommonJS",
-    "target": "ES2017",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "moduleResolution": "Node",
-    "sourceMap": false,
-    "declaration": false,
-    "strict": false,
-    "noImplicitAny": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "jsx": "react",
-    "paths": {
-      "*": [
-        "node_modules/*",
-        "../../types/*"
-      ]
-    }
-  },
-  "include": [
-    "renderer.tsx",
-    "src/**/*"
-  ]
-}

extensions/support-page/webpack.config.ts

@@ -1,75 +0,0 @@
-import path from "path"
-
-const outputPath = path.resolve(__dirname, 'dist');
-
-const lensExternals = {
-  "@k8slens/extensions": "var global.LensExtensions",
-  "react": "var global.React",
-  "mobx": "var global.Mobx",
-  "mobx-react": "var global.MobxReact",
-};
-
-export default [
-  {
-    entry: './main.ts',
-    context: __dirname,
-    target: "electron-main",
-    mode: "production",
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: 'ts-loader',
-          exclude: /node_modules/,
-        },
-      ],
-    },
-    externals: [
-      lensExternals,
-    ],
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
-    },
-    output: {
-      libraryTarget: "commonjs2",
-      globalObject: "this",
-      filename: 'main.js',
-      path: outputPath,
-    },
-  },
-  {
-    entry: './renderer.tsx',
-    context: __dirname,
-    target: "electron-renderer",
-    mode: "production",
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: 'ts-loader',
-          exclude: /node_modules/,
-        },
-        {
-          test: /\.s?css$/,
-          use: [
-            "style-loader",
-            "css-loader",
-            "sass-loader",
-          ]
-        }
-      ],
-    },
-    externals: [
-      lensExternals,
-    ],
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
-    },
-    output: {
-      libraryTarget: "commonjs2",
-      globalObject: "this",
-      filename: 'renderer.js',
-      path: outputPath,
-    },
-  },
-];

extensions/telemetry/main.ts

@@ -1,18 +1,19 @@
 import { LensMainExtension } from "@k8slens/extensions";
-import { telemetryPreferencesStore } from "./src/telemetry-preferences-store"
+import { telemetryPreferencesStore } from "./src/telemetry-preferences-store";
 import { tracker } from "./src/tracker";
 
 export default class TelemetryMainExtension extends LensMainExtension {
 
   async onActivate() {
-    console.log("telemetry main extension activated")
+    console.log("telemetry main extension activated");
-    tracker.start()
+    tracker.start();
-    tracker.reportPeriodically()
+    tracker.reportPeriodically();
-    await telemetryPreferencesStore.loadExtension(this)
+    tracker.watchExtensions();
+    await telemetryPreferencesStore.loadExtension(this);
   }
 
   onDeactivate() {
-    tracker.stop()
+    tracker.stop();
-    console.log("telemetry main extension deactivated")
+    console.log("telemetry main extension deactivated");
   }
 }

extensions/telemetry/renderer.tsx

@@ -1,8 +1,8 @@
 import { LensRendererExtension } from "@k8slens/extensions";
-import { telemetryPreferencesStore } from "./src/telemetry-preferences-store"
+import { telemetryPreferencesStore } from "./src/telemetry-preferences-store";
-import { TelemetryPreferenceHint, TelemetryPreferenceInput } from "./src/telemetry-preference"
+import { TelemetryPreferenceHint, TelemetryPreferenceInput } from "./src/telemetry-preference";
-import { tracker } from "./src/tracker"
+import { tracker } from "./src/tracker";
-import React from "react"
+import React from "react";
 
 export default class TelemetryRendererExtension extends LensRendererExtension {
   appPreferences = [
@@ -16,8 +16,8 @@ export default class TelemetryRendererExtension extends LensRendererExtension {
   ];
 
   async onActivate() {
-    console.log("telemetry extension activated")
+    console.log("telemetry extension activated");
-    tracker.start()
+    tracker.start();
-    await telemetryPreferencesStore.loadExtension(this)
+    await telemetryPreferencesStore.loadExtension(this);
   }
 }

extensions/telemetry/src/telemetry-preference.tsx

@@ -1,19 +1,19 @@
-import { Component } from "@k8slens/extensions"
+import { Component } from "@k8slens/extensions";
-import React from "react"
+import React from "react";
 import { observer } from "mobx-react";
-import { TelemetryPreferencesStore } from "./telemetry-preferences-store"
+import { TelemetryPreferencesStore } from "./telemetry-preferences-store";
 
 @observer
 export class TelemetryPreferenceInput extends React.Component<{telemetry: TelemetryPreferencesStore}, {}> {
   render() {
-    const { telemetry } = this.props
+    const { telemetry } = this.props;
     return (
       <Component.Checkbox
         label="Allow telemetry & usage tracking"
         value={telemetry.enabled}
         onChange={v => { telemetry.enabled = v; }}
       />
-    )
+    );
   }
 }
 
@@ -21,6 +21,6 @@ export class TelemetryPreferenceHint extends React.Component {
   render() {
     return (
       <span>Telemetry & usage data is collected to continuously improve the Lens experience.</span>
-    )
+    );
   }
 }

extensions/telemetry/src/telemetry-preferences-store.ts

@@ -1,35 +1,33 @@
 import { Store } from "@k8slens/extensions";
-import { toJS } from "mobx"
+import { toJS } from "mobx";
 
-export type TelemetryPreferencesModel = {
+export type TelemetryPreferencesModel = {
   enabled: boolean;
-}
+};
 
 export class TelemetryPreferencesStore extends Store.ExtensionStore<TelemetryPreferencesModel> {
+  enabled = true;
+
   private constructor() {
     super({
       configName: "preferences-store",
       defaults: {
         enabled: true
       }
-    })
+    });
   }
 
-  get enabled() {
+  protected fromStore({ enabled }: TelemetryPreferencesModel): void {
-    return this.data.enabled
+    this.enabled = enabled;
-  }
-
-  set enabled(v: boolean) {
-    this.data.enabled = v
   }
 
   toJSON(): TelemetryPreferencesModel {
     return toJS({
-      enabled: this.data.enabled
+      enabled: this.enabled
     }, {
       recurseEverything: true
-    })
+    });
   }
 }
 
-export const telemetryPreferencesStore = TelemetryPreferencesStore.getInstance<TelemetryPreferencesStore>()
+export const telemetryPreferencesStore = TelemetryPreferencesStore.getInstance<TelemetryPreferencesStore>();

extensions/telemetry/src/tracker.ts

@@ -1,91 +1,114 @@
-import { EventBus, Util, Store, App } from "@k8slens/extensions"
+import { EventBus, Util, Store, App } from "@k8slens/extensions";
-import ua from "universal-analytics"
+import ua from "universal-analytics";
-import Analytics from "analytics-node"
+import Analytics from "analytics-node";
-import { machineIdSync } from "node-machine-id"
+import { machineIdSync } from "node-machine-id";
-import { telemetryPreferencesStore } from "./telemetry-preferences-store"
+import { telemetryPreferencesStore } from "./telemetry-preferences-store";
+import { reaction, IReactionDisposer } from "mobx";
+import { comparer } from "mobx";
 
 export class Tracker extends Util.Singleton {
-  static readonly GA_ID = "UA-159377374-1"
+  static readonly GA_ID = "UA-159377374-1";
-  static readonly SEGMENT_KEY = "YENwswyhlOgz8P7EFKUtIZ2MfON7Yxqb"
+  static readonly SEGMENT_KEY = "YENwswyhlOgz8P7EFKUtIZ2MfON7Yxqb";
-  protected eventHandlers: Array<(ev: EventBus.AppEvent ) => void> = []
+  protected eventHandlers: Array<(ev: EventBus.AppEvent ) => void> = [];
-  protected started = false
+  protected started = false;
-  protected visitor: ua.Visitor
+  protected visitor: ua.Visitor;
-  protected analytics: Analytics
+  protected analytics: Analytics;
   protected machineId: string = null;
   protected ip: string = null;
   protected appVersion: string;
   protected locale: string;
   protected userAgent: string;
   protected anonymousId: string;
-  protected os: string
+  protected os: string;
+  protected disposers: IReactionDisposer[];
 
-  protected reportInterval: NodeJS.Timeout
+  protected reportInterval: NodeJS.Timeout;
 
   private constructor() {
     super();
-    this.anonymousId = machineIdSync()
+    this.anonymousId = machineIdSync();
-    this.os = this.resolveOS()
+    this.os = this.resolveOS();
-    this.userAgent = `Lens ${App.version} (${this.os})`
+    this.userAgent = `Lens ${App.version} (${this.os})`;
     try {
-      this.visitor = ua(Tracker.GA_ID, this.anonymousId, { strictCidFormat: false })
+      this.visitor = ua(Tracker.GA_ID, this.anonymousId, { strictCidFormat: false });
     } catch (error) {
-      this.visitor = ua(Tracker.GA_ID)
+      this.visitor = ua(Tracker.GA_ID);
     }
 
-    this.analytics = new Analytics(Tracker.SEGMENT_KEY, { flushAt: 1 })
+    this.analytics = new Analytics(Tracker.SEGMENT_KEY, { flushAt: 1 });
-    this.visitor.set("dl", "https://telemetry.k8slens.dev")
+    this.visitor.set("dl", "https://telemetry.k8slens.dev");
-    this.visitor.set("ua", this.userAgent)
+    this.visitor.set("ua", this.userAgent);
+    this.disposers = [];
   }
 
   start() {
-    if (this.started === true) { return }
+    if (this.started === true) { return; }
 
-    this.started = true
+    this.started = true;
 
     const handler = (ev: EventBus.AppEvent) => {
-      this.event(ev.name, ev.action, ev.params)
+      this.event(ev.name, ev.action, ev.params);
-    }
+    };
-    this.eventHandlers.push(handler)
+    this.eventHandlers.push(handler);
-    EventBus.appEventBus.addListener(handler)
+    EventBus.appEventBus.addListener(handler);
+  }
+
+  watchExtensions() {
+    let previousExtensions = App.getEnabledExtensions();
+    this.disposers.push(reaction(() => App.getEnabledExtensions(), (currentExtensions) => {
+      const removedExtensions = previousExtensions.filter(x => !currentExtensions.includes(x));
+      removedExtensions.forEach(ext => {
+        this.event("extension", "disable", { extension: ext });
+      });
+      const newExtensions = currentExtensions.filter(x => !previousExtensions.includes(x));
+      newExtensions.forEach(ext => {
+        this.event("extension", "enable", { extension: ext });
+      });
+      previousExtensions = currentExtensions;
+    }, { equals: comparer.structural }));
   }
 
   reportPeriodically() {
     this.reportInterval = setInterval(() => {
-      this.reportData()
+      this.reportData();
-    }, 60 * 60 * 1000) // report every 1h
+    }, 60 * 60 * 1000); // report every 1h
   }
 
   stop() {
-    if (!this.started) { return }
+    if (!this.started) { return; }
 
-    this.started = false
+    this.started = false;
 
     for (const handler of this.eventHandlers) {
-      EventBus.appEventBus.removeListener(handler)
+      EventBus.appEventBus.removeListener(handler);
     }
     if (this.reportInterval) {
-      clearInterval(this.reportInterval)
+      clearInterval(this.reportInterval);
     }
+    this.disposers.forEach(disposer => {
+      disposer();
+    });
   }
 
   protected async isTelemetryAllowed(): Promise<boolean> {
-    return telemetryPreferencesStore.enabled
+    return telemetryPreferencesStore.enabled;
   }
 
   protected reportData() {
-    const clustersList = Store.clusterStore.enabledClustersList
+    const clustersList = Store.clusterStore.enabledClustersList;
 
     this.event("generic-data", "report", {
       appVersion: App.version,
       os: this.os,
       clustersCount: clustersList.length,
-      workspacesCount: Store.workspaceStore.enabledWorkspacesList.length
+      workspacesCount: Store.workspaceStore.enabledWorkspacesList.length,
-    })
+      extensions: App.getEnabledExtensions()
+    });
 
     clustersList.forEach((cluster) => {
-      if (!cluster?.metadata.lastSeen) { return }
+      if (!cluster?.metadata.lastSeen) { return; }
-      this.reportClusterData(cluster)
+      this.reportClusterData(cluster);
-    })
+    });
   }
 
   protected reportClusterData(cluster: Store.ClusterModel) {
@@ -96,26 +119,26 @@ export class Tracker extends Util.Singleton {
       distribution: cluster.metadata.distribution,
       nodesCount: cluster.metadata.nodes,
       lastSeen: cluster.metadata.lastSeen
-    })
+    });
   }
 
   protected resolveOS() {
-    let os = ""
+    let os = "";
     if (App.isMac) {
-      os = "MacOS"
+      os = "MacOS";
     } else if(App.isWindows) {
-      os = "Windows"
+      os = "Windows";
     } else if (App.isLinux) {
-      os = "Linux"
+      os = "Linux";
       if (App.isSnap) {
-        os += "; Snap"
+        os += "; Snap";
       } else {
-        os += "; AppImage"
+        os += "; AppImage";
       }
     } else {
-      os = "Unknown"
+      os = "Unknown";
     }
-    return os
+    return os;
   }
 
   protected async event(eventCategory: string, eventAction: string, otherParams = {}) {
@@ -128,7 +151,7 @@ export class Tracker extends Util.Singleton {
         ec: eventCategory,
         ea: eventAction,
         ...otherParams,
-      }).send()
+      }).send();
 
       this.analytics.track({
         anonymousId: this.anonymousId,
@@ -141,9 +164,9 @@ export class Tracker extends Util.Singleton {
           ...otherParams,
         },
 
-      })
+      });
     } catch (err) {
-      console.error(`Failed to track "${eventCategory}:${eventAction}"`, err)
+      console.error(`Failed to track "${eventCategory}:${eventAction}"`, err);
     }
   }
 }

integration/__tests__/app.tests.ts

@@ -4,159 +4,214 @@
   TEST_NAMESPACE namespace. This is done to minimize destructive impact of the cluster tests on an existing minikube
   cluster and vice versa.
 */
-import { Application } from "spectron"
+import { Application } from "spectron";
-import * as util from "../helpers/utils"
+import * as util from "../helpers/utils";
-import { spawnSync } from "child_process"
+import { spawnSync } from "child_process";
 
-const describeif = (condition: boolean) => condition ? describe : describe.skip
+const describeif = (condition: boolean) => condition ? describe : describe.skip;
-const itif = (condition: boolean) => condition ? it : it.skip
+const itif = (condition: boolean) => condition ? it : it.skip;
 
-jest.setTimeout(60000)
+jest.setTimeout(60000);
 
 // FIXME (!): improve / simplify all css-selectors + use [data-test-id="some-id"] (already used in some tests below)
 describe("Lens integration tests", () => {
-  const TEST_NAMESPACE = "integration-tests"
+  const TEST_NAMESPACE = "integration-tests";
+  const BACKSPACE = "\uE003";
 
-  const BACKSPACE = "\uE003"
+  let app: Application;
-  let app: Application
 
   const appStart = async () => {
-    app = util.setup()
+    app = util.setup();
-    await app.start()
+    await app.start();
     // Wait for splash screen to be closed
     while (await app.client.getWindowCount() > 1);
-    await app.client.windowByIndex(0)
+    await app.client.windowByIndex(0);
-    await app.client.waitUntilWindowLoaded()
+    await app.client.waitUntilWindowLoaded();
-  }
+  };
 
   const clickWhatsNew = async (app: Application) => {
-    await app.client.waitUntilTextExists("h1", "What's new?")
+    await app.client.waitUntilTextExists("h1", "What's new?");
-    await app.client.click("button.primary")
+    await app.client.click("button.primary");
-    await app.client.waitUntilTextExists("h1", "Welcome")
+    await app.client.waitUntilTextExists("h1", "Welcome");
-  }
+  };
-
-  describe("app start", () => {
-    beforeAll(appStart, 20000)
-
-    afterAll(async () => {
-      if (app && app.isRunning()) {
-        return util.tearDown(app)
-      }
-    })
-
-    it('shows "whats new"', async () => {
-      await clickWhatsNew(app)
-    })
-
-    it('shows "add cluster"', async () => {
-      await app.electron.ipcRenderer.send('test-menu-item-click', "File", "Add Cluster")
-      await app.client.waitUntilTextExists("h2", "Add Cluster")
-    })
-
-    describe("preferences page", () => {
-      it('shows "preferences"', async () => {
-        let appName: string = process.platform === "darwin" ? "Lens" : "File"
-        await app.electron.ipcRenderer.send('test-menu-item-click', appName, "Preferences")
-        await app.client.waitUntilTextExists("h2", "Preferences")
-      })
-
-      it('ensures helm repos', async () => {
-        await app.client.waitUntilTextExists("div.repos #message-stable", "stable") // wait for the helm-cli to fetch the stable repo
-        await app.client.click("#HelmRepoSelect") // click the repo select to activate the drop-down
-        await app.client.waitUntilTextExists("div.Select__option", "")  // wait for at least one option to appear (any text)
-      })
-    })
-
-    it.skip('quits Lens"', async () => {
-      await app.client.keys(['Meta', 'Q'])
-      await app.client.keys('Meta')
-    })
-  })
 
   const minikubeReady = (): boolean => {
     // determine if minikube is running
-    let status = spawnSync("minikube status", { shell: true })
+    {
-    if (status.status !== 0) {
+      const { status } = spawnSync("minikube status", { shell: true });
-      console.warn("minikube not running")
+      if (status !== 0) {
-      return false
+        console.warn("minikube not running");
+        return false;
+      }
     }
 
     // Remove TEST_NAMESPACE if it already exists
-    status = spawnSync(`minikube kubectl -- get namespace ${TEST_NAMESPACE}`, { shell: true })
+    {
-    if (status.status === 0) {
+      const { status } = spawnSync(`minikube kubectl -- get namespace ${TEST_NAMESPACE}`, { shell: true });
-      console.warn(`Removing existing ${TEST_NAMESPACE} namespace`)
+      if (status === 0) {
-      status = spawnSync(`minikube kubectl -- delete namespace ${TEST_NAMESPACE}`, { shell: true })
+        console.warn(`Removing existing ${TEST_NAMESPACE} namespace`);
-      if (status.status !== 0) {
+
-        console.warn(`Error removing ${TEST_NAMESPACE} namespace: ${status.stderr.toString()}`)
+        const { status, stdout, stderr } = spawnSync(
-        return false
+          `minikube kubectl -- delete namespace ${TEST_NAMESPACE}`,
+          { shell: true },
+        );
+        if (status !== 0) {
+          console.warn(`Error removing ${TEST_NAMESPACE} namespace: ${stderr.toString()}`);
+          return false;
+        }
+
+        console.log(stdout.toString());
       }
-      console.log(status.stdout.toString())
     }
-    return true
+
-  }
+    return true;
-  const ready = minikubeReady()
+  };
+  const ready = minikubeReady();
+
+  describe("app start", () => {
+    beforeAll(appStart, 20000);
+
+    afterAll(async () => {
+      if (app?.isRunning()) {
+        await util.tearDown(app);
+      }
+    });
+
+    it('shows "whats new"', async () => {
+      await clickWhatsNew(app);
+    });
+
+    it('shows "add cluster"', async () => {
+      await app.electron.ipcRenderer.send('test-menu-item-click', "File", "Add Cluster");
+      await app.client.waitUntilTextExists("h2", "Add Cluster");
+    });
+
+    describe("preferences page", () => {
+      it('shows "preferences"', async () => {
+        const appName: string = process.platform === "darwin" ? "Lens" : "File";
+        await app.electron.ipcRenderer.send('test-menu-item-click', appName, "Preferences");
+        await app.client.waitUntilTextExists("h2", "Preferences");
+      });
+
+      it('ensures helm repos', async () => {
+        await app.client.waitUntilTextExists("div.repos #message-bitnami", "bitnami"); // wait for the helm-cli to fetch the bitnami repo
+        await app.client.click("#HelmRepoSelect"); // click the repo select to activate the drop-down
+        await app.client.waitUntilTextExists("div.Select__option", "");  // wait for at least one option to appear (any text)
+      });
+    });
+
+    it.skip('quits Lens"', async () => {
+      await app.client.keys(['Meta', 'Q']);
+      await app.client.keys('Meta');
+    });
+  });
+
+  describeif(ready)("workspaces", () => {
+    beforeAll(appStart, 20000);
+
+    afterAll(async () => {
+      if (app && app.isRunning()) {
+        return util.tearDown(app);
+      }
+    });
+
+    it('creates new workspace', async () => {
+      await clickWhatsNew(app);
+      await app.client.click('#current-workspace .Icon');
+      await app.client.click('a[href="/workspaces"]');
+      await app.client.click('.Workspaces button.Button');
+      await app.client.keys("test-workspace");
+      await app.client.click('.Workspaces .Input.description input');
+      await app.client.keys("test description");
+      await app.client.click('.Workspaces .workspace.editing .Icon');
+      await app.client.waitUntilTextExists(".workspace .name a", "test-workspace");
+    });
+
+    it('adds cluster in default workspace', async () => {
+      await addMinikubeCluster(app);
+      await app.client.waitUntilTextExists("pre.kube-auth-out", "Authentication proxy started");
+      await app.client.waitForExist(`iframe[name="minikube"]`);
+      await app.client.waitForVisible(".ClustersMenu .ClusterIcon.active");
+    });
+
+    it('adds cluster in test-workspace', async () => {
+      await app.client.click('#current-workspace .Icon');
+      await app.client.waitForVisible('.WorkspaceMenu li[title="test description"]');
+      await app.client.click('.WorkspaceMenu li[title="test description"]');
+      await addMinikubeCluster(app);
+      await app.client.waitUntilTextExists("pre.kube-auth-out", "Authentication proxy started");
+      await app.client.waitForExist(`iframe[name="minikube"]`);
+    });
+
+    it('checks if default workspace has active cluster', async () => {
+      await app.client.click('#current-workspace .Icon');
+      await app.client.waitForVisible('.WorkspaceMenu > li:first-of-type');
+      await app.client.click('.WorkspaceMenu > li:first-of-type');
+      await app.client.waitForVisible(".ClustersMenu .ClusterIcon.active");
+    });
+  });
 
   const addMinikubeCluster = async (app: Application) => {
-    await app.client.click("div.add-cluster")
+    await app.client.click("div.add-cluster");
-    await app.client.waitUntilTextExists("div", "Select kubeconfig file")
+    await app.client.waitUntilTextExists("div", "Select kubeconfig file");
-    await app.client.click("div.Select__control") // show the context drop-down list
+    await app.client.click("div.Select__control"); // show the context drop-down list
-    await app.client.waitUntilTextExists("div", "minikube")
+    await app.client.waitUntilTextExists("div", "minikube");
     if (!await app.client.$("button.primary").isEnabled()) {
-      await app.client.click("div.minikube") // select minikube context
+      await app.client.click("div.minikube"); // select minikube context
     } // else the only context, which must be 'minikube', is automatically selected
-    await app.client.click("div.Select__control") // hide the context drop-down list (it might be obscuring the Add cluster(s) button)
+    await app.client.click("div.Select__control"); // hide the context drop-down list (it might be obscuring the Add cluster(s) button)
-    await app.client.click("button.primary") // add minikube cluster
+    await app.client.click("button.primary"); // add minikube cluster
-  }
+  };
 
   const waitForMinikubeDashboard = async (app: Application) => {
-    await app.client.waitUntilTextExists("pre.kube-auth-out", "Authentication proxy started")
+    await app.client.waitUntilTextExists("pre.kube-auth-out", "Authentication proxy started");
-    await app.client.waitForExist(`iframe[name="minikube"]`)
+    await app.client.waitForExist(`iframe[name="minikube"]`);
-    await app.client.frame("minikube")
+    await app.client.frame("minikube");
-    await app.client.waitUntilTextExists("span.link-text", "Cluster")
+    await app.client.waitUntilTextExists("span.link-text", "Cluster");
-  }
+  };
 
   describeif(ready)("cluster tests", () => {
-    let clusterAdded = false
+    let clusterAdded = false;
 
     const addCluster = async () => {
-      await clickWhatsNew(app)
+      await clickWhatsNew(app);
-      await addMinikubeCluster(app)
+      await addMinikubeCluster(app);
-      await waitForMinikubeDashboard(app)
+      await waitForMinikubeDashboard(app);
-      await app.client.click('a[href="/nodes"]')
+      await app.client.click('a[href="/nodes"]');
-      await app.client.waitUntilTextExists("div.TableCell", "Ready")
+      await app.client.waitUntilTextExists("div.TableCell", "Ready");
-    }
+    };
 
     describe("cluster add", () => {
-      beforeAll(appStart, 20000)
+      beforeAll(appStart, 20000);
 
       afterAll(async () => {
         if (app && app.isRunning()) {
-          return util.tearDown(app)
+          return util.tearDown(app);
         }
-      })
+      });
 
       it('allows to add a cluster', async () => {
-        await addCluster()
+        await addCluster();
-        clusterAdded = true
+        clusterAdded = true;
-      })
+      });
-    })
+    });
 
     const appStartAddCluster = async () => {
       if (clusterAdded) {
-        await appStart()
+        await appStart();
-        await addCluster()
+        await addCluster();
       }
-    }
+    };
 
     describe("cluster pages", () => {
 
-      beforeAll(appStartAddCluster, 40000)
+      beforeAll(appStartAddCluster, 40000);
 
       afterAll(async () => {
         if (app && app.isRunning()) {
-          return util.tearDown(app)
+          return util.tearDown(app);
         }
-      })
+      });
 
       const tests: {
         drawer?: string
@@ -394,119 +449,119 @@ describe("Lens integration tests", () => {
       tests.forEach(({ drawer = "", drawerId = "", pages }) => {
         if (drawer !== "") {
           it(`shows ${drawer} drawer`, async () => {
-            expect(clusterAdded).toBe(true)
+            expect(clusterAdded).toBe(true);
-            await app.client.click(`.sidebar-nav [data-test-id="${drawerId}"] span.link-text`)
+            await app.client.click(`.sidebar-nav [data-test-id="${drawerId}"] span.link-text`);
-            await app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name)
+            await app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name);
-          })
+          });
         }
         pages.forEach(({ name, href, expectedSelector, expectedText }) => {
           it(`shows ${drawer}->${name} page`, async () => {
-            expect(clusterAdded).toBe(true)
+            expect(clusterAdded).toBe(true);
-            await app.client.click(`a[href^="/${href}"]`)
+            await app.client.click(`a[href^="/${href}"]`);
-            await app.client.waitUntilTextExists(expectedSelector, expectedText)
+            await app.client.waitUntilTextExists(expectedSelector, expectedText);
-          })
+          });
-        })
+        });
         if (drawer !== "") {
           // hide the drawer
           it(`hides ${drawer} drawer`, async () => {
-            expect(clusterAdded).toBe(true)
+            expect(clusterAdded).toBe(true);
-            await app.client.click(`.sidebar-nav [data-test-id="${drawerId}"] span.link-text`)
+            await app.client.click(`.sidebar-nav [data-test-id="${drawerId}"] span.link-text`);
-            await expect(app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name, 100)).rejects.toThrow()
+            await expect(app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name, 100)).rejects.toThrow();
-          })
+          });
         }
-      })
+      });
-    })
+    });
 
     describe("viewing pod logs", () => {
-      beforeEach(appStartAddCluster, 40000)
+      beforeEach(appStartAddCluster, 40000);
 
       afterEach(async () => {
         if (app && app.isRunning()) {
-          return util.tearDown(app)
+          return util.tearDown(app);
         }
-      })
+      });
 
       it(`shows a logs for a pod`, async () => {
-        expect(clusterAdded).toBe(true)
+        expect(clusterAdded).toBe(true);
         // Go to Pods page
-        await app.client.click(".sidebar-nav [data-test-id='workloads'] span.link-text")
+        await app.client.click(".sidebar-nav [data-test-id='workloads'] span.link-text");
-        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods")
+        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods");
-        await app.client.click('a[href^="/pods"]')
+        await app.client.click('a[href^="/pods"]');
-        await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver")
+        await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver");
         // Open logs tab in dock
-        await app.client.click(".list .TableRow:first-child")
+        await app.client.click(".list .TableRow:first-child");
-        await app.client.waitForVisible(".Drawer")
+        await app.client.waitForVisible(".Drawer");
-        await app.client.click(".drawer-title .Menu li:nth-child(2)")
+        await app.client.click(".drawer-title .Menu li:nth-child(2)");
         // Check if controls are available
-        await app.client.waitForVisible(".PodLogs .VirtualList")
+        await app.client.waitForVisible(".PodLogs .VirtualList");
-        await app.client.waitForVisible(".PodLogControls")
+        await app.client.waitForVisible(".PodLogControls");
-        await app.client.waitForVisible(".PodLogControls .SearchInput")
+        await app.client.waitForVisible(".PodLogControls .SearchInput");
-        await app.client.waitForVisible(".PodLogControls .SearchInput input")
+        await app.client.waitForVisible(".PodLogControls .SearchInput input");
         // Search for semicolon
-        await app.client.keys(":")
+        await app.client.keys(":");
-        await app.client.waitForVisible(".PodLogs .list span.active")
+        await app.client.waitForVisible(".PodLogs .list span.active");
         // Click through controls
-        await app.client.click(".PodLogControls .timestamps-icon")
+        await app.client.click(".PodLogControls .timestamps-icon");
-        await app.client.click(".PodLogControls .undo-icon")
+        await app.client.click(".PodLogControls .undo-icon");
-      })
+      });
-    })
+    });
 
     describe("cluster operations", () => {
-      beforeEach(appStartAddCluster, 40000)
+      beforeEach(appStartAddCluster, 40000);
 
       afterEach(async () => {
         if (app && app.isRunning()) {
-          return util.tearDown(app)
+          return util.tearDown(app);
         }
-      })
+      });
 
       it('shows default namespace', async () => {
-        expect(clusterAdded).toBe(true)
+        expect(clusterAdded).toBe(true);
-        await app.client.click('a[href="/namespaces"]')
+        await app.client.click('a[href="/namespaces"]');
-        await app.client.waitUntilTextExists("div.TableCell", "default")
+        await app.client.waitUntilTextExists("div.TableCell", "default");
-        await app.client.waitUntilTextExists("div.TableCell", "kube-system")
+        await app.client.waitUntilTextExists("div.TableCell", "kube-system");
-      })
+      });
 
       it(`creates ${TEST_NAMESPACE} namespace`, async () => {
-        expect(clusterAdded).toBe(true)
+        expect(clusterAdded).toBe(true);
-        await app.client.click('a[href="/namespaces"]')
+        await app.client.click('a[href="/namespaces"]');
-        await app.client.waitUntilTextExists("div.TableCell", "default")
+        await app.client.waitUntilTextExists("div.TableCell", "default");
-        await app.client.waitUntilTextExists("div.TableCell", "kube-system")
+        await app.client.waitUntilTextExists("div.TableCell", "kube-system");
-        await app.client.click("button.add-button")
+        await app.client.click("button.add-button");
-        await app.client.waitUntilTextExists("div.AddNamespaceDialog", "Create Namespace")
+        await app.client.waitUntilTextExists("div.AddNamespaceDialog", "Create Namespace");
-        await app.client.keys(`${TEST_NAMESPACE}\n`)
+        await app.client.keys(`${TEST_NAMESPACE}\n`);
-        await app.client.waitForExist(`.name=${TEST_NAMESPACE}`)
+        await app.client.waitForExist(`.name=${TEST_NAMESPACE}`);
-      })
+      });
 
       it(`creates a pod in ${TEST_NAMESPACE} namespace`, async () => {
-        expect(clusterAdded).toBe(true)
+        expect(clusterAdded).toBe(true);
-        await app.client.click(".sidebar-nav [data-test-id='workloads'] span.link-text")
+        await app.client.click(".sidebar-nav [data-test-id='workloads'] span.link-text");
-        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods")
+        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods");
-        await app.client.click('a[href^="/pods"]')
+        await app.client.click('a[href^="/pods"]');
-        await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver")
+        await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver");
-        await app.client.click('.Icon.new-dock-tab')
+        await app.client.click('.Icon.new-dock-tab');
-        await app.client.waitUntilTextExists("li.MenuItem.create-resource-tab", "Create resource")
+        await app.client.waitUntilTextExists("li.MenuItem.create-resource-tab", "Create resource");
-        await app.client.click("li.MenuItem.create-resource-tab")
+        await app.client.click("li.MenuItem.create-resource-tab");
-        await app.client.waitForVisible(".CreateResource div.ace_content")
+        await app.client.waitForVisible(".CreateResource div.ace_content");
         // Write pod manifest to editor
-        await app.client.keys("apiVersion: v1\n")
+        await app.client.keys("apiVersion: v1\n");
-        await app.client.keys("kind: Pod\n")
+        await app.client.keys("kind: Pod\n");
-        await app.client.keys("metadata:\n")
+        await app.client.keys("metadata:\n");
-        await app.client.keys("  name: nginx-create-pod-test\n")
+        await app.client.keys("  name: nginx-create-pod-test\n");
-        await app.client.keys(`namespace: ${TEST_NAMESPACE}\n`)
+        await app.client.keys(`namespace: ${TEST_NAMESPACE}\n`);
-        await app.client.keys(BACKSPACE + "spec:\n")
+        await app.client.keys(BACKSPACE + "spec:\n");
-        await app.client.keys("  containers:\n")
+        await app.client.keys("  containers:\n");
-        await app.client.keys("- name: nginx-create-pod-test\n")
+        await app.client.keys("- name: nginx-create-pod-test\n");
-        await app.client.keys("  image: nginx:alpine\n")
+        await app.client.keys("  image: nginx:alpine\n");
         // Create deployment
-        await app.client.waitForEnabled("button.Button=Create & Close")
+        await app.client.waitForEnabled("button.Button=Create & Close");
-        await app.client.click("button.Button=Create & Close")
+        await app.client.click("button.Button=Create & Close");
         // Wait until first bits of pod appears on dashboard
-        await app.client.waitForExist(".name=nginx-create-pod-test")
+        await app.client.waitForExist(".name=nginx-create-pod-test");
         // Open pod details
-        await app.client.click(".name=nginx-create-pod-test")
+        await app.client.click(".name=nginx-create-pod-test");
-        await app.client.waitUntilTextExists("div.drawer-title-text", "Pod: nginx-create-pod-test")
+        await app.client.waitUntilTextExists("div.drawer-title-text", "Pod: nginx-create-pod-test");
-      })
+      });
-    })
+    });
-  })
+  });
-})
+});

integration/helpers/utils.ts

@@ -4,28 +4,28 @@ const AppPaths: Partial<Record<NodeJS.Platform, string>> = {
   "win32": "./dist/win-unpacked/Lens.exe",
   "linux": "./dist/linux-unpacked/kontena-lens",
   "darwin": "./dist/mac/Lens.app/Contents/MacOS/Lens",
-}
+};
 
 export function setup(): Application {
   return new Application({
-    // path to electron app
+    path: AppPaths[process.platform], // path to electron app
     args: [],
-    path: AppPaths[process.platform],
     startTimeout: 30000,
     waitTimeout: 60000,
     env: {
       CICD: "true"
     }
-  })
+  });
 }
 
+type AsyncPidGetter = () => Promise<number>;
+
 export async function tearDown(app: Application) {
-  let mpid: any = app.mainProcess.pid
+  const pid = await (app.mainProcess.pid as any as AsyncPidGetter)();
-  let pid = await mpid()
+  await app.stop();
-  await app.stop()
   try {
     process.kill(pid, "SIGKILL");
   } catch (e) {
-    console.error(e)
+    console.error(e);
   }
 }

locales/en/messages.po

@@ -738,6 +738,7 @@ msgstr "Current / Target"
 msgid "Current Healthy"
 msgstr "Current Healthy"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:101
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:103
 msgid "Current replica scale: {currentReplicas}"
 msgstr "Current replica scale: {currentReplicas}"
@@ -828,6 +829,7 @@ msgstr "Description"
 msgid "Desired Healthy"
 msgstr "Desired Healthy"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:105
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:107
 msgid "Desired number of replicas"
 msgstr "Desired number of replicas"
@@ -1091,6 +1093,7 @@ msgstr "Helm branch <0>{0}</0> already in use"
 msgid "Hide"
 msgstr "Hide"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:127
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:116
 msgid "High number of replicas may cause cluster performance issues"
 msgstr "High number of replicas may cause cluster performance issues"
@@ -2298,6 +2301,7 @@ msgstr "Runtime Class"
 msgid "Save"
 msgstr "Save"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:155
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:128
 #: src/renderer/components/+workloads-deployments/deployments.tsx:83
 #: src/renderer/components/+workloads-deployments/deployments.tsx:84
@@ -2308,6 +2312,10 @@ msgstr "Scale"
 msgid "Scale Deployment <0>{deploymentName}</0>"
 msgstr "Scale Deployment <0>{deploymentName}</0>"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:139
+msgid "Scale Stateful Set <0>{statefulSetName}</0>"
+msgstr "Scale Stateful Set <0>{statefulSetName}</0>"
+
 #: src/renderer/components/+workloads-cronjobs/cronjob-details.tsx:45
 #: src/renderer/components/+workloads-cronjobs/cronjobs.tsx:46
 msgid "Schedule"

locales/fi/messages.po

@@ -734,6 +734,7 @@ msgstr ""
 msgid "Current Healthy"
 msgstr ""
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:101
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:103
 msgid "Current replica scale: {currentReplicas}"
 msgstr ""
@@ -824,6 +825,7 @@ msgstr ""
 msgid "Desired Healthy"
 msgstr ""
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:105
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:107
 msgid "Desired number of replicas"
 msgstr ""
@@ -1082,6 +1084,7 @@ msgstr ""
 msgid "Hide"
 msgstr ""
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:127
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:116
 msgid "High number of replicas may cause cluster performance issues"
 msgstr ""
@@ -2281,6 +2284,7 @@ msgstr ""
 msgid "Save"
 msgstr ""
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:155
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:128
 #: src/renderer/components/+workloads-deployments/deployments.tsx:83
 #: src/renderer/components/+workloads-deployments/deployments.tsx:84
@@ -2291,6 +2295,10 @@ msgstr ""
 msgid "Scale Deployment <0>{deploymentName}</0>"
 msgstr ""
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:139
+msgid "Scale Stateful Set <0>{statefulSetName}</0>"
+msgstr ""
+
 #: src/renderer/components/+workloads-cronjobs/cronjob-details.tsx:45
 #: src/renderer/components/+workloads-cronjobs/cronjobs.tsx:46
 msgid "Schedule"

locales/ru/messages.po

@@ -739,6 +739,7 @@ msgstr "Текущее / Цель"
 msgid "Current Healthy"
 msgstr ""
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:101
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:103
 msgid "Current replica scale: {currentReplicas}"
 msgstr "Текущий размер реплики: {currentReplicas}"
@@ -829,6 +830,7 @@ msgstr "Описание"
 msgid "Desired Healthy"
 msgstr ""
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:105
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:107
 msgid "Desired number of replicas"
 msgstr "Нужный уровень реплик"
@@ -1092,6 +1094,7 @@ msgstr ""
 msgid "Hide"
 msgstr "Скрыть"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:127
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:116
 msgid "High number of replicas may cause cluster performance issues"
 msgstr "Большое количество реплик может вызвать проблемы с производительностью кластера"
@@ -2299,6 +2302,7 @@ msgstr ""
 msgid "Save"
 msgstr "Сохранить"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:155
 #: src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx:128
 #: src/renderer/components/+workloads-deployments/deployments.tsx:83
 #: src/renderer/components/+workloads-deployments/deployments.tsx:84
@@ -2309,6 +2313,10 @@ msgstr "Масштабировать"
 msgid "Scale Deployment <0>{deploymentName}</0>"
 msgstr "Масштабировать Deployment <0>{deploymentName}</0>"
 
+#: src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx:139
+msgid "Scale Stateful Set <0>{statefulSetName}</0>"
+msgstr "Масштабировать Stateful Set <0>{statefulSetName}</0>"
+
 #: src/renderer/components/+workloads-cronjobs/cronjob-details.tsx:45
 #: src/renderer/components/+workloads-cronjobs/cronjobs.tsx:46
 msgid "Schedule"

mkdocs.yml

@@ -30,7 +30,10 @@ nav:
       - Color Reference: extensions/capabilities/color-reference.md
     - Extension Guides:
       - Overview: extensions/guides/README.md
+      - Main Extension: extensions/guides/main-extension.md
       - Renderer Extension: extensions/guides/renderer-extension.md
+      - Generator: extensions/guides/generator.md
+      - Working with mobx: extensions/guides/working-with-mobx.md
     - Testing and Publishing:
       - Testing Extensions: extensions/testing-and-publishing/testing.md
       - Publishing Extensions: extensions/testing-and-publishing/publishing.md
@@ -41,7 +44,7 @@ nav:
     - Documentation: contributing/documentation.md
     - Maintainers: contributing/maintainers.md
     - Promotion: contributing/promotion.md
-
+  - Support: support/README.md
   - FAQ: faq/README.md
 theme:
   name: 'material'
@@ -60,7 +63,6 @@ theme:
         icon: material/toggle-switch-off-outline
         name: Switch to dark mode
   features:
-    - navigation.instant
     - toc.autohide
     - search.suggest
     - search.highlight

package.json

@@ -2,7 +2,7 @@
   "name": "kontena-lens",
   "productName": "Lens",
   "description": "Lens - The Kubernetes IDE",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "main": "static/build/main.js",
   "copyright": "© 2020, Mirantis, Inc.",
   "license": "MIT",
@@ -37,7 +37,8 @@
     "download:kubectl": "yarn run ts-node build/download_kubectl.ts",
     "download:helm": "yarn run ts-node build/download_helm.ts",
     "build:tray-icons": "yarn run ts-node build/build_tray_icon.ts",
-    "lint": "yarn run eslint $@ --ext js,ts,tsx --max-warnings=0  src/",
+    "lint": "yarn run eslint $@ --ext js,ts,tsx --max-warnings=0 src/ integration/ __mocks__/ build/ extensions/",
+    "lint:fix": "yarn run lint --fix",
     "mkdocs-serve-local": "docker build -t mkdocs-serve-local:latest mkdocs/ && docker run --rm -it -p 8000:8000 -v ${PWD}:/docs mkdocs-serve-local:latest",
     "typedocs-extensions-api": "yarn run typedoc --ignoreCompilerErrors --readme docs/extensions/typedoc-readme.md.tpl --name @k8slens/extensions --out docs/extensions/api --mode library --excludePrivate --hideBreadcrumbs --includes src/ src/extensions/extension-api.ts"
   },
@@ -46,7 +47,7 @@
     "bundledHelmVersion": "3.3.4"
   },
   "engines": {
-    "node": ">=12.0 <13.0"
+    "node": ">=12 <13"
   },
   "lingui": {
     "locales": [
@@ -193,7 +194,6 @@
       "node-menu",
       "metrics-cluster-feature",
       "license-menu-item",
-      "support-page",
       "kube-object-event-status"
     ]
   },
@@ -214,15 +214,17 @@
     "@types/node": "^12.12.45",
     "@types/proper-lockfile": "^4.1.1",
     "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/tar": "^4.0.3",
+    "@types/tar": "^4.0.4",
     "array-move": "^3.0.0",
+    "await-lock": "^2.1.0",
     "chalk": "^4.1.0",
+    "chokidar": "^3.4.3",
     "command-exists": "1.2.9",
     "conf": "^7.0.1",
     "crypto-js": "^4.0.0",
+    "electron-devtools-installer": "^3.1.1",
     "electron-updater": "^4.3.1",
     "electron-window-state": "^5.0.3",
-    "file-type": "^14.7.1",
     "filenamify": "^4.1.0",
     "fs-extra": "^9.0.1",
     "handlebars": "^4.7.6",
@@ -248,7 +250,7 @@
     "serializr": "^2.0.3",
     "shell-env": "^3.0.0",
     "spdy": "^4.0.2",
-    "tar": "^6.0.2",
+    "tar": "^6.0.5",
     "tcp-port-used": "^1.0.1",
     "tempy": "^0.5.0",
     "uuid": "^8.1.0",
@@ -279,6 +281,7 @@
     "@types/color": "^3.0.1",
     "@types/crypto-js": "^3.1.47",
     "@types/dompurify": "^2.0.2",
+    "@types/electron-devtools-installer": "^2.2.0",
     "@types/electron-window-state": "^2.0.34",
     "@types/fs-extra": "^9.0.1",
     "@types/hapi": "^18.0.3",
@@ -310,7 +313,6 @@
     "@types/sharp": "^0.26.0",
     "@types/shelljs": "^0.8.8",
     "@types/spdy": "^3.4.4",
-    "@types/tar": "^4.0.3",
     "@types/tcp-port-used": "^1.0.0",
     "@types/tempy": "^0.3.0",
     "@types/terser-webpack-plugin": "^3.0.0",

src/common/__tests__/cluster-store.test.ts

@@ -5,9 +5,9 @@ import { Cluster } from "../../main/cluster";
 import { ClusterStore } from "../cluster-store";
 import { workspaceStore } from "../workspace-store";
 
-const testDataIcon = fs.readFileSync("test-data/cluster-store-migration-icon.png")
+const testDataIcon = fs.readFileSync("test-data/cluster-store-migration-icon.png");
 
-console.log("") // fix bug
+console.log(""); // fix bug
 
 let clusterStore: ClusterStore;
 
@@ -18,15 +18,15 @@ describe("empty config", () => {
       'tmp': {
         'lens-cluster-store.json': JSON.stringify({})
       }
-    }
+    };
     mockFs(mockOpts);
     clusterStore = ClusterStore.getInstance<ClusterStore>();
     return clusterStore.load();
-  })
+  });
 
   afterEach(() => {
     mockFs.restore();
-  })
+  });
 
   describe("with foo cluster added", () => {
     beforeEach(() => {
@@ -43,30 +43,31 @@ describe("empty config", () => {
           workspace: workspaceStore.currentWorkspaceId
         })
       );
-    })
+    });
 
     it("adds new cluster to store", async () => {
       const storedCluster = clusterStore.getById("foo");
       expect(storedCluster.id).toBe("foo");
       expect(storedCluster.preferences.terminalCWD).toBe("/tmp");
       expect(storedCluster.preferences.icon).toBe("data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAA1wAAAKoCAYAAABjkf5");
-    })
+    });
 
     it("adds cluster to default workspace", () => {
       const storedCluster = clusterStore.getById("foo");
       expect(storedCluster.workspace).toBe("default");
-    })
+    });
 
     it("removes cluster from store", async () => {
       await clusterStore.removeById("foo");
       expect(clusterStore.getById("foo")).toBeUndefined();
-    })
+    });
 
     it("sets active cluster", () => {
       clusterStore.setActive("foo");
       expect(clusterStore.active.id).toBe("foo");
-    })
+      expect(workspaceStore.currentWorkspace.lastActiveClusterId).toBe("foo");
-  })
+    });
+  });
 
   describe("with prod and dev clusters added", () => {
     beforeEach(() => {
@@ -89,8 +90,8 @@ describe("empty config", () => {
           kubeConfigPath: ClusterStore.embedCustomKubeConfig("dev", "fancy config"),
           workspace: "workstation"
         })
-      )
+      );
-    })
+    });
 
     it("check if store can contain multiple clusters", () => {
       expect(clusterStore.hasClusters()).toBeTruthy();
@@ -104,42 +105,42 @@ describe("empty config", () => {
       expect(wsClusters.length).toBe(2);
       expect(wsClusters[0].id).toBe("prod");
       expect(wsClusters[1].id).toBe("dev");
-    })
+    });
 
     it("check if cluster's kubeconfig file saved", () => {
       const file = ClusterStore.embedCustomKubeConfig("boo", "kubeconfig");
       expect(fs.readFileSync(file, "utf8")).toBe("kubeconfig");
-    })
+    });
 
     it("check if reorderring works for same from and to", () => {
-      clusterStore.swapIconOrders("workstation", 1, 1)
+      clusterStore.swapIconOrders("workstation", 1, 1);
 
       const clusters = clusterStore.getByWorkspaceId("workstation");
-      expect(clusters[0].id).toBe("prod")
+      expect(clusters[0].id).toBe("prod");
-      expect(clusters[0].preferences.iconOrder).toBe(0)
+      expect(clusters[0].preferences.iconOrder).toBe(0);
-      expect(clusters[1].id).toBe("dev")
+      expect(clusters[1].id).toBe("dev");
-      expect(clusters[1].preferences.iconOrder).toBe(1)
+      expect(clusters[1].preferences.iconOrder).toBe(1);
-    })
+    });
 
     it("check if reorderring works for different from and to", () => {
-      clusterStore.swapIconOrders("workstation", 0, 1)
+      clusterStore.swapIconOrders("workstation", 0, 1);
 
       const clusters = clusterStore.getByWorkspaceId("workstation");
-      expect(clusters[0].id).toBe("dev")
+      expect(clusters[0].id).toBe("dev");
-      expect(clusters[0].preferences.iconOrder).toBe(0)
+      expect(clusters[0].preferences.iconOrder).toBe(0);
-      expect(clusters[1].id).toBe("prod")
+      expect(clusters[1].id).toBe("prod");
-      expect(clusters[1].preferences.iconOrder).toBe(1)
+      expect(clusters[1].preferences.iconOrder).toBe(1);
-    })
+    });
 
     it("check if after icon reordering, changing workspaces still works", () => {
-      clusterStore.swapIconOrders("workstation", 1, 1)
+      clusterStore.swapIconOrders("workstation", 1, 1);
-      clusterStore.getById("prod").workspace = "default"
+      clusterStore.getById("prod").workspace = "default";
 
       expect(clusterStore.getByWorkspaceId("workstation").length).toBe(1);
       expect(clusterStore.getByWorkspaceId("default").length).toBe(1);
-    })
+    });
-  })
+  });
-})
+});
 
 describe("config with existing clusters", () => {
   beforeEach(() => {
@@ -176,21 +177,21 @@ describe("config with existing clusters", () => {
           ]
         })
       }
-    }
+    };
     mockFs(mockOpts);
     clusterStore = ClusterStore.getInstance<ClusterStore>();
     return clusterStore.load();
-  })
+  });
 
   afterEach(() => {
     mockFs.restore();
-  })
+  });
 
   it("allows to retrieve a cluster", () => {
     const storedCluster = clusterStore.getById('cluster1');
     expect(storedCluster.id).toBe('cluster1');
     expect(storedCluster.preferences.terminalCWD).toBe('/foo');
-  })
+  });
 
   it("allows to delete a cluster", () => {
     clusterStore.removeById('cluster2');
@@ -198,18 +199,18 @@ describe("config with existing clusters", () => {
     expect(storedCluster).toBeTruthy();
     const storedCluster2 = clusterStore.getById('cluster2');
     expect(storedCluster2).toBeUndefined();
-  })
+  });
 
   it("allows getting all of the clusters", async () => {
     const storedClusters = clusterStore.clustersList;
-    expect(storedClusters.length).toBe(3)
+    expect(storedClusters.length).toBe(3);
-    expect(storedClusters[0].id).toBe('cluster1')
+    expect(storedClusters[0].id).toBe('cluster1');
-    expect(storedClusters[0].preferences.terminalCWD).toBe('/foo')
+    expect(storedClusters[0].preferences.terminalCWD).toBe('/foo');
-    expect(storedClusters[1].id).toBe('cluster2')
+    expect(storedClusters[1].id).toBe('cluster2');
-    expect(storedClusters[1].preferences.terminalCWD).toBe('/foo2')
+    expect(storedClusters[1].preferences.terminalCWD).toBe('/foo2');
-    expect(storedClusters[2].id).toBe('cluster3')
+    expect(storedClusters[2].id).toBe('cluster3');
-  })
+  });
-})
+});
 
 describe("pre 2.0 config with an existing cluster", () => {
   beforeEach(() => {
@@ -229,17 +230,17 @@ describe("pre 2.0 config with an existing cluster", () => {
     mockFs(mockOpts);
     clusterStore = ClusterStore.getInstance<ClusterStore>();
     return clusterStore.load();
-  })
+  });
 
   afterEach(() => {
     mockFs.restore();
-  })
+  });
 
   it("migrates to modern format with kubeconfig in a file", async () => {
     const config = clusterStore.clustersList[0].kubeConfigPath;
     expect(fs.readFileSync(config, "utf8")).toBe("kubeconfig content");
-  })
+  });
-})
+});
 
 describe("pre 2.6.0 config with a cluster that has arrays in auth config", () => {
   beforeEach(() => {
@@ -257,15 +258,15 @@ describe("pre 2.6.0 config with a cluster that has arrays in auth config", () =>
           },
         })
       }
-    }
+    };
     mockFs(mockOpts);
     clusterStore = ClusterStore.getInstance<ClusterStore>();
     return clusterStore.load();
-  })
+  });
 
   afterEach(() => {
     mockFs.restore();
-  })
+  });
 
   it("replaces array format access token and expiry into string", async () => {
     const file = clusterStore.clustersList[0].kubeConfigPath;
@@ -273,8 +274,8 @@ describe("pre 2.6.0 config with a cluster that has arrays in auth config", () =>
     const kc = yaml.safeLoad(config);
     expect(kc.users[0].user['auth-provider'].config['access-token']).toBe("should be string");
     expect(kc.users[0].user['auth-provider'].config['expiry']).toBe("should be string");
-  })
+  });
-})
+});
 
 describe("pre 2.6.0 config with a cluster icon", () => {
   beforeEach(() => {
@@ -297,23 +298,23 @@ describe("pre 2.6.0 config with a cluster icon", () => {
         }),
         "icon_path": testDataIcon,
       }
-    }
+    };
     mockFs(mockOpts);
     clusterStore = ClusterStore.getInstance<ClusterStore>();
     return clusterStore.load();
-  })
+  });
 
   afterEach(() => {
     mockFs.restore();
-  })
+  });
 
   it("moves the icon into preferences", async () => {
     const storedClusterData = clusterStore.clustersList[0];
     expect(storedClusterData.hasOwnProperty('icon')).toBe(false);
     expect(storedClusterData.preferences.hasOwnProperty('icon')).toBe(true);
     expect(storedClusterData.preferences.icon.startsWith("data:;base64,")).toBe(true);
-  })
+  });
-})
+});
 
 describe("for a pre 2.7.0-beta.0 config without a workspace", () => {
   beforeEach(() => {
@@ -334,21 +335,21 @@ describe("for a pre 2.7.0-beta.0 config without a workspace", () => {
           },
         })
       }
-    }
+    };
     mockFs(mockOpts);
     clusterStore = ClusterStore.getInstance<ClusterStore>();
     return clusterStore.load();
-  })
+  });
 
   afterEach(() => {
     mockFs.restore();
-  })
+  });
 
   it("adds cluster to default workspace", async () => {
     const storedClusterData = clusterStore.clustersList[0];
     expect(storedClusterData.workspace).toBe('default');
-  })
+  });
-})
+});
 
 describe("pre 3.6.0-beta.1 config with an existing cluster", () => {
   beforeEach(() => {
@@ -378,19 +379,19 @@ describe("pre 3.6.0-beta.1 config with an existing cluster", () => {
     mockFs(mockOpts);
     clusterStore = ClusterStore.getInstance<ClusterStore>();
     return clusterStore.load();
-  })
+  });
 
   afterEach(() => {
     mockFs.restore();
-  })
+  });
 
   it("migrates to modern format with kubeconfig in a file", async () => {
     const config = clusterStore.clustersList[0].kubeConfigPath;
     expect(fs.readFileSync(config, "utf8")).toBe("kubeconfig content");
-  })
+  });
 
   it("migrates to modern format with icon not in file", async () => {
     const { icon } = clusterStore.clustersList[0].preferences;
     expect(icon.startsWith("data:;base64,")).toBe(true);
-  })
+  });
-})
+});

src/common/__tests__/event-bus.test.ts

@@ -1,15 +1,15 @@
-import { appEventBus, AppEvent } from "../event-bus"
+import { appEventBus, AppEvent } from "../event-bus";
 
 describe("event bus tests", () => {
   describe("emit", () => {
     it("emits an event", () => {
-      let event: AppEvent = null
+      let event: AppEvent = null;
       appEventBus.addListener((data) => {
-        event = data
+        event = data;
-      })
+      });
 
-      appEventBus.emit({name: "foo", action: "bar"})
+      appEventBus.emit({name: "foo", action: "bar"});
-      expect(event.name).toBe("foo")
+      expect(event.name).toBe("foo");
-    })
+    });
-  })
+  });
-})
+});

src/common/__tests__/search-store.test.ts

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { SearchStore } from "../search-store"
+import { SearchStore } from "../search-store";
 
 let searchStore: SearchStore = null;
 
@@ -10,17 +10,17 @@ const logs = [
   "1:M 30 Oct 2020 16:17:41.553 # Connection with replica 172.17.0.12:6379 lost",
   "1:M 30 Oct 2020 16:17:41.623 * Replica 172.17.0.12:6379 asks for synchronization",
   "1:M 30 Oct 2020 16:17:41.623 * Starting Partial resynchronization request from 172.17.0.12:6379 accepted. Sending 0 bytes of backlog starting from offset 14407."
-]
+];
 
 describe("search store tests", () => {
   beforeEach(async () => {
     searchStore = new SearchStore();
-  })
+  });
 
   it("does nothing with empty search query", () => {
     searchStore.onSearch([], "");
     expect(searchStore.occurrences).toEqual([]);
-  })
+  });
 
   it("doesn't break if no text provided", () => {
     searchStore.onSearch(null, "replica");
@@ -28,53 +28,53 @@ describe("search store tests", () => {
 
     searchStore.onSearch([], "replica");
     expect(searchStore.occurrences).toEqual([]);
-  })
+  });
 
   it("find 3 occurences across 3 lines", () => {
     searchStore.onSearch(logs, "172");
     expect(searchStore.occurrences).toEqual([0, 1, 2]);
-  })
+  });
 
   it("find occurences within 1 line (case-insensitive)", () => {
     searchStore.onSearch(logs, "Starting");
     expect(searchStore.occurrences).toEqual([2, 2]);
-  })
+  });
 
   it("sets overlay index equal to first occurence", () => {
     searchStore.onSearch(logs, "Replica");
     expect(searchStore.activeOverlayIndex).toBe(0);
-  })
+  });
 
   it("set overlay index to next occurence", () => {
     searchStore.onSearch(logs, "172");
     searchStore.setNextOverlayActive();
     expect(searchStore.activeOverlayIndex).toBe(1);
-  })
+  });
 
   it("sets overlay to last occurence", () => {
     searchStore.onSearch(logs, "172");
     searchStore.setPrevOverlayActive();
     expect(searchStore.activeOverlayIndex).toBe(2);
-  })
+  });
 
   it("gets line index where overlay is located", () => {
     searchStore.onSearch(logs, "synchronization");
     expect(searchStore.activeOverlayLine).toBe(1);
-  })
+  });
 
   it("escapes string for using in regex", () => {
     const regex = searchStore.escapeRegex("some.interesting-query\\#?()[]");
     expect(regex).toBe("some\\.interesting\\-query\\\\\\#\\?\\(\\)\\[\\]");
-  })
+  });
 
   it("gets active find number", () => {
     searchStore.onSearch(logs, "172");
     searchStore.setNextOverlayActive();
     expect(searchStore.activeFind).toBe(2);
-  })
+  });
 
   it("gets total finds number", () => {
     searchStore.onSearch(logs, "Starting");
     expect(searchStore.totalFinds).toBe(2);
-  })
+  });
-})
+});

src/common/__tests__/user-store.test.ts

@@ -1,4 +1,4 @@
-import mockFs from "mock-fs"
+import mockFs from "mock-fs";
 
 jest.mock("electron", () => {
   return {
@@ -7,55 +7,55 @@ jest.mock("electron", () => {
       getPath: () => 'tmp',
       getLocale: () => 'en'
     }
-  }
+  };
-})
+});
 
-import { UserStore } from "../user-store"
+import { UserStore } from "../user-store";
-import { SemVer } from "semver"
+import { SemVer } from "semver";
-import electron from "electron"
+import electron from "electron";
 
 describe("user store tests", () => {
   describe("for an empty config", () => {
     beforeEach(() => {
-      UserStore.resetInstance()
+      UserStore.resetInstance();
-      mockFs({ tmp: { 'config.json': "{}" } })
+      mockFs({ tmp: { 'config.json': "{}" } });
-    })
+    });
 
     afterEach(() => {
-      mockFs.restore()
+      mockFs.restore();
-    })
+    });
 
     it("allows setting and retrieving lastSeenAppVersion", () => {
       const us = UserStore.getInstance<UserStore>();
 
       us.lastSeenAppVersion = "1.2.3";
       expect(us.lastSeenAppVersion).toBe("1.2.3");
-    })
+    });
 
     it("allows adding and listing seen contexts", () => {
       const us = UserStore.getInstance<UserStore>();
 
-      us.seenContexts.add('foo')
+      us.seenContexts.add('foo');
-      expect(us.seenContexts.size).toBe(1)
+      expect(us.seenContexts.size).toBe(1);
 
-      us.seenContexts.add('foo')
+      us.seenContexts.add('foo');
-      us.seenContexts.add('bar')
+      us.seenContexts.add('bar');
-      expect(us.seenContexts.size).toBe(2) // check 'foo' isn't added twice
+      expect(us.seenContexts.size).toBe(2); // check 'foo' isn't added twice
-      expect(us.seenContexts.has('foo')).toBe(true)
+      expect(us.seenContexts.has('foo')).toBe(true);
-      expect(us.seenContexts.has('bar')).toBe(true)
+      expect(us.seenContexts.has('bar')).toBe(true);
-    })
+    });
 
     it("allows setting and getting preferences", () => {
       const us = UserStore.getInstance<UserStore>();
 
       us.preferences.httpsProxy = 'abcd://defg';
 
-      expect(us.preferences.httpsProxy).toBe('abcd://defg')
+      expect(us.preferences.httpsProxy).toBe('abcd://defg');
-      expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme)
+      expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme);
 
       us.preferences.colorTheme = "light";
-      expect(us.preferences.colorTheme).toBe('light')
+      expect(us.preferences.colorTheme).toBe('light');
-    })
+    });
 
     it("correctly resets theme to default value", async () => {
       const us = UserStore.getInstance<UserStore>();
@@ -64,7 +64,7 @@ describe("user store tests", () => {
       us.preferences.colorTheme = "some other theme";
       await us.resetTheme();
       expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme);
-    })
+    });
 
     it("correctly calculates if the last seen version is an old release", () => {
       const us = UserStore.getInstance<UserStore>();
@@ -73,12 +73,12 @@ describe("user store tests", () => {
 
       us.lastSeenAppVersion = (new SemVer(electron.app.getVersion())).inc("major").format();
       expect(us.isNewVersion).toBe(false);
-    })
+    });
-  })
+  });
 
   describe("migrations", () => {
     beforeEach(() => {
-      UserStore.resetInstance()
+      UserStore.resetInstance();
       mockFs({
         'tmp': {
           'config.json': JSON.stringify({
@@ -87,17 +87,17 @@ describe("user store tests", () => {
             lastSeenAppVersion: '1.2.3'
           })
         }
-      })
+      });
-    })
+    });
 
     afterEach(() => {
-      mockFs.restore()
+      mockFs.restore();
-    })
+    });
 
     it("sets last seen app version to 0.0.0", () => {
       const us = UserStore.getInstance<UserStore>();
 
-      expect(us.lastSeenAppVersion).toBe('0.0.0')
+      expect(us.lastSeenAppVersion).toBe('0.0.0');
-    })
+    });
-  })
+  });
-})
+});

src/common/__tests__/workspace-store.test.ts

@@ -1,4 +1,4 @@
-import mockFs from "mock-fs"
+import mockFs from "mock-fs";
 
 jest.mock("electron", () => {
   return {
@@ -7,47 +7,50 @@ jest.mock("electron", () => {
       getPath: () => 'tmp',
       getLocale: () => 'en'
     }
-  }
+  };
-})
+});
 
-import { Workspace, WorkspaceStore } from "../workspace-store"
+import { Workspace, WorkspaceStore } from "../workspace-store";
 
 describe("workspace store tests", () => {
   describe("for an empty config", () => {
     beforeEach(async () => {
-      WorkspaceStore.resetInstance()
+      WorkspaceStore.resetInstance();
-      mockFs({ tmp: { 'lens-workspace-store.json': "{}" } })
+      mockFs({ tmp: { 'lens-workspace-store.json': "{}" } });
 
       await WorkspaceStore.getInstance<WorkspaceStore>().load();
-    })
+    });
 
     afterEach(() => {
-      mockFs.restore()
+      mockFs.restore();
-    })
+    });
 
     it("default workspace should always exist", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
 
       expect(ws.workspaces.size).toBe(1);
       expect(ws.getById(WorkspaceStore.defaultId)).not.toBe(null);
-    })
+    });
 
     it("cannot remove the default workspace", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
 
       expect(() => ws.removeWorkspaceById(WorkspaceStore.defaultId)).toThrowError("Cannot remove");
-    })
+    });
 
-    it("can update default workspace name", () => {
+    it("can update workspace description", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
 
-      ws.addWorkspace(new Workspace({
+      const workspace = ws.addWorkspace(new Workspace({
-        id: WorkspaceStore.defaultId,
+        id: "foobar",
         name: "foobar",
       }));
 
-      expect(ws.currentWorkspace.name).toBe("foobar");
+      workspace.description = "Foobar description";
-    })
+      ws.updateWorkspace(workspace);
+
+      expect(ws.getById("foobar").description).toBe("Foobar description");
+    });
 
     it("can add workspaces", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
@@ -58,13 +61,13 @@ describe("workspace store tests", () => {
       }));
 
       expect(ws.getById("123").name).toBe("foobar");
-    })
+    });
 
     it("cannot set a non-existent workspace to be active", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
 
       expect(() => ws.setActive("abc")).toThrow("doesn't exist");
-    })
+    });
 
     it("can set a existent workspace to be active", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
@@ -75,7 +78,7 @@ describe("workspace store tests", () => {
       }));
 
       expect(() => ws.setActive("abc")).not.toThrowError();
-    })
+    });
 
     it("can remove a workspace", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
@@ -91,7 +94,7 @@ describe("workspace store tests", () => {
       ws.removeWorkspaceById("123");
 
       expect(ws.workspaces.size).toBe(2);
-    })
+    });
 
     it("cannot create workspace with existent name", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
@@ -102,7 +105,7 @@ describe("workspace store tests", () => {
       }));
 
       expect(ws.workspacesList.length).toBe(1);  // default workspace only
-    })
+    });
 
     it("cannot create workspace with empty name", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
@@ -113,7 +116,7 @@ describe("workspace store tests", () => {
       }));
 
       expect(ws.workspacesList.length).toBe(1);  // default workspace only
-    })
+    });
 
     it("cannot create workspace with ' ' name", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
@@ -124,7 +127,7 @@ describe("workspace store tests", () => {
       }));
 
       expect(ws.workspacesList.length).toBe(1);  // default workspace only
-    })
+    });
 
     it("trim workspace name", () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
@@ -135,12 +138,12 @@ describe("workspace store tests", () => {
       }));
 
       expect(ws.workspacesList.length).toBe(1);  // default workspace only
-    })
+    });
-  })
+  });
 
   describe("for a non-empty config", () => {
     beforeEach(async () => {
-      WorkspaceStore.resetInstance()
+      WorkspaceStore.resetInstance();
       mockFs({
         tmp: {
           'lens-workspace-store.json': JSON.stringify({
@@ -154,19 +157,19 @@ describe("workspace store tests", () => {
             }]
           })
         }
-      })
+      });
 
       await WorkspaceStore.getInstance<WorkspaceStore>().load();
-    })
+    });
 
     afterEach(() => {
-      mockFs.restore()
+      mockFs.restore();
-    })
+    });
 
     it("doesn't revert to default workspace", async () => {
       const ws = WorkspaceStore.getInstance<WorkspaceStore>();
 
       expect(ws.currentWorkspaceId).toBe("abc");
-    })
+    });
-  })
+  });
-})
+});

src/common/base-store.ts

@@ -1,12 +1,12 @@
-import path from "path"
+import path from "path";
-import Config from "conf"
+import Config from "conf";
-import { Options as ConfOptions } from "conf/dist/source/types"
+import { Options as ConfOptions } from "conf/dist/source/types";
-import { app, ipcMain, IpcMainEvent, ipcRenderer, IpcRendererEvent, remote } from "electron"
+import { app, ipcMain, IpcMainEvent, ipcRenderer, IpcRendererEvent, remote } from "electron";
 import { action, IReactionOptions, observable, reaction, runInAction, toJS, when } from "mobx";
 import Singleton from "./utils/singleton";
 import { getAppVersion } from "./utils/app-version";
 import logger from "../main/logger";
-import { broadcastIpc, IpcBroadcastParams } from "./ipc";
+import { broadcastMessage, subscribeToBroadcast, unsubscribeFromBroadcast } from "./ipc";
 import isEqual from "lodash/isEqual";
 
 export interface BaseStoreParams<T = any> extends ConfOptions<T> {
@@ -15,7 +15,10 @@ export interface BaseStoreParams<T = any> extends ConfOptions<T> {
   syncOptions?: IReactionOptions;
 }
 
-export class BaseStore<T = any> extends Singleton {
+/**
+ * Note: T should only contain base JSON serializable types.
+ */
+export abstract class BaseStore<T = any> extends Singleton {
   protected storeConfig: Config<T>;
   protected syncDisposers: Function[] = [];
 
@@ -29,7 +32,7 @@ export class BaseStore<T = any> extends Singleton {
       autoLoad: false,
       syncEnabled: true,
       ...params,
-    }
+    };
     this.init();
   }
 
@@ -37,12 +40,16 @@ export class BaseStore<T = any> extends Singleton {
     return path.basename(this.storeConfig.path);
   }
 
-  get path() {
+  protected get syncRendererChannel() {
-    return this.storeConfig.path;
+    return `store-sync-renderer:${this.path}`;
   }
 
-  get syncChannel() {
+  protected get syncMainChannel() {
-    return `STORE-SYNC:${this.path}`
+    return `store-sync-main:${this.path}`;
+  }
+
+  get path() {
+    return this.storeConfig.path;
   }
 
   protected async init() {
@@ -69,7 +76,7 @@ export class BaseStore<T = any> extends Singleton {
   }
 
   protected cwd() {
-    return (app || remote.app).getPath("userData")
+    return (app || remote.app).getPath("userData");
   }
 
   protected async saveToFile(model: T) {
@@ -89,27 +96,28 @@ export class BaseStore<T = any> extends Singleton {
         logger.silly(`[STORE]: SYNC ${this.name} from renderer`, { model });
         this.onSync(model);
       };
-      ipcMain.on(this.syncChannel, callback);
+      subscribeToBroadcast(this.syncMainChannel, callback);
-      this.syncDisposers.push(() => ipcMain.off(this.syncChannel, callback));
+      this.syncDisposers.push(() => unsubscribeFromBroadcast(this.syncMainChannel, callback));
     }
     if (ipcRenderer) {
       const callback = (event: IpcRendererEvent, model: T) => {
         logger.silly(`[STORE]: SYNC ${this.name} from main`, { model });
         this.onSyncFromMain(model);
       };
-      ipcRenderer.on(this.syncChannel, callback);
+      subscribeToBroadcast(this.syncRendererChannel, callback);
-      this.syncDisposers.push(() => ipcRenderer.off(this.syncChannel, callback));
+      this.syncDisposers.push(() => unsubscribeFromBroadcast(this.syncRendererChannel, callback));
     }
   }
 
   protected onSyncFromMain(model: T) {
     this.applyWithoutSync(() => {
-      this.onSync(model)
+      this.onSync(model);
-    })
+    });
   }
 
   unregisterIpcListener() {
-    ipcRenderer.removeAllListeners(this.syncChannel)
+    ipcRenderer.removeAllListeners(this.syncMainChannel);
+    ipcRenderer.removeAllListeners(this.syncRendererChannel);
   }
 
   disableSync() {
@@ -135,53 +143,25 @@ export class BaseStore<T = any> extends Singleton {
   protected async onModelChange(model: T) {
     if (ipcMain) {
       this.saveToFile(model); // save config file
-      this.syncToWebViews(model); // send update to renderer views
+      broadcastMessage(this.syncRendererChannel, model);
-    }
+    } else {
-    // send "update-request" to main-process
+      broadcastMessage(this.syncMainChannel, model);
-    if (ipcRenderer) {
-      ipcRenderer.send(this.syncChannel, model);
     }
   }
 
-  protected async syncToWebViews(model: T) {
+  /**
-    const msg: IpcBroadcastParams = {
+   * fromStore is called internally when a child class syncs with the file
-      channel: this.syncChannel,
+   * system.
-      args: [model],
+   * @param data the parsed information read from the stored JSON file
-    }
+   */
-    broadcastIpc(msg); // send to all windows (BrowserWindow, webContents)
+  protected abstract fromStore(data: T): void;
-    const frames = await this.getSubFrames();
-    frames.forEach(frameId => {
-      // send to all sub-frames (e.g. cluster-view managed in iframe)
-      broadcastIpc({
-        ...msg,
-        frameId: frameId,
-        frameOnly: true,
-      });
-    });
-  }
 
-  // todo: refactor?
+  /**
-  protected async getSubFrames(): Promise<number[]> {
+   * toJSON is called when syncing the store to the filesystem. It should
-    const subFrames: number[] = [];
+   * produce a JSON serializable object representaion of the current state.
-    const { clusterStore } = await import("./cluster-store");
+   *
-    clusterStore.clustersList.forEach(cluster => {
+   * It is recommended that a round trip is valid. Namely, calling
-      if (cluster.frameId) {
+   * `this.fromStore(this.toJSON())` shouldn't change the state.
-        subFrames.push(cluster.frameId)
+   */
-      }
+  abstract toJSON(): T;
-    });
-    return subFrames;
-  }
-
-  @action
-  protected fromStore(data: T) {
-    if (!data) return;
-    this.data = data;
-  }
-
-  // todo: use "serializr" ?
-  toJSON(): T {
-    return toJS(this.data, {
-      recurseEverything: true,
-    })
-  }
 }

src/common/cluster-frames.ts

@@ -0,0 +1,3 @@
+import { observable } from "mobx";
+
+export const clusterFrameMap = observable.map<string, number>();

src/common/cluster-ipc.ts

@@ -1,59 +1,55 @@
-import { createIpcChannel } from "./ipc";
+import { handleRequest } from "./ipc";
 import { ClusterId, clusterStore } from "./cluster-store";
-import { extensionLoader } from "../extensions/extension-loader"
+import { appEventBus } from "./event-bus";
-import { appEventBus } from "./event-bus"
 import { ResourceApplier } from "../main/resource-applier";
+import { ipcMain } from "electron";
+import { clusterFrameMap } from "./cluster-frames";
 
-export const clusterIpc = {
+export const clusterActivateHandler = "cluster:activate";
-  activate: createIpcChannel({
+export const clusterSetFrameIdHandler = "cluster:set-frame-id";
-    channel: "cluster:activate",
+export const clusterRefreshHandler = "cluster:refresh";
-    handle: (clusterId: ClusterId, force = false) => {
+export const clusterDisconnectHandler = "cluster:disconnect";
-      const cluster = clusterStore.getById(clusterId);
+export const clusterKubectlApplyAllHandler = "cluster:kubectl-apply-all";
-      if (cluster) {
-        return cluster.activate(force);
-      }
-    },
-  }),
 
-  setFrameId: createIpcChannel({
-    channel: "cluster:set-frame-id",
-    handle: (clusterId: ClusterId, frameId?: number) => {
-      const cluster = clusterStore.getById(clusterId);
-      if (cluster) {
-        if (frameId) cluster.frameId = frameId; // save cluster's webFrame.routingId to be able to send push-updates
-        extensionLoader.broadcastExtensions(frameId)
-        return cluster.pushState();
-      }
-    },
-  }),
 
-  refresh: createIpcChannel({
+if (ipcMain) {
-    channel: "cluster:refresh",
+  handleRequest(clusterActivateHandler, (event, clusterId: ClusterId, force = false) => {
-    handle: (clusterId: ClusterId) => {
+    const cluster = clusterStore.getById(clusterId);
-      const cluster = clusterStore.getById(clusterId);
+    if (cluster) {
-      if (cluster) return cluster.refresh({ refreshMetadata: true })
+      return cluster.activate(force);
-    },
-  }),
-
-  disconnect: createIpcChannel({
-    channel: "cluster:disconnect",
-    handle: (clusterId: ClusterId) => {
-      appEventBus.emit({name: "cluster", action: "stop"});
-      return clusterStore.getById(clusterId)?.disconnect();
-    },
-  }),
-
-  kubectlApplyAll: createIpcChannel({
-    channel: "cluster:kubectl-apply-all",
-    handle: (clusterId: ClusterId, resources: string[]) => {
-      appEventBus.emit({name: "cluster", action: "kubectl-apply-all"})
-      const cluster = clusterStore.getById(clusterId);
-      if (cluster) {
-        const applier = new ResourceApplier(cluster)
-        applier.kubectlApplyAll(resources)
-      } else {
-        throw `${clusterId} is not a valid cluster id`;
-      }
     }
-  }),
+  });
+
+  handleRequest(clusterSetFrameIdHandler, (event, clusterId: ClusterId, frameId: number) => {
+    const cluster = clusterStore.getById(clusterId);
+    if (cluster) {
+      clusterFrameMap.set(cluster.id, frameId);
+      return cluster.pushState();
+    }
+  });
+
+  handleRequest(clusterRefreshHandler, (event, clusterId: ClusterId) => {
+    const cluster = clusterStore.getById(clusterId);
+    if (cluster) return cluster.refresh({ refreshMetadata: true });
+  });
+
+  handleRequest(clusterDisconnectHandler, (event, clusterId: ClusterId) => {
+    appEventBus.emit({name: "cluster", action: "stop"});
+    const cluster = clusterStore.getById(clusterId);
+    if (cluster) {
+      cluster.disconnect();
+      clusterFrameMap.delete(cluster.id);
+    }
+  });
+
+  handleRequest(clusterKubectlApplyAllHandler, (event, clusterId: ClusterId, resources: string[]) => {
+    appEventBus.emit({name: "cluster", action: "kubectl-apply-all"});
+    const cluster = clusterStore.getById(clusterId);
+    if (cluster) {
+      const applier = new ResourceApplier(cluster);
+      applier.kubectlApplyAll(resources);
+    } else {
+      throw `${clusterId} is not a valid cluster id`;
+    }
+  });
 }

src/common/cluster-store.ts

@@ -1,18 +1,20 @@
-import type { WorkspaceId } from "./workspace-store";
+import { workspaceStore } from "./workspace-store";
 import path from "path";
 import { app, ipcRenderer, remote, webFrame } from "electron";
 import { unlink } from "fs-extra";
-import { action, computed, observable, toJS } from "mobx";
+import { action, computed, observable, reaction, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import { Cluster, ClusterState } from "../main/cluster";
-import migrations from "../migrations/cluster-store"
+import migrations from "../migrations/cluster-store";
 import logger from "../main/logger";
-import { appEventBus } from "./event-bus"
+import { appEventBus } from "./event-bus";
 import { dumpConfigYaml } from "./kube-helpers";
 import { saveToAppFiles } from "./utils/saveToAppFiles";
 import { KubeConfig } from "@kubernetes/client-node";
+import { subscribeToBroadcast, unsubscribeAllFromBroadcast } from "./ipc";
 import _ from "lodash";
 import move from "array-move";
+import type { WorkspaceId } from "./workspace-store";
 
 export interface ClusterIconUpload {
   clusterId: string;
@@ -82,42 +84,41 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
     super({
       configName: "lens-cluster-store",
       accessPropertiesByDotNotation: false, // To make dots safe in cluster context names
-      migrations: migrations,
+      migrations,
     });
 
-    this.pushStateToViewsPeriodically()
+    this.pushStateToViewsAutomatically();
   }
 
-  protected pushStateToViewsPeriodically() {
+  protected pushStateToViewsAutomatically() {
     if (!ipcRenderer) {
-      // This is a bit of a hack, we need to do this because we might loose messages that are sent before a view is ready
+      reaction(() => this.connectedClustersList, () => {
-      setInterval(() => {
+        this.pushState();
-        this.pushState()
+      });
-      }, 5000)
     }
   }
 
   registerIpcListener() {
-    logger.info(`[CLUSTER-STORE] start to listen (${webFrame.routingId})`)
+    logger.info(`[CLUSTER-STORE] start to listen (${webFrame.routingId})`);
-    ipcRenderer.on("cluster:state", (event, clusterId: string, state: ClusterState) => {
+    subscribeToBroadcast("cluster:state", (event, clusterId: string, state: ClusterState) => {
       logger.silly(`[CLUSTER-STORE]: received push-state at ${location.host} (${webFrame.routingId})`, clusterId, state);
-      this.getById(clusterId)?.setState(state)
+      this.getById(clusterId)?.setState(state);
-    })
+    });
   }
 
   unregisterIpcListener() {
-    super.unregisterIpcListener()
+    super.unregisterIpcListener();
-    ipcRenderer.removeAllListeners("cluster:state")
+    unsubscribeAllFromBroadcast("cluster:state");
   }
 
   pushState() {
     this.clusters.forEach((c) => {
-      c.pushState()
+      c.pushState();
-    })
+    });
   }
 
   get activeClusterId() {
-    return this.activeCluster
+    return this.activeCluster;
   }
 
   @computed get clustersList(): Cluster[] {
@@ -125,27 +126,33 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   }
 
   @computed get enabledClustersList(): Cluster[] {
-    return this.clustersList.filter((c) => c.enabled)
+    return this.clustersList.filter((c) => c.enabled);
   }
 
   @computed get active(): Cluster | null {
     return this.getById(this.activeCluster);
   }
 
+  @computed get connectedClustersList(): Cluster[] {
+    return this.clustersList.filter((c) => !c.disconnected);
+  }
+
   isActive(id: ClusterId) {
     return this.activeCluster === id;
   }
 
   @action
   setActive(id: ClusterId) {
-    this.activeCluster = this.clusters.has(id) ? id : null;
+    const clusterId = this.clusters.has(id) ? id : null;
+    this.activeCluster = clusterId;
+    workspaceStore.setLastActiveClusterId(clusterId);
   }
 
   @action
   swapIconOrders(workspace: WorkspaceId, from: number, to: number) {
     const clusters = this.getByWorkspaceId(workspace);
     if (from < 0 || to < 0 || from >= clusters.length || to >= clusters.length || isNaN(from) || isNaN(to)) {
-      throw new Error(`invalid from<->to arguments`)
+      throw new Error(`invalid from<->to arguments`);
     }
 
     move.mutate(clusters, from, to);
@@ -166,37 +173,37 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   getByWorkspaceId(workspaceId: string): Cluster[] {
     const clusters = Array.from(this.clusters.values())
       .filter(cluster => cluster.workspace === workspaceId);
-    return _.sortBy(clusters, cluster => cluster.preferences.iconOrder)
+    return _.sortBy(clusters, cluster => cluster.preferences.iconOrder);
   }
 
   @action
   addClusters(...models: ClusterModel[]): Cluster[] {
-    const clusters: Cluster[] = []
+    const clusters: Cluster[] = [];
     models.forEach(model => {
-      clusters.push(this.addCluster(model))
+      clusters.push(this.addCluster(model));
-    })
+    });
 
-    return clusters
+    return clusters;
   }
 
   @action
   addCluster(model: ClusterModel | Cluster): Cluster {
-    appEventBus.emit({ name: "cluster", action: "add" })
+    appEventBus.emit({ name: "cluster", action: "add" });
     let cluster = model as Cluster;
     if (!(model instanceof Cluster)) {
-      cluster = new Cluster(model)
+      cluster = new Cluster(model);
     }
     this.clusters.set(model.id, cluster);
-    return cluster
+    return cluster;
   }
 
   async removeCluster(model: ClusterModel) {
-    await this.removeById(model.id)
+    await this.removeById(model.id);
   }
 
   @action
   async removeById(clusterId: ClusterId) {
-    appEventBus.emit({ name: "cluster", action: "remove" })
+    appEventBus.emit({ name: "cluster", action: "remove" });
     const cluster = this.getById(clusterId);
     if (cluster) {
       this.clusters.delete(clusterId);
@@ -213,8 +220,8 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   @action
   removeByWorkspaceId(workspaceId: string) {
     this.getByWorkspaceId(workspaceId).forEach(cluster => {
-      this.removeById(cluster.id)
+      this.removeById(cluster.id);
-    })
+    });
   }
 
   @action
@@ -231,7 +238,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
       } else {
         cluster = new Cluster(clusterModel);
         if (!cluster.isManaged) {
-          cluster.enabled = true
+          cluster.enabled = true;
         }
       }
       newClusters.set(clusterModel.id, cluster);
@@ -255,7 +262,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
       clusters: this.clustersList.map(cluster => cluster.toJSON()),
     }, {
       recurseEverything: true
-    })
+    });
   }
 }
 

src/common/event-bus.ts

@@ -1,9 +1,9 @@
-import { EventEmitter } from "./event-emitter"
+import { EventEmitter } from "./event-emitter";
 
 export type AppEvent = {
   name: string;
   action: string;
   params?: object;
-}
+};
 
-export const appEventBus = new EventEmitter<[AppEvent]>()
+export const appEventBus = new EventEmitter<[AppEvent]>();

src/common/event-emitter.ts

@@ -35,6 +35,6 @@ export class EventEmitter<D extends [...any[]]> {
       const result = callback(...data);
       if (result === false) return; // break cycle
       return true;
-    })
+    });
   }
 }

src/common/ipc.ts

@@ -1,79 +1,70 @@
-// Inter-protocol communications (main <-> renderer)
+// Inter-process communications (main <-> renderer)
 // https://www.electronjs.org/docs/api/ipc-main
 // https://www.electronjs.org/docs/api/ipc-renderer
 
-import { ipcMain, ipcRenderer, WebContents, webContents } from "electron"
+import { ipcMain, ipcRenderer, webContents, remote } from "electron";
 import logger from "../main/logger";
+import { clusterFrameMap } from "./cluster-frames";
 
-export type IpcChannel = string;
+export function handleRequest(channel: string, listener: (...args: any[]) => any) {
-
+  ipcMain.handle(channel, listener);
-export interface IpcChannelOptions {
-  channel: IpcChannel; // main <-> renderer communication channel name
-  handle?: (...args: any[]) => Promise<any> | any; // message handler
-  autoBind?: boolean; // auto-bind message handler in main-process, default: true
-  timeout?: number; // timeout for waiting response from the sender
-  once?: boolean; // one-time event
 }
 
-export function createIpcChannel({ autoBind = true, once, timeout = 0, handle, channel }: IpcChannelOptions) {
+export async function requestMain(channel: string, ...args: any[]) {
-  const ipcChannel = {
+  return ipcRenderer.invoke(channel, ...args);
-    channel: channel,
-    handleInMain: () => {
-      logger.info(`[IPC]: setup channel "${channel}"`);
-      const ipcHandler = once ? ipcMain.handleOnce : ipcMain.handle;
-      ipcHandler(channel, async (event, ...args) => {
-        let timerId: any;
-        try {
-          if (timeout > 0) {
-            timerId = setTimeout(() => {
-              throw new Error(`[IPC]: response timeout in ${timeout}ms`)
-            }, timeout);
-          }
-          return await handle(...args); // todo: maybe exec in separate thread/worker
-        } catch (error) {
-          throw error
-        } finally {
-          clearTimeout(timerId);
-        }
-      })
-    },
-    removeHandler() {
-      ipcMain.removeHandler(channel);
-    },
-    invokeFromRenderer: async <T>(...args: any[]): Promise<T> => {
-      return ipcRenderer.invoke(channel, ...args);
-    },
-  }
-  if (autoBind && ipcMain) {
-    ipcChannel.handleInMain();
-  }
-  return ipcChannel;
 }
 
-export interface IpcBroadcastParams<A extends any[] = any> {
+async function getSubFrames(): Promise<number[]> {
-  channel: IpcChannel
+  const subFrames: number[] = [];
-  webContentId?: number; // send to single webContents view
+  clusterFrameMap.forEach((frameId, _) => {
-  frameId?: number; // send to inner frame of webContents
+    subFrames.push(frameId);
-  frameOnly?: boolean; // send message only to view with provided `frameId`
+  });
-  filter?: (webContent: WebContents) => boolean
+  return subFrames;
-  timeout?: number; // todo: add support
-  args?: A;
 }
 
-export function broadcastIpc({ channel, frameId, frameOnly, webContentId, filter, args = [] }: IpcBroadcastParams) {
+export function broadcastMessage(channel: string, ...args: any[]) {
-  const singleView = webContentId ? webContents.fromId(webContentId) : null;
+  const views = (webContents || remote?.webContents)?.getAllWebContents();
-  let views = singleView ? [singleView] : webContents.getAllWebContents();
+  if (!views) return;
-  if (filter) {
+
-    views = views.filter(filter);
-  }
   views.forEach(webContent => {
     const type = webContent.getType();
     logger.silly(`[IPC]: broadcasting "${channel}" to ${type}=${webContent.id}`, { args });
-    if (!frameOnly) {
+    webContent.send(channel, ...args);
-      webContent.send(channel, ...args);
+    getSubFrames().then((frames) => {
-    }
+      frames.map((frameId) => {
-    if (frameId) {
+        webContent.sendToFrame(frameId, channel, ...args);
-      webContent.sendToFrame(frameId, channel, ...args)
+      });
-    }
+    }).catch((e) => e);
-  })
+  });
+  if (ipcRenderer) {
+    ipcRenderer.send(channel, ...args);
+  } else {
+    ipcMain.emit(channel, ...args);
+  }
+}
+
+export function subscribeToBroadcast(channel: string, listener: (...args: any[]) => any) {
+  if (ipcRenderer) {
+    ipcRenderer.on(channel, listener);
+  } else {
+    ipcMain.on(channel, listener);
+  }
+
+  return listener;
+}
+
+export function unsubscribeFromBroadcast(channel: string, listener: (...args: any[]) => any) {
+  if (ipcRenderer) {
+    ipcRenderer.off(channel, listener);
+  } else {
+    ipcMain.off(channel, listener);
+  }
+}
+
+export function unsubscribeAllFromBroadcast(channel: string) {
+  if (ipcRenderer) {
+    ipcRenderer.removeAllListeners(channel);
+  } else {
+    ipcMain.removeAllListeners(channel);
+  }
 }

src/common/kube-helpers.ts

@@ -1,8 +1,8 @@
-import { KubeConfig, V1Node, V1Pod } from "@kubernetes/client-node"
+import { KubeConfig, V1Node, V1Pod } from "@kubernetes/client-node";
 import fse from "fs-extra";
-import path from "path"
+import path from "path";
-import os from "os"
+import os from "os";
-import yaml from "js-yaml"
+import yaml from "js-yaml";
 import logger from "../main/logger";
 import commandExists from "command-exists";
 import { ExecValidationNotFoundError } from "./custom-errors";
@@ -25,7 +25,7 @@ export function loadConfig(pathOrContent?: string): KubeConfig {
     kc.loadFromString(pathOrContent);
   }
 
-  return kc
+  return kc;
 }
 
 /**
@@ -39,33 +39,33 @@ export function validateConfig(config: KubeConfig | string): KubeConfig {
   if (typeof config == "string") {
     config = loadConfig(config);
   }
-  logger.debug(`validating kube config: ${JSON.stringify(config)}`)
+  logger.debug(`validating kube config: ${JSON.stringify(config)}`);
   if (!config.users || config.users.length == 0) {
-    throw new Error("No users provided in config")
+    throw new Error("No users provided in config");
   }
   if (!config.clusters || config.clusters.length == 0) {
-    throw new Error("No clusters provided in config")
+    throw new Error("No clusters provided in config");
   }
   if (!config.contexts || config.contexts.length == 0) {
-    throw new Error("No contexts provided in config")
+    throw new Error("No contexts provided in config");
   }
 
-  return config
+  return config;
 }
 
 /**
  * Breaks kube config into several configs. Each context as it own KubeConfig object
  */
 export function splitConfig(kubeConfig: KubeConfig): KubeConfig[] {
-  const configs: KubeConfig[] = []
+  const configs: KubeConfig[] = [];
   if (!kubeConfig.contexts) {
     return configs;
   }
   kubeConfig.contexts.forEach(ctx => {
     const kc = new KubeConfig();
     kc.clusters = [kubeConfig.getCluster(ctx.cluster)].filter(n => n);
-    kc.users = [kubeConfig.getUser(ctx.user)].filter(n => n)
+    kc.users = [kubeConfig.getUser(ctx.user)].filter(n => n);
-    kc.contexts = [kubeConfig.getContextObject(ctx.name)].filter(n => n)
+    kc.contexts = [kubeConfig.getContextObject(ctx.name)].filter(n => n);
     kc.setCurrentContext(ctx.name);
 
     configs.push(kc);
@@ -88,7 +88,7 @@ export function dumpConfigYaml(kubeConfig: Partial<KubeConfig>): string {
           server: cluster.server,
           'insecure-skip-tls-verify': cluster.skipTLSVerify
         }
-      }
+      };
     }),
     contexts: kubeConfig.contexts.map(context => {
       return {
@@ -98,7 +98,7 @@ export function dumpConfigYaml(kubeConfig: Partial<KubeConfig>): string {
           user: context.user,
           namespace: context.namespace
         }
-      }
+      };
     }),
     users: kubeConfig.users.map(user => {
       return {
@@ -114,9 +114,9 @@ export function dumpConfigYaml(kubeConfig: Partial<KubeConfig>): string {
           username: user.username,
           password: user.password
         }
-      }
+      };
     })
-  }
+  };
 
   logger.debug("Dumping KubeConfig:", config);
 
@@ -127,20 +127,20 @@ export function dumpConfigYaml(kubeConfig: Partial<KubeConfig>): string {
 export function podHasIssues(pod: V1Pod) {
   // Logic adapted from dashboard
   const notReady = !!pod.status.conditions.find(condition => {
-    return condition.type == "Ready" && condition.status !== "True"
+    return condition.type == "Ready" && condition.status !== "True";
   });
 
   return (
     notReady ||
     pod.status.phase !== "Running" ||
     pod.spec.priority > 500000 // We're interested in high prio pods events regardless of their running status
-  )
+  );
 }
 
 export function getNodeWarningConditions(node: V1Node) {
   return node.status.conditions.filter(c =>
     c.status.toLowerCase() === "true" && c.type !== "Ready" && c.type !== "HostUpgrades"
-  )
+  );
 }
 
 /**

src/common/prometheus-providers.ts

@@ -5,8 +5,8 @@ import { PrometheusStacklight } from "../main/prometheus/stacklight";
 import { PrometheusProviderRegistry } from "../main/prometheus/provider-registry";
 
 [PrometheusLens, PrometheusHelm, PrometheusOperator, PrometheusStacklight].forEach(providerClass => {
-  const provider = new providerClass()
+  const provider = new providerClass();
-  PrometheusProviderRegistry.registerProvider(provider.id, provider)
+  PrometheusProviderRegistry.registerProvider(provider.id, provider);
 });
 
-export const prometheusProviders = PrometheusProviderRegistry.getProviders()
+export const prometheusProviders = PrometheusProviderRegistry.getProviders();

src/common/rbac.ts

@@ -4,7 +4,7 @@ export type KubeResource =
   "namespaces" | "nodes" | "events" | "resourcequotas" |
   "services" | "secrets" | "configmaps" | "ingresses" | "networkpolicies" | "persistentvolumes" | "storageclasses" |
   "pods" | "daemonsets" | "deployments" | "statefulsets" | "replicasets" | "jobs" | "cronjobs" |
-  "endpoints" | "customresourcedefinitions" | "horizontalpodautoscalers" | "podsecuritypolicies" | "poddisruptionbudgets"
+  "endpoints" | "customresourcedefinitions" | "horizontalpodautoscalers" | "podsecuritypolicies" | "poddisruptionbudgets";
 
 export interface KubeApiResource {
   resource: KubeResource; // valid resource name

src/common/register-protocol.ts

@@ -1,6 +1,6 @@
 // Register custom protocols
 
-import { protocol } from "electron"
+import { protocol } from "electron";
 import path from "path";
 
 export function registerFileProtocol(name: string, basePath: string) {
@@ -8,5 +8,5 @@ export function registerFileProtocol(name: string, basePath: string) {
     const filePath = request.url.replace(name + "://", "");
     const absPath = path.resolve(basePath, filePath);
     callback({ path: absPath });
-  })
+  });
 }

src/common/request.ts

@@ -1,28 +1,28 @@
-import request from "request"
+import request from "request";
-import requestPromise from "request-promise-native"
+import requestPromise from "request-promise-native";
-import { userStore } from "./user-store"
+import { userStore } from "./user-store";
 
 // todo: get rid of "request" (deprecated)
 // https://github.com/lensapp/lens/issues/459
 
 function getDefaultRequestOpts(): Partial<request.Options> {
-  const { httpsProxy, allowUntrustedCAs } = userStore.preferences
+  const { httpsProxy, allowUntrustedCAs } = userStore.preferences;
   return {
     proxy: httpsProxy || undefined,
     rejectUnauthorized: !allowUntrustedCAs,
-  }
+  };
 }
 
 /**
  * @deprecated
  */
 export function customRequest(opts: request.Options) {
-  return request.defaults(getDefaultRequestOpts())(opts)
+  return request.defaults(getDefaultRequestOpts())(opts);
 }
 
 /**
  * @deprecated
  */
 export function customRequestPromise(opts: requestPromise.Options) {
-  return requestPromise.defaults(getDefaultRequestOpts())(opts)
+  return requestPromise.defaults(getDefaultRequestOpts())(opts);
 }

src/common/system-ca.ts

@@ -1,14 +1,14 @@
 import { isMac, isWindows } from "./vars";
-import winca from "win-ca"
+import winca from "win-ca";
-import macca from "mac-ca"
+import macca from "mac-ca";
-import logger from "../main/logger"
+import logger from "../main/logger";
 
 if (isMac) {
   for (const crt of macca.all()) {
-    const attributes = crt.issuer?.attributes?.map((a: any) => `${a.name}=${a.value}`)
+    const attributes = crt.issuer?.attributes?.map((a: any) => `${a.name}=${a.value}`);
-    logger.debug("Using host CA: " + attributes.join(","))
+    logger.debug("Using host CA: " + attributes.join(","));
   }
 }
 if (isWindows) {
-  winca.inject("+") // see: https://github.com/ukoloff/win-ca#caveats
+  winca.inject("+"); // see: https://github.com/ukoloff/win-ca#caveats
 }

src/common/user-store.ts

@@ -1,13 +1,13 @@
 import type { ThemeId } from "../renderer/theme.store";
 import { app, remote } from 'electron';
-import semver from "semver"
+import semver from "semver";
-import { readFile } from "fs-extra"
+import { readFile } from "fs-extra";
 import { action, observable, reaction, toJS } from "mobx";
 import { BaseStore } from "./base-store";
-import migrations from "../migrations/user-store"
+import migrations from "../migrations/user-store";
 import { getAppVersion } from "./utils/app-version";
 import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers";
-import { appEventBus } from "./event-bus"
+import { appEventBus } from "./event-bus";
 import logger from "../main/logger";
 import path from 'path';
 
@@ -31,18 +31,18 @@ export interface UserPreferences {
 }
 
 export class UserStore extends BaseStore<UserStoreModel> {
-  static readonly defaultTheme: ThemeId = "lens-dark"
+  static readonly defaultTheme: ThemeId = "lens-dark";
 
   private constructor() {
     super({
       // configName: "lens-user-store", // todo: migrate from default "config.json"
-      migrations: migrations,
+      migrations,
     });
 
     this.handleOnLoad();
   }
 
-  @observable lastSeenAppVersion = "0.0.0"
+  @observable lastSeenAppVersion = "0.0.0";
   @observable kubeConfigPath = kubeConfigDefaultPath; // used in add-cluster page for providing context
   @observable seenContexts = observable.set<string>();
   @observable newContexts = observable.set<string>();
@@ -66,7 +66,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
     if (app) {
       // track telemetry availability
       reaction(() => this.preferences.allowTelemetry, allowed => {
-        appEventBus.emit({name: "telemetry", action: allowed ? "enabled" : "disabled"})
+        appEventBus.emit({name: "telemetry", action: allowed ? "enabled" : "disabled"});
       });
 
       // open at system start-up
@@ -95,7 +95,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
 
   @action
   saveLastSeenAppVersion() {
-    appEventBus.emit({name: "app", action: "whats-new-seen"})
+    appEventBus.emit({name: "app", action: "whats-new-seen"});
     this.lastSeenAppVersion = getAppVersion();
   }
 
@@ -113,7 +113,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
       logger.error(err);
       this.resetKubeConfigPath();
     }
-  }
+  };
 
   @action
   markNewContextsAsSeen() {
@@ -127,12 +127,12 @@ export class UserStore extends BaseStore<UserStoreModel> {
    * @returns string
    */
   getDefaultKubectlPath(): string {
-    return path.join((app || remote.app).getPath("userData"), "binaries")
+    return path.join((app || remote.app).getPath("userData"), "binaries");
   }
 
   @action
   protected async fromStore(data: Partial<UserStoreModel> = {}) {
-    const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath } = data
+    const { lastSeenAppVersion, seenContexts = [], preferences, kubeConfigPath } = data;
     if (lastSeenAppVersion) {
       this.lastSeenAppVersion = lastSeenAppVersion;
     }
@@ -149,10 +149,10 @@ export class UserStore extends BaseStore<UserStoreModel> {
       lastSeenAppVersion: this.lastSeenAppVersion,
       seenContexts: Array.from(this.seenContexts),
       preferences: this.preferences,
-    }
+    };
     return toJS(model, {
       recurseEverything: true,
-    })
+    });
   }
 }