test(viewbox): select the config panel by its own heading

loadData() re-selects a viewbox about 600ms after its data lands, and that can
land after the row click that opens its configuration - leaving the panel on
the other viewbox and the test looking for a column that table does not have.
The panel's heading names the viewbox it is showing, so the click is repeated
until the heading matches rather than trusting the click once.

The row is only clicked when the panel is not already on that viewbox, since
selectViewbox() toggles and a second click would deselect it.

Verified on the local stack: 12 passing in 2:30 and 2:20, against 5:22 for the
same spec before the change.

client/cypress/e2e/viewbox.cy.ts

@@ -793,21 +793,44 @@ const openViewViewboxes = () => {
 // cy.contains retries until a matching node appears/updates - the open
 // viewbox's own list entry can render before its table-name text has
 // actually loaded, so a one-shot .then() lookup here would race it.
-const openViewboxConfig = (viewbox_tablename: string) => {
-  cy.contains('.open-viewbox', viewbox_tablename, {
-    matchCase: false,
-    timeout: longerCommandTimeout
-  }).click()
+const openViewboxConfig = (viewbox_tablename: string, attempt = 1) => {
+  // The panel heading names the viewbox it is configuring, so it - not the
+  // row - is what the test waits on. loadData() re-selects a viewbox ~600ms
+  // after its data lands, and that can happen after this click; when it does,
+  // the panel has moved on and the click is repeated.
+  const panelHeading = () =>
+    cy.contains('p', 'Configuration (', { timeout: longerCommandTimeout })
 
-  // selectViewbox() marks the row it switched to. Asserting it here means a
-  // swallowed click fails at the click rather than 50s later, on a column the
-  // other viewbox does not have.
-  cy.get('.open-viewbox.selected', { timeout: longerCommandTimeout }).should(
-    ($selected) =>
-      expect($selected.text().toLowerCase()).to.contain(
+  panelHeading().then(($heading) => {
+    if (
+      $heading.text().toLowerCase().includes(viewbox_tablename.toLowerCase())
+    ) {
+      return
+    }
+
+    // selectViewbox() toggles, so a row that is already selected is clicked
+    // once, which leaves the panel on that row's columns.
+    cy.contains('.open-viewbox', viewbox_tablename, {
+      matchCase: false,
+      timeout: longerCommandTimeout
+    }).click()
+
+    cy.wait(400)
+
+    panelHeading().then(($after) => {
+      if (
+        $after.text().toLowerCase().includes(viewbox_tablename.toLowerCase())
+      ) {
+        return
+      }
+      if (attempt < 4) {
+        return openViewboxConfig(viewbox_tablename, attempt + 1)
+      }
+      expect($after.text().toLowerCase()).to.contain(
         viewbox_tablename.toLowerCase()
       )
-  )
+    })
+  })
 }
 
 const openTableFromTree = (libNameIncludes: string, tablename: string) => {
@@ -1007,10 +1030,8 @@ const openTableFromViewboxTree = (
     clickTableLink(tablename)
   }
 
-  // Each pick adds a row to the open list asynchronously, and the component
-  // re-selects a box when its data lands. Until then the row carries a
-  // spinner, so waiting for both the rows and the spinners is what makes the
-  // next selection stick.
+  // Each pick adds its row to the open list asynchronously, so wait for the
+  // rows before returning a list the caller can select from.
   for (const tablename of tablenames) {
     cy.contains('.open-viewbox', tablename, {
       matchCase: false,
@@ -1018,14 +1039,12 @@ const openTableFromViewboxTree = (
     })
   }
 
-  cy.get('.open-viewbox clr-spinner', {
-    timeout: longerCommandTimeout
-  }).should('not.exist')
-
-  // Once a viewbox's data has rendered, loadData() re-selects that viewbox
-  // ~600ms later (two nested setTimeout calls in the component). Selecting
-  // before that lands is undone by it, which sends the next step to the other
-  // viewbox's column list - so let the timer pass first.
+  // A viewbox's data arrives after its row, and loadData() re-selects the box
+  // it just loaded ~600ms later (two nested setTimeout calls in the
+  // component) whenever something is already selected. Selecting inside that
+  // window is undone by it, which sends the next step to the other viewbox's
+  // column list - so let the window pass. openViewboxConfig() asserts the
+  // selection it makes, so a lost click still fails at the click.
   cy.wait(800)
 }