Preferences page redesign (#2446)

* Removing header part

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Restyling PageLayout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Restyling .round-black Input

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding Tab navigation to Preferences

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Application tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add esc button

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add media queries

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Introducting Switcher component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Proxy tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving start-up switcher to Other tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Kubernetes tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling Extensions tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling inputs and selects

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling helm chart section

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Create a telemetry tab with extensions

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding lens Select theme

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove Other tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix mainBackground color

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Simplifying Tabs boilerplate

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Replacing button font

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing one-column settings layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing integration tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixin tests harder

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Showing bottom bar in workspaces

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

integration/__tests__/app.tests.ts

@@ -36,7 +36,7 @@ describe("Lens integration tests", () => {
 
     it('shows "add cluster"', async () => {
       await app.electron.ipcRenderer.send("test-menu-item-click", "File", "Add Cluster");
-      await app.client.waitUntilTextExists("h2", "Add Cluster");
+      await app.client.waitUntilTextExists("h2", "Add Clusters from Kubeconfig");
     });
 
     describe("preferences page", () => {
@@ -44,7 +44,17 @@ describe("Lens integration tests", () => {
         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");
+        await app.client.waitUntilTextExists("[data-testid=application-header]", "APPLICATION");
+      });
+
+      it("shows all tabs and their contents", async () => {
+        await app.client.click("[data-testid=application-tab]");
+        await app.client.click("[data-testid=proxy-tab]");
+        await app.client.waitUntilTextExists("[data-testid=proxy-header]", "PROXY");
+        await app.client.click("[data-testid=kube-tab]");
+        await app.client.waitUntilTextExists("[data-testid=kubernetes-header]", "KUBERNETES");
+        await app.client.click("[data-testid=telemetry-tab]");
+        await app.client.waitUntilTextExists("[data-testid=telemetry-header]", "TELEMETRY");
       });
 
       it("ensures helm repos", async () => {
@@ -54,7 +64,8 @@ describe("Lens integration tests", () => {
           fail("Lens failed to add Bitnami repository");
         }
 
-        await app.client.waitUntilTextExists("div.repos #message-bitnami", repos[0].name); // wait for the helm-cli to fetch the repo(s)
+        await app.client.click("[data-testid=kube-tab]");
+        await app.client.waitUntilTextExists("div.repos .repoName", repos[0].name); // wait for the helm-cli to fetch the repo(s)
         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)
       });

integration/helpers/utils.ts

@@ -80,7 +80,7 @@ export async function appStart() {
 export async function clickWhatsNew(app: Application) {
   await app.client.waitUntilTextExists("h1", "What's new?");
   await app.client.click("button.primary");
-  await app.client.waitUntilTextExists("h2", "default");
+  await app.client.waitUntilTextExists("h5", "Clusters");
 }
 
 export async function clickWelcomeNotification(app: Application) {
@@ -89,7 +89,7 @@ export async function clickWelcomeNotification(app: Application) {
   if (itemsText === "0 item") {
     // welcome notification should be present, dismiss it
     await app.client.waitUntilTextExists("div.message", "Welcome!");
-    await app.client.click("i.Icon.close");
+    await app.client.click(".notification i.Icon.close");
   }
 }