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

Move plugin installer away from immutable

Browse Source 
Summary: Trying to get rid of immutable_table, which is used in only 3 places. One of them being the plugin installer.

Reviewed By: jknoxville

Differential Revision: D29295534

fbshipit-source-id: dfae9476635c3a8ebba9f1439905bae693fdfd57
This commit is contained in:
Michel Weststrate
2021-06-25 04:34:08 -07:00
committed by Facebook GitHub Bot
parent 729922e8ad
commit 5b4179d482
2 changed files with 241 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx
View File

@@ -10,22 +10,21 @@
import { import {
FlexColumn, FlexColumn,
styled, styled,
ManagedTable_immutable,
SearchInput, SearchInput,
SearchBox, SearchBox,
Button, Button,
colors, colors,
Spacer, Spacer,
TableRows_immutable,
FlexRow, FlexRow,
Glyph, Glyph,
Link, Link,
Text, Text,
LoadingIndicator, LoadingIndicator,
Tooltip, Tooltip,
TableRows,
ManagedTable,
} from '../../ui'; } from '../../ui';
import React, {useCallback, useState, useEffect} from 'react'; import React, {useCallback, useState, useEffect} from 'react';
import {List} from 'immutable';
import {reportPlatformFailures, reportUsage} from '../../utils/metrics'; import {reportPlatformFailures, reportUsage} from '../../utils/metrics';
import reloadFlipper from '../../utils/reloadFlipper'; import reloadFlipper from '../../utils/reloadFlipper';
import {registerInstalledPlugins} from '../../reducers/plugins'; import {registerInstalledPlugins} from '../../reducers/plugins';
@@ -144,7 +143,7 @@ const PluginInstaller = function ({
/> />
</SearchBox> </SearchBox>
</Toolbar> </Toolbar>
<ManagedTable_immutable <ManagedTable
rowLineHeight={28} rowLineHeight={28}
floating={false} floating={false}
multiline multiline
@@ -289,7 +288,7 @@ function useNPMSearch(
query: string, query: string,
onInstall: () => void, onInstall: () => void,
installedPlugins: Map<string, InstalledPluginDetails>, installedPlugins: Map<string, InstalledPluginDetails>,
): TableRows_immutable { ): TableRows {
useEffect(() => { useEffect(() => {
reportUsage(`${TAG}:open`); reportUsage(`${TAG}:open`);
}, []); }, []);
@@ -358,7 +357,7 @@ function useNPMSearch(
})(); })();
}, [query, installedPlugins]); }, [query, installedPlugins]);
const rows: TableRows_immutable = List(searchResults.map(createRow)); const rows = searchResults.map(createRow);
return rows; return rows;
} }

462
desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap
View File

