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

desktop/flipper-ui-core/src/sandy-chrome/appinspect/PluginList.tsx

@@ -30,11 +30,7 @@ import {
   PluginDownloadStatus,
   startPluginDownload,
 } from '../../reducers/pluginDownloads';
-import {
+import {switchPlugin, uninstallPlugin} from '../../reducers/pluginManager';
-  loadPlugin,
-  switchPlugin,
-  uninstallPlugin,
-} from '../../reducers/pluginManager';
 import {reportUsage} from 'flipper-common';
 import ConnectivityStatus from './fb-stubs/ConnectivityStatus';
 import {useSelector} from 'react-redux';
@@ -142,25 +138,11 @@ export const PluginList = memo(function PluginList({
     },
     [disabledPlugins, dispatch],
   );
-  return (
+  const allEnabledPlugins = React.useMemo(() => {
-    <Layout.Container>
+    const plugins: React.ReactElement[] = [];
-      <SidebarTitle actions={<ConnectivityStatus />}>Plugins</SidebarTitle>
+
-      <Layout.Container padv={theme.space.small} padh={theme.space.tiny}>
+    devicePlugins.forEach((plugin) =>
-        <PluginMenu
+      plugins.push(
-          inlineIndent={8}
-          onClick={() => {}}
-          defaultOpenKeys={['device', 'enabled', 'metro']}
-          selectedKeys={
-            connections.selectedPlugin
-              ? [
-                  (connections.selectedDevice === metroDevice ? 'metro:' : '') +
-                    connections.selectedPlugin,
-                ]
-              : []
-          }
-          mode="inline">
-          <PluginGroup key="device" title="Device">
-            {devicePlugins.map((plugin) => (
         <PluginEntry
           key={plugin.id}
           plugin={plugin.details}
@@ -176,14 +158,67 @@ export const PluginList = memo(function PluginList({
                 id={plugin.id}
                 onClick={handleEnablePlugin}
                 title="Disable plugin"
-                      icon={
+                icon={<MinusOutlined size={16} style={{marginRight: 0}} />}
-                        <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>
+      <Layout.Container padv={theme.space.small} padh={theme.space.tiny}>
+        <PluginMenu
+          inlineIndent={8}
+          onClick={() => {}}
+          defaultOpenKeys={['enabled', 'metro']}
+          selectedKeys={
+            connections.selectedPlugin
+              ? [
+                  (connections.selectedDevice === metroDevice ? 'metro:' : '') +
+                    connections.selectedPlugin,
+                ]
+              : []
+          }
+          mode="inline">
+          <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"