Fix layout plugin source import violation

Summary: Fixed direct source import of Flipper code from layout plugin which broke its packaging

Reviewed By: cekkaewnumchai

Differential Revision: D22135716

fbshipit-source-id: 8f67a21ed94c13dd73d24ef8692d37ae51963319

desktop/app/src/index.tsx

@@ -175,7 +175,10 @@ export {
   ElementSearchResultSet,
   ElementsInspectorProps,
 } from './ui/components/elements-inspector/ElementsInspector';
-export {Elements} from './ui/components/elements-inspector/elements';
+export {
+  Elements,
+  ElementsConstants,
+} from './ui/components/elements-inspector/elements';
 export {ContextMenuExtension} from './ui/components/elements-inspector/elements';
 export {default as ElementsInspector} from './ui/components/elements-inspector/ElementsInspector';
 export {InspectorSidebar} from './ui/components/elements-inspector/sidebar';

desktop/app/src/ui/components/elements-inspector/elements.tsx

@@ -20,7 +20,9 @@ import {clipboard, MenuItemConstructorOptions} from 'electron';
 import React, {MouseEvent, KeyboardEvent} from 'react';
 import {Scrollable} from '../..';
 
-export const ROW_HEIGHT = 23;
+export const ElementsConstants = {
+  rowHeight: 23,
+};
 
 const backgroundColor = (props: {
   selected: boolean;
@@ -58,7 +60,7 @@ const ElementsRowContainer = styled(ContextMenu)<any>((props) => ({
   color: props.selected || props.focused ? colors.white : colors.grapeDark3,
   flexShrink: 0,
   flexWrap: 'nowrap',
-  height: ROW_HEIGHT,
+  height: ElementsConstants.rowHeight,
   paddingLeft: (props.level - 1) * 12,
   paddingRight: 20,
   position: 'relative',
@@ -86,10 +88,10 @@ ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';
 
 const ElementsLine = styled.div<{childrenCount: number}>((props) => ({
   backgroundColor: colors.light20,
-  height: props.childrenCount * ROW_HEIGHT - 4,
+  height: props.childrenCount * ElementsConstants.rowHeight - 4,
   position: 'absolute',
   right: 3,
-  top: ROW_HEIGHT - 3,
+  top: ElementsConstants.rowHeight - 3,
   zIndex: 2,
   width: 2,
   borderRadius: '999em',

desktop/plugins/layout/MultipleSelectionSection.tsx

@@ -11,6 +11,7 @@ import {
   FlexColumn,
   FlexBox,
   Element,
+  ElementsConstants,
   ElementID,
   ElementsInspector,
   Glyph,
@@ -18,10 +19,9 @@ import {
   styled,
 } from 'flipper';
 import React, {memo, useState} from 'react';
-import {ROW_HEIGHT} from '../../app/src/ui/components/elements-inspector/elements';
 
 const MultipleSelectorSectionContainer = styled(FlexColumn)({
-  maxHeight: 3 * ROW_HEIGHT + 24,
+  maxHeight: 3 * ElementsConstants.rowHeight + 24,
 });
 
 const MultipleSelectorSectionTitle = styled(FlexBox)({