Mark deprecated plugins in the UI

Summary:
Changelog: Add a deprecation warning for deprecated plugins.

Closes https://github.com/facebook/flipper/issues/2074

Reviewed By: lblasa, antonk52

Differential Revision: D36760209

fbshipit-source-id: 64cf799644f28aeedf88824c949738a6a766b094

desktop/flipper-common/src/PluginDetails.tsx

@@ -37,6 +37,8 @@ export interface PluginDetails {
     overview?: boolean;
     setup?: boolean;
   };
+  /** Provided by NPM. Allows developers to deprecated packages. Its value is the deprecation reason. */
+  deprecated?: string;
 }
 
 export interface SupportedDevice {
@@ -153,6 +155,7 @@ function getPluginDetailsV1(packageJson: any): PluginDetails {
     supportedDevices: packageJson?.supportedDevices,
     supportedApps: packageJson?.supportedApps,
     engines: packageJson.engines,
+    deprecated: packageJson.deprecated,
   };
 }
 
@@ -181,6 +184,7 @@ function getPluginDetailsV2(packageJson: any): PluginDetails {
     engines: packageJson.engines,
     publishedDocs: packageJson.publishedDocs,
     headless: packageJson.headless,
+    deprecated: packageJson.deprecated,
   };
 }
 

desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx

@@ -26,6 +26,7 @@ import PluginPackageInstaller from './PluginPackageInstaller';
 import {Toolbar} from 'flipper-plugin';
 import {Alert, Button, Input, Tooltip, Typography} from 'antd';
 import {getRenderHostInstance} from '../../RenderHost';
+import {WarningOutlined} from '@ant-design/icons';
 
 const {Text, Link} = Typography;
 
@@ -256,7 +257,26 @@ function useNPMSearch(
       key: h.name,
       columns: {
         name: {
-          value: <Text ellipsis>{h.name.replace(/^flipper-plugin-/, '')}</Text>,
+          value: (
+            // Copy-paste from antd/Space. We cannot use Space directly as it wraps children with divs, and we cannot easily set styles fro the wrapper child divs.
+            // Yet, we want to set min-width: 0 for the child with the Text. Otherwise, ellipsis does not work.
+            <div
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                overflow: 'hidden',
+                gap: theme.space.small,
+              }}>
+              {h.deprecated != null ? (
+                <Tooltip title={h.deprecated || 'Plugin is deprecated'}>
+                  <WarningOutlined style={{color: theme.errorColor}} />
+                </Tooltip>
+              ) : null}
+              <Text style={{minWidth: 0}} ellipsis>
+                {h.name.replace(/^flipper-plugin-/, '')}
+              </Text>
+            </div>
+          ),
         },
         version: {
           value: <Text ellipsis>{h.version}</Text>,

desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap

@@ -143,11 +143,16 @@ exports[`load PluginInstaller list 1`] = `
               title=""
               width="0"
             >
-              <span
-                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+              <div
+                style="display: inline-flex; align-items: center; overflow: hidden; gap: 8px;"
               >
-                hello
-              </span>
+                <span
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+                  style="min-width: 0;"
+                >
+                  hello
+                </span>
+              </div>
             </div>
             <div
               class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"
@@ -210,11 +215,16 @@ exports[`load PluginInstaller list 1`] = `
               title=""
               width="0"
             >
-              <span
-                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+              <div
+                style="display: inline-flex; align-items: center; overflow: hidden; gap: 8px;"
               >
-                world
-              </span>
+                <span
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+                  style="min-width: 0;"
+                >
+                  world
+                </span>
+              </div>
             </div>
             <div
               class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"
@@ -519,11 +529,16 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               title=""
               width="0"
             >
-              <span
-                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+              <div
+                style="display: inline-flex; align-items: center; overflow: hidden; gap: 8px;"
               >
-                hello
-              </span>
+                <span
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+                  style="min-width: 0;"
+                >
+                  hello
+                </span>
+              </div>
             </div>
             <div
               class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"
@@ -586,11 +601,16 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               title=""
               width="0"
             >
-              <span
-                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+              <div
+                style="display: inline-flex; align-items: center; overflow: hidden; gap: 8px;"
               >
-                world
-              </span>
+                <span
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
+                  style="min-width: 0;"
+                >
+                  world
+                </span>
+              </div>
             </div>
             <div
               class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"

desktop/plugin-lib/src/__tests__/getPluginDetails.node.tsx

@@ -40,6 +40,7 @@ test('getPluginDetailsV1', async () => {
     Object {
       "bugs": undefined,
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,
@@ -83,6 +84,7 @@ test('getPluginDetailsV2', async () => {
     Object {
       "bugs": undefined,
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,
@@ -130,6 +132,7 @@ test('id used as title if the latter omited', async () => {
     Object {
       "bugs": undefined,
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,
@@ -176,6 +179,7 @@ test('name without "flipper-plugin-" prefix is used as title if the latter omite
     Object {
       "bugs": undefined,
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,
@@ -225,6 +229,7 @@ test('flipper-plugin-version is parsed', async () => {
     Object {
       "bugs": undefined,
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,
@@ -278,6 +283,7 @@ test('plugin type and supported devices parsed', async () => {
     Object {
       "bugs": undefined,
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,
@@ -347,6 +353,7 @@ test('plugin type and supported apps parsed', async () => {
     Object {
       "bugs": undefined,
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,
@@ -436,6 +443,7 @@ test('can merge two package.json files', async () => {
         "url": "https://fb.com/groups/flippersupport",
       },
       "category": undefined,
+      "deprecated": undefined,
       "description": "Description of Test Plugin",
       "dir": "/Users/mock/.flipper/thirdparty/flipper-plugin-test",
       "engines": undefined,