From 0a8222410cb2039c1013c3ceb1783d86f212f067 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Fri, 15 Nov 2019 02:08:05 -0800 Subject: [PATCH] Fix React devtools experience Summary: Currently most components are shown anonymously in the component tree, because using `styled` creates unnamed components, shown as the HTML elements they result in. This has two downsides: 1. React errors / warnings are really vague and it is hard to locate where they are coming from 2. The React Devtools don't show which components are rendering. 3. The effect of the latter it is hard to copy-from-example when developing plugins. This leads to a lot of inconsitency and duplication in the layouts of components Reviewed By: jknoxville Differential Revision: D18503675 fbshipit-source-id: 5a9ea1765346fb4c6a49e37ffa4d0b4bbcd86587 --- .../__tests__/__snapshots__/index.node.tsx.snap | 12 ++++++------ src/ui/components/Block.tsx | 8 +++++++- src/ui/components/Box.tsx | 5 ++++- src/ui/components/Button.tsx | 2 ++ src/ui/components/ButtonGroup.tsx | 1 + src/ui/components/ButtonGroupChain.tsx | 2 ++ src/ui/components/Checkbox.tsx | 1 + src/ui/components/CodeBlock.tsx | 5 ++++- src/ui/components/ContextMenuProvider.tsx | 1 + src/ui/components/ErrorBlock.tsx | 1 + src/ui/components/ErrorBoundary.tsx | 2 ++ src/ui/components/FlexBox.tsx | 5 ++++- src/ui/components/FlexCenter.tsx | 5 ++++- src/ui/components/FlexColumn.tsx | 5 ++++- src/ui/components/FlexRow.tsx | 5 ++++- src/ui/components/FocusableBox.tsx | 1 + src/ui/components/Glyph.tsx | 4 +++- src/ui/components/Heading.tsx | 2 ++ src/ui/components/HorizontalRule.tsx | 5 ++++- src/ui/components/Input.tsx | 2 ++ src/ui/components/Interactive.tsx | 1 + src/ui/components/Label.tsx | 5 ++++- src/ui/components/Link.tsx | 1 + src/ui/components/LoadingIndicator.tsx | 2 ++ src/ui/components/MarkerTimeline.tsx | 4 ++++ src/ui/components/ModalOverlay.tsx | 1 + src/ui/components/MultiLineInput.tsx | 1 + src/ui/components/Orderable.tsx | 2 ++ src/ui/components/Panel.tsx | 1 + src/ui/components/Popover.tsx | 2 ++ src/ui/components/ResizeSensor.tsx | 1 + src/ui/components/Select.tsx | 3 +++ src/ui/components/Sidebar.tsx | 2 ++ src/ui/components/SidebarLabel.tsx | 5 ++++- src/ui/components/StackTrace.tsx | 6 ++++++ src/ui/components/StarButton.tsx | 1 + src/ui/components/StatusIndicator.tsx | 1 + src/ui/components/Tabs.tsx | 6 ++++++ src/ui/components/TabsContainer.tsx | 3 ++- src/ui/components/Text.tsx | 1 + src/ui/components/TextParagraph.tsx | 1 + src/ui/components/Textarea.tsx | 5 ++++- src/ui/components/ToggleSwitch.tsx | 3 +++ src/ui/components/Toolbar.tsx | 2 ++ src/ui/components/Tooltip.tsx | 1 + src/ui/components/TooltipProvider.tsx | 2 ++ src/ui/components/VerticalRule.tsx | 5 ++++- src/ui/components/View.tsx | 1 + src/ui/components/VirtualList.tsx | 2 ++ src/ui/components/data-inspector/DataDescription.tsx | 10 ++++++++++ src/ui/components/data-inspector/DataInspector.tsx | 6 ++++++ src/ui/components/data-inspector/DataPreview.tsx | 1 + src/ui/components/desktop-toolbar.tsx | 5 +++++ src/ui/components/elements-inspector/elements.tsx | 11 +++++++++++ src/ui/components/filter/FilterRow.tsx | 1 + src/ui/components/searchable/FilterToken.tsx | 4 ++++ src/ui/components/searchable/Searchable.tsx | 8 ++++++++ src/ui/components/table/ManagedTable.tsx | 1 + src/ui/components/table/ManagedTable_immutable.tsx | 1 + src/ui/components/table/TableHead.tsx | 6 ++++++ src/ui/components/table/TableRow.tsx | 2 ++ src/ui/components/table/TypeBasedValueRenderer.tsx | 2 ++ 62 files changed, 183 insertions(+), 20 deletions(-) diff --git a/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap b/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap index 7f6c3d28b..ed6cc0b24 100644 --- a/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap +++ b/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap @@ -5,28 +5,28 @@ exports[`notifications for leaks 1`] = ` CloseableReference leaked for - com.facebook.imagepipeline.memory.NativeMemoryChunk - + (identity hashcode: deadbeef ). - Stacktrace: - + - <unavailable> - + `; diff --git a/src/ui/components/Block.tsx b/src/ui/components/Block.tsx index b78305538..93c8844be 100644 --- a/src/ui/components/Block.tsx +++ b/src/ui/components/Block.tsx @@ -9,6 +9,12 @@ import styled from 'react-emotion'; -export default styled('div')({ +/** + * A Block styled div + */ +const Block = styled('div')({ display: 'block', }); +Block.displayName = 'Block'; + +export default Block; diff --git a/src/ui/components/Box.tsx b/src/ui/components/Box.tsx index b347910b4..dd274f19f 100644 --- a/src/ui/components/Box.tsx +++ b/src/ui/components/Box.tsx @@ -10,9 +10,12 @@ import FlexBox from './FlexBox'; import styled from 'react-emotion'; -export default styled(FlexBox)({ +const Box = styled(FlexBox)({ height: '100%', overflow: 'auto', position: 'relative', width: '100%', }); +Box.displayName = 'Box'; + +export default Box; diff --git a/src/ui/components/Button.tsx b/src/ui/components/Button.tsx index d803ac012..e7893bdb9 100644 --- a/src/ui/components/Button.tsx +++ b/src/ui/components/Button.tsx @@ -185,10 +185,12 @@ const StyledButton = styled('div')( }, }), ); +StyledButton.displayName = 'Button:StyledButton'; const Icon = styled(Glyph)(({hasText}: {hasText: boolean}) => ({ marginRight: hasText ? 3 : 0, })); +Icon.displayName = 'Button:Icon'; type OwnProps = { /** diff --git a/src/ui/components/ButtonGroup.tsx b/src/ui/components/ButtonGroup.tsx index 12f0a9f72..69d895e58 100644 --- a/src/ui/components/ButtonGroup.tsx +++ b/src/ui/components/ButtonGroup.tsx @@ -18,6 +18,7 @@ const ButtonGroupContainer = styled('div')({ marginLeft: 0, }, }); +ButtonGroupContainer.displayName = 'ButtonGroup:ButtonGroupContainer'; /** * Group a series of buttons together. diff --git a/src/ui/components/ButtonGroupChain.tsx b/src/ui/components/ButtonGroupChain.tsx index d825bff27..4aea750ce 100644 --- a/src/ui/components/ButtonGroupChain.tsx +++ b/src/ui/components/ButtonGroupChain.tsx @@ -19,6 +19,7 @@ const IconContainer = styled('div')({ alignItems: 'center', pointerEvents: 'none', }); +IconContainer.displayName = 'ButtonGroupChain:IconContainer'; const ButtonGroupChainContainer = styled('div')( (props: {iconSize: number}) => ({ @@ -39,6 +40,7 @@ const ButtonGroupChainContainer = styled('div')( }, }), ); +IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer'; type Props = { /** diff --git a/src/ui/components/Checkbox.tsx b/src/ui/components/Checkbox.tsx index 6af038eae..ec1052b56 100644 --- a/src/ui/components/Checkbox.tsx +++ b/src/ui/components/Checkbox.tsx @@ -23,6 +23,7 @@ const CheckboxContainer = styled('input')({ marginRight: 5, verticalAlign: 'middle', }); +CheckboxContainer.displayName = 'Checkbox:CheckboxContainer'; /** * A checkbox to toggle UI state diff --git a/src/ui/components/CodeBlock.tsx b/src/ui/components/CodeBlock.tsx index 4aeae7493..af784e4b9 100644 --- a/src/ui/components/CodeBlock.tsx +++ b/src/ui/components/CodeBlock.tsx @@ -9,6 +9,9 @@ import styled from 'react-emotion'; -export default styled('div')({ +const CodeBlock = styled('div')({ fontFamily: 'monospace', }); +CodeBlock.displayName = 'CodeBlock'; + +export default CodeBlock; diff --git a/src/ui/components/ContextMenuProvider.tsx b/src/ui/components/ContextMenuProvider.tsx index 8bde4b5cd..b8b89ae90 100644 --- a/src/ui/components/ContextMenuProvider.tsx +++ b/src/ui/components/ContextMenuProvider.tsx @@ -18,6 +18,7 @@ type MenuTemplate = Array; const Container = styled('div')({ display: 'contents', }); +Container.displayName = 'ContextMenuProvider:Container'; /** * Flipper's root is already wrapped with this component, so plugins should not diff --git a/src/ui/components/ErrorBlock.tsx b/src/ui/components/ErrorBlock.tsx index 2d074746b..46d607709 100644 --- a/src/ui/components/ErrorBlock.tsx +++ b/src/ui/components/ErrorBlock.tsx @@ -20,6 +20,7 @@ export const ErrorBlockContainer = styled(CodeBlock)({ padding: 10, whiteSpace: 'pre', }); +ErrorBlockContainer.displayName = 'ErrorBlock:ErrorBlockContainer'; /** * Displaying error messages in a red box. diff --git a/src/ui/components/ErrorBoundary.tsx b/src/ui/components/ErrorBoundary.tsx index 076abbdf1..dd60b78aa 100644 --- a/src/ui/components/ErrorBoundary.tsx +++ b/src/ui/components/ErrorBoundary.tsx @@ -19,11 +19,13 @@ const ErrorBoundaryContainer = styled(View)({ overflow: 'auto', padding: 10, }); +ErrorBoundaryContainer.displayName = 'ErrorBoundary:ErrorBoundaryContainer'; const ErrorBoundaryStack = styled(ErrorBlock)({ marginBottom: 10, whiteSpace: 'pre', }); +ErrorBoundaryStack.displayName = 'ErrorBoundary:ErrorBoundaryStack'; type ErrorBoundaryProps = { /** Function to dynamically generate the heading of the ErrorBox. */ diff --git a/src/ui/components/FlexBox.tsx b/src/ui/components/FlexBox.tsx index 1fa05c306..6e9429018 100644 --- a/src/ui/components/FlexBox.tsx +++ b/src/ui/components/FlexBox.tsx @@ -18,7 +18,10 @@ type Props = { /** * A container using flexbox to layout its children */ -export default styled(View)(({shrink}: Props) => ({ +const FlexBox = styled(View)(({shrink}: Props) => ({ display: 'flex', flexShrink: shrink == null || shrink ? 1 : 0, })); +FlexBox.displayName = 'FlexBox'; + +export default FlexBox; diff --git a/src/ui/components/FlexCenter.tsx b/src/ui/components/FlexCenter.tsx index baf0af3e8..0d875e8cc 100644 --- a/src/ui/components/FlexCenter.tsx +++ b/src/ui/components/FlexCenter.tsx @@ -13,8 +13,11 @@ import styled from 'react-emotion'; /** * A container displaying its children horizontally and vertically centered. */ -export default styled(View)({ +const FlexCenter = styled(View)({ display: 'flex', alignItems: 'center', justifyContent: 'center', }); +FlexCenter.displayName = 'FlexCenter'; + +export default FlexCenter; diff --git a/src/ui/components/FlexColumn.tsx b/src/ui/components/FlexColumn.tsx index cfec5f0d9..995bfcaf8 100644 --- a/src/ui/components/FlexColumn.tsx +++ b/src/ui/components/FlexColumn.tsx @@ -13,6 +13,9 @@ import styled from 'react-emotion'; /** * A container displaying its children in a column */ -export default styled(FlexBox)({ +const FlexColumn = styled(FlexBox)({ flexDirection: 'column', }); +FlexColumn.displayName = 'FlexColumn'; + +export default FlexColumn; diff --git a/src/ui/components/FlexRow.tsx b/src/ui/components/FlexRow.tsx index 656c8ed74..0004082a2 100644 --- a/src/ui/components/FlexRow.tsx +++ b/src/ui/components/FlexRow.tsx @@ -13,6 +13,9 @@ import styled from 'react-emotion'; /** * A container displaying its children in a row */ -export default styled(FlexBox)({ +const FlexRow = styled(FlexBox)({ flexDirection: 'row', }); +FlexRow.displayName = 'FlexRow'; + +export default FlexRow; diff --git a/src/ui/components/FocusableBox.tsx b/src/ui/components/FocusableBox.tsx index 39eab517b..1ac0ac8a8 100644 --- a/src/ui/components/FocusableBox.tsx +++ b/src/ui/components/FocusableBox.tsx @@ -22,6 +22,7 @@ const FocusableBoxBorder = styled(Box)({ right: '0', top: '0', }); +FocusableBoxBorder.displayName = 'FocusableBox:FocusableBoxBorder'; type Props = { onBlur?: (e: React.FocusEvent) => void; diff --git a/src/ui/components/Glyph.tsx b/src/ui/components/Glyph.tsx index 556f7a6ea..86744fec5 100644 --- a/src/ui/components/Glyph.tsx +++ b/src/ui/components/Glyph.tsx @@ -20,6 +20,7 @@ const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({ width: size, flexShrink: 0, })); +ColoredIconBlack.displayName = 'Glyph:ColoredIconBlack'; const ColoredIconCustom = styled('div')( (props: {size: number; color?: string; src: string}) => ({ @@ -35,6 +36,7 @@ const ColoredIconCustom = styled('div')( flexShrink: 0, }), ); +ColoredIconCustom.displayName = 'Glyph:ColoredIconCustom'; function ColoredIcon( props: { @@ -79,7 +81,7 @@ function ColoredIcon( ); } } - +ColoredIcon.displayName = 'Glyph:ColoredIcon'; ColoredIcon.contextTypes = { glyphColor: PropTypes.string, }; diff --git a/src/ui/components/Heading.tsx b/src/ui/components/Heading.tsx index 6b8091225..64d90b5b2 100644 --- a/src/ui/components/Heading.tsx +++ b/src/ui/components/Heading.tsx @@ -17,6 +17,7 @@ const LargeHeading = styled('div')({ borderBottom: '1px solid #ddd', marginBottom: 10, }); +LargeHeading.displayName = 'Heading:LargeHeading'; const SmallHeading = styled('div')({ fontSize: 12, @@ -25,6 +26,7 @@ const SmallHeading = styled('div')({ marginBottom: 10, textTransform: 'uppercase', }); +SmallHeading.displayName = 'Heading:SmallHeading'; /** * A heading component. diff --git a/src/ui/components/HorizontalRule.tsx b/src/ui/components/HorizontalRule.tsx index fd258beec..dc08b1198 100644 --- a/src/ui/components/HorizontalRule.tsx +++ b/src/ui/components/HorizontalRule.tsx @@ -9,8 +9,11 @@ import styled from 'react-emotion'; -export default styled('div')({ +const HorizontalRule = styled('div')({ backgroundColor: '#c9ced4', height: 1, margin: '5px 0', }); +HorizontalRule.displayName = 'HorizontalRule'; + +export default HorizontalRule; diff --git a/src/ui/components/Input.tsx b/src/ui/components/Input.tsx index d869246bf..26882fb2c 100644 --- a/src/ui/components/Input.tsx +++ b/src/ui/components/Input.tsx @@ -31,6 +31,8 @@ const Input = styled('input')(({compact}: {compact?: boolean}) => ({ padding: compact ? '0 5px' : '0 10px', })); +Input.displayName = 'Input'; + Input.defaultProps = { type: 'text', }; diff --git a/src/ui/components/Interactive.tsx b/src/ui/components/Interactive.tsx index d029e04e9..a8d565f09 100644 --- a/src/ui/components/Interactive.tsx +++ b/src/ui/components/Interactive.tsx @@ -93,6 +93,7 @@ type InteractiveState = { const InteractiveContainer = styled('div')({ willChange: 'transform, height, width, z-index', }); +InteractiveContainer.displayName = 'Interactive:InteractiveContainer'; export default class Interactive extends React.Component< InteractiveProps, diff --git a/src/ui/components/Label.tsx b/src/ui/components/Label.tsx index 4b400e968..fbac511e4 100644 --- a/src/ui/components/Label.tsx +++ b/src/ui/components/Label.tsx @@ -9,7 +9,10 @@ import styled from 'react-emotion'; -export default styled('div')({ +const Label = styled('div')({ fontSize: 12, fontWeight: 'bold', }); +Label.displayName = 'Label'; + +export default Label; diff --git a/src/ui/components/Link.tsx b/src/ui/components/Link.tsx index a916ccbcd..79c611156 100644 --- a/src/ui/components/Link.tsx +++ b/src/ui/components/Link.tsx @@ -20,6 +20,7 @@ const StyledLink = styled('span')({ textDecoration: 'underline', }, }); +StyledLink.displayName = 'Link:StyledLink'; export default class Link extends Component<{ href: string; diff --git a/src/ui/components/LoadingIndicator.tsx b/src/ui/components/LoadingIndicator.tsx index 6d997a002..9d69ee80a 100644 --- a/src/ui/components/LoadingIndicator.tsx +++ b/src/ui/components/LoadingIndicator.tsx @@ -30,6 +30,8 @@ const LoadingIndicator = styled('div')((props: {size: number}) => ({ borderLeftColor: 'rgba(0, 0, 0, 0.4)', })); +LoadingIndicator.displayName = 'LoadingIndicator'; + LoadingIndicator.defaultProps = { size: 50, }; diff --git a/src/ui/components/MarkerTimeline.tsx b/src/ui/components/MarkerTimeline.tsx index 8bc141dc9..8c130a3fe 100644 --- a/src/ui/components/MarkerTimeline.tsx +++ b/src/ui/components/MarkerTimeline.tsx @@ -43,6 +43,7 @@ const Markers = styled('div')((props: {totalTime: number}) => ({ left: 5, }, })); +Markers.displayName = 'MarkerTimeline:Markers'; const Point = styled(FlexRow)( (props: { @@ -104,6 +105,7 @@ const Point = styled(FlexRow)( }, }), ); +Point.displayName = 'MakerTimeline:Point'; const Time = styled('span')({ color: colors.light30, @@ -111,12 +113,14 @@ const Time = styled('span')({ marginRight: 4, marginTop: -2, }); +Time.displayName = 'MakerTimeline:Time'; const Code = styled(Text)({ overflow: 'hidden', textOverflow: 'ellipsis', marginTop: -1, }); +Code.displayName = 'MakerTimeline:Code'; type TimePoint = { timestamp: number; diff --git a/src/ui/components/ModalOverlay.tsx b/src/ui/components/ModalOverlay.tsx index a11cec32d..c319704b9 100644 --- a/src/ui/components/ModalOverlay.tsx +++ b/src/ui/components/ModalOverlay.tsx @@ -23,6 +23,7 @@ const Overlay = styled('div')({ top: 0, zIndex: 99999, }); +Overlay.displayName = 'ModalOverlay:Overlay'; export default class ModalOverlay extends Component<{ onClose: () => void; diff --git a/src/ui/components/MultiLineInput.tsx b/src/ui/components/MultiLineInput.tsx index b6a09ce17..7c54b9e22 100644 --- a/src/ui/components/MultiLineInput.tsx +++ b/src/ui/components/MultiLineInput.tsx @@ -30,5 +30,6 @@ const MultiLineInput = styled('textarea')({ ...multilineStyle, padding: '0 10px', }); +MultiLineInput.displayName = 'MultiLineInput'; export default MultiLineInput; diff --git a/src/ui/components/Orderable.tsx b/src/ui/components/Orderable.tsx index e827b25c8..449407ebd 100644 --- a/src/ui/components/Orderable.tsx +++ b/src/ui/components/Orderable.tsx @@ -41,12 +41,14 @@ type TabSizes = { const OrderableContainer = styled('div')({ position: 'relative', }); +OrderableContainer.displayName = 'Orderable:OrderableContainer'; const OrderableItemContainer = styled('div')( (props: {orientation: 'vertical' | 'horizontal'}) => ({ display: props.orientation === 'vertical' ? 'block' : 'inline-block', }), ); +OrderableItemContainer.displayName = 'Orderable:OrderableItemContainer'; class OrderableItem extends Component<{ orientation: OrderableOrientation; diff --git a/src/ui/components/Panel.tsx b/src/ui/components/Panel.tsx index 0d0a21902..85114af10 100644 --- a/src/ui/components/Panel.tsx +++ b/src/ui/components/Panel.tsx @@ -21,6 +21,7 @@ const Chevron = styled(Glyph)({ marginLeft: -2, marginBottom: 1, }); +Chevron.displayName = 'Panel:Chevron'; /** * A Panel component. diff --git a/src/ui/components/Popover.tsx b/src/ui/components/Popover.tsx index db0dd72e7..83955dcd5 100644 --- a/src/ui/components/Popover.tsx +++ b/src/ui/components/Popover.tsx @@ -19,6 +19,7 @@ const Anchor = styled('img')({ left: '50%', transform: 'translate(-50%, calc(100% + 2px))', }); +Anchor.displayName = 'Popover.Anchor'; type Opts = { minWidth?: number; @@ -56,6 +57,7 @@ const PopoverContainer = styled(FlexColumn)((props: {opts?: Opts}) => ({ backgroundColor: colors.white, }, })); +PopoverContainer.displayName = 'Popover:PopoverContainer'; type Props = { children: React.ReactNode; diff --git a/src/ui/components/ResizeSensor.tsx b/src/ui/components/ResizeSensor.tsx index e0fb09854..38d98bfc6 100644 --- a/src/ui/components/ResizeSensor.tsx +++ b/src/ui/components/ResizeSensor.tsx @@ -21,6 +21,7 @@ const IFrame = styled('iframe')({ top: 0, left: 0, }); +IFrame.displayName = 'ResizeSensor:IFrame'; /** * Listener for resize events. diff --git a/src/ui/components/Select.tsx b/src/ui/components/Select.tsx index d184bd5a6..b7f1e89a7 100644 --- a/src/ui/components/Select.tsx +++ b/src/ui/components/Select.tsx @@ -16,15 +16,18 @@ const Label = styled('label')({ display: 'flex', alignItems: 'center', }); +Label.displayName = 'Select:Label'; const LabelText = styled(Text)({ fontWeight: 500, marginRight: 5, }); +LabelText.displayName = 'Select:LabelText'; const SelectMenu = styled('select')((props: {grow?: boolean}) => ({ flexGrow: props.grow ? 1 : 0, })); +SelectMenu.displayName = 'Select:SelectMenu'; /** * Dropdown to select from a list of options diff --git a/src/ui/components/Sidebar.tsx b/src/ui/components/Sidebar.tsx index f64084457..f74ca9529 100644 --- a/src/ui/components/Sidebar.tsx +++ b/src/ui/components/Sidebar.tsx @@ -23,6 +23,7 @@ import React from 'react'; const SidebarInteractiveContainer = styled(Interactive)({ flex: 'none', }); +SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer'; type SidebarPosition = 'left' | 'top' | 'right' | 'bottom'; @@ -45,6 +46,7 @@ const SidebarContainer = styled(FlexColumn)( whiteSpace: props.overflow ? 'nowrap' : 'normal', }), ); +SidebarContainer.displayName = 'Sidebar:SidebarContainer'; type SidebarProps = { /** diff --git a/src/ui/components/SidebarLabel.tsx b/src/ui/components/SidebarLabel.tsx index 6b750b444..80544001b 100644 --- a/src/ui/components/SidebarLabel.tsx +++ b/src/ui/components/SidebarLabel.tsx @@ -11,8 +11,11 @@ import {colors} from './colors'; import Label from './Label'; import styled from 'react-emotion'; -export default styled(Label)({ +const SidebarLabel = styled(Label)({ color: colors.blackAlpha30, fontSize: 12, padding: 10, }); +SidebarLabel.displayName = 'SidebarLabel'; + +export default SidebarLabel; diff --git a/src/ui/components/StackTrace.tsx b/src/ui/components/StackTrace.tsx index f6988ec3b..0f6f052ba 100644 --- a/src/ui/components/StackTrace.tsx +++ b/src/ui/components/StackTrace.tsx @@ -35,6 +35,7 @@ const Padder = styled('div')( backgroundColor, }), ); +Padder.displayName = 'StackTrace:Padder'; const Container = styled('div')( ({isCrash, padded}: {isCrash?: boolean; padded?: boolean}) => ({ @@ -46,6 +47,7 @@ const Container = styled('div')( overflow: 'hidden', }), ); +Container.displayName = 'StackTrace:Container'; const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({ color: isCrash ? colors.red : 'inherit', @@ -53,12 +55,14 @@ const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({ alignItems: 'center', minHeight: 32, })); +Title.displayName = 'StackTrace:Title'; const Reason = styled(Text)(({isCrash}: {isCrash?: boolean}) => ({ color: isCrash ? colors.red : colors.light80, fontWeight: 'bold', fontSize: 13, })); +Reason.displayName = 'StackTrace:Reason'; const Line = styled(Text)( ({isCrash, isBold}: {isCrash?: boolean; isBold?: boolean}) => ({ @@ -66,8 +70,10 @@ const Line = styled(Text)( fontWeight: isBold ? 'bold' : 'normal', }), ); +Line.displayName = 'StackTrace:Line'; const Icon = styled(Glyph)({marginRight: 5}); +Icon.displayName = 'StackTrace:Icon'; const COLUMNS = { lineNumber: 40, diff --git a/src/ui/components/StarButton.tsx b/src/ui/components/StarButton.tsx index 01b2927e4..87d9eefba 100644 --- a/src/ui/components/StarButton.tsx +++ b/src/ui/components/StarButton.tsx @@ -18,6 +18,7 @@ const DownscaledGlyph = styled(Glyph)({ height: 12, width: 12, }); +DownscaledGlyph.displayName = 'StarButton:DownscaledGlyph'; export function StarButton({ starred, diff --git a/src/ui/components/StatusIndicator.tsx b/src/ui/components/StatusIndicator.tsx index 8ff098657..3c821035e 100644 --- a/src/ui/components/StatusIndicator.tsx +++ b/src/ui/components/StatusIndicator.tsx @@ -29,5 +29,6 @@ const StatusIndicator = styled('div')( width: diameter, }), ); +StatusIndicator.displayName = 'StatusIndicator'; export default StatusIndicator; diff --git a/src/ui/components/Tabs.tsx b/src/ui/components/Tabs.tsx index 51d903e26..f5000d673 100644 --- a/src/ui/components/Tabs.tsx +++ b/src/ui/components/Tabs.tsx @@ -21,6 +21,7 @@ const TabList = styled(FlexRow)({ justifyContent: 'center', alignItems: 'stretch', }); +TabList.displayName = 'Tabs:TabList'; const TabListItem = styled('div')( (props: { @@ -65,6 +66,7 @@ const TabListItem = styled('div')( }, }), ); +TabListItem.displayName = 'Tabs:TabListItem'; const TabListAddItem = styled(TabListItem)({ borderRight: 'none', @@ -72,6 +74,7 @@ const TabListAddItem = styled(TabListItem)({ flexGrow: 0, fontWeight: 'bold', }); +TabListAddItem.displayName = 'Tabs:TabListAddItem'; const CloseButton = styled('div')({ color: '#000', @@ -91,16 +94,19 @@ const CloseButton = styled('div')({ color: '#fff', }, }); +CloseButton.displayName = 'Tabs:CloseButton'; const OrderableContainer = styled('div')({ display: 'inline-block', }); +OrderableContainer.displayName = 'Tabs:OrderableContainer'; const TabContent = styled('div')({ height: '100%', overflow: 'auto', width: '100%', }); +TabContent.displayName = 'Tabs:TabContent'; /** * A Tabs component. diff --git a/src/ui/components/TabsContainer.tsx b/src/ui/components/TabsContainer.tsx index 50550f7a0..5734da705 100644 --- a/src/ui/components/TabsContainer.tsx +++ b/src/ui/components/TabsContainer.tsx @@ -19,10 +19,11 @@ const Container = styled('div')({ marginTop: 11, marginBottom: 10, }); +Container.displayName = 'TabsContainer:Container'; export const TabsContext = React.createContext(true); -export default function(props: {children: any}) { +export default function TabsContainer(props: {children: any}) { return ( {props.children} diff --git a/src/ui/components/Text.tsx b/src/ui/components/Text.tsx index c79425474..1d4cece94 100644 --- a/src/ui/components/Text.tsx +++ b/src/ui/components/Text.tsx @@ -55,5 +55,6 @@ const Text = styled('span')( : props.whiteSpace, }), ); +Text.displayName = 'Text'; export default Text; diff --git a/src/ui/components/TextParagraph.tsx b/src/ui/components/TextParagraph.tsx index 74ca4d1d3..63db0e5d1 100644 --- a/src/ui/components/TextParagraph.tsx +++ b/src/ui/components/TextParagraph.tsx @@ -19,5 +19,6 @@ const TextParagraph = styled('div')({ marginBottom: 0, }, }); +TextParagraph.displayName = 'TextParagraph'; export default TextParagraph; diff --git a/src/ui/components/Textarea.tsx b/src/ui/components/Textarea.tsx index 7f3a18faf..117b812dc 100644 --- a/src/ui/components/Textarea.tsx +++ b/src/ui/components/Textarea.tsx @@ -10,9 +10,12 @@ import styled from 'react-emotion'; import {inputStyle} from './Input'; -export default styled('textarea')(({compact}: {compact?: boolean}) => ({ +const Textarea = styled('textarea')(({compact}: {compact?: boolean}) => ({ ...inputStyle(compact || false), lineHeight: 'normal', padding: compact ? '5px' : '8px', resize: 'none', })); +Textarea.displayName = 'Textarea'; + +export default Textarea; diff --git a/src/ui/components/ToggleSwitch.tsx b/src/ui/components/ToggleSwitch.tsx index 465b458d3..8438e006b 100644 --- a/src/ui/components/ToggleSwitch.tsx +++ b/src/ui/components/ToggleSwitch.tsx @@ -34,16 +34,19 @@ export const StyledButton = styled('div')((props: {toggled: boolean}) => ({ transition: 'all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s', }, })); +StyledButton.displayName = 'ToggleSwitch:StyledButton'; const Container = styled(FlexRow)({ alignItems: 'center', cursor: 'pointer', }); +Container.displayName = 'ToggleSwitch:Container'; const Label = styled(Text)({ marginLeft: 7, marginRight: 7, }); +Label.displayName = 'ToggleSwitch:Label'; type Props = { /** diff --git a/src/ui/components/Toolbar.tsx b/src/ui/components/Toolbar.tsx index 9da6e6625..fca94f62c 100644 --- a/src/ui/components/Toolbar.tsx +++ b/src/ui/components/Toolbar.tsx @@ -34,9 +34,11 @@ const Toolbar = styled(FlexRow)( width: '100%', }), ); +Toolbar.displayName = 'Toolbar'; export const Spacer = styled(FlexBox)({ flexGrow: 1, }); +Spacer.displayName = 'Spacer'; export default Toolbar; diff --git a/src/ui/components/Tooltip.tsx b/src/ui/components/Tooltip.tsx index 43e04bc7d..6104e1739 100644 --- a/src/ui/components/Tooltip.tsx +++ b/src/ui/components/Tooltip.tsx @@ -15,6 +15,7 @@ import PropTypes from 'prop-types'; const TooltipContainer = styled('div')({ display: 'contents', }); +TooltipContainer.displayName = 'Tooltip:TooltipContainer'; type TooltipProps = { /** Content shown in the tooltip */ diff --git a/src/ui/components/TooltipProvider.tsx b/src/ui/components/TooltipProvider.tsx index d151921f1..207907280 100644 --- a/src/ui/components/TooltipProvider.tsx +++ b/src/ui/components/TooltipProvider.tsx @@ -83,6 +83,7 @@ const TooltipBubble = styled('div')( color: props.options.color, }), ); +TooltipBubble.displayName = 'TooltipProvider:TooltipBubble'; // vertical offset on bubble when position is 'below' const BUBBLE_BELOW_POSITION_VERTICAL_OFFSET = -10; @@ -120,6 +121,7 @@ const TooltipTail = styled('div')( right: props.right, }), ); +TooltipTail.displayName = 'TooltipProvider:TooltipTail'; type TooltipProps = { children: React.ReactNode; diff --git a/src/ui/components/VerticalRule.tsx b/src/ui/components/VerticalRule.tsx index b10c569c2..98c3ee502 100644 --- a/src/ui/components/VerticalRule.tsx +++ b/src/ui/components/VerticalRule.tsx @@ -9,8 +9,11 @@ import styled from 'react-emotion'; -export default styled('div')({ +const VerticalRule = styled('div')({ backgroundColor: '#c9ced4', width: 3, margin: '0', }); +VerticalRule.displayName = 'VerticalRule'; + +export default VerticalRule; diff --git a/src/ui/components/View.tsx b/src/ui/components/View.tsx index b42fd1444..cfb7c980c 100644 --- a/src/ui/components/View.tsx +++ b/src/ui/components/View.tsx @@ -20,5 +20,6 @@ const View = styled('div')((props: Props) => ({ position: 'relative', width: props.grow ? '100%' : 'auto', })); +View.displayName = 'View'; export default View; diff --git a/src/ui/components/VirtualList.tsx b/src/ui/components/VirtualList.tsx index 15b759c95..b15102892 100644 --- a/src/ui/components/VirtualList.tsx +++ b/src/ui/components/VirtualList.tsx @@ -24,6 +24,7 @@ const Inner = styled(FlexColumn)( width: '100%', }), ); +Inner.displayName = 'VirtualList:Inner'; const Content = styled(FlexColumn)(({top}: {top: TopProperty}) => ({ alignItems: 'flex-start', @@ -32,6 +33,7 @@ const Content = styled(FlexColumn)(({top}: {top: TopProperty}) => ({ minWidth: '100%', overflow: 'visible', })); +Content.displayName = 'VirtualList:Content'; type VirtualListProps = { data: Array; diff --git a/src/ui/components/data-inspector/DataDescription.tsx b/src/ui/components/data-inspector/DataDescription.tsx index 7b3750b16..60405ed15 100644 --- a/src/ui/components/data-inspector/DataDescription.tsx +++ b/src/ui/components/data-inspector/DataDescription.tsx @@ -21,26 +21,32 @@ import React, {KeyboardEvent} from 'react'; const NullValue = styled('span')({ color: 'rgb(128, 128, 128)', }); +NullValue.displayName = 'DataDescription:NullValue'; const UndefinedValue = styled('span')({ color: 'rgb(128, 128, 128)', }); +UndefinedValue.displayName = 'DataDescription:UndefinedValue'; const StringValue = styled('span')({ color: colors.cherryDark1, }); +StringValue.displayName = 'DataDescription:StringValue'; const ColorValue = styled('span')({ color: colors.blueGrey, }); +ColorValue.displayName = 'DataDescription:ColorValue'; const SymbolValue = styled('span')({ color: 'rgb(196, 26, 22)', }); +SymbolValue.displayName = 'DataDescription:SymbolValue'; const NumberValue = styled('span')({ color: colors.tealDark1, }); +NumberValue.displayName = 'DataDescription:NumberValue'; const ColorBox = styled('span')((props: {color: string}) => ({ backgroundColor: props.color, @@ -51,20 +57,24 @@ const ColorBox = styled('span')((props: {color: string}) => ({ verticalAlign: 'middle', width: 12, })); +ColorBox.displayName = 'DataDescription:ColorBox'; const FunctionKeyword = styled('span')({ color: 'rgb(170, 13, 145)', fontStyle: 'italic', }); +FunctionKeyword.displayName = 'DataDescription:FunctionKeyword'; const FunctionName = styled('span')({ fontStyle: 'italic', }); +FunctionName.displayName = 'DataDescription:FunctionName'; const ColorPickerDescription = styled('div')({ display: 'inline', position: 'relative', }); +ColorPickerDescription.displayName = 'DataDescription:ColorPickerDescription'; type DataDescriptionProps = { path?: Array; diff --git a/src/ui/components/data-inspector/DataInspector.tsx b/src/ui/components/data-inspector/DataInspector.tsx index 4b9cf8cfb..3543ac7e3 100644 --- a/src/ui/components/data-inspector/DataInspector.tsx +++ b/src/ui/components/data-inspector/DataInspector.tsx @@ -34,18 +34,22 @@ const BaseContainer = styled('div')( userSelect: 'text', }), ); +BaseContainer.displayName = 'DataInspector:BaseContainer'; const RecursiveBaseWrapper = styled('span')({ color: colors.red, }); +RecursiveBaseWrapper.displayName = 'DataInspector:RecursiveBaseWrapper'; const Wrapper = styled('span')({ color: '#555', }); +Wrapper.displayName = 'DataInspector:Wrapper'; const PropertyContainer = styled('span')({ paddingTop: '2px', }); +PropertyContainer.displayName = 'DataInspector:PropertyContainer'; const ExpandControl = styled('span')({ color: '#6e6e6e', @@ -54,10 +58,12 @@ const ExpandControl = styled('span')({ marginRight: 5, whiteSpace: 'pre', }); +ExpandControl.displayName = 'DataInspector:ExpandControl'; export const InspectorName = styled('span')({ color: colors.grapeDark1, }); +InspectorName.displayName = 'DataInspector:InspectorName'; const nameTooltipOptions: TooltipOptions = { position: 'toLeft', diff --git a/src/ui/components/data-inspector/DataPreview.tsx b/src/ui/components/data-inspector/DataPreview.tsx index e1165dce6..7b71e9d95 100755 --- a/src/ui/components/data-inspector/DataPreview.tsx +++ b/src/ui/components/data-inspector/DataPreview.tsx @@ -17,6 +17,7 @@ import React from 'react'; const PreviewContainer = styled('span')({ fontStyle: 'italic', }); +PreviewContainer.displayName = 'DataPreview:PreviewContainer'; function intersperse(arr: Array, sep: string) { if (arr.length === 0) { diff --git a/src/ui/components/desktop-toolbar.tsx b/src/ui/components/desktop-toolbar.tsx index 54427cb0f..57834a33e 100644 --- a/src/ui/components/desktop-toolbar.tsx +++ b/src/ui/components/desktop-toolbar.tsx @@ -27,6 +27,8 @@ const DesktopDropdownContainer = styled('div')({ borderBottom: 'none', }, }); +DesktopDropdownContainer.displayName = + 'DesktopDropdown:DesktopDropdownContainer'; export function DesktopDropdown(props: { deactivate?: () => void; @@ -57,6 +59,8 @@ const DesktopDropdownItemContainer = styled('div')( }, }), ); +DesktopDropdownItemContainer.displayName = + 'DesktopDropdownItem:DesktopDropdownItemContainer'; type DesktopDropdownItemState = {hovered: boolean}; @@ -126,3 +130,4 @@ export const DesktopDropdownSelectedItem = styled(DesktopDropdownItem)({ position: 'absolute', }, }); +DesktopDropdownSelectedItem.displayName = 'DesktopDropdownSelectedItem'; diff --git a/src/ui/components/elements-inspector/elements.tsx b/src/ui/components/elements-inspector/elements.tsx index bb4119329..eba907fe9 100644 --- a/src/ui/components/elements-inspector/elements.tsx +++ b/src/ui/components/elements-inspector/elements.tsx @@ -72,6 +72,7 @@ const ElementsRowContainer = styled(ContextMenu)((props: any) => ({ backgroundColor: backgroundColorHover(props), }, })); +ElementsRowContainer.displayName = 'Elements:ElementsRowContainer'; const ElementsRowDecoration = styled(FlexRow)({ flexShrink: 0, @@ -82,6 +83,7 @@ const ElementsRowDecoration = styled(FlexRow)({ width: 16, top: -1, }); +ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration'; const ElementsLine = styled('div')((props: {childrenCount: number}) => ({ backgroundColor: colors.light20, @@ -93,12 +95,14 @@ const ElementsLine = styled('div')((props: {childrenCount: number}) => ({ width: 2, borderRadius: '999em', })); +ElementsLine.displayName = 'Elements:ElementsLine'; const DecorationImage = styled('img')({ height: 12, marginRight: 5, width: 12, }); +DecorationImage.displayName = 'Elements:DecorationImage'; const NoShrinkText = styled(Text)({ flexShrink: 0, @@ -107,20 +111,25 @@ const NoShrinkText = styled(Text)({ userSelect: 'none', fontWeight: 400, }); +NoShrinkText.displayName = 'Elements:NoShrinkText'; const ElementsRowAttributeContainer = styled(NoShrinkText)({ color: colors.dark80, fontWeight: 300, marginLeft: 5, }); +ElementsRowAttributeContainer.displayName = + 'Elements:ElementsRowAttributeContainer'; const ElementsRowAttributeKey = styled('span')({ color: colors.tomato, }); +ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey'; const ElementsRowAttributeValue = styled('span')({ color: colors.slateDark3, }); +ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue'; class PartialHighlight extends PureComponent<{ selected: boolean; @@ -403,12 +412,14 @@ const ElementsContainer = styled(FlexColumn)({ minWidth: '100%', overflow: 'auto', }); +ElementsContainer.displayName = 'Elements:ElementsContainer'; const ElementsBox = styled(FlexColumn)({ alignItems: 'flex-start', flex: 1, overflow: 'auto', }); +ElementsBox.displayName = 'Elements:ElementsBox'; export type DecorateRow = (e: Element) => ReactElement | undefined | null; diff --git a/src/ui/components/filter/FilterRow.tsx b/src/ui/components/filter/FilterRow.tsx index c045a7414..d60acdd82 100644 --- a/src/ui/components/filter/FilterRow.tsx +++ b/src/ui/components/filter/FilterRow.tsx @@ -40,6 +40,7 @@ const FilterText = styled('div')({ color: `${colors.white} !important`, }, }); +FilterText.displayName = 'FilterRow:FilterText'; type Props = { children: React.ReactNode; diff --git a/src/ui/components/searchable/FilterToken.tsx b/src/ui/components/searchable/FilterToken.tsx index 05e4697a2..08edf952f 100644 --- a/src/ui/components/searchable/FilterToken.tsx +++ b/src/ui/components/searchable/FilterToken.tsx @@ -39,6 +39,7 @@ const Token = styled(Text)( }, }), ); +Token.displayName = 'FilterToken:Token'; const Key = styled(Text)( (props: {type: 'exclude' | 'include' | 'enum'; focused?: boolean}) => ({ @@ -60,6 +61,7 @@ const Key = styled(Text)( }, }), ); +Key.displayName = 'FilterToken:Key'; const Value = styled(Text)({ whiteSpace: 'nowrap', @@ -69,6 +71,7 @@ const Value = styled(Text)({ lineHeight: '21px', paddingLeft: 3, }); +Value.displayName = 'FilterToken:Value'; const Chevron = styled('div')((props: {focused?: boolean}) => ({ border: 0, @@ -88,6 +91,7 @@ const Chevron = styled('div')((props: {focused?: boolean}) => ({ backgroundColor: 'transparent', }, })); +Chevron.displayName = 'FilterToken:Chevron'; type Props = { filter: Filter; diff --git a/src/ui/components/searchable/Searchable.tsx b/src/ui/components/searchable/Searchable.tsx index 2254e7427..cd962a97f 100644 --- a/src/ui/components/searchable/Searchable.tsx +++ b/src/ui/components/searchable/Searchable.tsx @@ -27,6 +27,7 @@ const SearchBar = styled(Toolbar)({ height: 42, padding: 6, }); +SearchBar.displayName = 'Searchable:SearchBar'; export const SearchBox = styled(FlexBox)({ backgroundColor: colors.white, @@ -37,6 +38,7 @@ export const SearchBox = styled(FlexBox)({ alignItems: 'center', paddingLeft: 4, }); +SearchBox.displayName = 'Searchable:SearchBox'; export const SearchInput = styled(Input)( (props: {focus?: boolean; regex?: boolean; isValidInput?: boolean}) => ({ @@ -56,6 +58,7 @@ export const SearchInput = styled(Input)( }, }), ); +SearchInput.displayName = 'Searchable:SearchInput'; const Clear = styled(Text)({ position: 'absolute', @@ -75,6 +78,7 @@ const Clear = styled(Text)({ backgroundColor: 'rgba(0,0,0,0.15)', }, }); +Clear.displayName = 'Searchable:Clear'; export const SearchIcon = styled(Glyph)({ marginRight: 3, @@ -82,11 +86,13 @@ export const SearchIcon = styled(Glyph)({ marginTop: -1, minWidth: 16, }); +SearchIcon.displayName = 'Searchable:SearchIcon'; const Actions = styled(FlexRow)({ marginLeft: 8, flexShrink: 0, }); +Actions.displayName = 'Searchable:Actions'; export type SearchableProps = { addFilter: (filter: Filter) => void; @@ -131,6 +137,8 @@ const Searchable = ( Component: React.ComponentType, ): React.ComponentType => class extends PureComponent { + static displayName = `Searchable(${Component.displayName})`; + static defaultProps = { placeholder: 'Search...', }; diff --git a/src/ui/components/table/ManagedTable.tsx b/src/ui/components/table/ManagedTable.tsx index 389ca8a3b..17bdfff18 100644 --- a/src/ui/components/table/ManagedTable.tsx +++ b/src/ui/components/table/ManagedTable.tsx @@ -148,6 +148,7 @@ const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({ overflow: props.canOverflow ? 'scroll' : 'visible', flexGrow: 1, })); +Container.displayName = 'ManagedTable:Container'; const globalTableState: {[key: string]: TableColumnSizes} = {}; diff --git a/src/ui/components/table/ManagedTable_immutable.tsx b/src/ui/components/table/ManagedTable_immutable.tsx index 7e2647902..d29e8d1f0 100644 --- a/src/ui/components/table/ManagedTable_immutable.tsx +++ b/src/ui/components/table/ManagedTable_immutable.tsx @@ -145,6 +145,7 @@ const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({ overflow: props.canOverflow ? 'scroll' : 'visible', flexGrow: 1, })); +Container.displayName = 'ManagedTable_immutable:Container'; const globalTableState: {[key: string]: TableColumnSizes} = {}; diff --git a/src/ui/components/table/TableHead.tsx b/src/ui/components/table/TableHead.tsx index d3fe93b1a..33aa3fd7d 100644 --- a/src/ui/components/table/TableHead.tsx +++ b/src/ui/components/table/TableHead.tsx @@ -29,6 +29,7 @@ import React from 'react'; const TableHeaderArrow = styled('span')({ float: 'right', }); +TableHeaderArrow.displayName = 'TableHead:TableHeaderArrow'; const TableHeaderColumnInteractive = styled(Interactive)({ display: 'inline-block', @@ -37,10 +38,13 @@ const TableHeaderColumnInteractive = styled(Interactive)({ whiteSpace: 'nowrap', width: '100%', }); +TableHeaderColumnInteractive.displayName = + 'TableHead:TableHeaderColumnInteractive'; const TableHeaderColumnContainer = styled('div')({ padding: '0 8px', }); +TableHeaderColumnContainer.displayName = 'TableHead:TableHeaderColumnContainer'; const TableHeadContainer = styled(FlexRow)( (props: {horizontallyScrollable?: boolean}) => ({ @@ -56,6 +60,7 @@ const TableHeadContainer = styled(FlexRow)( minWidth: props.horizontallyScrollable ? 'min-content' : 0, }), ); +TableHeadContainer.displayName = 'TableHead:TableHeadContainer'; const TableHeadColumnContainer = styled('div')( (props: {width: string | number}) => ({ @@ -81,6 +86,7 @@ const TableHeadColumnContainer = styled('div')( }, }), ); +TableHeadColumnContainer.displayName = 'TableHead:TableHeadColumnContainer'; const RIGHT_RESIZABLE = {right: true}; diff --git a/src/ui/components/table/TableRow.tsx b/src/ui/components/table/TableRow.tsx index 7e234f1c8..3863bc05c 100644 --- a/src/ui/components/table/TableRow.tsx +++ b/src/ui/components/table/TableRow.tsx @@ -84,6 +84,7 @@ const TableBodyRowContainer = styled(FlexRow)( }, }), ); +TableBodyRowContainer.displayName = 'TableRow:TableBodyRowContainer'; const TableBodyColumnContainer = styled('div')( (props: { @@ -105,6 +106,7 @@ const TableBodyColumnContainer = styled('div')( justifyContent: props.justifyContent, }), ); +TableBodyColumnContainer.displayName = 'TableRow:TableBodyColumnContainer'; type Props = { columnSizes: TableColumnSizes; diff --git a/src/ui/components/table/TypeBasedValueRenderer.tsx b/src/ui/components/table/TypeBasedValueRenderer.tsx index a0ae6256d..01abdb533 100644 --- a/src/ui/components/table/TypeBasedValueRenderer.tsx +++ b/src/ui/components/table/TypeBasedValueRenderer.tsx @@ -35,6 +35,7 @@ const NonWrappingText = styled(Text)({ whiteSpace: 'nowrap', userSelect: 'none', }); +NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText'; const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({ '&::before': { @@ -48,6 +49,7 @@ const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({ marginTop: 1, }, })); +BooleanValue.displayName = 'TypeBasedValueRenderer:BooleanValue'; export function renderValue(val: Value) { switch (val.type) {