From 62f4582f0e65432129f6727402190afb62c82eff Mon Sep 17 00:00:00 2001
From: Anton Kastritskiy <antonk52@meta.com>
Date: Fri, 23 Jun 2023 07:19:03 -0700
Subject: [PATCH] Merge device plugins and enabled plugins in the sidebar

Summary:
Currently we surface the difference in plugin type to the user. However, it doesn't make much sence to the user as they primarily care about the plugins being enabled or not. Thus merging device plugins (always enabled) and enabled plugins sections.

I wasn't sure if I should also merge the metro plugins section due to some metro specific hints. So I left it as is.

Reviewed By: lblasa

Differential Revision: D46971125

fbshipit-source-id: 0bb667c3b2f5576e5704dae29b03cfd631c38ad2
---
 .../sandy-chrome/appinspect/PluginList.tsx    | 120 ++++++++++--------
 1 file changed, 66 insertions(+), 54 deletions(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/PluginList.tsx b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/PluginList.tsx
index 391d8816f..7f2b2bd20 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/PluginList.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/PluginList.tsx
@@ -30,11 +30,7 @@ import {
   PluginDownloadStatus,
   startPluginDownload,
 } from '../../reducers/pluginDownloads';
-import {
-  loadPlugin,
-  switchPlugin,
-  uninstallPlugin,
-} from '../../reducers/pluginManager';
+import {switchPlugin, uninstallPlugin} from '../../reducers/pluginManager';
 import {reportUsage} from 'flipper-common';
 import ConnectivityStatus from './fb-stubs/ConnectivityStatus';
 import {useSelector} from 'react-redux';
@@ -142,6 +138,68 @@ export const PluginList = memo(function PluginList({
     },
     [disabledPlugins, dispatch],
   );
+  const allEnabledPlugins = React.useMemo(() => {
+    const plugins: React.ReactElement[] = [];
+
+    devicePlugins.forEach((plugin) =>
+      plugins.push(
+        <PluginEntry
+          key={plugin.id}
+          plugin={plugin.details}
+          scrollTo={
+            plugin.id === connections.selectedPlugin &&
+            connections.selectedDevice === activeDevice
+          }
+          onClick={handleAppPluginClick}
+          tooltip={getPluginTooltip(plugin.details)}
+          actions={
+            isArchived ? null : (
+              <ActionButton
+                id={plugin.id}
+                onClick={handleEnablePlugin}
+                title="Disable plugin"
+                icon={<MinusOutlined size={16} style={{marginRight: 0}} />}
+              />
+            )
+          }
+        />,
+      ),
+    );
+
+    enabledPlugins.forEach((plugin) =>
+      plugins.push(
+        <PluginEntry
+          key={plugin.id}
+          plugin={plugin.details}
+          scrollTo={plugin.id === connections.selectedPlugin}
+          onClick={handleAppPluginClick}
+          tooltip={getPluginTooltip(plugin.details)}
+          actions={
+            isConnected ? (
+              <ActionButton
+                id={plugin.id}
+                onClick={handleEnablePlugin}
+                title="Disable plugin"
+                icon={<MinusOutlined size={16} style={{marginRight: 0}} />}
+              />
+            ) : null
+          }
+        />,
+      ),
+    );
+
+    return plugins;
+  }, [
+    devicePlugins,
+    enabledPlugins,
+    connections.selectedPlugin,
+    connections.selectedDevice,
+    activeDevice,
+    handleAppPluginClick,
+    isArchived,
+    handleEnablePlugin,
+    isConnected,
+  ]);
   return (
     <Layout.Container>
       <SidebarTitle actions={<ConnectivityStatus />}>Plugins</SidebarTitle>
@@ -149,7 +207,7 @@ export const PluginList = memo(function PluginList({
         <PluginMenu
           inlineIndent={8}
           onClick={() => {}}
-          defaultOpenKeys={['device', 'enabled', 'metro']}
+          defaultOpenKeys={['enabled', 'metro']}
           selectedKeys={
             connections.selectedPlugin
               ? [
@@ -159,31 +217,8 @@ export const PluginList = memo(function PluginList({
               : []
           }
           mode="inline">
-          <PluginGroup key="device" title="Device">
-            {devicePlugins.map((plugin) => (
-              <PluginEntry
-                key={plugin.id}
-                plugin={plugin.details}
-                scrollTo={
-                  plugin.id === connections.selectedPlugin &&
-                  connections.selectedDevice === activeDevice
-                }
-                onClick={handleAppPluginClick}
-                tooltip={getPluginTooltip(plugin.details)}
-                actions={
-                  isArchived ? null : (
-                    <ActionButton
-                      id={plugin.id}
-                      onClick={handleEnablePlugin}
-                      title="Disable plugin"
-                      icon={
-                        <MinusOutlined size={16} style={{marginRight: 0}} />
-                      }
-                    />
-                  )
-                }
-              />
-            ))}
+          <PluginGroup key="enabled" title="Enabled">
+            {allEnabledPlugins}
           </PluginGroup>
 
           {!isArchived && metroConnected && (
@@ -205,29 +240,6 @@ export const PluginList = memo(function PluginList({
               ))}
             </PluginGroup>
           )}
-          <PluginGroup key="enabled" title="Enabled">
-            {enabledPlugins.map((plugin) => (
-              <PluginEntry
-                key={plugin.id}
-                plugin={plugin.details}
-                scrollTo={plugin.id === connections.selectedPlugin}
-                onClick={handleAppPluginClick}
-                tooltip={getPluginTooltip(plugin.details)}
-                actions={
-                  isConnected ? (
-                    <ActionButton
-                      id={plugin.id}
-                      onClick={handleEnablePlugin}
-                      title="Disable plugin"
-                      icon={
-                        <MinusOutlined size={16} style={{marginRight: 0}} />
-                      }
-                    />
-                  ) : null
-                }
-              />
-            ))}
-          </PluginGroup>
           {isConnected && (
             <PluginGroup
               key="disabled"