Fix: Can't switch (dropdown list) between servers #1045 (#1125)

Author: douglasmuraoka

src/components/Sidebar/AppName.react.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from 'components/Sidebar/Sidebar.scss';
+
+export default ({ name, onClick }) => (
+  <div className={styles.currentApp} onClick={onClick}>
+    {name}
+  </div>
+);

src/components/Sidebar/AppsMenu.react.js

@@ -6,6 +6,7 @@
  * the root directory of this source tree.
  */
 import AppBadge         from 'components/AppBadge/AppBadge.react';
+import AppName          from 'components/Sidebar/AppName.react';
 import html             from 'lib/htmlString';
 import { Link }         from 'react-router-dom';
 import React            from 'react';
@@ -14,21 +15,21 @@ import { unselectable } from 'stylesheets/base.scss';
 
 let AppsMenu = ({ apps, current, height, onSelect }) => (
   <div style={{ height }} className={[styles.appsMenu, unselectable].join(' ')}>
-    <div className={styles.currentApp} onClick={onSelect.bind(null, current.slug)}>
-      {current.name}
-    </div>
+    <AppName name={current.name} onClick={onSelect.bind(null, current.slug)} />
     <div className={styles.menuSection}>All Apps</div>
-    {apps.map((app) => {
-      if (app.slug === current.slug) {
-        return null;
-      }
-      return (
-        <Link to={{ pathname: html`/apps/${app.slug}/browser` }} key={app.slug} className={styles.menuRow}>
-          {app.name}
-          <AppBadge production={app.production} />
-        </Link>
-      );
-    })}
+    <div className={styles.appListContainer}>
+      {apps.map((app) => {
+        if (app.slug === current.slug) {
+          return null;
+        }
+        return (
+          <Link to={{ pathname: html`/apps/${app.slug}/browser` }} key={app.slug} className={styles.menuRow}>
+            {app.name}
+            <AppBadge production={app.production} />
+          </Link>
+        );
+      })}
+    </div>
   </div>
 );
 

src/components/Sidebar/AppsSelector.react.js

@@ -7,9 +7,11 @@
  */
 import PropTypes   from 'lib/PropTypes';
 import AppsManager    from 'lib/AppsManager';
-import AppsSelector   from 'components/Sidebar/AppsSelector.react';
+import AppsMenu       from 'components/Sidebar/AppsMenu.react';
+import AppName        from 'components/Sidebar/AppName.react';
 import FooterMenu     from 'components/Sidebar/FooterMenu.react';
-import React          from 'react';
+import React, { useState } from 'react';
+import ParseApp       from 'lib/ParseApp';
 import SidebarHeader  from 'components/Sidebar/SidebarHeader.react';
 import SidebarSection from 'components/Sidebar/SidebarSection.react';
 import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
@@ -26,7 +28,8 @@ const Sidebar = ({
   appSelector,
   primaryBackgroundColor,
   secondaryBackgroundColor
-}) => {
+}, { currentApp }) => {
+  const [ appsMenuOpen, setAppsMenuOpen ] = useState(false);
   const _subMenu = subsections => {
     if (!subsections) {
       return null;
@@ -53,35 +56,54 @@ const Sidebar = ({
 
   const apps = [].concat(AppsManager.apps()).sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
 
+  let sidebarContent;
+  if (appsMenuOpen) {
+    sidebarContent = (
+      <AppsMenu
+        apps={apps}
+        current={currentApp}
+        onSelect={() => setAppsMenuOpen(false)} />
+    );
+  } else {
+    sidebarContent = (
+      <>
+        {appSelector && (
+          <div className={styles.apps}>
+            <AppName name={currentApp.name} onClick={() => setAppsMenuOpen(true)} />
+          </div>
+        )}
+        <div className={styles.content}>
+          {sections.map(({
+            name,
+            icon,
+            style,
+            link,
+            subsections,
+          }) => {
+            const active = name === section;
+            return (
+              <SidebarSection
+                key={name}
+                name={name}
+                icon={icon}
+                style={style}
+                link={prefix + link}
+                active={active}
+                primaryBackgroundColor={primaryBackgroundColor}
+                secondaryBackgroundColor={secondaryBackgroundColor}
+                >
+                {active ? _subMenu(subsections) : null}
+              </SidebarSection>
+            );
+          })}
+        </div>
+      </>
+    )
+  }
+
   return <div className={styles.sidebar}>
     <SidebarHeader />
-    {appSelector ? <AppsSelector apps={apps} /> : null}
-
-    <div className={styles.content}>
-      {sections.map(({
-        name,
-        icon,
-        style,
-        link,
-        subsections,
-      }) => {
-        const active = name === section;
-        return (
-          <SidebarSection
-            key={name}
-            name={name}
-            icon={icon}
-            style={style}
-            link={prefix + link}
-            active={active}
-            primaryBackgroundColor={primaryBackgroundColor}
-            secondaryBackgroundColor={secondaryBackgroundColor}
-            >
-            {active ? _subMenu(subsections) : null}
-          </SidebarSection>
-        );
-      })}
-    </div>
+    {sidebarContent}
     <div className={styles.footer}>
       <a target='_blank' href='http://parseplatform.org/'>Open Source Hub</a>
       <a target='_blank' href='https://github.com/parse-community'>GitHub</a>
@@ -92,7 +114,7 @@ const Sidebar = ({
 }
 
 Sidebar.contextTypes = {
-  generatePath: PropTypes.func
+  currentApp: PropTypes.instanceOf(ParseApp)
 };
 
 export default Sidebar;

src/components/Sidebar/Sidebar.react.js

@@ -7,6 +7,11 @@
  */
 @import 'stylesheets/globals.scss';
 
+$headerHeight: 48px;
+$menuSectionHeight: 24px;
+$sidebarMenuItemHeight: 48px;
+$footerHeight: 36px;
+
 .sidebar {
   position: fixed;
   width: 300px;
@@ -54,21 +59,21 @@
 .content {
   position: absolute;
   overflow-y: auto;
-  top: 48px;
+  top: $headerHeight;
   right: 0;
   bottom: 36px;
   left: 0;
 }
 
 .apps + .content {
-  top: 96px;
+  top: $headerHeight + $sidebarMenuItemHeight;
 }
 
 .footer {
   @include NotoSansFont;
   position: absolute;
   background: #05283c;
-  height: 36px;
+  height: $footerHeight;
   line-height: 18px;
   padding: 9px 0;
   text-align: center;
@@ -102,7 +107,7 @@
 
 .header {
   background: #05283c;
-  height: 48px;
+  height: $headerHeight;
   padding: 10px 14px;
 
   :global(.icon) {
@@ -116,7 +121,7 @@
   @include ellipsis();
   display: block;
   background: #094162;
-  height: 48px;
+  height: $sidebarMenuItemHeight;
   padding: 10px 14px;
 
   color: white;
@@ -179,11 +184,16 @@
   .menuRow:hover {
     background: #0c5582;
   }
+
+  .appListContainer {
+    overflow-y: auto;
+    height: calc(100vh - #{$headerHeight} - #{$menuSectionHeight} - #{$sidebarMenuItemHeight} - #{$footerHeight});
+  }
 }
 
 .menuSection {
   @include DosisFont;
-  height: 24px;
+  height: $menuSectionHeight;
   line-height: 24px;
   background: #0c5582;
   color: #84A5BC;
@@ -233,7 +243,7 @@
 
 .section_header {
   display: block;
-  height: 48px;
+  height: $sidebarMenuItemHeight;
   font-size: 18px;
   line-height: 28px;
   padding: 12px 14px;