From 84cc0cdf5594dc727bec51f913b9c2e1859b0736 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 6 Apr 2021 15:45:23 +0300 Subject: [PATCH] Preferences page redesign (#2446) * Removing header part Signed-off-by: Alex Andreev * Restyling PageLayout Signed-off-by: Alex Andreev * Restyling .round-black Input Signed-off-by: Alex Andreev * Adding Tab navigation to Preferences Signed-off-by: Alex Andreev * Styling Application tab Signed-off-by: Alex Andreev * Add esc button Signed-off-by: Alex Andreev * Add media queries Signed-off-by: Alex Andreev * Introducting Switcher component Signed-off-by: Alex Andreev * Styling Proxy tab Signed-off-by: Alex Andreev * Moving start-up switcher to Other tab Signed-off-by: Alex Andreev * Styling Kubernetes tab Signed-off-by: Alex Andreev * Styling Extensions tab Signed-off-by: Alex Andreev * Styling inputs and selects Signed-off-by: Alex Andreev * Styling helm chart section Signed-off-by: Alex Andreev * Create a telemetry tab with extensions Signed-off-by: Alex Andreev * Adding lens Select theme Signed-off-by: Alex Andreev * Remove Other tab Signed-off-by: Alex Andreev * Fix mainBackground color Signed-off-by: Alex Andreev * Simplifying Tabs boilerplate Signed-off-by: Alex Andreev * Replacing button font Signed-off-by: Alex Andreev * Fixing one-column settings layout Signed-off-by: Alex Andreev * Fixing integration tests Signed-off-by: Alex Andreev * Fixin tests harder Signed-off-by: Alex Andreev * Showing bottom bar in workspaces Signed-off-by: Alex Andreev --- extensions/survey/renderer.tsx | 1 + extensions/telemetry/renderer.tsx | 1 + integration/__tests__/app.tests.ts | 17 +- integration/helpers/utils.ts | 4 +- .../registries/app-preference-registry.ts | 1 + .../+landing-page/landing-page.scss | 4 +- .../components/+preferences/helm-charts.scss | 20 +- .../components/+preferences/helm-charts.tsx | 17 +- .../+preferences/kubectl-binaries.tsx | 102 +++++---- .../components/+preferences/preferences.tsx | 192 +++++++++++------ src/renderer/components/app.scss | 6 - src/renderer/components/button/button.scss | 2 + src/renderer/components/input/input.scss | 13 +- .../components/layout/page-layout.scss | 202 ++++++++++++------ .../components/layout/page-layout.tsx | 37 ++-- src/renderer/components/select/select.scss | 58 ++++- src/renderer/components/select/select.tsx | 2 +- .../components/switch/form-switcher.tsx | 28 +++ src/renderer/components/switch/index.ts | 2 + src/renderer/components/switch/switcher.tsx | 68 ++++++ src/renderer/themes/lens-dark.json | 16 +- src/renderer/themes/lens-light.json | 14 +- src/renderer/themes/theme-vars.scss | 2 +- 23 files changed, 572 insertions(+), 237 deletions(-) create mode 100644 src/renderer/components/switch/form-switcher.tsx create mode 100644 src/renderer/components/switch/index.ts create mode 100644 src/renderer/components/switch/switcher.tsx diff --git a/extensions/survey/renderer.tsx b/extensions/survey/renderer.tsx index c740015634..0a8d8a678a 100644 --- a/extensions/survey/renderer.tsx +++ b/extensions/survey/renderer.tsx @@ -8,6 +8,7 @@ export default class SurveyRendererExtension extends LensRendererExtension { appPreferences = [ { title: "In-App Surveys", + showInPreferencesTab: "telemetry", components: { Hint: () => , Input: () => diff --git a/extensions/telemetry/renderer.tsx b/extensions/telemetry/renderer.tsx index d8ba4225df..15fda68ede 100644 --- a/extensions/telemetry/renderer.tsx +++ b/extensions/telemetry/renderer.tsx @@ -8,6 +8,7 @@ export default class TelemetryRendererExtension extends LensRendererExtension { appPreferences = [ { title: "Telemetry & Usage Tracking", + showInPreferencesTab: "telemetry", id: "telemetry-tracking", components: { Hint: () => , diff --git a/integration/__tests__/app.tests.ts b/integration/__tests__/app.tests.ts index cf03bccf7c..518ede0376 100644 --- a/integration/__tests__/app.tests.ts +++ b/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) }); diff --git a/integration/helpers/utils.ts b/integration/helpers/utils.ts index c7fd4e8ddb..14c0ff3334 100644 --- a/integration/helpers/utils.ts +++ b/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"); } } diff --git a/src/extensions/registries/app-preference-registry.ts b/src/extensions/registries/app-preference-registry.ts index e6b5d93cb2..0bbb537fa5 100644 --- a/src/extensions/registries/app-preference-registry.ts +++ b/src/extensions/registries/app-preference-registry.ts @@ -9,6 +9,7 @@ export interface AppPreferenceComponents { export interface AppPreferenceRegistration { title: string; id?: string; + showInPreferencesTab?: string; components: AppPreferenceComponents; } diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss index 8045003b33..c664fd9ccc 100644 --- a/src/renderer/components/+landing-page/landing-page.scss +++ b/src/renderer/components/+landing-page/landing-page.scss @@ -2,11 +2,9 @@ --width: 100%; --height: 100%; text-align: center; - - + bottom: 22px; // Making bottom bar visible .content-wrapper { - .content { margin: unset; max-width: unset; diff --git a/src/renderer/components/+preferences/helm-charts.scss b/src/renderer/components/+preferences/helm-charts.scss index 69d952d186..574fec28d9 100644 --- a/src/renderer/components/+preferences/helm-charts.scss +++ b/src/renderer/components/+preferences/helm-charts.scss @@ -1,11 +1,21 @@ .HelmCharts { .repos { - margin-top: var(--margin); + margin-top: 20px; - .Badge { - display: flex; - margin-bottom: 1px!important; - padding: 6px 8px; + .repo { + background: var(--inputControlBackground); + border-radius: 4px; + padding: 12px 16px; + box-shadow: 0 0 0 1px var(--secondaryBackground); + + .repoName { + font-weight: 500; + margin-bottom: 8px; + } + + .repoUrl { + color: var(--textColorDimmed); + } } } } \ No newline at end of file diff --git a/src/renderer/components/+preferences/helm-charts.tsx b/src/renderer/components/+preferences/helm-charts.tsx index 9bcdd5f755..1b0d80bf26 100644 --- a/src/renderer/components/+preferences/helm-charts.tsx +++ b/src/renderer/components/+preferences/helm-charts.tsx @@ -4,12 +4,10 @@ import React from "react"; import { action, computed, observable } from "mobx"; import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager"; -import { Badge } from "../badge"; import { Button } from "../button"; import { Icon } from "../icon"; import { Notifications } from "../notifications"; import { Select, SelectOption } from "../select"; -import { Tooltip } from "../tooltip"; import { AddHelmRepoDialog } from "./add-helm-repo-dialog"; import { observer } from "mobx-react"; @@ -106,6 +104,7 @@ export class HelmCharts extends React.Component { formatOptionLabel={this.formatOptionLabel} controlShouldRenderValue={false} className="box grow" + themeName="lens" />