release v2

Summary:
- Moving the new layout plugin from `layout2` to `layout`.
- updating dependencies
- removed beta toolbar

Reviewed By: passy

Differential Revision: D14519490

fbshipit-source-id: d184767e767e1717368f66e2bda2af318b7e63c9

src/plugins/layout/InspectorSidebar.js

@@ -7,8 +7,8 @@
 
 import type {Element} from 'flipper';
 import type {PluginClient} from 'flipper';
-import type Client from '../../../Client.js';
-import type {Logger} from '../../../fb-interfaces/Logger.js';
+import type Client from '../../Client.js';
+import type {Logger} from '../../fb-interfaces/Logger.js';
 
 import {
   GK,

src/plugins/layout/ProxyArchiveClient.js

@@ -8,7 +8,8 @@
 import type {Element, ElementID} from 'flipper';
 import type {PersistedState} from './index';
 import type {SearchResultTree} from './Search';
-import {cloneDeep} from 'lodash';
+// $FlowFixMe
+import cloneDeep from 'lodash.clonedeep';
 
 const propsForPersistedState = (
   AXMode: boolean,

src/plugins/layout/layout2/index.js

@@ -1,262 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import type {
-  ElementID,
-  Element,
-  ElementSearchResultSet,
-  Store,
-  PluginClient,
-} from 'flipper';
-
-import {
-  FlexColumn,
-  FlexRow,
-  FlipperPlugin,
-  Toolbar,
-  Sidebar,
-  Link,
-  Glyph,
-  DetailSidebar,
-  styled,
-} from 'flipper';
-import Inspector from './Inspector';
-import ToolbarIcon from './ToolbarIcon';
-import InspectorSidebar from './InspectorSidebar';
-import Search from './Search';
-import ProxyArchiveClient from './ProxyArchiveClient';
-
-type State = {|
-  init: boolean,
-  inTargetMode: boolean,
-  inAXMode: boolean,
-  inAlignmentMode: boolean,
-  selectedElement: ?ElementID,
-  selectedAXElement: ?ElementID,
-  searchResults: ?ElementSearchResultSet,
-|};
-
-export type ElementMap = {[key: ElementID]: Element};
-
-export type PersistedState = {|
-  rootElement: ?ElementID,
-  rootAXElement: ?ElementID,
-  elements: ElementMap,
-  AXelements: ElementMap,
-|};
-
-const BetaBar = styled(Toolbar)({
-  display: 'block',
-  overflow: 'hidden',
-  lineHeight: '15px',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-});
-
-export default class Layout extends FlipperPlugin<State, void, PersistedState> {
-  static exportPersistedState = (
-    callClient: (string, ?Object) => Promise<Object>,
-    persistedState: ?PersistedState,
-    store: ?Store,
-  ): Promise<?PersistedState> => {
-    const defaultPromise = Promise.resolve(persistedState);
-    if (!store) {
-      return defaultPromise;
-    }
-    return callClient('getAllNodes').then(({allNodes}) => allNodes);
-  };
-
-  static defaultPersistedState = {
-    rootElement: null,
-    rootAXElement: null,
-    elements: {},
-    AXelements: {},
-  };
-
-  state = {
-    init: false,
-    inTargetMode: false,
-    inAXMode: false,
-    inAlignmentMode: false,
-    selectedElement: null,
-    selectedAXElement: null,
-    searchResults: null,
-  };
-
-  init() {
-    if (!this.props.persistedState) {
-      // If the selected plugin from the previous session was layout, then while importing the flipper trace, the redux store doesn't get updated in the first render, due to which the plugin crashes, as it has no persisted state
-      this.props.setPersistedState(this.constructor.defaultPersistedState);
-    }
-    // persist searchActive state when moving between plugins to prevent multiple
-    // TouchOverlayViews since we can't edit the view heirarchy in onDisconnect
-    this.client.call('isSearchActive').then(({isSearchActive}) => {
-      this.setState({inTargetMode: isSearchActive});
-    });
-
-    // disable target mode after
-    this.client.subscribe('select', () => {
-      if (this.state.inTargetMode) {
-        this.onToggleTargetMode();
-      }
-    });
-
-    this.setState({init: true});
-  }
-
-  onToggleTargetMode = () => {
-    const inTargetMode = !this.state.inTargetMode;
-    this.setState({inTargetMode});
-    this.client.send('setSearchActive', {active: inTargetMode});
-  };
-
-  onToggleAXMode = () => {
-    this.setState({inAXMode: !this.state.inAXMode});
-  };
-
-  getClient(): PluginClient {
-    return this.props.isArchivedDevice
-      ? new ProxyArchiveClient(this.props.persistedState)
-      : this.client;
-  }
-  onToggleAlignmentMode = () => {
-    if (this.state.selectedElement) {
-      this.client.send('setHighlighted', {
-        id: this.state.selectedElement,
-        inAlignmentMode: !this.state.inAlignmentMode,
-      });
-    }
-    this.setState({inAlignmentMode: !this.state.inAlignmentMode});
-  };
-
-  onDataValueChanged = (path: Array<string>, value: any) => {
-    const id = this.state.inAXMode
-      ? this.state.selectedAXElement
-      : this.state.selectedElement;
-    this.client.call('setData', {
-      id,
-      path,
-      value,
-      ax: this.state.inAXMode,
-    });
-  };
-
-  render() {
-    const inspectorProps = {
-      client: this.getClient(),
-      inAlignmentMode: this.state.inAlignmentMode,
-      selectedElement: this.state.selectedElement,
-      selectedAXElement: this.state.selectedAXElement,
-      setPersistedState: this.props.setPersistedState,
-      persistedState: this.props.persistedState,
-      onDataValueChanged: this.onDataValueChanged,
-      searchResults: this.state.searchResults,
-    };
-
-    let element;
-    if (this.state.inAXMode && this.state.selectedAXElement) {
-      element = this.props.persistedState.AXelements[
-        this.state.selectedAXElement
-      ];
-    } else if (this.state.selectedElement) {
-      element = this.props.persistedState.elements[this.state.selectedElement];
-    }
-
-    const inspector = (
-      <Inspector
-        {...inspectorProps}
-        onSelect={selectedElement => this.setState({selectedElement})}
-        showsSidebar={!this.state.inAXMode}
-      />
-    );
-
-    return (
-      <FlexColumn grow={true}>
-        {this.state.init && (
-          <>
-            <Toolbar>
-              {!this.props.isArchivedDevice && (
-                <ToolbarIcon
-                  onClick={this.onToggleTargetMode}
-                  title="Toggle target mode"
-                  icon="target"
-                  active={this.state.inTargetMode}
-                />
-              )}
-              {this.realClient.query.os === 'Android' && (
-                <ToolbarIcon
-                  onClick={this.onToggleAXMode}
-                  title="Toggle to see the accessibility hierarchy"
-                  icon="accessibility"
-                  active={this.state.inAXMode}
-                />
-              )}
-              {!this.props.isArchivedDevice && (
-                <ToolbarIcon
-                  onClick={this.onToggleAlignmentMode}
-                  title="Toggle AlignmentMode to show alignment lines"
-                  icon="borders"
-                  active={this.state.inAlignmentMode}
-                />
-              )}
-
-              <Search
-                client={this.getClient()}
-                setPersistedState={this.props.setPersistedState}
-                persistedState={this.props.persistedState}
-                onSearchResults={searchResults =>
-                  this.setState({searchResults})
-                }
-                inAXMode={this.state.inAXMode}
-              />
-            </Toolbar>
-
-            <FlexRow grow={true}>
-              {this.state.inAXMode ? (
-                <>
-                  <Sidebar position="left" maxWidth={Infinity}>
-                    {inspector}
-                  </Sidebar>
-                  <Inspector
-                    {...inspectorProps}
-                    onSelect={selectedAXElement =>
-                      this.setState({selectedAXElement})
-                    }
-                    showsSidebar={true}
-                    ax
-                  />
-                </>
-              ) : (
-                inspector
-              )}
-            </FlexRow>
-            <DetailSidebar>
-              <InspectorSidebar
-                client={this.getClient()}
-                realClient={this.realClient}
-                element={element}
-                onValueChanged={this.onDataValueChanged}
-                logger={this.props.logger}
-              />
-            </DetailSidebar>
-          </>
-        )}
-        {/* TODO: Remove this when rolling out publicly */}
-        <BetaBar position="bottom" compact>
-          <Glyph name="beta" color="#8157C7" />
-          &nbsp;
-          <strong>Version 2.0:</strong>&nbsp; Provide feedback about this plugin
-          in our&nbsp;
-          <Link href="https://fb.workplace.com/groups/246035322947653/">
-            feedback group
-          </Link>
-          .
-        </BetaBar>
-      </FlexColumn>
-    );
-  }
-}

src/plugins/layout/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "deep-equal": "^1.0.1",
-    "lodash": "^4.17.11",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8"
   },
   "title": "Layout",

src/plugins/layout/yarn.lock

@@ -7,11 +7,12 @@ deep-equal@^1.0.1:
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
   integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-
-lodash@^4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=