feat(web-console): instance naming UI

packages/browser-tests/cypress/integration/auth/auth.spec.js

@@ -12,8 +12,10 @@ const interceptSettings = (payload) => {
 describe("OSS", () => {
   before(() => {
     interceptSettings({
-      "release.type": "OSS",
-      "release.version": "1.2.3",
+      "config": {
+        "release.type": "OSS",
+        "release.version": "1.2.3",
+      }
     });
     cy.visit(baseUrl);
   });
@@ -27,16 +29,18 @@ describe("OSS", () => {
 describe("Auth - UI", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": false,
-      "acl.oidc.enabled": false,
-      "acl.oidc.client.id": null,
-      "acl.oidc.authorization.endpoint": null,
-      "acl.oidc.token.endpoint": null,
-      "acl.oidc.pkce.required": null,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": false,
+        "acl.oidc.enabled": false,
+        "acl.oidc.client.id": null,
+        "acl.oidc.authorization.endpoint": null,
+        "acl.oidc.token.endpoint": null,
+        "acl.oidc.pkce.required": null,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });
@@ -52,16 +56,18 @@ describe("Auth - UI", () => {
 describe("Auth - OIDC", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": false,
-      "acl.oidc.enabled": true,
-      "acl.oidc.client.id": "test",
-      "acl.oidc.authorization.endpoint": "https://host:9999/auth",
-      "acl.oidc.token.endpoint": "https://host:9999/token",
-      "acl.oidc.pkce.required": true,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": false,
+        "acl.oidc.enabled": true,
+        "acl.oidc.client.id": "test",
+        "acl.oidc.authorization.endpoint": "https://host:9999/auth",
+        "acl.oidc.token.endpoint": "https://host:9999/token",
+        "acl.oidc.pkce.required": true,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });
@@ -77,16 +83,18 @@ describe("Auth - OIDC", () => {
 describe("Auth - Basic", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": true,
-      "acl.oidc.enabled": false,
-      "acl.oidc.client.id": null,
-      "acl.oidc.authorization.endpoint": null,
-      "acl.oidc.token.endpoint": null,
-      "acl.oidc.pkce.required": null,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": true,
+        "acl.oidc.enabled": false,
+        "acl.oidc.client.id": null,
+        "acl.oidc.authorization.endpoint": null,
+        "acl.oidc.token.endpoint": null,
+        "acl.oidc.pkce.required": null,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });
@@ -100,16 +108,18 @@ describe("Auth - Basic", () => {
 describe("Auth - Disabled", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": false,
-      "acl.basic.auth.realm.enabled": true,
-      "acl.oidc.enabled": false,
-      "acl.oidc.client.id": null,
-      "acl.oidc.authorization.endpoint": null,
-      "acl.oidc.token.endpoint": null,
-      "acl.oidc.pkce.required": null,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": false,
+        "acl.basic.auth.realm.enabled": true,
+        "acl.oidc.enabled": false,
+        "acl.oidc.client.id": null,
+        "acl.oidc.authorization.endpoint": null,
+        "acl.oidc.token.endpoint": null,
+        "acl.oidc.pkce.required": null,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });

packages/browser-tests/cypress/integration/console/telemetry.spec.js

@@ -22,7 +22,7 @@ describe("telemetry config", () => {
     cy.wait("@telemetryConfig").then(({ response }) => {
       const columnNames = response.body.columns.map((c) => c.name);
       expect(response.statusCode).to.equal(200);
-      ["id", "enabled", "version", "os", "package"].forEach((name) => {
+      ["id", "enabled", "version", "os", "package", "instance_name", "instance_type", "instance_desc"].forEach((name) => {
         expect(columnNames).to.include(name);
       });
       expect(response.body.dataset[0][0]).to.be.string;
@@ -34,6 +34,9 @@ describe("telemetry config", () => {
       expect(typeof response.body.dataset[0][4]).to.satisfy(
         (v) => v === null || typeof v === "string"
       );
+      expect(response.body.dataset[0][5]).to.be.string;
+      expect(response.body.dataset[0][6]).to.be.string;
+      expect(response.body.dataset[0][7]).to.be.string;
     });
   });
 });
@@ -62,7 +65,7 @@ describe("telemetry enabled", () => {
   it("should start telemetry when enabled", () => {
     cy.wait("@telemetryConfig").then(({ response }) => {
       cy.wait("@addTelemetry").then(({ request }) => {
-        const payload = JSON.parse(request.body);
+        const payload = request.body;
         expect(payload.id).to.equal(response.body.dataset[0][0]);
         expect(payload.version).to.equal(response.body.dataset[0][2]);
         expect(payload.os).to.equal(response.body.dataset[0][3]);

packages/browser-tests/cypress/integration/console/topbar.spec.js

@@ -0,0 +1,64 @@
+/// <reference types="cypress" />
+
+describe("TopBar", () => {
+  beforeEach(() => {
+    cy.loadConsoleWithAuth();
+  });
+
+  it("should show the instance warning and no description", () => {
+    cy.getByDataHook("topbar-instance-name").should(
+      "have.text",
+      "Instance name is not set"
+    );
+    cy.getByDataHook("topbar-instance-badge").should(
+      "have.css",
+      "background-color",
+      "rgb(40, 42, 54)"
+    );
+  });
+
+  it("should preview the color, show error when instance name is empty, and don't save changes on cancel", () => {
+    cy.getByDataHook("topbar-instance-name").realHover();
+    cy.getByDataHook("topbar-instance-edit-icon").should("be.visible");
+    cy.getByDataHook("topbar-instance-edit-icon").click();
+    cy.getByDataHook("topbar-instance-color-option-r").click();
+    cy.getByDataHook("topbar-instance-badge").should(
+      "have.css",
+      "background-color",
+      "rgb(199, 7, 45)"
+    );
+    cy.getByDataHook("topbar-instance-save-button").click();
+    cy.contains("Instance name is required").should("be.visible");
+    cy.getByDataHook("topbar-instance-cancel-button").click();
+    cy.getByDataHook("topbar-instance-name").should(
+      "have.text",
+      "Instance name is not set"
+    );
+    cy.getByDataHook("topbar-instance-badge").should(
+      "have.css",
+      "background-color",
+      "rgb(40, 42, 54)"
+    );
+  });
+
+  it("should change the instance name, description, and type", () => {
+    cy.getByDataHook("topbar-instance-badge").realHover();
+    cy.getByDataHook("topbar-instance-edit-icon").should("be.visible");
+    cy.getByDataHook("topbar-instance-edit-icon").click();
+    cy.getByDataHook("topbar-instance-name-input").type("test-instance");
+    cy.getByDataHook("topbar-instance-type-select").select("production");
+    cy.getByDataHook("topbar-instance-description-input").type(
+      "test description of the test instance"
+    );
+    cy.getByDataHook("topbar-instance-color-option-g").click();
+    cy.getByDataHook("topbar-instance-save-button").click();
+    cy.getByDataHook("topbar-instance-save-button").should("not.exist");
+    cy.getByDataHook("topbar-instance-name").should("contain", "Production");
+    cy.getByDataHook("topbar-instance-name").should("contain", "test-instance");
+    cy.getByDataHook("topbar-instance-icon").realHover();
+    cy.contains("test description of the test instance").should("be.visible");
+    cy.contains(
+      "You are connected to a QuestDB instance for production"
+    ).should("be.visible");
+  });
+});

packages/browser-tests/cypress/integration/enterprise/oidc.spec.js

@@ -40,17 +40,19 @@ describe("OIDC authentication", () => {
 
     // load login page
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": false,
-      "acl.oidc.enabled": true,
-      "acl.oidc.client.id": "client1",
-      "acl.oidc.authorization.endpoint": oidcAuthorizationCodeUrl,
-      "acl.oidc.token.endpoint": oidcTokenUrl,
-      "acl.oidc.pkce.required": true,
-      "acl.oidc.state.required": false,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": false,
+        "acl.oidc.enabled": true,
+        "acl.oidc.client.id": "client1",
+        "acl.oidc.authorization.endpoint": oidcAuthorizationCodeUrl,
+        "acl.oidc.token.endpoint": oidcTokenUrl,
+        "acl.oidc.pkce.required": true,
+        "acl.oidc.state.required": false,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
 

packages/web-console/src/components/PopperToggle/index.tsx

@@ -86,35 +86,61 @@ export const PopperToggle = ({
         return
       }
 
-      setActive(false)
+      if (_active) {
+        setActive(false)
+        if (onToggle) {
+          onToggle(false)
+        }
+      }
+    },
+    [container, onToggle, triggerElement, _active],
+  )
 
-      if (onToggle) {
-        onToggle(false)
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape" && _active) {
+        setActive(false)
+
+        if (onToggle) {
+          onToggle(false)
+        }
       }
     },
-    [container, onToggle, triggerElement],
+    [_active, onToggle],
   )
 
   usePopperStyles(container, styles.popper)
 
   useTransition(container, _active, transitionTimeoutId)
 
   useEffect(() => {
-    setActive(typeof active === "undefined" ? _active || false : active)
-  }, [active, _active])
+    if (typeof active !== "undefined") {
+      setActive(active)
+    }
+  }, [active])
+
+  useEffect(() => {
+    document.body.appendChild(container)
+
+    return () => {
+      clearTimeout(transitionTimeoutId.current)
+      if (document.body.contains(container)) {
+        document.body.removeChild(container)
+      }
+    }
+  }, [container])
 
   useEffect(() => {
     document.addEventListener("mousedown", handleMouseDown)
     document.addEventListener("touchstart", handleMouseDown)
+    document.addEventListener("keydown", handleKeyDown)
 
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      clearTimeout(transitionTimeoutId.current)
       document.removeEventListener("mousedown", handleMouseDown)
       document.removeEventListener("touchstart", handleMouseDown)
-      document.body.contains(container) && document.body.removeChild(container)
+      document.removeEventListener("keydown", handleKeyDown)
     }
-  }, [container, handleMouseDown])
+  }, [handleMouseDown, handleKeyDown])
 
   return (
     <>