Out of order language tabs

[Gijsdeman]

Describe the bug

When using the language tabs are configured in a different order than shown in customization, the tabs seem to no longer switch properly between languages anymore.

Expected behavior

The language to update when switching between language tabs.

Current behavior

Language gets stuck on a language and does not load the language of the currently selected tab.

Steps to reproduce

Adding the following languageTabs to the themeConfig will cause the language to render as intended.

languageTabs: [ { highlight: "bash", language: "curl", logoClass: "bash", }, { highlight: "python", language: "python", logoClass: "python", variant: "requests", }, { highlight: "go", language: "go", logoClass: "go", }, { highlight: "javascript", language: "nodejs", logoClass: "nodejs", variant: "axios", }, { highlight: "php", language: "php", logoClass: "php", } ],

However, when changing the position of PHP language (or any other language), causes the tabs to no longer function properly.

languageTabs: [ { highlight: "bash", language: "curl", logoClass: "bash", }, { highlight: "php", language: "php", logoClass: "php", }, { highlight: "python", language: "python", logoClass: "python", variant: "requests", }, { highlight: "go", language: "go", logoClass: "go", }, { highlight: "javascript", language: "nodejs", logoClass: "nodejs", variant: "axios", } ],

Screenshots

Context

PHP or shell has preference within the wanted documentation, so I prefer to have it as the first two options available. This is not a huge issue in general, but would be nice to be able to do this.

Your Environment

Version used:

• docusaurus-plugin-openapi-docs: 1.7.0
• mozilla firefox for ubuntu: 111.0.1

[welcome-to-palo-alto-networks]

🎉 Thanks for opening your first issue here! Welcome to the community!

[sserrata]

Hi @Gijsdeman, thanks for reporting.

The variant is currently a required property. We'll update the examples in the documentation.

[sserrata]

Actually, it seems that it's only "required" once the default order is changed. This smells more like a bug. We'll investigate a bit more and will keep you updated.

[cheyilin]

Same here with Docusaurus 2.4.1 and plugin 2.0.0-beta.3.

languageTabs: [
  {
    highlight: "bash",
    language: "curl",
    logoClass: "bash",
    variant: "cURL",
  },
  {
    highlight: "go",
    language: "go",
    logoClass: "go",
    variant: "native",
  },
  {
    highlight: "javascript",
    language: "nodejs",
    logoClass: "nodejs",
    variant: "axios",
  },
],

With the languageTabs config above, click tab go or nodejs will crash:

[pepopowitz]

I also just ran into this. Some potentially helpful information:

Potential source of the bug

The crash message includes the "Available values" of variants for the current languageTab. Those available variant values appear to align with the order of the default languageTabs, as defined in CodeSnippets/index. In other words, whichever languageTab you define 3rd will be looking for one of the variants defined as the 3rd default, i.e. Go's native variant.

I see that there's some config merging going on in that component. I suspect that the merging is resulting in most properties taking on the customized sequence of languageTabs, but not updating the associated variants property. (Which would make sense, if we're not defining the variants property in our reordered configuration.)

A workaround

On a whim, I tried defining the variants property on each of the reordered languageTabs elements in my configuration. It works! The page no longer crashes, and all languages/variants display properly.

So I guess if the tabs are reordered, both the variant and variants properties become required, for any tab that is in a different position than its default.

As an example, this configuration for the previous comment functions correctly for me, with Docusaurus v2.4.1 and plugin v2.0.0-beta.4:

languageTabs: [
  {
    highlight: "bash",
    language: "curl",
    logoClass: "bash",
    variant: "cURL",
  },
  {
    highlight: "go",
    language: "go",
    logoClass: "go",
    variant: "native",
    variants: ["native"],
  },
  {
    highlight: "javascript",
    language: "nodejs",
    logoClass: "nodejs",
    variant: "axios",
    variants: ["native", "axios", "request", "unirest"],
  },
],

[derekaug]

I also just ran into this. Some potentially helpful information:

Potential source of the bug

The crash message includes the "Available values" of variants for the current languageTab. Those available variant values appear to align with the order of the default languageTabs, as defined in CodeSnippets/index. In other words, whichever languageTab you define 3rd will be looking for one of the variants defined as the 3rd default, i.e. Go's native variant.

I see that there's some config merging going on in that component. I suspect that the merging is resulting in most properties taking on the customized sequence of languageTabs, but not updating the associated variants property. (Which would make sense, if we're not defining the variants property in our reordered configuration.)

A workaround

On a whim, I tried defining the variants property on each of the reordered languageTabs elements in my configuration. It works! The page no longer crashes, and all languages/variants display properly.

So I guess if the tabs are reordered, both the variant and variants properties become required, for any tab that is in a different position than its default.

As an example, this configuration for the previous comment functions correctly for me, with Docusaurus v2.4.1 and plugin v2.0.0-beta.4:

languageTabs: [
  {
    highlight: "bash",
    language: "curl",
    logoClass: "bash",
    variant: "cURL",
  },
  {
    highlight: "go",
    language: "go",
    logoClass: "go",
    variant: "native",
    variants: ["native"],
  },
  {
    highlight: "javascript",
    language: "nodejs",
    logoClass: "nodejs",
    variant: "axios",
    variants: ["native", "axios", "request", "unirest"],
  },
],

also noticed that if I want to remove a variant / reorder a variant - it doesn't appear to work. for instance, I just wanted to show native and axios under nodejs but it always uses the default variants. I suspect this is due to how lodash.merge merges the variants array here: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/blob/v3.0.0/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx#L179

[sserrata]

adding to roadmap with the goal of expanding support for more languages and allow flexible ordering/inclusion

[sserrata]

Addressed in #862