Fix circular imports and lint against them

Summary: When trying to refactor some components, did once again run into circular imports that cause the flipper startup sequence to fail. Added linting rules to make sure this is much less likely to happen in the future, and fixed all resulting errors

Reviewed By: nikoant

Differential Revision: D24390583

fbshipit-source-id: 9b20cf6a4d3555dc68f0069c2950dd7162b17e67
This commit is contained in:
Michel Weststrate
2020-10-20 03:22:15 -07:00
committed by Facebook GitHub Bot
parent f14a724fa5
commit ba5f067320
57 changed files with 108 additions and 86 deletions

View File

@@ -0,0 +1,21 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
module.exports = {
rules: {
'no-restricted-imports': [
'error',
{
// These paths lead to circular import issues in Flipper app and are forbidden
paths: ['flipper'],
patterns: ['app/src/*'],
},
],
},
};

View File

@@ -8,7 +8,7 @@
*/
import React from 'react';
import {FlexRow, styled, Layout} from 'flipper';
import {FlexRow, styled, Layout} from './ui';
import {connect} from 'react-redux';
import TitleBar from './chrome/TitleBar';
import MainSidebar2 from './chrome/mainsidebar/MainSidebar2';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {SearchableProps} from 'flipper';
import {SearchableProps} from './ui';
import {Logger} from './fb-interfaces/Logger';
import {
Searchable,
@@ -20,7 +20,7 @@ import {
ContextMenu,
styled,
colors,
} from 'flipper';
} from './ui';
import {PluginDefinition, DevicePluginMap, ClientPluginMap} from './plugin';
import {connect} from 'react-redux';
import React, {Component, Fragment} from 'react';

View File

