Skip to content

feat(web-console): keyboard navigation for table listing #420

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bluestreak01 merged 10 commits into from
Apr 27, 2025
Merged

feat(web-console): keyboard navigation for table listing #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ca6d924
feat(web-console): keyboard navigation for table listing
emrberk Apr 16, 2025
a677788
remove ts-ignore
emrberk Apr 17, 2025
fadf062
address review comments
emrberk Apr 18, 2025
2526846
fix query in provider
emrberk Apr 18, 2025
c66b385
add test cases
emrberk Apr 18, 2025
5efe6f1
address review comments
emrberk Apr 21, 2025
8b4d712
reviews round 2
emrberk Apr 22, 2025
30acacb
reviews round 3
emrberk Apr 23, 2025
2de4ce3
update submodule
emrberk Apr 24, 2025
d940a83
introduce flattened tree
emrberk Apr 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/browser-tests/cypress/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,31 +321,33 @@ Cypress.Commands.add("refreshSchema", () => {
Cypress.Commands.add("expandTables", () => {
cy.get("body").then((body) => {
if (body.find('[data-hook="expand-tables"]').length > 0) {
cy.get('[data-hook="expand-tables"]').click({ force: true });
cy.get('[data-hook="expand-tables"]').dblclick({ force: true });
}
});
});

Cypress.Commands.add("collapseTables", () => {
cy.get("body").then((body) => {
if (body.find('[data-hook="collapse-tables"]').length > 0) {
cy.get('[data-hook="collapse-tables"]').click({ force: true });
cy.get('[data-hook="collapse-tables"]').dblclick({ force: true });
}
});
});

Cypress.Commands.add("expandMatViews", () => {
cy.get("body").then((body) => {
if (body.find('[data-hook="expand-materialized-views"]').length > 0) {
cy.get('[data-hook="expand-materialized-views"]').click({ force: true });
cy.get('[data-hook="expand-materialized-views"]').dblclick({
force: true,
});
}
});
});

Cypress.Commands.add("collapseMatViews", () => {
cy.get("body").then((body) => {
if (body.find('[data-hook="collapse-materialized-views"]').length > 0) {
cy.get('[data-hook="collapse-materialized-views"]').click({
cy.get('[data-hook="collapse-materialized-views"]').dblclick({
force: true,
});
}
Expand Down
150 changes: 143 additions & 7 deletions packages/browser-tests/cypress/integration/console/schema.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ describe("questdb schema with working tables", () => {
});

afterEach(() => {
cy.realPress("Home");
cy.collapseTables();
cy.refreshSchema();
cy.expandTables();
Expand All @@ -37,9 +38,9 @@ describe("questdb schema with working tables", () => {
});

it("should show the symbol column details", () => {
cy.getByDataHook("schema-table-title").contains("btc_trades").click();
cy.getByDataHook("schema-folder-title").contains("Columns").click();
cy.getByDataHook("schema-column-title").contains("symbol").click();
cy.getByDataHook("schema-table-title").contains("btc_trades").dblclick();
cy.getByDataHook("schema-folder-title").contains("Columns").dblclick();
cy.getByDataHook("schema-column-title").contains("symbol").dblclick();

cy.getByDataHook("schema-row").should(($el) => {
expect($el.text()).to.include("Indexed:");
Expand All @@ -58,8 +59,8 @@ describe("questdb schema with working tables", () => {
});

it("should show the storage details", () => {
cy.getByDataHook("schema-table-title").contains("btc_trades").click();
cy.getByDataHook("schema-row").contains("Storage details").click();
cy.getByDataHook("schema-table-title").contains("btc_trades").dblclick();
cy.getByDataHook("schema-row").contains("Storage details").dblclick();

cy.getByDataHook("schema-row").should(($el) => {
expect($el.text()).to.include("WAL:");
Expand Down Expand Up @@ -99,6 +100,139 @@ describe("questdb schema with working tables", () => {
});
});

describe("keyboard navigation", () => {
before(() => {
cy.loadConsoleWithAuth();
tables.forEach((table) => {
cy.createTable(table);
});
materializedViews.forEach((mv) => {
cy.createMaterializedView(mv);
});
cy.refreshSchema();
});

beforeEach(() => {
cy.clearEditor();
cy.collapseTables();
cy.collapseMatViews();
cy.expandTables();
});

it("should expand and collapse folders using keyboard", () => {
cy.getByDataHook("schema-table-title").contains("btc_trades").dblclick();
cy.getByDataHook("schema-folder-title").should("contain", "Columns");
// go to the columns folder
cy.realPress("ArrowDown");

// expand the columns folder
cy.realPress("ArrowRight");
cy.getByDataHook("schema-row").should("contain", "symbol");

// go to the symbol column
cy.realPress("ArrowRight");

// expand the symbol column
cy.realPress("ArrowRight");
cy.getByDataHook("schema-row").should("contain", "Indexed:");

// collapse the symbol column
cy.realPress("ArrowLeft");
cy.contains("Indexed:").should("not.exist");

// go to columns folder
cy.realPress("ArrowLeft");
cy.focused().should("contain", "Columns");

// collapse the columns folder
cy.focused().should("contain", "Columns");
cy.realPress("ArrowLeft");
cy.contains("symbol").should("not.exist");

// go to the btc_trades table
cy.realPress("ArrowLeft");
cy.focused().should("contain", "btc_trades");

// collapse the table
cy.focused().should("contain", "btc_trades");
cy.realPress("ArrowLeft");
cy.contains("Columns").should("not.exist");

// go to the tables folder
cy.realPress("ArrowLeft");
cy.focused().should("contain", `Tables (${tables.length})`);

// collapse the tables folder
cy.focused().should("contain", "Tables");
cy.realPress("ArrowLeft");
cy.contains("btc_trades").should("not.exist");

// go to the materialized views folder
cy.realPress("ArrowDown");

// expand the materialized views folder
cy.realPress("ArrowRight");
cy.getByDataHook("schema-row").should("contain", "btc_trades_mv");

// go to the materialized view
cy.realPress("ArrowRight");

// expand the materialized view
cy.realPress("ArrowRight");
cy.getByDataHook("schema-row").should("contain", "Base tables");

cy.getByDataHook("schema-row").contains("Base tables").dblclick();
cy.getByDataHook("schema-detail-title").should("contain", "btc_trades");

// collapse base tables
cy.realPress("ArrowLeft");
cy.contains('[data-hook="schema-detail-title"]', "btc_trades").should(
"not.exist"
);

// collapse the materialized view
cy.getByDataHook("schema-row").contains("btc_trades_mv").dblclick();
cy.contains("Base tables").should("not.exist");

// go to materialized views folder
cy.realPress("ArrowUp");

// collapse the materialized views folder
cy.realPress("ArrowLeft");
cy.contains("btc_trades_mv").should("not.exist");
});

it("should switch the focus between grid and schema", () => {
cy.getEditorContent().should("be.visible");
cy.typeQuery("SELECT 123123;");
cy.runLine();
cy.focused().should("contain", "123123");

cy.expandMatViews();
cy.focused().should(
"contain",
`Materialized views (${materializedViews.length})`
);
cy.contains(".qg-c-active", "123123").should("not.exist");

cy.contains(".qg-c", "123123").click();
cy.focused().should("contain", "123123");
cy.getByDataHook("collapse-materialized-views").should(
"not.have.class",
"focused"
);
});

it("should go to the last item with End, and first item with Home", () => {
cy.expandMatViews();
cy.realPress("Home");
cy.focused().should("contain", `Tables (${tables.length})`);
cy.realPress("End");
const lastMatView = materializedViews[materializedViews.length - 1];
cy.focused().should("contain", lastMatView);
});
});

describe("questdb schema with suspended tables with Linux OS error codes", () => {
before(() => {
cy.loadConsoleWithAuth();
Expand Down Expand Up @@ -295,8 +429,10 @@ describe("materialized views", () => {

it("should show the base table and copy schema for a materialized view", () => {
cy.expandMatViews();
cy.getByDataHook("schema-matview-title").contains("btc_trades_mv").click();
cy.getByDataHook("schema-row").contains("Base tables").click();
cy.getByDataHook("schema-matview-title")
.contains("btc_trades_mv")
.dblclick();
cy.getByDataHook("schema-row").contains("Base tables").dblclick();
cy.getByDataHook("schema-detail-title")
.contains("btc_trades")
.should("exist");
Expand Down
2 changes: 1 addition & 1 deletion packages/browser-tests/questdb
Open in desktop
Submodule questdb updated 118 files
2 changes: 1 addition & 1 deletion packages/web-console/src/components/ReactChromeTabs/hooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const ChromeTabsWrapper = forwardRef<
<div
ref={ref}
className={classList.join(" ")}
style={{ "--tab-content-margin": "9px" } as CSSProperties}
style={{ "--tab-content-margin": "9px", "paddingBottom": "3px" } as CSSProperties}
>
<div className="chrome-tabs-content"></div>
</div>
Expand Down
Loading