From 501381db88d7eaf34c5ac820440505fc63807b47 Mon Sep 17 00:00:00 2001 From: Kris McGinnes Date: Mon, 5 Oct 2026 20:32:31 -0500 Subject: [PATCH 1/2] Move Query Language below Database URL and relabel the IAM checkbox (#2367) ## Description - The Database URL now comes before the Query Language, so the form reads in the order people have the information: where the database is, then what it speaks. - The IAM checkbox reads "Use AWS IAM authentication" instead of "AWS IAM Auth Enabled", so it describes what happens when it is checked. - The connection docs and the Neptune and Gremlin guides use the same order and wording. ## Validation - Tests look the checkbox up by its new name. - The field order is a layout change with no behavior to assert. - `pnpm checks` and `pnpm test` pass. ## Merge Danger **Door:** two-way **Blast Radius:** connection form layout and label Anything that finds the checkbox by its old accessible name needs the new one. ## Related Issues Follows the previous PR in this stack. ### Check List - [ ] I confirm that my contribution is made under the terms of the Apache 2.0 license. - [x] I have verified `pnpm checks` passes with no errors. - [x] I have verified `pnpm test` passes with no failures. - [x] I have covered new added functionality with unit tests if necessary. - [x] I have updated documentation if necessary. From 34c55f5c756f6c02d2eda02cfc127e4246173d68 Mon Sep 17 00:00:00 2001 From: Kris McGinnes Date: Mon, 5 Oct 2026 18:42:53 -0500 Subject: [PATCH 2/2] Stop marking direct connections in the connection list and details The list row no longer adds Direct to its subtitle and the details pane no longer shows a Direct from browser label with a tooltip. The route a connection takes is not something the list needs to call out. --- docs/features/connections.md | 2 +- .../ConnectionRow.test.tsx | 41 ++++++++----------- .../AvailableConnections/ConnectionRow.tsx | 5 +-- .../ConnectionDetail.test.tsx | 25 +++-------- .../ConnectionDetail/ConnectionDetail.tsx | 16 +------- .../graph-explorer/src/utils/constants.ts | 4 -- 6 files changed, 25 insertions(+), 68 deletions(-) diff --git a/docs/features/connections.md b/docs/features/connections.md index 5cee5e7ad..a65baf8b8 100644 --- a/docs/features/connections.md +++ b/docs/features/connections.md @@ -19,7 +19,7 @@ The next three settings are grouped under an **Advanced options** section that y - **Fetch Timeout:** Check **Enable Fetch Timeout** to reveal **Fetch Timeout (ms)**, then specify the timeout for the fetch request. - **Neighbor Expansion Limit:** Check **Override Default Neighbor Expansion Limit** to reveal this field, then specify the default limit for neighbor expansion. This will override the app setting for neighbor expansion. -- **Connect directly from the browser (deprecated):** Check this box to have your browser send requests to the database itself instead of through the Graph Explorer server. The database must allow cross-origin requests (CORS) from the Graph Explorer page, and IAM authentication isn't available, so the IAM fields are hidden. When Graph Explorer is served over HTTPS, the browser usually blocks an `http://` Database URL unless it points at a loopback host such as `localhost`; see [Insecure Database URL](../guides/troubleshooting.md#insecure-database-url). A direct connection shows "Direct" in the connection list and "Direct from browser (deprecated)" in its details. +- **Connect directly from the browser (deprecated):** Check this box to have your browser send requests to the database itself instead of through the Graph Explorer server. The database must allow cross-origin requests (CORS) from the Graph Explorer page, and IAM authentication isn't available, so the IAM fields are hidden. When Graph Explorer is served over HTTPS, the browser usually blocks an `http://` Database URL unless it points at a loopback host such as `localhost`; see [Insecure Database URL](../guides/troubleshooting.md#insecure-database-url). > [!WARNING] > diff --git a/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.test.tsx b/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.test.tsx index 5e93e3b50..b63968e96 100644 --- a/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.test.tsx +++ b/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.test.tsx @@ -146,29 +146,20 @@ describe("ConnectionRow", () => { ); } - test("shows Direct ahead of the URL for a direct connection", () => { - renderRow({ - ...createRandomSavedConnection(), - connection: { - graphDbUrl: "https://my-neptune:8182", - proxyConnection: false, - }, - }); - - expect( - screen.getByText(/ • Direct • https:\/\/my-neptune:8182$/), - ).toBeInTheDocument(); - }); - - test("does not mark a proxy connection as direct", () => { - renderRow({ - ...createRandomSavedConnection(), - connection: { graphDbUrl: "https://my-neptune:8182" }, - }); - - expect( - screen.getByText(/^PG-Gremlin • https:\/\/my-neptune:8182$/), - ).toBeInTheDocument(); - expect(screen.queryByText(/Direct/)).toBeNull(); - }); + test.each([ + { name: "direct", route: { proxyConnection: false } }, + { name: "proxy", route: {} }, + ])( + "shows the language and URL without a route mark on a $name connection", + ({ route }) => { + renderRow({ + ...createRandomSavedConnection(), + connection: { graphDbUrl: "https://my-neptune:8182", ...route }, + }); + + expect( + screen.getByText(/^PG-Gremlin • https:\/\/my-neptune:8182$/), + ).toBeInTheDocument(); + }, + ); }); diff --git a/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.tsx b/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.tsx index af1d6f44b..85979b418 100644 --- a/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.tsx +++ b/packages/graph-explorer/src/modules/AvailableConnections/ConnectionRow.tsx @@ -3,9 +3,8 @@ import { DatabaseIcon } from "lucide-react"; import type { SavedConnection } from "@/connections"; import { ListRowContent, ListRowSubtitle, ListRowTitle } from "@/components"; -import { isDirectConnection, useActivateConnection } from "@/connections"; +import { useActivateConnection } from "@/connections"; import { useTranslations } from "@/hooks"; -import { LABELS } from "@/utils/constants"; function ConnectionRow({ connection, @@ -21,7 +20,6 @@ function ConnectionRow({ const setActiveConfig = () => activateConnection(connection.id); const dbUrl = connection.connection?.graphDbUrl || null; - const isDirect = isDirectConnection(connection.connection); const graphType = t( "query-language", @@ -40,7 +38,6 @@ function ConnectionRow({ {graphType} - {isDirect ? <> • {LABELS.DIRECT_CONNECTION_SHORT} : null} {dbUrl ? <> • {dbUrl} : null} diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.test.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.test.tsx index 6c7972d84..3e5905391 100644 --- a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.test.tsx +++ b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.test.tsx @@ -1,8 +1,7 @@ // @vitest-environment happy-dom import type { ConnectionConfig } from "@shared/types"; -import { render, screen, within } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { render, screen } from "@testing-library/react"; import { describe, expect, test } from "vitest"; import { TooltipProvider } from "@/components"; @@ -36,23 +35,11 @@ function renderDetail(connection: ConnectionConfig) { } describe("ConnectionDetail", () => { - test("marks a direct connection as deprecated and explains how to switch", async () => { - const user = userEvent.setup(); - renderDetail({ - graphDbUrl: "https://my-neptune:8182", - proxyConnection: false, - }); - - const marker = screen.getByText("Direct from browser (deprecated)"); - await user.hover(within(marker).getByRole("button")); - - expect(await screen.findByRole("tooltip")).toHaveTextContent( - "Requests for this connection go from your browser to the database instead of through the Graph Explorer server. This option will be removed in a future release. To switch, edit the connection and uncheck Connect directly from the browser (deprecated) under Advanced options.", - ); - }); - - test("does not mark a proxy connection as direct", () => { - renderDetail({ graphDbUrl: "https://my-neptune:8182" }); + test.each([ + { name: "direct", route: { proxyConnection: false } }, + { name: "proxy", route: {} }, + ])("shows no route mark on a $name connection", ({ route }) => { + renderDetail({ graphDbUrl: "https://my-neptune:8182", ...route }); // Proves the query below fails on absence rather than an unrendered panel expect(screen.getByText("https://my-neptune:8182")).toBeInTheDocument(); diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx index 69498d7c6..7a7efebdb 100644 --- a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx +++ b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDetail.tsx @@ -18,7 +18,6 @@ import { EdgeIcon, EditIcon, GraphIcon, - InfoTooltip, NotInProduction, Panel, PanelContent, @@ -44,7 +43,7 @@ import { DialogHeader, DialogTitle, } from "@/components/Dialog"; -import { isDirectConnection, useDeleteActiveConnection } from "@/connections"; +import { useDeleteActiveConnection } from "@/connections"; import { activeSchemaSelector, type ConfigurationContextProps, @@ -89,7 +88,6 @@ function ConnectionDetail({ config }: ConnectionDetailProps) { const deleteActiveConfig = useDeleteActiveConnection(); const dbUrl = config.connection?.graphDbUrl || LABELS.MISSING_VALUE; - const isDirect = isDirectConnection(config.connection); const connectionName = config.displayLabel || config.id; @@ -149,18 +147,6 @@ function ConnectionDetail({ config }: ConnectionDetailProps) { {dbUrl} - {isDirect && ( - - {LABELS.DIRECT_CONNECTION} - - Requests for this connection go from your browser to the - database instead of through the Graph Explorer server. This - option will be removed in a future release. To switch, edit - the connection and uncheck Connect directly from the browser - (deprecated) under Advanced options. - - - )} diff --git a/packages/graph-explorer/src/utils/constants.ts b/packages/graph-explorer/src/utils/constants.ts index 72263ad11..8f9ee4426 100644 --- a/packages/graph-explorer/src/utils/constants.ts +++ b/packages/graph-explorer/src/utils/constants.ts @@ -39,10 +39,6 @@ export const LABELS = { MISSING_TYPE: `${ASCII.LAQUO}No Type${ASCII.RAQUO}`, /** Shown when a value is missing */ MISSING_VALUE: `${ASCII.LAQUO}No Value${ASCII.RAQUO}`, - /** Marks a deprecated direct connection in its details */ - DIRECT_CONNECTION: "Direct from browser (deprecated)", - /** Marks a deprecated direct connection in the connection list */ - DIRECT_CONNECTION_SHORT: "Direct", /** Shown when a value is empty (like empty string) */ EMPTY_VALUE: `${ASCII.LAQUO}Empty Value${ASCII.RAQUO}`,