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

* fix(serverVariables): refresh state on definition change

* test(serverVariables): urls with server variables assertions

src/core/plugins/oas3/components/servers.jsx

@@ -31,22 +31,33 @@ export default class Servers extends React.Component {
       setServerVariableValue,
       getServerVariable
     } = nextProps
-
     if (this.props.currentServer !== nextProps.currentServer || this.props.servers !== nextProps.servers) {
       // Server has changed, we may need to set default values
       let currentServerDefinition = servers
         .find(v => v.get("url") === nextProps.currentServer)
-
+      let prevServerDefinition = this.props.servers
+        .find(v => v.get("url") === this.props.currentServer) || OrderedMap()
+      
       if(!currentServerDefinition) {
         return this.setServer(servers.first().get("url"))
       }
-
+      
+      let prevServerVariableDefs = prevServerDefinition.get("variables") || OrderedMap()
+      let prevServerVariableDefaultKey = prevServerVariableDefs.find(v => v.get("default")) || OrderedMap()
+      let prevServerVariableDefaultValue = prevServerVariableDefaultKey.get("default")
+      
       let currentServerVariableDefs = currentServerDefinition.get("variables") || OrderedMap()
-
+      let currentServerVariableDefaultKey = currentServerVariableDefs.find(v => v.get("default")) || OrderedMap()
+      let currentServerVariableDefaultValue = currentServerVariableDefaultKey.get("default")
+      
       currentServerVariableDefs.map((val, key) => {
         let currentValue = getServerVariable(nextProps.currentServer, key)
+        
+        // note: it is possible for both key/val to be the same across definitions,
+        // but we will try to detect a change in default values between definitions
         // only set the default value if the user hasn't set one yet
-        if(!currentValue) {
+        // or if the definition appears to have changed
+        if (!currentValue || prevServerVariableDefaultValue !== currentServerVariableDefaultValue) {
           setServerVariableValue({
             server: nextProps.currentServer,
             key,

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

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

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

@@ -0,0 +1,38 @@
+openapi: 3.0.1
+info:
+  title: Server Variables - One
+  description: sample OAS 3 definition to test server variables with urls
+  version: 1.0.0
+servers:
+- url: "https://localhost:3200{basePath}"
+  variables:
+    basePath:
+      default: "/oneFirstUrl"
+- url: "http://localhost:3201{basePath}"
+  variables:
+    basePath:
+      default: "/oneSecondUrl"
+paths:
+  /a:
+    post:
+      summary: simple service A
+      requestBody:
+        content:
+          'application/json':
+            schema:
+              properties:
+                foo:
+                  type: string
+                bar:
+                  type: string
+              required:
+                - foo
+              type: object
+        required: true
+      responses:
+        200:
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: 'string'

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

@@ -0,0 +1,38 @@
+openapi: 3.0.1
+info:
+  title: Server Variables - Two
+  description: sample OAS 3 definition to test server variables with urls
+  version: 1.0.0
+servers:
+- url: "https://localhost:3200{basePath}"
+  variables:
+    basePath:
+      default: "/twoFirstUrl"
+- url: "http://localhost:3201{basePath}"
+  variables:
+    basePath:
+      default: "/twoSecondUrl"
+paths:
+  /b:
+    post:
+      summary: simple service B
+      requestBody:
+        content:
+          'application/json':
+            schema:
+              properties:
+                foo:
+                  type: string
+                bar:
+                  type: string
+              required:
+                - foo
+              type: object
+        required: true
+      responses:
+        200:
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: 'string'

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")
+  })
+})