Skip to content

Commit 3d8bc46

Browse files
emrberkemrberk
authored
refactor: allow table details empty state with table selection (#546)
* refactor: allow table details empty state with table selection * add support for views * schema name display to go to table details, prevent multiple operations * add view errors, fix stale drawer and columns issue * submodule
1 parent 8179f4a commit 3d8bc46

27 files changed

Lines changed: 1297 additions & 619 deletions

File tree

‎e2e/commands.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -529,12 +529,11 @@ Cypress.Commands.add("expandViews", () => {
529529
})
530530

531531
Cypress.Commands.add("openDetailsDrawer", (name, kind = "table") => {
532-
const titleHook =
533-
kind === "matview" ? "schema-matview-title" : "schema-table-title"
532+
const titleHook = `schema-${kind}-title`
534533
cy.getByDataHook(titleHook).contains(name).click()
535534
cy.realPress("Enter")
536535
cy.getByDataHook("table-details-drawer").should("be.visible")
537-
cy.getByDataHook("table-details-name").should("contain", name)
536+
cy.getByDataHook("table-details-name").should("have.value", name)
538537
})
539538

540539
Cypress.Commands.add("getEditorTabs", () => {

‎e2e/tests/console/tableDetails.spec.js‎

Lines changed: 137 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const {
1212
const TEST_TABLE = "btc_trades"
1313
const TEST_TABLE_NO_WAL = "btc_trades_no_wal"
1414
const TEST_MATVIEW = "btc_trades_mv"
15+
const TEST_VIEW = "btc_trades_view"
1516

1617
function interceptTablesQuery(modifications) {
1718
cy.intercept(
@@ -616,7 +617,7 @@ describe("TableDetailsDrawer", () => {
616617
cy.getByDataHook("table-details-base-table-link").click()
617618

618619
cy.getByDataHook("table-details-type-badge").should("contain", "Table")
619-
cy.getByDataHook("table-details-name").should("contain", TEST_TABLE)
620+
cy.getByDataHook("table-details-name").should("have.value", TEST_TABLE)
620621
cy.getByDataHook("sidebar-back-button").should("not.be.disabled")
621622

622623
cy.getByDataHook("sidebar-back-button").click()
@@ -625,7 +626,7 @@ describe("TableDetailsDrawer", () => {
625626
"contain",
626627
"Materialized View",
627628
)
628-
cy.getByDataHook("table-details-name").should("contain", TEST_MATVIEW)
629+
cy.getByDataHook("table-details-name").should("have.value", TEST_MATVIEW)
629630
cy.getByDataHook("sidebar-back-button").should("be.disabled")
630631
})
631632

@@ -671,6 +672,95 @@ describe("TableDetailsDrawer", () => {
671672
})
672673
})
673674

675+
describe("view specific", () => {
676+
before(() => {
677+
cy.loadConsoleWithAuth()
678+
cy.createTable(TEST_TABLE)
679+
cy.createView(TEST_VIEW)
680+
})
681+
682+
beforeEach(() => {
683+
cy.loadConsoleWithAuth()
684+
cy.refreshSchema()
685+
cy.collapseTables()
686+
cy.collapseMatViews()
687+
cy.expandViews()
688+
})
689+
690+
it("should open view details from schema, show View badge, no tabs, only DDL and columns sections with columns expanded", () => {
691+
cy.openDetailsDrawer(TEST_VIEW, "view")
692+
693+
cy.getByDataHook("table-details-type-badge").should("contain", "View")
694+
695+
cy.getByDataHook("table-details-tab-monitoring").should("not.exist")
696+
cy.getByDataHook("table-details-tab-details").should("not.exist")
697+
698+
cy.getByDataHook("table-details-ddl-section").should("be.visible")
699+
700+
cy.getByDataHook("table-details-columns-content").should("be.visible")
701+
702+
cy.getByDataHook("table-details-details-section").should("not.exist")
703+
704+
cy.getByDataHook("table-details-health-status")
705+
.should("be.visible")
706+
.should("have.attr", "data-severity", "healthy")
707+
})
708+
709+
after(() => {
710+
cy.loadConsoleWithAuth()
711+
cy.dropViewIfExists(TEST_VIEW)
712+
cy.dropTable(TEST_TABLE)
713+
})
714+
})
715+
716+
describe("view invalid state (R4)", () => {
717+
before(() => {
718+
cy.loadConsoleWithAuth()
719+
cy.createTable(TEST_TABLE)
720+
cy.createView(TEST_VIEW)
721+
})
722+
723+
it("should show error banner when view becomes invalid after base table is dropped", () => {
724+
cy.loadConsoleWithAuth()
725+
cy.refreshSchema()
726+
cy.collapseTables()
727+
cy.collapseMatViews()
728+
cy.expandViews()
729+
cy.openDetailsDrawer(TEST_VIEW, "view")
730+
731+
// Verify healthy state first
732+
cy.getByDataHook("table-details-health-status")
733+
.should("be.visible")
734+
.should("have.attr", "data-severity", "healthy")
735+
cy.getByDataHook("table-details-error-banner").should("not.exist")
736+
cy.getByDataHook("table-details-columns-content").should("be.visible")
737+
738+
// Drop base table to invalidate the view
739+
cy.execQuery(`DROP TABLE ${TEST_TABLE};`)
740+
741+
// Wait for polling to pick up the invalidation
742+
cy.get('[data-hook="table-details-error-banner"]', {
743+
timeout: 5000,
744+
}).should("be.visible")
745+
cy.getByDataHook("table-details-error-title").should(
746+
"contain",
747+
"View is invalid",
748+
)
749+
cy.getByDataHook("table-details-health-status").should(
750+
"have.attr",
751+
"data-severity",
752+
"critical",
753+
)
754+
cy.getByDataHook("table-details-error-docs-link").should("be.visible")
755+
})
756+
757+
after(() => {
758+
cy.loadConsoleWithAuth()
759+
cy.dropViewIfExists(TEST_VIEW)
760+
cy.dropTableIfExists(TEST_TABLE)
761+
})
762+
})
763+
674764
describe("AI interactions disabled", () => {
675765
before(() => {
676766
cy.loadConsoleWithAuth()
@@ -803,7 +893,7 @@ describe("TableDetailsDrawer", () => {
803893
cy.getByDataHook("sidebar-back-button").click()
804894
cy.getByDataHook("table-details-name")
805895
.should("be.visible")
806-
.should("contain", TEST_TABLE)
896+
.should("have.value", TEST_TABLE)
807897
})
808898

809899
it("should show Explain with AI button in DDL section", () => {
@@ -824,7 +914,7 @@ describe("TableDetailsDrawer", () => {
824914
cy.getByDataHook("sidebar-back-button").click()
825915
cy.getByDataHook("table-details-name")
826916
.should("be.visible")
827-
.should("contain", TEST_TABLE)
917+
.should("have.value", TEST_TABLE)
828918
})
829919

830920
it("should trigger AI chat when clicking Ask AI on performance alert", () => {
@@ -849,7 +939,7 @@ describe("TableDetailsDrawer", () => {
849939
cy.getByDataHook("sidebar-back-button").click()
850940
cy.getByDataHook("table-details-name")
851941
.should("be.visible")
852-
.should("contain", TEST_TABLE)
942+
.should("have.value", TEST_TABLE)
853943
})
854944

855945
after(() => {
@@ -873,30 +963,51 @@ describe("TableDetailsDrawer", () => {
873963
cy.expandTables()
874964
})
875965

876-
it("toggle button visibility: hidden initially, visible after opening, stays visible after close, reopens latest", () => {
877-
// Given
878-
cy.getByDataHook("table-details-toggle-button").should("not.exist")
966+
it("fresh page: toggle button visible, click shows promo and table selector, search and select table via keyboard", () => {
967+
cy.getByDataHook("table-details-toggle-button").should("be.visible")
879968

880-
// When
881-
cy.openDetailsDrawer(TEST_TABLE)
969+
cy.getByDataHook("table-details-toggle-button").click()
970+
cy.getByDataHook("table-details-drawer").should("be.visible")
971+
cy.getByDataHook("table-details-empty-state").should("be.visible")
882972

883-
// Then
884-
cy.getByDataHook("table-details-name").should("contain", TEST_TABLE)
885-
cy.getByDataHook("table-details-toggle-button").should("be.visible")
973+
cy.getByDataHook("table-details-name").should("be.focused")
974+
cy.getByDataHook("table-selector-dropdown").should("be.visible")
975+
cy.getByDataHook("table-selector-item").should(
976+
"have.length.greaterThan",
977+
0,
978+
)
886979

887-
// When
888-
cy.getByDataHook("sidebar-close-button").click()
980+
cy.getByDataHook("table-details-name").clear().type(TEST_TABLE)
981+
cy.getByDataHook("table-selector-item").should(
982+
"have.length.greaterThan",
983+
0,
984+
)
889985

890-
// Then
891-
cy.getByDataHook("table-details-drawer").should("not.exist")
892-
cy.getByDataHook("table-details-toggle-button").should("be.visible")
986+
cy.getByDataHook("table-details-name").type("{enter}")
893987

894-
// When
895-
cy.getByDataHook("table-details-toggle-button").click()
988+
cy.getByDataHook("table-details-empty-state").should("not.exist")
989+
cy.getByDataHook("table-details-name").should("have.value", TEST_TABLE)
990+
cy.getByDataHook("table-details-tab-monitoring").should("be.visible")
991+
})
896992

897-
// Then
898-
cy.getByDataHook("table-details-drawer").should("be.visible")
899-
cy.getByDataHook("table-details-name").should("contain", TEST_TABLE)
993+
it("switch table via title selector: open details from schema, then switch to another table using the title input", () => {
994+
cy.openDetailsDrawer(TEST_TABLE)
995+
cy.getByDataHook("table-details-name").should("have.value", TEST_TABLE)
996+
cy.getByDataHook("table-details-tab-monitoring").should("be.visible")
997+
998+
cy.getByDataHook("table-details-name").click()
999+
cy.getByDataHook("table-selector-dropdown").should("be.visible")
1000+
1001+
cy.getByDataHook("table-details-name").clear().type(TEST_TABLE_2)
1002+
cy.getByDataHook("table-selector-item").should(
1003+
"have.length.greaterThan",
1004+
0,
1005+
)
1006+
1007+
cy.getByDataHook("table-details-name").type("{enter}")
1008+
1009+
cy.getByDataHook("table-details-name").should("have.value", TEST_TABLE_2)
1010+
cy.getByDataHook("table-details-tab-monitoring").should("be.visible")
9001011
})
9011012

9021013
it("cross-panel navigation: navigate between table details, AI chat, and news using back/forward buttons", () => {
@@ -905,7 +1016,7 @@ describe("TableDetailsDrawer", () => {
9051016

9061017
// Then
9071018
cy.getByDataHook("table-details-drawer").should("be.visible")
908-
cy.getByDataHook("table-details-name").should("contain", TEST_TABLE)
1019+
cy.getByDataHook("table-details-name").should("have.value", TEST_TABLE)
9091020
cy.getByDataHook("sidebar-back-button").should("not.exist")
9101021

9111022
// When
@@ -940,7 +1051,7 @@ describe("TableDetailsDrawer", () => {
9401051

9411052
// Then
9421053
cy.getByDataHook("table-details-drawer").should("be.visible")
943-
cy.getByDataHook("table-details-name").should("contain", TEST_TABLE)
1054+
cy.getByDataHook("table-details-name").should("have.value", TEST_TABLE)
9441055
cy.getByDataHook("sidebar-back-button").should("be.disabled")
9451056
cy.getByDataHook("sidebar-forward-button").should("not.be.disabled")
9461057

@@ -1011,7 +1122,7 @@ describe("TableDetailsDrawer", () => {
10111122

10121123
// Then
10131124
cy.getByDataHook("table-details-drawer").should("be.visible")
1014-
cy.getByDataHook("table-details-name").should("contain", TEST_TABLE)
1125+
cy.getByDataHook("table-details-name").should("have.value", TEST_TABLE)
10151126
cy.getByDataHook("sidebar-forward-button").should("not.be.disabled")
10161127

10171128
// When

0 commit comments

Comments
 (0)