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/topbar.spec.js

@@ -0,0 +1,66 @@
+/// <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(
+      "have.text",
+      "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

@@ -95,6 +95,19 @@ export const PopperToggle = ({
     [container, onToggle, triggerElement],
   )
 
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape" && _active) {
+        setActive(false)
+
+        if (onToggle) {
+          onToggle(false)
+        }
+      }
+    },
+    [_active, onToggle],
+  )
+
   usePopperStyles(container, styles.popper)
 
   useTransition(container, _active, transitionTimeoutId)
@@ -106,15 +119,17 @@ export const PopperToggle = ({
   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.removeEventListener("keydown", handleKeyDown)
       document.body.contains(container) && document.body.removeChild(container)
     }
-  }, [container, handleMouseDown])
+  }, [container, handleMouseDown, handleKeyDown])
 
   return (
     <>