From 02e02338e8d9423da2a0e0e4d419ebfc4845fe81 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 21 Jan 2020 04:52:40 -0800
Subject: [PATCH] Fix Mac plugins not showing up

Summary:
Fixed a bunch of issue in the new sidebar navigation
1) Stop filtering out the host device (collapse it by default instead)
2) Show offline status in title for more clarity
3) Stop sorting devices by name, so that they are sorted in connection order, which feels more consistent
4) Group uninitialised clients together, rather than showing them under every device
5) Rename "device" section to "device plugins", and hide it if there are none
6) some minor margin fixes

Reviewed By: jknoxville

Differential Revision: D19495950

fbshipit-source-id: 513d0a1171016bd3077641f614a6554a132f8180
---
 src/chrome/mainsidebar/MainSidebar2.tsx | 81 +++++++++++++++----------
 src/chrome/mainsidebar/sidebarUtils.tsx |  2 +-
 2 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/src/chrome/mainsidebar/MainSidebar2.tsx b/src/chrome/mainsidebar/MainSidebar2.tsx
index 0ea21c72e..1fc600712 100644
--- a/src/chrome/mainsidebar/MainSidebar2.tsx
+++ b/src/chrome/mainsidebar/MainSidebar2.tsx
@@ -195,19 +195,16 @@ class MainSidebar2 extends PureComponent<Props, State> {
   }
 
   render() {
-    const devices = this.props.devices
-      .slice()
-      .sort((a, b) => a.title.localeCompare(b.title));
-    const renderableDevices = devices.filter(canBeDefaultDevice);
-
+    const {devices} = this.props;
     return (
       <Sidebar position="left" width={200} backgroundColor={colors.light02}>
         <Plugins>
-          {renderableDevices.length ? (
-            renderableDevices.map(device => this.renderDevice(device))
+          {devices.length ? (
+            devices.map(device => this.renderDevice(device))
           ) : (
             <NoDevices />
           )}
+          {this.renderUnitializedClients()}
         </Plugins>
         <MainSidebarUtilsSection />
       </Sidebar>
@@ -218,7 +215,6 @@ class MainSidebar2 extends PureComponent<Props, State> {
     const {
       selectedPlugin,
       selectPlugin,
-      uninitializedClients,
       clientPlugins,
       starPlugin,
       userStarredPlugins,
@@ -228,30 +224,41 @@ class MainSidebar2 extends PureComponent<Props, State> {
     const clients = getAvailableClients(device, this.props.clients);
 
     return (
-      <SidebarSection title={device.title} key={device.serial} level={1}>
+      <SidebarSection
+        title={`${device.title} ${
+          device.isArchived ? (device.source ? '(imported)' : '(offline)') : ''
+        }`}
+        key={device.serial}
+        level={1}
+        defaultCollapsed={!canBeDefaultDevice(device)}>
         {this.showArchivedDeviceDetails(device)}
-        <SidebarSection level={2} title="Device" defaultCollapsed={true}>
-          {device.devicePlugins.map(pluginName => {
-            const plugin = this.props.devicePlugins.get(pluginName)!;
-            return (
-              <PluginSidebarListItem
-                key={plugin.id}
-                isActive={
-                  plugin.id === selectedPlugin && selectedDevice === device
-                }
-                onClick={() =>
-                  selectPlugin({
-                    selectedPlugin: plugin.id,
-                    selectedApp: null,
-                    deepLinkPayload: null,
-                    selectedDevice: device,
-                  })
-                }
-                plugin={plugin}
-              />
-            );
-          })}
-        </SidebarSection>
+        {device.devicePlugins.length > 0 ? (
+          <SidebarSection
+            level={2}
+            title="Device Plugins"
+            defaultCollapsed={true}>
+            {device.devicePlugins.map(pluginName => {
+              const plugin = this.props.devicePlugins.get(pluginName)!;
+              return (
+                <PluginSidebarListItem
+                  key={plugin.id}
+                  isActive={
+                    plugin.id === selectedPlugin && selectedDevice === device
+                  }
+                  onClick={() =>
+                    selectPlugin({
+                      selectedPlugin: plugin.id,
+                      selectedApp: null,
+                      deepLinkPayload: null,
+                      selectedDevice: device,
+                    })
+                  }
+                  plugin={plugin}
+                />
+              );
+            })}
+          </SidebarSection>
+        ) : null}
         {clients.length === 0 ? (
           <NoClients />
         ) : (
@@ -269,6 +276,14 @@ class MainSidebar2 extends PureComponent<Props, State> {
             />
           ))
         )}
+      </SidebarSection>
+    );
+  }
+
+  renderUnitializedClients() {
+    const {uninitializedClients} = this.props;
+    return uninitializedClients.length > 0 ? (
+      <SidebarSection title="Connecting..." key="unitializedClients" level={1}>
         {uninitializedClients.map(entry => (
           <SidebarSection
             color={getColorByApp(entry.client.appName)}
@@ -286,7 +301,7 @@ class MainSidebar2 extends PureComponent<Props, State> {
             level={2}></SidebarSection>
         ))}
       </SidebarSection>
-    );
+    ) : null;
   }
 
   showArchivedDeviceDetails(device: BaseDevice) {
@@ -300,7 +315,7 @@ class MainSidebar2 extends PureComponent<Props, State> {
     );
     return (
       <>
-        <ListItem>
+        <ListItem style={{marginTop: 8}}>
           <Info type="warning" small>
             {device.source ? 'Imported device' : 'Archived device'}
           </Info>
diff --git a/src/chrome/mainsidebar/sidebarUtils.tsx b/src/chrome/mainsidebar/sidebarUtils.tsx
index a3ded1d08..cfa8d0421 100644
--- a/src/chrome/mainsidebar/sidebarUtils.tsx
+++ b/src/chrome/mainsidebar/sidebarUtils.tsx
@@ -212,7 +212,7 @@ export const NoDevices = () => (
 );
 
 export const NoClients = () => (
-  <ListItem>
+  <ListItem style={{marginTop: 8}}>
     <Glyph
       name="mobile-engagement"
       size={16}