fix: urls.primaryName functionality regression (via #5097)

* add tests

* compute index before triggering URL load

* bonus: improve urls topbar label

src/plugins/topbar/topbar.jsx

@@ -74,7 +74,7 @@ export default class Topbar extends React.Component {
     const urls = configs.urls || []
 
     if(urls && urls.length) {
-      this.loadSpec(urls[this.state.selectedIndex].url)
+      var targetIndex = this.state.selectedIndex
       let primaryName = configs["urls.primaryName"]
       if(primaryName)
       {
@@ -82,9 +82,12 @@ export default class Topbar extends React.Component {
           if(spec.name === primaryName)
             {
               this.setState({selectedIndex: i})
+              targetIndex = i
             }
         })
       }
+
+      this.loadSpec(urls[targetIndex].url)
     }
   }
 
@@ -116,7 +119,7 @@ export default class Topbar extends React.Component {
       })
 
       control.push(
-        <label className="select-label" htmlFor="select"><span>Select a spec</span>
+        <label className="select-label" htmlFor="select"><span>Select a definition</span>
           <select id="select" disabled={isLoading} onChange={ this.onUrlSelect } value={urls[this.state.selectedIndex].url}>
             {rows}
           </select>

src/style/_topbar.scss

@@ -54,6 +54,7 @@
             width: 100%;
             max-width: 600px;
             margin: 0;
+            color: #f0f0f0;
             span
             {
                 font-size: 16px;

test/e2e-cypress/static/configs/urls-primary-name.yaml

@@ -0,0 +1,6 @@
+urls:
+- name: One
+  url: /documents/features/urls/1.yaml
+- name: Two
+  url: /documents/features/urls/2.yaml
+urls.primaryName: Two

test/e2e-cypress/static/configs/urls.yaml

@@ -0,0 +1,5 @@
+urls:
+- name: One
+  url: /documents/features/urls/1.yaml
+- name: Two
+  url: /documents/features/urls/2.yaml

test/e2e-cypress/static/documents/features/urls/1.yaml

@@ -0,0 +1,12 @@
+swagger: "2.0"
+
+info:
+  title: One
+
+paths:
+  /:
+    get:
+      summary: an operation
+      responses:
+        "200":
+          description: OK

test/e2e-cypress/static/documents/features/urls/2.yaml

@@ -0,0 +1,12 @@
+openapi: "3.0.0"
+
+info:
+  title: Two
+
+paths:
+  /:
+    get:
+      summary: an operation
+      responses:
+        "200":
+          description: OK

test/e2e-cypress/tests/features/urls.js

@@ -0,0 +1,38 @@
+describe("configuration options: `urls` and `urls.primaryName`", () => {
+  describe("`urls` only", () => {
+    it("should render a list of URLs correctly", () => {
+      cy.visit("/?configUrl=/configs/urls.yaml")
+        .get("select")
+        .children()
+        .should("have.length", 2)
+        .get("select > option")
+        .eq(0)
+        .should("have.text", "One")
+        .should("have.attr", "value", "/documents/features/urls/1.yaml")
+        .get("select > option")
+        .eq(1)
+        .should("have.text", "Two")
+        .should("have.attr", "value", "/documents/features/urls/2.yaml")
+    })
+
+    it("should render the first URL in the list", () => {
+      cy.visit("/?configUrl=/configs/urls.yaml")
+        .get("h2.title")
+        .should("have.text", "One")
+        .window()
+        .then(win => win.ui.specSelectors.url())
+        .should("equal", "/documents/features/urls/1.yaml")
+    })
+  })
+
+  it("should respect a `urls.primaryName`", () => {
+    cy.visit("/?configUrl=/configs/urls-primary-name.yaml")
+      .get("select")
+      .should("have.value", "/documents/features/urls/2.yaml")
+      .get("h2.title")
+      .should("have.text", "Two")
+      .window()
+      .then(win => win.ui.specSelectors.url())
+      .should("equal", "/documents/features/urls/2.yaml")
+  })
+})