diff --git a/desktop/app/src/electron/initializeElectron.tsx b/desktop/app/src/electron/initializeElectron.tsx index dc3e3d899..37b1aacf5 100644 --- a/desktop/app/src/electron/initializeElectron.tsx +++ b/desktop/app/src/electron/initializeElectron.tsx @@ -144,6 +144,7 @@ export function initializeElectron() { return { data, name: fileName, + path: filePath, }; }), ); diff --git a/desktop/flipper-plugin/src/plugin/FlipperLib.tsx b/desktop/flipper-plugin/src/plugin/FlipperLib.tsx index a8cb3045c..e9116d75e 100644 --- a/desktop/flipper-plugin/src/plugin/FlipperLib.tsx +++ b/desktop/flipper-plugin/src/plugin/FlipperLib.tsx @@ -43,17 +43,6 @@ export interface FlipperLib { DetailsSidebarImplementation?( props: DetailSidebarProps, ): React.ReactElement | null; - /** - * @deprecated - * Will be removed in subsequent commits - */ - showOpenDialog?(options: { - defaultPath?: string; - filter?: { - extensions: string[]; - name: string; - }; - }): Promise; /** * @returns * Imported file data. diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginPackageInstaller.tsx b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginPackageInstaller.tsx index f69d5e7a8..d1823c91a 100644 --- a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginPackageInstaller.tsx +++ b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginPackageInstaller.tsx @@ -16,10 +16,9 @@ import { LoadingIndicator, } from '../../ui'; import styled from '@emotion/styled'; -import {default as FileSelector} from '../../ui/components/FileSelector'; import React, {useState} from 'react'; import {installPluginFromFile} from 'flipper-plugin-lib'; -import {Toolbar} from 'flipper-plugin'; +import {Toolbar, FileSelector} from 'flipper-plugin'; const CenteredGlyph = styled(Glyph)({ margin: 'auto', @@ -80,10 +79,16 @@ export default function PluginPackageInstaller({ return ( { - setPath(e.path); - setIsPathValid(e.isValid); + 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); }} /> 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 fd3d65c80..a975c5cf4 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 @@ -275,38 +275,80 @@ exports[`load PluginInstaller list 1`] = ` class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20" >
-
- dots-3-circle
-
-
-
+ + + + +
+
+
-
- dots-3-circle
-
-
-
+ + + + +
+
+
(({isValid}) => ({ - flexGrow: 1, - color: isValid ? undefined : colors.red, - '&::-webkit-input-placeholder': { - color: colors.placeholder, - fontWeight: 300, - }, -})); - -export interface Props { - onPathChanged: (evtArgs: {path: string; isValid: boolean}) => void; - placeholderText: string; - defaultPath: string; -} - -const defaultProps: Props = { - onPathChanged: (_) => {}, - placeholderText: '', - defaultPath: '/', -}; - -// TODO: Should we render null in browsers for FileSelector? -// Do we even need it after decapitation? Every plugin should be using FlipperLib.exportFile which shows a save dialog every time. -export default function FileSelector({ - onPathChanged, - placeholderText, - defaultPath, -}: Props) { - const [value, setValue] = useState(''); - const [isValid, setIsValid] = useState(false); - const onChange = (path: string) => { - setValue(path); - let isNewPathValid = false; - try { - isNewPathValid = fs.statSync(path).isFile(); - } catch { - isNewPathValid = false; - } - setIsValid(isNewPathValid); - onPathChanged({path, isValid: isNewPathValid}); - }; - return ( - - { - if (e.dataTransfer.files.length) { - onChange(e.dataTransfer.files[0].path); - } - }} - onChange={(e) => { - onChange(e.target.value); - }} - /> - - getFlipperLib() - .showOpenDialog?.({defaultPath}) - .then((path) => { - if (path) { - onChange(path); - } - }) - }> - - - - {isValid ? null : ( - - - - )} - - - ); -} - -FileSelector.defaultProps = defaultProps; diff --git a/desktop/flipper-ui-core/src/utils/flipperLibImplementation.tsx b/desktop/flipper-ui-core/src/utils/flipperLibImplementation.tsx index 2ace9f251..87c26ef7f 100644 --- a/desktop/flipper-ui-core/src/utils/flipperLibImplementation.tsx +++ b/desktop/flipper-ui-core/src/utils/flipperLibImplementation.tsx @@ -62,7 +62,6 @@ export function initializeFlipperLibImplementation( DetailsSidebarImplementation: DetailSidebarImpl, importFile: renderHost.importFile, exportFile: renderHost.exportFile, - showOpenDialog: renderHost.showOpenDialog, paths: { appPath: renderHost.paths.appPath, homePath: renderHost.paths.homePath, diff --git a/desktop/scripts/jest-setup-after.js b/desktop/scripts/jest-setup-after.js index 5434cd999..10506f442 100644 --- a/desktop/scripts/jest-setup-after.js +++ b/desktop/scripts/jest-setup-after.js @@ -38,3 +38,18 @@ afterEach(cleanup); console.debug = function () { // Intentional noop, we don't want debug statements in Jest runs }; + +// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // deprecated + removeListener: jest.fn(), // deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), +});