79023ee190
Reviewed By: bhamodi Differential Revision: D33331422 fbshipit-source-id: 016e8dcc0c0c7f1fc353a348b54fda0d5e2ddc01
119 lines
2.8 KiB
TypeScript
119 lines
2.8 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 {
|
|
Button,
|
|
FlexRow,
|
|
Tooltip,
|
|
Glyph,
|
|
colors,
|
|
LoadingIndicator,
|
|
} from '../../ui';
|
|
import styled from '@emotion/styled';
|
|
import React, {useState} from 'react';
|
|
import {Toolbar, FileSelector} from 'flipper-plugin';
|
|
import {getRenderHostInstance} from '../../RenderHost';
|
|
|
|
const CenteredGlyph = styled(Glyph)({
|
|
margin: 'auto',
|
|
marginLeft: 2,
|
|
});
|
|
|
|
const Spinner = styled(LoadingIndicator)({
|
|
margin: 'auto',
|
|
marginLeft: 16,
|
|
});
|
|
|
|
const ButtonContainer = styled(FlexRow)({
|
|
width: 76,
|
|
});
|
|
|
|
const ErrorGlyphContainer = styled(FlexRow)({
|
|
width: 20,
|
|
});
|
|
|
|
export default function PluginPackageInstaller({
|
|
onInstall,
|
|
}: {
|
|
onInstall: () => Promise<void>;
|
|
}) {
|
|
const [path, setPath] = useState('');
|
|
const [isPathValid, setIsPathValid] = useState(false);
|
|
const [error, setError] = useState<Error>();
|
|
const [inProgress, setInProgress] = useState(false);
|
|
const onClick = async () => {
|
|
setError(undefined);
|
|
setInProgress(true);
|
|
try {
|
|
await getRenderHostInstance().flipperServer!.exec(
|
|
'plugins-install-from-file',
|
|
path,
|
|
);
|
|
await onInstall();
|
|
} catch (e) {
|
|
setError(e);
|
|
console.error('PluginPackageInstaller install error:', e);
|
|
} finally {
|
|
setInProgress(false);
|
|
}
|
|
};
|
|
const button = inProgress ? (
|
|
<Spinner size={16} />
|
|
) : (
|
|
<Button
|
|
compact
|
|
type="primary"
|
|
disabled={!isPathValid}
|
|
title={
|
|
isPathValid
|
|
? 'Click to install the specified plugin package'
|
|
: 'Cannot install plugin package by the specified path'
|
|
}
|
|
onClick={onClick}>
|
|
Install
|
|
</Button>
|
|
);
|
|
return (
|
|
<Toolbar>
|
|
<FileSelector
|
|
label="Select a Flipper package or just drag and drop it here..."
|
|
onChange={(newFile) => {
|
|
if (newFile) {
|
|
// TODO: Fix me before implementing Browser Flipper. "path" is only availbale in Electron!
|
|
setPath(newFile.path!);
|
|
setIsPathValid(true);
|
|
} else {
|
|
setPath('');
|
|
setIsPathValid(false);
|
|
}
|
|
setError(undefined);
|
|
}}
|
|
/>
|
|
<ButtonContainer>
|
|
<FlexRow>
|
|
{button}
|
|
<ErrorGlyphContainer>
|
|
{error && (
|
|
<Tooltip
|
|
options={{position: 'toRight'}}
|
|
title={`Something went wrong: ${error}`}>
|
|
<CenteredGlyph
|
|
color={colors.orange}
|
|
size={16}
|
|
name="caution-triangle"
|
|
/>
|
|
</Tooltip>
|
|
)}
|
|
</ErrorGlyphContainer>
|
|
</FlexRow>
|
|
</ButtonContainer>
|
|
</Toolbar>
|
|
);
|
|
}
|