diff --git a/desktop/flipper-common/src/PluginDetails.tsx b/desktop/flipper-common/src/PluginDetails.tsx
index bf80a3dc0..cf344348a 100644
--- a/desktop/flipper-common/src/PluginDetails.tsx
+++ b/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,
};
}
diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx
index f9790d206..7b5534397 100644
--- a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginInstaller.tsx
+++ b/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: {h.name.replace(/^flipper-plugin-/, '')},
+ 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.
+
+ {h.deprecated != null ? (
+
+
+
+ ) : null}
+
+ {h.name.replace(/^flipper-plugin-/, '')}
+
+
+ ),
},
version: {
value: {h.version},
diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap b/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
index 7a9ff591c..ca87aff11 100644
--- a/desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
+++ b/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"
>
-
- hello
-
+
+ hello
+
+
-
- world
-
+
+ world
+
+
-
- hello
-
+
+ hello
+
+
-
- world
-
+
+ world
+
+
{
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,