Add About Menu to TopBar for swagger-editor@next

package.json

@@ -41,7 +41,7 @@
     "analyze": "source-map-explorer 'build/static/js/main.js'",
     "test": "react-scripts test",
     "cy:dev": "start-server-and-test cy:dev:server http://localhost:3003 cy:dev:open",
-    "cy:dev:open": "CYPRESS_BASE_URL=http://localhost:3003 cypress open --e2e",
+    "cy:dev:open": "cross-env CYPRESS_BASE_URL=http://localhost:3003 cypress open --e2e",
     "cy:dev:server": "cross-env PORT=3003 BROWSER=none ENABLE_PROGRESS_PLUGIN=false react-scripts start",
     "cy:ci": "start-server-and-test build:app:serve http://localhost:3050 cy:run:chrome",
     "cy:run:chrome": "cypress run --browser chrome",

src/plugins/top-bar/components/AboutMenu/AboutMenu.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+
+const AboutMenu = ({ getComponent }) => {
+  const DropdownMenu = getComponent('DropdownMenu');
+  const Link = getComponent('Link');
+
+  return (
+    <DropdownMenu label="About">
+      <div>
+        <li className="dropdown-item">
+          <Link href="https://swagger.io/tools/swagger-editor/" target="_blank">
+            About Swagger Editor
+          </Link>
+        </li>
+      </div>
+      <div>
+        <li className="dropdown-item">
+          <Link
+            href="https://swagger.io/docs/open-source-tools/swagger-editor-next/"
+            target="_blank"
+          >
+            View Docs
+          </Link>
+        </li>
+      </div>
+      <div>
+        <li className="dropdown-item">
+          <Link href="https://github.com/swagger-api/swagger-editor/tree/next" target="_blank">
+            View on GitHub
+          </Link>
+        </li>
+      </div>
+    </DropdownMenu>
+  );
+};
+
+AboutMenu.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+};
+
+export default AboutMenu;

src/plugins/top-bar/components/Logo/Logo.jsx

@@ -24,7 +24,7 @@ Logo.propTypes = {
 };
 
 Logo.defaultProps = {
-  link: '/',
+  link: 'https://swagger.io/tools/swagger-editor/',
 };
 
 export default Logo;

src/plugins/top-bar/components/TopBar/TopBar.jsx

@@ -10,6 +10,7 @@ const TopBar = ({ getComponent }) => {
   const OpenAPI3GenerateClientMenu = getComponent('TopBarOpenAPI3GenerateClientMenu', true);
   const OpenAPI2GenerateServerMenu = getComponent('TopBarOpenAPI2GenerateServerMenu', true);
   const OpenAPI2GenerateClientMenu = getComponent('TopBarOpenAPI2GenerateClientMenu', true);
+  const AboutMenu = getComponent('TopBarAboutMenu', true);
 
   return (
     <div className="swagger-editor__top-bar">
@@ -21,6 +22,7 @@ const TopBar = ({ getComponent }) => {
         <OpenAPI3GenerateClientMenu />
         <OpenAPI2GenerateServerMenu />
         <OpenAPI2GenerateClientMenu />
+        <AboutMenu />
       </div>
     </div>
   );

src/plugins/top-bar/index.js

@@ -25,6 +25,7 @@ import OpenAPI3GenerateServerMenu from './components/GenerateServerMenu/OpenAPI3
 import OpenAPI3GenerateClientMenu from './components/GenerateServerMenu/OpenAPI3GenerateClientMenu.jsx';
 import OpenAPI2GenerateServerMenu from './components/GenerateServerMenu/OpenAPI2GenerateServerMenu.jsx';
 import OpenAPI2GenerateClientMenu from './components/GenerateServerMenu/OpenAPI2GenerateClientMenu.jsx';
+import AboutMenu from './components/AboutMenu/AboutMenu.jsx';
 import {
   importUrlStarted,
   importUrlSuccess,
@@ -164,6 +165,8 @@ const TopBarPlugin = () => ({
 
     TopBarOpenAPI2GenerateServerMenu: OpenAPI2GenerateServerMenu,
     TopBarOpenAPI2GenerateClientMenu: OpenAPI2GenerateClientMenu,
+
+    TopBarAboutMenu: AboutMenu,
   },
   statePlugins: {
     editor: {

test/cypress/integration/plugin.top-bar.spec.js

@@ -332,4 +332,13 @@ describe('Topbar', () => {
         .should('exist');
     });
   });
+
+  describe('About Drop Menu', () => {
+    it('should have expect menu items', () => {
+      cy.contains('About').click(); // About Menu
+      cy.contains('About Swagger Editor').should('exist');
+      cy.contains('View Docs').should('exist');
+      cy.contains('View on GitHub').should('exist');
+    });
+  });
 });