feat(topbar): allow to configure components present in Topbar (#3623)

Refs #3556

dev-helpers/index.html

@@ -54,6 +54,9 @@
       presets: [
         SwaggerEditorStandalonePreset
       ],
+      plugins: [
+        SwaggerEditorStandalonePreset.plugins.TopbarNewEditorButton,
+      ],
       queryConfigEnabled: true,
     })
 

src/standalone/index.js

@@ -2,6 +2,7 @@ import TopbarPlugin from "./topbar"
 import TopbarInsertPlugin from "./topbar-insert"
 import TopbarMenuFileImportFile from "./topbar-menu-file-import_file"
 import TopbarMenuEditConvert from "./topbar-menu-edit-convert"
+import TopbarNewEditorButton from "./topbar-new-editor-button"
 import StandaloneLayout from "./standalone-layout"
 
 let StandaloneLayoutPlugin = function() {
@@ -12,7 +13,7 @@ let StandaloneLayoutPlugin = function() {
   }
 }
 
-export default function () {
+function standalonePreset () {
   return [
     TopbarPlugin,
     TopbarInsertPlugin,
@@ -21,3 +22,14 @@ export default function () {
     StandaloneLayoutPlugin
   ]
 }
+
+standalonePreset.plugins = {
+  TopbarPlugin,
+  TopbarInsertPlugin,
+  TopbarMenuFileImportFile,
+  TopbarMenuEditConvert,
+  TopbarNewEditorButton,
+  StandaloneLayoutPlugin,
+}
+
+export default standalonePreset

src/standalone/topbar-new-editor-button/components/NewEditorButton.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const NewEditorButton = ({ getComponent }) => {
+  const Link = getComponent("Link")
+
+  return (
+    <Link href="https://editor-next.swagger.io/" className="new-editor-cta" target="_blank">
+      <span>Try our new Editor</span>
+    </Link>
+  )
+}
+
+NewEditorButton.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+}
+
+
+export default NewEditorButton

src/standalone/topbar-new-editor-button/index.js

@@ -0,0 +1,9 @@
+import NewEditorButton from "./components/NewEditorButton"
+
+const TopbarNewEditorButtonPlugin = () => ({
+  components: {
+    TopbarNewEditorButton: NewEditorButton,
+  }
+})
+
+export default TopbarNewEditorButtonPlugin

src/standalone/topbar/components/AboutMenu.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+import DropdownMenu from "./DropdownMenu"
+
+const AboutMenu = ({ getComponent, ...rest }) => {
+  const Link = getComponent("Link")
+
+  return (
+    <DropdownMenu {...rest}>
+      <li><Link href="https://swagger.io/tools/swagger-editor/" target="_blank">About Swagger Editor</Link></li>
+      <li><Link href="https://swagger.io/docs/open-source-tools/swagger-editor/" target="_blank">View Docs</Link></li>
+      <li><Link href="https://github.com/swagger-api/swagger-editor" target="_blank">View on GitHub</Link></li>
+    </DropdownMenu>
+  )
+}
+
+AboutMenu.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+}
+
+
+export default AboutMenu

src/standalone/topbar/topbar.jsx → src/standalone/topbar/components/Topbar.jsx

@@ -6,10 +6,10 @@ import DropdownMenu from "./DropdownMenu"
 import fileDownload from "js-file-download"
 import YAML from "js-yaml"
 import beautifyJson from "json-beautify"
-import { petStoreOas2Def, petStoreOas3Def } from "../../plugins/default-definitions"
+import { petStoreOas2Def, petStoreOas3Def } from "../../../plugins/default-definitions"
 
 
-import Logo from "./logo_small.svg"
+import Logo from "../assets/logo_small.svg"
 
 export default class Topbar extends React.Component {
   constructor(props, context) {
@@ -325,9 +325,10 @@ export default class Topbar extends React.Component {
     const TopbarInsert = getComponent("TopbarInsert")
     const ImportFileMenuItem = getComponent("ImportFileMenuItem")
     const ConvertDefinitionMenuItem = getComponent("ConvertDefinitionMenuItem")
+    const AboutMenu = getComponent("TopbarAboutMenu", true)
+    const NewEditorButton = getComponent("TopbarNewEditorButton", true)
     const { swagger2ConverterUrl } = this.props.getConfigs()
 
-
     let showServersMenu = this.state.servers && this.state.servers.length
     let showClientsMenu = this.state.clients && this.state.clients.length
 
@@ -387,14 +388,8 @@ export default class Topbar extends React.Component {
               { this.state.clients
                   .map((cli, i) => <li key={i}><button type="button" onClick={() => this.downloadGeneratedFile("client", cli)}>{cli}</button></li>) }
             </DropdownMenu> : null }
-            <DropdownMenu {...makeMenuOptions("About")}>
-              <li><Link href="https://swagger.io/tools/swagger-editor/" target="_blank">About Swagger Editor</Link></li>
-              <li><Link href="https://swagger.io/docs/open-source-tools/swagger-editor/" target="_blank">View Docs</Link></li>
-              <li><Link href="https://github.com/swagger-api/swagger-editor" target="_blank">View on GitHub</Link></li>
-            </DropdownMenu>
-            <Link href="https://editor-next.swagger.io/" className="new-editor-cta" target="_blank">
-              <span>Try our new Editor</span>
-            </Link>
+            {AboutMenu && <AboutMenu {...makeMenuOptions("About")} />}
+            {NewEditorButton && <NewEditorButton />}
           </div>
         </div>
       </div>

src/standalone/topbar/index.js

@@ -1,4 +1,5 @@
-import Topbar from "./topbar.jsx"
+import Topbar from "./components/Topbar"
+import AboutMenu from "./components/AboutMenu"
 
 export default function () {
   return {
@@ -28,7 +29,8 @@ export default function () {
       }
     },
     components: {
-      Topbar
+      Topbar,
+      TopbarAboutMenu: AboutMenu,
     }
   }
 }

test/e2e/static/index.html

@@ -66,7 +66,10 @@
         dom_id: '#swagger-editor',
         layout: 'StandaloneLayout',
         presets: [
-          SwaggerEditorStandalonePreset
+          SwaggerEditorStandalonePreset,
+        ],
+        plugins: [
+          SwaggerEditorStandalonePreset.plugins.TopbarNewEditorButton,
         ],
         queryConfigEnabled: true,
       })