jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mark deprecated plugins in the UI

Browse Source 
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
This commit is contained in:
Andrey Goncharov
2022-05-30 07:32:12 -07:00
committed by Facebook GitHub Bot
parent 4ed0f1c4b0
commit 59761ecd50
4 changed files with 69 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>,

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

@@ -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"