fix(serverVariables): refresh state on definition change (#7821)

* fix(serverVariables): refresh state on definition change

* test(serverVariables): urls with server variables assertions

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

@@ -36,3 +36,76 @@ describe("configuration options: `urls` and `urls.primaryName`", () => {
       .should("equal", "/documents/features/urls/2.yaml")
   })
 })
+
+describe("urls with server variables", () => {
+  it("should compute a url and default server variables", () => {
+    cy.visit("/?configUrl=/configs/urls-server-variables.yaml")
+      .get("code")
+      .should("have.text", "https://localhost:3200/oneFirstUrl")
+      .get("tr > :nth-child(1)")
+      .should("have.text", "basePath")
+      .get("input")
+      .should("have.value", "/oneFirstUrl")
+  })
+  it("should change server variables", () => {
+    cy.visit("/?configUrl=/configs/urls-server-variables.yaml")
+      .get("code")
+      .should("have.text", "https://localhost:3200/oneFirstUrl")
+      .get("tr > :nth-child(1)")
+      .should("have.text", "basePath")
+      .get("input")
+      .should("have.value", "/oneFirstUrl")
+      .get(".servers > label > select")
+      .eq(0)
+      .select(1)
+      .get("input")
+      .should("have.value", "/oneSecondUrl")
+  })
+  it("should select and compute second url", () => {
+    cy.visit("/?configUrl=/configs/urls-server-variables.yaml")
+      .get("select > option")
+      .eq(1)
+      .should("have.text", "Two")
+      .get("select")
+      .eq(0)
+      .select(1)
+      .get("code")
+      .should("have.text", "https://localhost:3200/twoFirstUrl")
+      .get("input")
+      .should("have.value", "/twoFirstUrl")
+  })
+  it("should select second url, then toggle back to first url", () => {
+    cy.visit("/?configUrl=/configs/urls-server-variables.yaml")
+      .get("select > option")
+      .get("select")
+      .eq(0)
+      .select(1)
+      .get("input")
+      .should("have.value", "/twoFirstUrl")
+      // toggle url back
+      .get("select")
+      .eq(0)
+      .select(0)
+      .get("code")
+      .should("have.text", "https://localhost:3200/oneFirstUrl")
+      .get("input")
+      .should("have.value", "/oneFirstUrl")
+  })
+  it("should change server variables, then select second url, and maintain server variables index", () => {
+    cy.visit("/?configUrl=/configs/urls-server-variables.yaml")
+      .get(".servers > label >select")
+      .eq(0)
+      .select(1)
+      .get("input")
+      .should("have.value", "/oneSecondUrl")
+      // change url
+      .get("select > option")
+      .get("select")
+      .eq(0)
+      .select(1)
+      .get("input")
+      .should("have.value", "/twoSecondUrl")
+      .get("input")
+      .should("have.value", "/twoSecondUrl")
+  })
+})