Support flexible code snippet ordering and options

demo/docusaurus.config.ts

@@ -144,16 +144,20 @@ const config: Config = {
       ],
     },
     languageTabs: [
+      {
+        highlight: "python",
+        language: "python",
+        logoClass: "python",
+      },
       {
         highlight: "bash",
         language: "curl",
         logoClass: "bash",
       },
       {
-        highlight: "python",
-        language: "python",
-        logoClass: "python",
-        variant: "requests",
+        highlight: "csharp",
+        language: "csharp",
+        logoClass: "csharp",
       },
       {
         highlight: "go",
@@ -164,19 +168,12 @@ const config: Config = {
         highlight: "javascript",
         language: "nodejs",
         logoClass: "nodejs",
-        variant: "axios",
       },
       {
         highlight: "ruby",
         language: "ruby",
         logoClass: "ruby",
       },
-      {
-        highlight: "csharp",
-        language: "csharp",
-        logoClass: "csharp",
-        variant: "httpclient",
-      },
       {
         highlight: "php",
         language: "php",

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -5,20 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
 import React, { useState, useEffect } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import merge from "lodash/merge";
 import codegen from "postman-code-generators";
 import sdk from "postman-collection";
 
 import { CodeSample, Language } from "./code-snippets-types";
 import {
   getCodeSampleSourceFromLanguage,
+  mergeArraysbyLanguage,
   mergeCodeSampleLanguage,
 } from "./languages";
 
@@ -149,8 +156,6 @@ function CodeTab({ children, hidden, className }: any): JSX.Element {
 }
 
 function CodeSnippets({ postman, codeSamples }: Props) {
-  // TODO: match theme for vscode.
-
   const { siteConfig } = useDocusaurusContext();
 
   const contentType = useTypedSelector((state: any) => state.contentType.value);
@@ -167,24 +172,25 @@ function CodeSnippets({ postman, codeSamples }: Props) {
 
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
-  const langs = [
-    ...((siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
-      languageSet),
-  ];
+  const userDefinedLanguageSet = siteConfig?.themeConfig?.languageTabs as
+    | Language[]
+    | undefined;
 
   // Filter languageSet by user-defined langs
   const filteredLanguageSet = languageSet.filter((ls) => {
-    return langs.some((lang) => {
+    return userDefinedLanguageSet?.some((lang) => {
       return lang.language === ls.language;
     });
   });
 
   // Merge user-defined langs into languageSet
   const mergedLangs = mergeCodeSampleLanguage(
-    merge(filteredLanguageSet, langs),
+    mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
     codeSamples
   );
 
+  console.log("merged", mergedLangs);
+
   // Read defaultLang from localStorage
   const defaultLang: Language[] = mergedLangs.filter(
     (lang) =>

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -5,6 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+import find from "lodash/find";
+import isArray from "lodash/isArray";
+import mergeWith from "lodash/mergeWith";
+import unionBy from "lodash/unionBy";
+
 import { CodeSample, Language } from "./code-snippets-types";
 
 export function mergeCodeSampleLanguage(
@@ -36,6 +41,23 @@ export function mergeCodeSampleLanguage(
   });
 }
 
+export const mergeArraysbyLanguage = (arr1: any, arr2: any) => {
+  const mergedArray = unionBy(arr1, arr2, "language");
+
+  return mergedArray.map((item: any) => {
+    const matchingItems = [
+      find(arr1, ["language", item["language"]]),
+      find(arr2, ["language", item["language"]]),
+    ];
+    return mergeWith({}, ...matchingItems, (objValue: any) => {
+      if (isArray(objValue)) {
+        return objValue;
+      }
+      return undefined;
+    });
+  });
+};
+
 export function getCodeSampleSourceFromLanguage(language: Language) {
   if (
     language &&

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/persistanceMiddleware.ts

@@ -19,7 +19,6 @@ import { createStorage, hashArray } from "./storage-utils";
 export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
   const persistanceMiddleware: Middleware<{}, RootState, AppDispatch> =
     (storeAPI) => (next) => (action) => {
-      console.log(action);
       const result = next(action);
 
       const state = storeAPI.getState();