663380e721
Reviewed By: lblasa Differential Revision: D50500690 fbshipit-source-id: 6f739fe25c232ecfe842337af4399681e85f6a13
120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {
|
|
DownloadOutlined,
|
|
LoadingOutlined,
|
|
PlusOutlined,
|
|
} from '@ant-design/icons';
|
|
import {Alert, Button} from 'antd';
|
|
import {DownloadablePluginDetails} from 'flipper-common';
|
|
import React, {useMemo} from 'react';
|
|
import {useCallback} from 'react';
|
|
import {useDispatch, useSelector} from 'react-redux';
|
|
import {PluginDefinition} from '../plugin';
|
|
import {startPluginDownload} from '../reducers/pluginDownloads';
|
|
import {switchPlugin} from '../reducers/pluginManager';
|
|
import {
|
|
getActiveClient,
|
|
getPluginDownloadStatusMap,
|
|
} from '../selectors/connections';
|
|
import {Layout} from '../ui';
|
|
import {ActivePluginListItem} from '../utils/pluginUtils';
|
|
|
|
export function PluginActions({
|
|
activePlugin,
|
|
type,
|
|
}: {
|
|
activePlugin: ActivePluginListItem;
|
|
type: 'link' | 'primary';
|
|
}) {
|
|
switch (activePlugin.status) {
|
|
case 'disabled': {
|
|
return <EnableButton plugin={activePlugin.definition} type={type} />;
|
|
}
|
|
case 'uninstalled': {
|
|
return <InstallButton plugin={activePlugin.details} type={type} />;
|
|
}
|
|
case 'unavailable': {
|
|
return type === 'primary' ? (
|
|
<UnavailabilityAlert reason={activePlugin.reason} />
|
|
) : null;
|
|
}
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function EnableButton({
|
|
plugin,
|
|
type,
|
|
}: {
|
|
plugin: PluginDefinition;
|
|
type: 'link' | 'primary';
|
|
}) {
|
|
const dispatch = useDispatch();
|
|
const client = useSelector(getActiveClient);
|
|
const enableOrDisablePlugin = useCallback(() => {
|
|
dispatch(switchPlugin({plugin, selectedApp: client?.query?.app}));
|
|
}, [dispatch, plugin, client]);
|
|
return (
|
|
<Button
|
|
type={type}
|
|
icon={<PlusOutlined />}
|
|
onClick={enableOrDisablePlugin}
|
|
style={{flexGrow: type == 'primary' ? 1 : 0}}>
|
|
Enable Plugin
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
function UnavailabilityAlert({reason}: {reason: string}) {
|
|
return (
|
|
<Layout.Container center>
|
|
<Alert message={reason} type="warning" />
|
|
</Layout.Container>
|
|
);
|
|
}
|
|
|
|
function InstallButton({
|
|
plugin,
|
|
type = 'primary',
|
|
}: {
|
|
plugin: DownloadablePluginDetails;
|
|
type: 'link' | 'primary';
|
|
}) {
|
|
const dispatch = useDispatch();
|
|
const installPlugin = useCallback(() => {
|
|
dispatch(startPluginDownload({plugin, startedByUser: true}));
|
|
}, [plugin, dispatch]);
|
|
const downloads = useSelector(getPluginDownloadStatusMap);
|
|
const downloadStatus = useMemo(
|
|
() => downloads.get(plugin.id),
|
|
[downloads, plugin],
|
|
);
|
|
return (
|
|
<Button
|
|
type={type}
|
|
disabled={!!downloadStatus}
|
|
icon={
|
|
downloadStatus ? (
|
|
<LoadingOutlined size={16} />
|
|
) : (
|
|
<DownloadOutlined size={16} />
|
|
)
|
|
}
|
|
onClick={installPlugin}
|
|
style={{
|
|
flexGrow: type === 'primary' ? 1 : 0,
|
|
}}>
|
|
Install Plugin
|
|
</Button>
|
|
);
|
|
}
|