diff --git a/dev-helpers/index.html b/dev-helpers/index.html index 684f9204135..13d990cf7fa 100644 --- a/dev-helpers/index.html +++ b/dev-helpers/index.html @@ -54,6 +54,9 @@ presets: [ SwaggerEditorStandalonePreset ], + plugins: [ + SwaggerEditorStandalonePreset.plugins.TopbarNewEditorButton, + ], queryConfigEnabled: true, }) diff --git a/src/standalone/index.js b/src/standalone/index.js index f0a866770e6..bb279855431 100644 --- a/src/standalone/index.js +++ b/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 diff --git a/src/standalone/topbar-new-editor-button/components/NewEditorButton.jsx b/src/standalone/topbar-new-editor-button/components/NewEditorButton.jsx new file mode 100644 index 00000000000..88b439e6dcb --- /dev/null +++ b/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 ( + + Try our new Editor + + ) +} + +NewEditorButton.propTypes = { + getComponent: PropTypes.func.isRequired, +} + + +export default NewEditorButton diff --git a/src/standalone/topbar-new-editor-button/index.js b/src/standalone/topbar-new-editor-button/index.js new file mode 100644 index 00000000000..97a9756bbc4 --- /dev/null +++ b/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 diff --git a/src/standalone/topbar/logo_small.svg b/src/standalone/topbar/assets/logo_small.svg similarity index 100% rename from src/standalone/topbar/logo_small.svg rename to src/standalone/topbar/assets/logo_small.svg diff --git a/src/standalone/topbar/components/AboutMenu.jsx b/src/standalone/topbar/components/AboutMenu.jsx new file mode 100644 index 00000000000..1b756276711 --- /dev/null +++ b/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 ( + +
  • About Swagger Editor
  • +
  • View Docs
  • +
  • View on GitHub
  • +
    + ) +} + +AboutMenu.propTypes = { + getComponent: PropTypes.func.isRequired, +} + + +export default AboutMenu diff --git a/src/standalone/topbar/DropdownMenu.js b/src/standalone/topbar/components/DropdownMenu.jsx similarity index 100% rename from src/standalone/topbar/DropdownMenu.js rename to src/standalone/topbar/components/DropdownMenu.jsx diff --git a/src/standalone/topbar/topbar.jsx b/src/standalone/topbar/components/Topbar.jsx similarity index 94% rename from src/standalone/topbar/topbar.jsx rename to src/standalone/topbar/components/Topbar.jsx index 9dae1e5077f..89479dcf11a 100644 --- a/src/standalone/topbar/topbar.jsx +++ b/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) =>
  • ) } : null } - -
  • About Swagger Editor
  • -
  • View Docs
  • -
  • View on GitHub
  • -
    - - Try our new Editor - + {AboutMenu && } + {NewEditorButton && } diff --git a/src/standalone/topbar/index.js b/src/standalone/topbar/index.js index 054ff02972d..7f5ab6d466c 100644 --- a/src/standalone/topbar/index.js +++ b/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, } } } diff --git a/test/e2e/static/index.html b/test/e2e/static/index.html index 2388bf85916..184d0579440 100644 --- a/test/e2e/static/index.html +++ b/test/e2e/static/index.html @@ -66,7 +66,10 @@ dom_id: '#swagger-editor', layout: 'StandaloneLayout', presets: [ - SwaggerEditorStandalonePreset + SwaggerEditorStandalonePreset, + ], + plugins: [ + SwaggerEditorStandalonePreset.plugins.TopbarNewEditorButton, ], queryConfigEnabled: true, })