@@ -20,7 +20,8 @@ exports[`load PluginInstaller list 1`] = `
</div> </div>
</div> </div>
<div <div
class="css-1n5hbjk-View-FlexBox-FlexColumn-Container e11hk09w0" class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
tabindex="0"
> >
<div <div
class="css-18abd42-View-FlexBox-FlexColumn ecr18to0" class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
@@ -95,146 +96,150 @@ exports[`load PluginInstaller list 1`] = `
</div> </div>
</div> </div>
<div <div
class="css-1n5hbjk-View-FlexBox-FlexColumn-Container e11hk09w0" class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
> >
<div <div
class="css-1xll39b-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1" class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
data-key="flipper-plugin-hello"
> >
<div <div
class="css-hdg6vt-TableBodyColumnContainer ehuguum0" class="css-1xll39b-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
title="" data-key="flipper-plugin-hello"
width="25%"
>
<span
class="css-fyize4-Text"
>
hello
</span>
</div>
<div
class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
>
<span
class="css-fyize4-Text"
>
0.1.0
</span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
> >
<div <div
class="css-4yiclo-View-FlexBox-FlexRow epz0qe20" class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
title=""
width="25%"
> >
<span <span
class="css-fyize4-Text" class="css-fyize4-Text"
> >
World? hello
</span> </span>
<div
class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
/>
<a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-hello"
>
<div
class="css-5r6dd6-ColoredIconCustom e528dze0"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/>
</a>
</div> </div>
</div>
<div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
title=""
width="15%"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Install
</span>
</button>
</div>
</div>
<div
class="css-1k1evb9-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
data-key="flipper-plugin-world"
>
<div
class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
title=""
width="25%"
>
<span
class="css-fyize4-Text"
>
world
</span>
</div>
<div
class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
>
<span
class="css-fyize4-Text"
>
0.2.0
</span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
>
<div <div
class="css-4yiclo-View-FlexBox-FlexRow epz0qe20" class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
> >
<span <span
class="css-fyize4-Text" class="css-fyize4-Text"
> >
Hello? 0.1.0
</span> </span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
>
<div <div
class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80" class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
/>
<a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-world"
> >
<span
class="css-fyize4-Text"
>
World?
</span>
<div <div
class="css-5r6dd6-ColoredIconCustom e528dze0" class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/> />
</a> <a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-hello"
>
<div
class="css-5r6dd6-ColoredIconCustom e528dze0"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/>
</a>
</div>
</div>
<div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
title=""
width="15%"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Install
</span>
</button>
</div> </div>
</div> </div>
<div <div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0" class="css-1k1evb9-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
title="" data-key="flipper-plugin-world"
width="15%"
> >
<button <div
class="ant-btn ant-btn-primary" class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
type="button" title=""
width="25%"
> >
<span> <span
Install class="css-fyize4-Text"
>
world
</span> </span>
</button> </div>
<div
class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
>
<span
class="css-fyize4-Text"
>
0.2.0
</span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
>
<div
class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
>
<span
class="css-fyize4-Text"
>
Hello?
</span>
<div
class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
/>
<a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-world"
>
<div
class="css-5r6dd6-ColoredIconCustom e528dze0"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/>
</a>
</div>
</div>
<div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
title=""
width="15%"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Install
</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -322,7 +327,8 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
</div> </div>
</div> </div>
<div <div
class="css-1n5hbjk-View-FlexBox-FlexColumn-Container e11hk09w0" class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
tabindex="0"
> >
<div <div
class="css-18abd42-View-FlexBox-FlexColumn ecr18to0" class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
@@ -397,146 +403,150 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
</div> </div>
</div> </div>
<div <div
class="css-1n5hbjk-View-FlexBox-FlexColumn-Container e11hk09w0" class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
> >
<div <div
class="css-1xll39b-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1" class="css-18abd42-View-FlexBox-FlexColumn ecr18to0"
data-key="flipper-plugin-hello"
> >
<div <div
class="css-hdg6vt-TableBodyColumnContainer ehuguum0" class="css-1xll39b-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
title="" data-key="flipper-plugin-hello"
width="25%"
>
<span
class="css-fyize4-Text"
>
hello
</span>
</div>
<div
class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
>
<span
class="css-fyize4-Text"
>
0.1.0
</span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
> >
<div <div
class="css-4yiclo-View-FlexBox-FlexRow epz0qe20" class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
title=""
width="25%"
> >
<span <span
class="css-fyize4-Text" class="css-fyize4-Text"
> >
World? hello
</span> </span>
<div
class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
/>
<a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-hello"
>
<div
class="css-5r6dd6-ColoredIconCustom e528dze0"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/>
</a>
</div> </div>
</div>
<div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
title=""
width="15%"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Remove
</span>
</button>
</div>
</div>
<div
class="css-1k1evb9-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
data-key="flipper-plugin-world"
>
<div
class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
title=""
width="25%"
>
<span
class="css-fyize4-Text"
>
world
</span>
</div>
<div
class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
>
<span
class="css-fyize4-Text"
>
0.2.0
</span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
>
<div <div
class="css-4yiclo-View-FlexBox-FlexRow epz0qe20" class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
> >
<span <span
class="css-fyize4-Text" class="css-fyize4-Text"
> >
Hello? 0.1.0
</span> </span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
>
<div <div
class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80" class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
/>
<a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-world"
> >
<span
class="css-fyize4-Text"
>
World?
</span>
<div <div
class="css-5r6dd6-ColoredIconCustom e528dze0" class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/> />
</a> <a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-hello"
>
<div
class="css-5r6dd6-ColoredIconCustom e528dze0"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/>
</a>
</div>
</div>
<div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
title=""
width="15%"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Remove
</span>
</button>
</div> </div>
</div> </div>
<div <div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0" class="css-1k1evb9-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
title="" data-key="flipper-plugin-world"
width="15%"
> >
<button <div
class="ant-btn ant-btn-primary" class="css-hdg6vt-TableBodyColumnContainer ehuguum0"
type="button" title=""
width="25%"
> >
<span> <span
Install class="css-fyize4-Text"
>
world
</span> </span>
</button> </div>
<div
class="css-1rdsust-TableBodyColumnContainer ehuguum0"
title=""
width="10%"
>
<span
class="css-fyize4-Text"
>
0.2.0
</span>
</div>
<div
class="css-1bw2bjn-TableBodyColumnContainer ehuguum0"
title=""
width="flex"
>
<div
class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
>
<span
class="css-fyize4-Text"
>
Hello?
</span>
<div
class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
/>
<a
class="ant-typography"
href="https://yarnpkg.com/en/package/flipper-plugin-world"
>
<div
class="css-5r6dd6-ColoredIconCustom e528dze0"
color="#bec2c9"
size="16"
src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
/>
</a>
</div>
</div>
<div
class="css-4dx1ef-TableBodyColumnContainer ehuguum0"
title=""
width="15%"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Install
</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>