Switching between response codes with multiple named examples causes an error

[gsmcdonald]

What happens?

An error occurs when switching between response codes with different names for examples

What did you expect to happen?

The selected response code's example to show.

How can we reproduce the issue?

1. Go to a request with multiple response codes where two response codes have different named examples (or number of examples).
2. Switching between response codes
3. An error will occur

The error will be in the console in the sandbox, but I'm not seeing the effects there (but I am seeing them when using a project at docs.scalar.com)

Swagger/OpenAPI Example

https://sandbox.scalar.com/e/s4ysq

[gsmcdonald]

I think the issue is that the selectedExampleKey value isn't reset when switching tabs, which causes an error when attempting to find that value in the examples object here.

I'm not sure if the expected behavior would be to clear the value so that the first response is selected when switching tabs or potentially just checking if the key exists in the examples object (in case you wanted to maintain state between response codes with the same responses).

[hanspagel]

Great bug report! Let’s fix this!

[gsmcdonald]

@hanspagel What do you think about something like this? I haven't tested it because of some build issues, but I think the logic adds up.

/**
 * Gets the first example response if there are multiple example responses
 * or the only example if there is only one example response.
 */
const getFirstExampleResponse = () => {
  if (!hasMultipleExamples.value)
    return currentJsonResponse.value.example;
  else if (Array.isArray(currentJsonResponse.value.examples))
    return currentJsonResponse.value.examples[0]
  else {
    const firstProperty = Object.keys(currentJsonResponse.value.examples)[0];
    return currentJsonResponse.value.examples[firstProperty];
  }
}

const currentResponseWithExample = computed(() => ({
  ...currentJsonResponse.value,
  example:
    hasMultipleExamples.value && selectedExampleKey.value
      ? currentJsonResponse.value.examples[selectedExampleKey.value].value ??
        currentJsonResponse.value.examples[selectedExampleKey.value]
      : getFirstExampleResponse(),
}))

const changeTab = (index: number) => {
  selectedResponseIndex.value = index
  selectedExampleKey.value = null;
}

[marclave]

@hanspagel What do you think about something like this? I haven't tested it because of some build issues, but I think the logic adds up.

/**
 * Gets the first example response if there are multiple example responses
 * or the only example if there is only one example response.
 */
const getFirstExampleResponse = () => {
  if (!hasMultipleExamples.value)
    return currentJsonResponse.value.example;
  else if (Array.isArray(currentJsonResponse.value.examples))
    return currentJsonResponse.value.examples[0]
  else {
    const firstProperty = Object.keys(currentJsonResponse.value.examples)[0];
    return currentJsonResponse.value.examples[firstProperty];
  }
}

const currentResponseWithExample = computed(() => ({
  ...currentJsonResponse.value,
  example:
    hasMultipleExamples.value && selectedExampleKey.value
      ? currentJsonResponse.value.examples[selectedExampleKey.value].value ??
        currentJsonResponse.value.examples[selectedExampleKey.value]
      : getFirstExampleResponse(),
}))

const changeTab = (index: number) => {
  selectedResponseIndex.value = index
  selectedExampleKey.value = null;
}

this looks good to me! want to open a PR @gsmcdonald ? we can also tackle it ✨

[gsmcdonald]

@marclave I'll open a PR soon. Thank you!

[gsmcdonald]

@marclave I'm struggling to get it to build. Have you seen this error before? As much as I hate to ask you to make another change, if you do have time to implement this, it might be faster. I'll post this in the Discord as well to make conversation easier.

[gsmcdonald]

Fixed by #1934