Fix Swagger-related bug, tweak sidebar styles for better readability

Also, make `/admin` a proper redirect to `/admin/apis` instead of
letting it just be an alias.

dev-portal/package.json

@@ -18,7 +18,7 @@
     "react-router-dom": "^4.3.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.87.3",
-    "swagger-ui": "git@github.com:amazon-meaisiah/swagger-ui.git#a70073c0df9bb3919ce77b64c94fe49f0171775e",
+    "swagger-ui": "git@github.com:amazon-meaisiah/swagger-ui.git#66cbe58352bc2455ea80ff99573fe06dee273f56",
     "yamljs": "^0.3.0"
   },
   "scripts": {

dev-portal/src/components/ApisMenu.jsx

@@ -59,7 +59,7 @@ export default observer(function ApisMenu (props) {
 
 function GenericApiSubsection ({ title, listOfApis, selectedApiId }) {
   return (
-    <>
+    <Menu inverted vertical borderless attached style={{ flex: '0 0 auto', width: 'auto' }}>
       <Menu.Header
         style={{
           padding: '13px 5px 13px 16px',
@@ -78,13 +78,13 @@ function GenericApiSubsection ({ title, listOfApis, selectedApiId }) {
           {api.swagger.info.title}
         </Menu.Item>
       ))}
-    </>
+    </Menu>
   )
 }
 
 function ApiSubsection ({ title, listOfApis, selectedApiId, selectedStage = false }) {
   return (
-    <>
+    <Menu inverted vertical borderless attached style={{ flex: '0 0 auto', width: 'auto' }}>
       <Menu.Header
         style={{
           padding: '13px 5px 13px 16px',
@@ -103,6 +103,6 @@ function ApiSubsection ({ title, listOfApis, selectedApiId, selectedStage = fals
           {api.swagger.info.title}
         </Menu.Item>
       ))}
-    </>
+    </Menu>
   )
 }

dev-portal/src/components/NavBar.jsx

@@ -35,7 +35,7 @@ export const NavBar = observer(
       return isAuthenticated() ? (
         <Menu.Menu position='right'>
           {isAdmin() && (
-            <Menu.Item as={Link} to='/admin'>
+            <Menu.Item as={Link} to='/admin/apis'>
               Admin Panel
             </Menu.Item>
           )}

dev-portal/src/index.css

@@ -35,4 +35,13 @@ h1, h2, h3, h4, h5 {
     0px 0px 0px 1px #E0B4B4 inset, 
     0px 2px 4px 0px rgba(34, 36, 38, 0.12), 
     0px 2px 10px 0px rgba(34, 36, 38, 0.15)
+}
+
+.ui.vertical.menu .menu .item {
+  font-size: 0.9em;
+}
+
+.ui.vertical.menu .menu .menu .item {
+  margin-left: 1em;
+  font-size: 1em;
 }

dev-portal/src/pages/Admin/Admin.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { BrowserRouter as Router, Redirect } from 'react-router-dom'
 
 import { ApiManagement, SideNav } from './'
 import { AdminRoute } from './../../'
@@ -10,13 +10,17 @@ import AdminAccounts from 'pages/Admin/Accounts/AdminAccounts'
 import PendingInvites from 'pages/Admin/Accounts/PendingInvites'
 import PendingRequests from 'pages/Admin/Accounts/PendingRequests'
 
+function RedirectToApiManagement() {
+  return <Redirect to='/admin/apis' />
+}
+
 export class Admin extends Component {
   render () {
     return (
       <Router>
         <PageWithSidebar sidebarContent={<SideNav />}>
           <>
-            <AdminRoute exact path='/admin' component={ApiManagement} />
+            <AdminRoute exact from='/admin' component={RedirectToApiManagement} />
             <AdminRoute path='/admin/apis' component={ApiManagement} />
             <AdminRoute exact path='/admin/accounts' component={RegisteredAccounts} />
             <AdminRoute exact path='/admin/accounts/admins' component={AdminAccounts} />

dev-portal/src/pages/Admin/SideNav.jsx

@@ -10,9 +10,18 @@ import { Menu } from 'semantic-ui-react'
 export const SideNav = observer(() => (
   isAdmin() &&
   (<Menu inverted vertical borderless attached style={{ flex: '0 0 auto' }}>
-    <Menu.Item as={Link} to='/admin/apis'>APIs</Menu.Item>
-    <Menu.Item as={Link} to='/admin/accounts'>
-      Accounts
+    <Menu.Header
+      style={{
+        padding: '13px 5px 13px 16px',
+        color: 'lightsteelblue'
+      }
+    }>
+      Admin
+    </Menu.Header>
+    {/* The class name here is to avoid a selector precedence issue */}
+    <Menu.Item className='link' as={Link} to='/admin/apis'>APIs</Menu.Item>
+    <Menu.Item className='link'>
+      <Link to='/admin/accounts' style={{ color: 'inherit' }}>Accounts</Link>
       <Menu.Menu>
         <Menu.Item as={Link} to='/admin/accounts/admins'>
           Admins

dev-portal/src/pages/Apis.jsx

@@ -24,21 +24,25 @@ import { store } from 'services/state.js'
 import { observer } from 'mobx-react'
 
 export default observer(class ApisPage extends React.Component {
+  containerRef = React.createRef()
+  removed = false
+
   componentDidMount () { this.updateApi().then(() => updateUsagePlansAndApisList(true)) }
   componentDidUpdate () { this.updateApi() }
+  componentWillUnmount () { this.removed = true }
 
   updateApi () {
     return getApi(this.props.match.params.apiId || 'ANY', true, this.props.match.params.stage)
       .then(api => {
-        if (api) {
+        if (api && !this.removed) {
           const cell = {
             shouldPreauthorizeApiKey: false,
             preauthorizeApiKey: () => {
               cell.shouldPreauthorizeApiKey = true
             }
           }
           const swaggerUiConfig = {
-            dom_id: '#swagger-ui-container',
+            domNode: this.containerRef.current,
             plugins: [SwaggerLayoutPlugin],
             supportedSubmitMethods: [],
             spec: api.swagger,
@@ -80,7 +84,7 @@ export default observer(class ApisPage extends React.Component {
         sidebarContent={<ApisMenu path={this.props.match} />}
         SidebarPusherProps={{ className: 'swagger-section' }}
       >
-        <div className='swagger-ui-wrap' id='swagger-ui-container' style={{ padding: '0 20px' }}>
+        <div className='swagger-ui-wrap' ref={this.containerRef} style={{ padding: '0 20px' }}>
           {errorHeader && errorBody && (
             <>
               <Header as='h2' icon textAlign='center' style={{ padding: '40px 0px' }}>