@@ -24,12 +24,11 @@ import {
FlexRow,
colors,
styled,
ArchivedDevice,
Glyph,
Label,
VBox,
View,
} from 'flipper';
} from './ui';
import {
StaticView,
setStaticView,
@@ -49,6 +48,7 @@ import {processMessageQueue} from './utils/messageQueue';
import {ToggleButton, SmallText} from './ui';
import {SandyPluginRenderer} from 'flipper-plugin';
import {isDevicePluginDefinition} from './utils/pluginUtils';
import ArchivedDevice from './devices/ArchivedDevice';
const Container = styled(FlexColumn)({
width: 0,

View File

@@ -7,7 +7,7 @@
* @format
*/
import {FlexRow, colors, LoadingIndicator, Glyph, styled} from 'flipper';
import {FlexRow, colors, LoadingIndicator, Glyph, styled} from '../ui';
import {remote} from 'electron';
import isProduction from '../utils/isProduction';
import React, {Component} from 'react';

View File

@@ -8,7 +8,7 @@
*/
import {FlexRow, Button} from '../ui/index';
import {styled, LoadingIndicator, Text} from 'flipper';
import {styled, LoadingIndicator, Text} from '../ui';
import React, {Component} from 'react';
import {colors} from '../ui/components/colors';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {FlexColumn, styled, Text, FlexRow, Button, Markdown} from 'flipper';
import {FlexColumn, styled, Text, FlexRow, Button, Markdown} from '../ui';
import {readFileSync} from 'fs';
import React, {Component} from 'react';
import path from 'path';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {Button, styled} from 'flipper';
import {Button, styled} from '../ui';
import {connect, ReactReduxContext} from 'react-redux';
import {selectDevice, preferDevice} from '../reducers/connections';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {styled, colors} from 'flipper';
import {styled, colors} from '../ui';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
@@ -17,8 +17,8 @@ import {
ACTIVE_SHEET_SETTINGS,
} from '../reducers/application';
import {State as Store} from '../reducers/index';
import {ButtonGroup, Button} from 'flipper';
import {FlexColumn, FlexRow} from 'flipper';
import {ButtonGroup, Button} from '../ui';
import {FlexColumn, FlexRow} from '../ui';
import runHealthchecks, {
HealthcheckSettings,
HealthcheckEventsHandler,

View File

@@ -19,7 +19,7 @@ import {
Button,
FlexBox,
Checkbox,
} from 'flipper';
} from '../ui';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {State as Store} from '../reducers';

View File

@@ -16,7 +16,7 @@ import {
Spacer,
Input,
Label,
} from 'flipper';
} from '../ui';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {State as Store} from '../reducers';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {Button, styled} from 'flipper';
import {Button, styled} from '../ui';
import {connect} from 'react-redux';
import React, {Component} from 'react';
import {State as Store} from '../reducers';
@@ -21,7 +21,7 @@ import {
// eslint-disable-next-line flipper/no-relative-imports-across-packages
import {PersistedState as NavPluginState} from '../../../plugins/navigation/types';
import BaseDevice from '../devices/BaseDevice';
import {State as PluginState} from 'app/src/reducers/pluginStates';
import {State as PluginState} from '../reducers/pluginStates';
import {platform} from 'os';
import {getPluginKey} from '../utils/pluginUtils';

View File

@@ -8,16 +8,11 @@
*/
import React, {useCallback, useEffect, useState} from 'react';
import {
Button,
ButtonGroup,
MetroDevice,
connect,
colors,
styled,
} from 'flipper';
import {Button, ButtonGroup, colors} from '../ui';
import {State} from '../reducers';
import {MetroReportableEvent} from '../devices/MetroDevice';
import MetroDevice, {MetroReportableEvent} from '../devices/MetroDevice';
import styled from '@emotion/styled';
import {connect} from 'react-redux';
type LogEntry = {};

View File

@@ -15,7 +15,7 @@ import {
Button,
styled,
colors,
} from 'flipper';
} from '../ui';
import React, {PureComponent} from 'react';
const Anchor = styled.img({

View File

@@ -17,13 +17,13 @@ import {
styled,
Input,
Link,
} from 'flipper';
} from '../ui';
import Popover from '../ui/components/Popover2';
import GK from '../fb-stubs/GK';
import * as UserFeedback from '../fb-stubs/UserFeedback';
import {FeedbackPrompt} from '../fb-stubs/UserFeedback';
import {connect} from 'react-redux';
import {State as Store} from 'app/src/reducers';
import {State as Store} from '../reducers';
type PropsFromState = {
sessionId: string | null;

View File

@@ -7,7 +7,7 @@
* @format
*/
import {Button, ButtonGroup} from 'flipper';
import {Button, ButtonGroup} from '../ui';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import path from 'path';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {FlexColumn, Button, styled, Text, FlexRow, Spacer} from 'flipper';
import {FlexColumn, Button, styled, Text, FlexRow, Spacer} from '../ui';
import React, {Component} from 'react';
import {updateSettings, Action} from '../reducers/settings';
import {

View File

@@ -7,7 +7,7 @@
* @format
*/
import {FlexColumn, Button, styled, Text, FlexRow, Spacer} from 'flipper';
import {FlexColumn, Button, styled, Text, FlexRow, Spacer} from '../ui';
import React, {Component} from 'react';
import {setExportStatusComponent, unsetShare} from '../reducers/application';
import {reportPlatformFailures} from '../utils/metrics';

View File

@@ -7,15 +7,7 @@
* @format
*/
import {
FlexColumn,
Button,
styled,
Text,
FlexRow,
Spacer,
Input,
} from 'flipper';
import {FlexColumn, Button, styled, Text, FlexRow, Spacer, Input} from '../ui';
import React, {Component} from 'react';
import {ReactReduxContext} from 'react-redux';
import {

View File

@@ -12,7 +12,7 @@ import {Transition} from 'react-transition-group';
import {TransitionStatus} from 'react-transition-group/Transition';
import {setActiveSheet} from '../reducers/application';
import {connect} from 'react-redux';
import {styled} from 'flipper';
import {styled} from '../ui';
import {PLUGIN_SHEET_ELEMENT_ID} from '../ui/components/Sheet';
import {ACTIVE_SHEET_PLUGIN_SHEET} from '../reducers/application';
import {State as Store} from '../reducers';

View File

@@ -17,7 +17,7 @@ import {
Input,
Link,
colors,
} from 'flipper';
} from '../ui';
import React, {Component} from 'react';
import {writeKeychain, getUser} from '../fb-stubs/user';
import {login} from '../reducers/user';

View File

@@ -27,8 +27,7 @@ import {
styled,
Text,
LoadingIndicator,
getPluginKey,
} from 'flipper';
} from '../ui';
import {connect} from 'react-redux';
import RatingButton from './RatingButton';
import DevicesButton from './DevicesButton';
@@ -46,6 +45,7 @@ import {reportUsage} from '../utils/metrics';
import FpsGraph from './FpsGraph';
import NetworkGraph from './NetworkGraph';
import MetroButton from './MetroButton';
import {getPluginKey} from '../utils/pluginUtils';
const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({
userSelect: 'none',

View File

@@ -8,7 +8,7 @@
*/
import {LauncherMsg} from '../reducers/application';
import {colors, FlexRow, Glyph, styled} from 'flipper';
import {colors, FlexRow, Glyph, styled} from '../ui';
import Tooltip from '../ui/components/Tooltip';
import isProduction from '../utils/isProduction';
import {

View File

@@ -10,7 +10,7 @@
import {User, USER_UNAUTHORIZED, USER_NOT_SIGNEDIN} from '../reducers/user';
import {ActiveSheet} from '../reducers/application';
import {styled, FlexRow, Glyph, Text, colors} from 'flipper';
import {styled, FlexRow, Glyph, Text, colors} from '../ui';
import {logout} from '../reducers/user';
import {setActiveSheet, ACTIVE_SHEET_SIGN_IN} from '../reducers/application';
import {connect} from 'react-redux';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {styled, FlexColumn, Text, Button, colors} from 'flipper';
import {styled, FlexColumn, Text, Button, colors} from '../ui';
import React from 'react';

View File

@@ -19,13 +19,11 @@ import {
colors,
Glyph,
styled,
GK,
ArchivedDevice,
SmallText,
Info,
HBox,
LoadingIndicator,
} from 'flipper';
} from '../../ui';
import React, {
PureComponent,
Fragment,
@@ -61,6 +59,8 @@ import {
} from './sidebarUtils';
import {useLocalStorage} from '../../utils/useLocalStorage';
import {PluginDefinition, ClientPluginMap, DevicePluginMap} from '../../plugin';
import GK from '../../fb-stubs/GK';
import ArchivedDevice from '../../devices/ArchivedDevice';
type FlipperPlugins = PluginDefinition[];
type PluginsByCategoryType = [string, FlipperPlugins][];

View File

@@ -9,7 +9,6 @@
import React from 'react';
import {connect} from 'react-redux';
import {colors, GK} from 'flipper';
import config from '../../fb-stubs/config';
import {PluginNotification} from '../../reducers/notifications';
@@ -31,6 +30,8 @@ import {Group} from '../../reducers/supportForm';
import {getInstance} from '../../fb-stubs/Logger';
import {ConsoleLogs, errorCounterAtom} from '../ConsoleLogs';
import {useValue} from 'flipper-plugin';
import {colors} from '../../ui';
import GK from '../../fb-stubs/GK';
type OwnProps = {};

View File

@@ -19,13 +19,13 @@ import {
brandColors,
Spacer,
Heading,
Client,
BaseDevice,
StaticView,
} from 'flipper';
} from '../../ui';
import {BackgroundColorProperty} from 'csstype';
import {getPluginTitle} from '../../utils/pluginUtils';
import {PluginDefinition} from '../../plugin';
import {StaticView} from '../../reducers/connections';
import BaseDevice from '../../devices/BaseDevice';
import Client from '../../Client';
export type FlipperPlugins = PluginDefinition[];
export type PluginsByCategory = [string, FlipperPlugins][];

View File

@@ -12,7 +12,7 @@ import Client from '../../Client';
import {TableBodyRow} from '../../ui/components/table/types';
import React, {Component, Fragment} from 'react';
import {connect} from 'react-redux';
import {Text, ManagedTable, styled, colors, Link, Bordered} from 'flipper';
import {Text, ManagedTable, styled, colors, Link, Bordered} from '../../ui';
import StatusIndicator from '../../ui/components/StatusIndicator';
import {State as Store} from '../../reducers';
import {DevicePluginDefinition, ClientPluginDefinition} from '../../plugin';

View File

@@ -24,7 +24,7 @@ import {
Text,
LoadingIndicator,
Tooltip,
} from 'flipper';
} from '../../ui';
import React, {useCallback, useState, useEffect} from 'react';
import {List} from 'immutable';
import {reportPlatformFailures, reportUsage} from '../../utils/metrics';

View File

@@ -8,7 +8,7 @@
*/
import React, {useState} from 'react';
import {FlexColumn, Button, styled, Tab, Tabs, TabsContainer} from 'flipper';
import {FlexColumn, Button, styled, Tab, Tabs, TabsContainer} from '../../ui';
import PluginDebugger from './PluginDebugger';
import PluginInstaller from './PluginInstaller';

View File

@@ -15,7 +15,7 @@ import {
Glyph,
colors,
LoadingIndicator,
} from 'flipper';
} from '../../ui';
import styled from '@emotion/styled';
import {default as FileSelector} from '../../ui/components/FileSelector';
import React, {useState} from 'react';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {FlexColumn, styled, FlexRow, Text, Glyph, colors} from 'flipper';
import {FlexColumn, styled, FlexRow, Text, Glyph, colors} from '../../ui';
import React, {useRef, useState, useEffect} from 'react';
type PressedKeys = {

View File

@@ -7,7 +7,7 @@
* @format
*/
import {FlexColumn, styled, FlexRow, ToggleButton} from 'flipper';
import {FlexColumn, styled, FlexRow, ToggleButton} from '../../ui';
import React from 'react';
import {theme} from '../../sandy-chrome/theme';

View File

@@ -8,7 +8,15 @@
*/
import electron from 'electron';
import {FlexColumn, styled, Text, FlexRow, Input, colors, Glyph} from 'flipper';
import {
FlexColumn,
styled,
Text,
FlexRow,
Input,
colors,
Glyph,
} from '../../ui';
import React, {useState} from 'react';
import {promises as fs} from 'fs';
import {remote} from 'electron';

View File

@@ -12,7 +12,7 @@ import {
TableRows_immutable,
TableColumnSizes,
TableColumns,
} from 'flipper';
} from './ui';
import FlexColumn from './ui/components/FlexColumn';
import Button from './ui/components/Button';
import DetailSidebar from './chrome/DetailSidebar';

View File

@@ -8,12 +8,12 @@
*/
import stream from 'stream';
import type {DeviceLogListener} from 'flipper';
import {
DeviceLogEntry,
SandyDevicePluginInstance,
SandyPluginDefinition,
DeviceType,
DeviceLogListener,
} from 'flipper-plugin';
import type {DevicePluginDefinition, DevicePluginMap} from '../plugin';
import {getFlipperLibImplementation} from '../utils/flipperLibImplementation';

View File

@@ -7,7 +7,7 @@
* @format
*/
import {FlipperPlugin} from 'flipper';
import {FlipperPlugin} from '../../plugin';
export default class extends FlipperPlugin<any, any, any> {
static id = 'Static ID';

View File

@@ -19,7 +19,7 @@ import dispatcher, {
import {PluginDetails} from 'flipper-plugin-lib';
import path from 'path';
import {remote} from 'electron';
import {FlipperPlugin} from 'flipper';
import {FlipperPlugin} from '../../plugin';
import reducers, {State} from '../../reducers/index';
import {getInstance} from '../../fb-stubs/Logger';
import configureStore from 'redux-mock-store';

View File

@@ -11,7 +11,7 @@ import {Store} from '../reducers/index';
import {Logger} from '../fb-interfaces/Logger';
import {registerDeviceCallbackOnPlugins} from '../utils/onRegisterDevice';
import MetroDevice from '../devices/MetroDevice';
import {ArchivedDevice} from 'flipper';
import ArchivedDevice from '../devices/ArchivedDevice';
import http from 'http';
import {addErrorNotification} from '../reducers/notifications';

View File

@@ -8,8 +8,8 @@
*/
import {remote} from 'electron';
import {MetroDevice} from 'flipper';
import {Store} from 'app/src/reducers';
import MetroDevice from '../devices/MetroDevice';
import {Store} from '../reducers';
type ShortcutEventCommand =
| {

View File

@@ -24,7 +24,7 @@ import {
State as UsageTrackingState,
} from '../reducers/usageTracking';
import produce from 'immer';
import {BaseDevice} from 'flipper';
import BaseDevice from '../devices/BaseDevice';
import {deconstructClientId} from '../utils/clientUtils';
import {getCPUUsage} from 'process';

View File

@@ -7,7 +7,10 @@
* @format
*/
import {Element, ElementFramework} from 'flipper';
import {
ElementFramework,
Element,
} from '../ui/components/elements-inspector/ElementsInspector';
export enum IDEType {
'DIFFUSION',

View File

@@ -7,7 +7,7 @@
* @format
*/
import {Tristate} from 'app/src/reducers/settings';
import {Tristate} from '../reducers/settings';
export default function (_props: {
isPrefetchingEnabled: Tristate;

View File

@@ -7,8 +7,10 @@
* @format
*/
import {PluginClient, Client, Element} from 'flipper';
import {Logger} from 'app/src/fb-interfaces/Logger';
import Client from '../Client';
import {Logger} from '../fb-interfaces/Logger';
import {PluginClient} from '../plugin';
import {Element} from '../ui';
export default [] as Array<
(

View File

@@ -33,7 +33,7 @@ import textContent from '../utils/textContent';
import createPaste from '../fb-stubs/createPaste';
import {ReactNode} from 'react';
import React from 'react';
import {KeyboardActions} from 'app/src/MenuBar';
import {KeyboardActions} from '../MenuBar';
type ID = string;

View File

@@ -8,7 +8,7 @@
*/
import React, {cloneElement, useState, useCallback, useMemo} from 'react';
import {styled, Layout} from 'flipper';
import {styled, Layout} from '../ui';
import {Button, Divider, Badge, Tooltip, Avatar, Popover} from 'antd';
import {
MobileFilled,

View File

@@ -8,7 +8,7 @@
*/
import React, {useEffect, useState, useCallback} from 'react';
import {styled} from 'flipper';
import {styled} from '../ui';
import {Layout, Sidebar} from '../ui';
import {theme} from './theme';
import {Logger} from '../fb-interfaces/Logger';

View File

@@ -8,7 +8,7 @@
*/
import React from 'react';
import {styled, colors} from 'flipper';
import {styled, colors} from '../ui';
import FpsGraph from '../chrome/FpsGraph';
import NetworkGraph from '../chrome/NetworkGraph';
import isProduction from '../utils/isProduction';

View File

@@ -8,7 +8,7 @@
*/
import React, {cloneElement} from 'react';
import {styled, FlexRow, FlexColumn} from 'flipper';
import {styled, FlexRow, FlexColumn} from '../ui';
import {Modal, Button, Image, Checkbox, Space, Typography} from 'antd';
import {
RocketOutlined,

View File

@@ -17,7 +17,7 @@ import {
RefObject,
} from 'react';
import React from 'react';
import {styled, colors} from 'flipper';
import {colors, styled} from '../../ui';
import {useWindowSize} from '../../utils/useWindowSize';
type PopoverManager = {

View File

@@ -72,7 +72,7 @@ type Props = {
* **Usage**
*
* ```jsx
* import {ToggleButton} from 'flipper';
* import {ToggleButton} from '../ui';
* <ToggleButton onClick={handler} toggled={boolean}/>
* ```
*/

View File

@@ -9,7 +9,7 @@
import {Component} from 'react';
import {Elements, DecorateRow} from './elements';
import {ContextMenuExtension} from 'flipper';
import {ContextMenuExtension} from '../../../ui';
import React from 'react';
export type ElementID = string;

View File

@@ -8,7 +8,7 @@
*/
import {shouldParseAndroidLog} from '../crashReporterUtility.tsx';
import type {DeviceLogEntry, LogLevel} from 'flipper';
import type {DeviceLogEntry, LogLevel} from '../../';
function getAndroidLog(
date: Date,

View File

@@ -15,7 +15,7 @@ import type {State as PluginsState} from '../../reducers/plugins.tsx';
import type {State as PluginStatesState} from '../../reducers/pluginStates.tsx';
import type {PluginDetails} from 'flipper-plugin-lib';
import type {State as PluginMessageQueueState} from '../../reducers/pluginStates.tsx';
import {FlipperBasePlugin} from 'flipper';
import {FlipperBasePlugin} from '../../plugin';
import type {ReduxState} from '../../reducers/index.tsx';
function createMockFlipperPluginWithDefaultPersistedState(id: string) {

View File

@@ -175,7 +175,7 @@ function generateTestSuite(pluginName: string, snapShotFileName: string) {
import fs from 'fs';
import path from 'path';
import {deserialize} from 'flipper';
import {deserialize} from '../ui';
import Plugin from '../';
test('Verify events produce a consistent end state for plugin ${pluginName}', async () => {

View File

@@ -9,7 +9,7 @@
import fs from 'fs';
import path from 'path';
import {BaseDevice} from 'flipper';
import BaseDevice from '../devices/BaseDevice';
import {reportPlatformFailures} from './metrics';
import expandTilde from 'expand-tilde';
import {remote} from 'electron';