From 17d4d3df80a94fbec10869f13fb131dbe3189d1a Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 9 Jan 2024 18:53:06 +0100 Subject: [PATCH 1/8] disable inputs for non-editors --- .../canvas/controls/new-canvas-controls.tsx | 63 ++++++++++++------- .../components/editor/global-shortcuts.tsx | 3 + .../inspector/controls/color-control.tsx | 4 ++ .../controls/color-picker-swatches.tsx | 9 ++- .../inspector/controls/color-picker.tsx | 12 ++++ .../inspector/controls/option-control.tsx | 5 +- .../inspector/controls/slider-control.tsx | 5 +- editor/src/components/inspector/inspector.tsx | 23 ++++--- .../background-picker.tsx | 5 ++ editor/src/uuiui/inputs/number-input.tsx | 19 +++++- editor/src/uuiui/inputs/string-input.tsx | 5 +- .../uuiui/widgets/popup-list/popup-list.tsx | 6 +- 12 files changed, 118 insertions(+), 41 deletions(-) diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx index 40d012c791dd..55418a5a7915 100644 --- a/editor/src/components/canvas/controls/new-canvas-controls.tsx +++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx @@ -66,6 +66,7 @@ import { import { useSelectionArea } from './selection-area-hooks' import { RemixSceneLabelControl } from './select-mode/remix-scene-label' import { NO_OP } from '../../../core/shared/utils' +import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' export const CanvasControlsContainerID = 'new-canvas-controls-container' @@ -496,6 +497,8 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => { }) } + const allowedToEdit = useAllowedToEditProject() + const resizeStatus = getResizeStatus() return ( @@ -526,42 +529,56 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => { {when( resizeStatus !== 'disabled', <> - {inspectorFocusedControls.map((c) => ( - - ))} - {inspectorHoveredControls.map((c) => ( - - ))} - {when( - isSelectMode(editorMode), - , - )} - {when(isSelectMode(editorMode) && !anyStrategyActive, )} - {when(isSelectMode(editorMode), )} {renderHighlightControls()} - {renderTextEditableControls()} {unless(dragInteractionActive, )} - {when(isSelectMode(editorMode), )} + {when( - isSelectOrInsertMode(editorMode) && - !EP.multiplePathsAllWithTheSameUID(localSelectedViews), + allowedToEdit, <> - {strategyControls.map((c) => ( + {inspectorFocusedControls.map((c) => ( + + ))} + {inspectorHoveredControls.map((c) => ( ))} + {when( + isSelectMode(editorMode), + , + )} + {when(isSelectMode(editorMode) && !anyStrategyActive, )} + {when(isSelectMode(editorMode), )} + {renderTextEditableControls()} + {when(isSelectMode(editorMode), )} + {when( + isSelectOrInsertMode(editorMode) && + !EP.multiplePathsAllWithTheSameUID(localSelectedViews), + <> + {strategyControls.map((c) => ( + + ))} + , + )} + {when(isSelectMode(editorMode), )} + , )} - {when(isSelectMode(editorMode), )} - , )} diff --git a/editor/src/components/editor/global-shortcuts.tsx b/editor/src/components/editor/global-shortcuts.tsx index 90d532d60996..8ac03db4f830 100644 --- a/editor/src/components/editor/global-shortcuts.tsx +++ b/editor/src/components/editor/global-shortcuts.tsx @@ -686,6 +686,9 @@ export function handleKeyDown( ) }, [INSERT_DIV_SHORTCUT]: () => { + if (!allowedToEdit) { + return [] + } if (!isSelectMode(editor.mode) && !isInsertMode(editor.mode)) { return [] } diff --git a/editor/src/components/inspector/controls/color-control.tsx b/editor/src/components/inspector/controls/color-control.tsx index c0dc93c8623f..77e3ef250271 100644 --- a/editor/src/components/inspector/controls/color-control.tsx +++ b/editor/src/components/inspector/controls/color-control.tsx @@ -8,6 +8,7 @@ import type { ControlStyles } from '../common/control-styles' import type { ControlStatus } from '../common/control-status' import { useColorTheme, UtopiaTheme } from '../../../uuiui' import Utils from '../../../utils/utils' +import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' export interface ColorControlProps { value: CSSColor @@ -81,6 +82,8 @@ export const ColorControl = React.memo((props: ColorControlProps) => { const closePopup = React.useCallback(() => setPopupOpen(false), [setPopupOpen]) + const allowedToEdit = useAllowedToEditProject() + const picker = !popupOpen ? null : ( { value={props.value} onSubmitValue={props.onSubmitValue} onTransientSubmitValue={props.onTransientSubmitValue} + disabled={!allowedToEdit} /> ) diff --git a/editor/src/components/inspector/controls/color-picker-swatches.tsx b/editor/src/components/inspector/controls/color-picker-swatches.tsx index 455147947192..dbf56385a851 100644 --- a/editor/src/components/inspector/controls/color-picker-swatches.tsx +++ b/editor/src/components/inspector/controls/color-picker-swatches.tsx @@ -15,6 +15,7 @@ import { useDispatch } from '../../editor/store/dispatch-context' import type { ColorSwatch } from '../../editor/store/editor-state' import { Substores, useEditorState } from '../../editor/store/store-hook' import { cssColorToChromaColorOrDefault } from '../common/css-utils' +import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' const { checkerboardBackground } = UtopiaStyles.backgrounds @@ -53,9 +54,14 @@ export const ColorPickerSwatches = React.memo((props: ColorPickerSwatchesProps) } }, [colorSwatches]) + const allowedToEdit = useAllowedToEditProject() + const toggleEditing = React.useCallback(() => { + if (!allowedToEdit) { + return + } setEditing(!editing) - }, [editing]) + }, [editing, allowedToEdit]) const onAddColor = React.useCallback(() => { if (currentColor == null) { @@ -106,6 +112,7 @@ export const ColorPickerSwatches = React.memo((props: ColorPickerSwatchesProps) style={{ padding: '0 6px', }} + disabled={!allowedToEdit} onMouseDown={toggleEditing} > {when(editing, )} diff --git a/editor/src/components/inspector/controls/color-picker.tsx b/editor/src/components/inspector/controls/color-picker.tsx index d01eb28057d6..837564412a84 100644 --- a/editor/src/components/inspector/controls/color-picker.tsx +++ b/editor/src/components/inspector/controls/color-picker.tsx @@ -31,6 +31,7 @@ const checkerboardBackground = UtopiaStyles.backgrounds.checkerboardBackground export interface ColorPickerProps extends ColorPickerInnerProps { closePopup: () => void portalTarget?: HTMLElement + disabled: boolean } export const colorPickerWidth = 290 @@ -96,6 +97,7 @@ export interface ColorPickerInnerProps { offsetY: number id: string testId: string + disabled: boolean } function toPassedInColorType( @@ -340,6 +342,9 @@ export class ColorPickerInner extends React.Component< onMouseDownSV = (e: React.MouseEvent) => { e.stopPropagation() + if (this.props.disabled) { + return + } this.setState({ isScrubbing: true, }) @@ -399,6 +404,9 @@ export class ColorPickerInner extends React.Component< onHueSliderMouseDown = (e: React.MouseEvent) => { e.stopPropagation() + if (this.props.disabled) { + return + } if (this.HueControlRef.current != null) { this.HueOriginLeft = this.HueControlRef.current.getBoundingClientRect().left @@ -437,6 +445,10 @@ export class ColorPickerInner extends React.Component< onAlphaSliderMouseDown = (e: React.MouseEvent) => { e.stopPropagation() + if (this.props.disabled) { + return + } + if (this.AlphaControlRef.current != null) { this.setState({ isScrubbing: true, diff --git a/editor/src/components/inspector/controls/option-control.tsx b/editor/src/components/inspector/controls/option-control.tsx index df1b3518c818..c1490b9852e2 100644 --- a/editor/src/components/inspector/controls/option-control.tsx +++ b/editor/src/components/inspector/controls/option-control.tsx @@ -6,6 +6,7 @@ import type { DEPRECATEDControlProps, DEPRECATEDGenericControlOptions } from './ import { colorTheme } from '../../../uuiui' import type { IcnProps } from '../../../uuiui' import { UtopiaTheme, Tooltip, Icn } from '../../../uuiui' +import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' export interface DEPRECATEDOptionControlOptions extends DEPRECATEDGenericControlOptions { icon?: IcnProps @@ -60,7 +61,7 @@ export const OptionControl: React.FunctionComponent< } } - const rc = controlOptions.roundCorners + const allowedToEdit = useAllowedToEditProject() const background = (() => { if (props.controlStatus === 'overridden' && props.value) { @@ -133,7 +134,7 @@ export const OptionControl: React.FunctionComponent< }} type='checkbox' checked={isChecked} - disabled={!props.controlStyles.interactive} + disabled={!props.controlStyles.interactive || !allowedToEdit} onChange={onSubmitValue} />
((props: InspectorProps) => { 'Inspector anyKnownElements', ) + const allowedToEdit = useAllowedToEditProject() + function renderInspectorContents() { return ( @@ -378,18 +381,20 @@ export const Inspector = React.memo((props: InspectorProps) => { )} - {unless( hideAllSections, <> - + {when( + allowedToEdit, + , + )} {when(multiselectedContract === 'fragment', )} {unless( multiselectedContract === 'fragment', diff --git a/editor/src/components/inspector/sections/style-section/background-subsection/background-picker.tsx b/editor/src/components/inspector/sections/style-section/background-subsection/background-picker.tsx index f1e14a0a3704..cd0d6196844d 100644 --- a/editor/src/components/inspector/sections/style-section/background-subsection/background-picker.tsx +++ b/editor/src/components/inspector/sections/style-section/background-subsection/background-picker.tsx @@ -73,6 +73,7 @@ import { GradientStopsEditor } from './gradient-stop-editor' import { getIndexedUpdateCSSBackgroundLayerLinearGradientAngle } from './linear-gradient-layer' import { PickerImagePreview } from './picker-image-preview' import { setProp_UNSAFE } from '../../../../editor/actions/action-creators' +import { useAllowedToEditProject } from '../../../../editor/store/collaborative-editing' const backgroundLayerOptionsByValue: { [key in CSSBackgroundLayerType]: CSSBackgroundLayerTypeSelectOption @@ -545,6 +546,8 @@ export const BackgroundPicker: React.FunctionComponent< } })() + const allowedToEdit = useAllowedToEditProject() + return ( ) : ( ) ) : null} diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx index 20f0adfe78cb..151fd3c0c68b 100644 --- a/editor/src/uuiui/inputs/number-input.tsx +++ b/editor/src/uuiui/inputs/number-input.tsx @@ -50,6 +50,7 @@ import { InspectorInput, } from './base-input' import { usePropControlledStateV2 } from '../../components/inspector/common/inspector-utils' +import { useAllowedToEditProject } from '../../components/editor/store/collaborative-editing' export type LabelDragDirection = 'horizontal' | 'vertical' @@ -188,6 +189,8 @@ export const NumberInput = React.memo( const ref = React.useRef(null) const colorTheme = useColorTheme() + const allowedToEdit = useAllowedToEditProject() + const controlStyles = React.useMemo((): ControlStyles => { return { ...getControlStyles(controlStatus), @@ -553,6 +556,9 @@ export const NumberInput = React.memo( const onIncrementMouseDown = React.useCallback( (e: React.MouseEvent) => { + if (!allowedToEdit) { + return + } if (e.button === 0) { e.stopPropagation() setIsFauxcused(true) @@ -564,7 +570,7 @@ export const NumberInput = React.memo( }, repeatThreshold) } }, - [incrementBy, stepSize, repeatIncrement, onIncrementMouseUp], + [incrementBy, stepSize, repeatIncrement, onIncrementMouseUp, allowedToEdit], ) const onDecrementMouseUp = React.useCallback(() => { @@ -596,6 +602,9 @@ export const NumberInput = React.memo( const onDecrementMouseDown = React.useCallback( (e: React.MouseEvent) => { + if (!allowedToEdit) { + return + } if (e.button === 0) { e.stopPropagation() setIsFauxcused(true) @@ -608,11 +617,14 @@ export const NumberInput = React.memo( ) } }, - [incrementBy, stepSize, repeatIncrement, onDecrementMouseUp], + [incrementBy, stepSize, repeatIncrement, onDecrementMouseUp, allowedToEdit], ) const onLabelMouseDown = React.useCallback( (e: React.MouseEvent) => { + if (!allowedToEdit) { + return + } if (e.button === 0) { e.stopPropagation() setIsFauxcused(true) @@ -625,7 +637,7 @@ export const NumberInput = React.memo( setGlobalCursor?.(CSSCursor.ResizeEW) } }, - [scrubOnMouseMove, scrubOnMouseUp, setGlobalCursor, value], + [scrubOnMouseMove, scrubOnMouseUp, setGlobalCursor, value, allowedToEdit], ) const placeholder = getControlStylesAwarePlaceholder(controlStyles) @@ -678,6 +690,7 @@ export const NumberInput = React.memo( controlStyles={controlStyles} controlStatus={controlStatus} testId={testId} + disabled={!allowedToEdit} focused={isFocused} hasLabel={labelInner != null} roundCorners={roundCorners} diff --git a/editor/src/uuiui/inputs/string-input.tsx b/editor/src/uuiui/inputs/string-input.tsx index 6091078de75d..619e6bc89ec4 100644 --- a/editor/src/uuiui/inputs/string-input.tsx +++ b/editor/src/uuiui/inputs/string-input.tsx @@ -10,6 +10,7 @@ import { getControlStyles } from '../../components/inspector/common/control-styl import { preventDefault, stopPropagation } from '../../components/inspector/common/inspector-utils' import { useColorTheme } from '../styles/theme' import { InspectorInputEmotionStyle, getControlStylesAwarePlaceholder } from './base-input' +import { useAllowedToEditProject } from '../../components/editor/store/collaborative-editing' interface StringInputOptions { focusOnMount?: boolean @@ -50,8 +51,10 @@ export const StringInput = React.memo( } }, [focusOnMount, ref]) + const allowedToEdit = useAllowedToEditProject() + const controlStyles: ControlStyles = getControlStyles(controlStatus) - const disabled = !controlStyles.interactive + const disabled = !controlStyles.interactive || !allowedToEdit const inputPropsKeyDown = inputProps.onKeyDown diff --git a/editor/src/uuiui/widgets/popup-list/popup-list.tsx b/editor/src/uuiui/widgets/popup-list/popup-list.tsx index 42772638e642..2471e6c06aac 100644 --- a/editor/src/uuiui/widgets/popup-list/popup-list.tsx +++ b/editor/src/uuiui/widgets/popup-list/popup-list.tsx @@ -27,6 +27,7 @@ import type { ControlStyles, SelectOption } from '../../../uuiui-deps' import { CommonUtils, getControlStyles } from '../../../uuiui-deps' import { SmallerIcons } from '../../../uuiui/icons' import { Tooltip } from '../../tooltip' +import { useAllowedToEditProject } from '../../../components/editor/store/collaborative-editing' type ContainerMode = 'default' | 'showBorderOnHover' | 'noBorder' @@ -587,10 +588,13 @@ export const PopupList = React.memo( style, containerMode = 'default', controlStyles = getControlStyles('simple'), - disabled = !controlStyles.interactive, + disabled: initialDisabled, }, ref, ) => { + const allowedToEdit = useAllowedToEditProject() + const disabled = initialDisabled || !controlStyles.interactive || !allowedToEdit + const selectOnSubmitValue = React.useCallback( (newValue: ValueType) => { if (isOptionType(newValue)) { From 257d99515a7225a6c2d8f1f89b89598642e03ace Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 9 Jan 2024 21:29:32 +0100 Subject: [PATCH 2/8] update snaps --- .../performance-regression-tests.spec.tsx.snap | 14 ++++++++++---- .../performance-regression-tests.spec.tsx | 8 ++++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap index 7ea0c7b35a88..99a327ea389a 100644 --- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap +++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap @@ -34,18 +34,19 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", - "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.fragment))///div", "//div//div:data-testid='multiselect-outline'", "//div//div:data-testid='multiselect-element-outline-utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc'", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())", @@ -644,18 +645,19 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", - "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.fragment))///div", "//div//div:data-testid='multiselect-outline'", "//div//div:data-testid='multiselect-element-outline-utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc'", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())", @@ -1195,6 +1197,7 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1503,6 +1506,7 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1945,6 +1949,7 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -2242,6 +2247,7 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx index 8f5b65e72ed1..56cc57e543d9 100644 --- a/editor/src/core/performance/performance-regression-tests.spec.tsx +++ b/editor/src/core/performance/performance-regression-tests.spec.tsx @@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`700`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`702`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`745`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`747`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`533`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`534`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`605`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`606`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) }) From 87b201cef8183651c7e3edb121bdbcd7ace4c1f1 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 10 Jan 2024 09:33:30 +0100 Subject: [PATCH 3/8] update snaps --- ...performance-regression-tests.spec.tsx.snap | 24 ++++++++++++++----- .../performance-regression-tests.spec.tsx | 8 +++---- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap index 8e1f7b54d20c..8b1de69b9c82 100644 --- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap +++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap @@ -33,10 +33,12 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -646,10 +648,12 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1200,10 +1204,12 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1511,10 +1517,12 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1956,10 +1964,12 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -2256,10 +2266,12 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx index 07edcc7e4de8..8b15b42e8311 100644 --- a/editor/src/core/performance/performance-regression-tests.spec.tsx +++ b/editor/src/core/performance/performance-regression-tests.spec.tsx @@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`704`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`710`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`749`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`755`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`535`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`538`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`607`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`610`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) }) From 7caaecffacb081f0845dcbefde5191b162828b04 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 10 Jan 2024 10:18:48 +0100 Subject: [PATCH 4/8] fix guideline test --- editor/src/components/canvas/controls/new-canvas-controls.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx index 1b9c8e88b2c6..be02babf9b55 100644 --- a/editor/src/components/canvas/controls/new-canvas-controls.tsx +++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx @@ -584,8 +584,6 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => { , )} - {when(isSelectMode(editorMode), )} - {when( roomStatus === 'connected', From ab93e708996277a596624034fac10298cc18aedb Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 10 Jan 2024 10:40:36 +0100 Subject: [PATCH 5/8] snaps --- .../performance-regression-tests.spec.tsx.snap | 12 ------------ .../performance-regression-tests.spec.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap index 8b1de69b9c82..121a2b457902 100644 --- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap +++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap @@ -34,8 +34,6 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -649,8 +647,6 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1205,8 +1201,6 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1518,8 +1512,6 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1965,8 +1957,6 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -2267,8 +2257,6 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", - "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerPresence)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(MultiplayerWrapper)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx index 8b15b42e8311..4e1a16d9608d 100644 --- a/editor/src/core/performance/performance-regression-tests.spec.tsx +++ b/editor/src/core/performance/performance-regression-tests.spec.tsx @@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`710`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`706`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`755`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`751`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`538`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`536`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`610`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`608`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) }) From de666a818c9dbf0ac4a59d855efb0a40eccd4cd3 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 10 Jan 2024 11:01:08 +0100 Subject: [PATCH 6/8] update tests with store hook --- .../inputs/string-input.spec.browser2.tsx | 62 ++++++++++++++----- 1 file changed, 46 insertions(+), 16 deletions(-) diff --git a/editor/src/uuiui/inputs/string-input.spec.browser2.tsx b/editor/src/uuiui/inputs/string-input.spec.browser2.tsx index 5be069859643..862b30a9f3ff 100644 --- a/editor/src/uuiui/inputs/string-input.spec.browser2.tsx +++ b/editor/src/uuiui/inputs/string-input.spec.browser2.tsx @@ -3,6 +3,10 @@ import type { RenderResult } from '@testing-library/react' import { render } from '@testing-library/react' import React from 'react' import { StringInput } from './string-input' +import { + TestInspectorContextProvider, + getStoreHook, +} from '../../components/inspector/common/inspector.test-utils' describe('StringInput', () => { function checkPlaceholder(renderResult: RenderResult, expectedPlaceholder: string | null): void { @@ -14,36 +18,62 @@ describe('StringInput', () => { } } it('ensures that no placeholder property shows in the input field by default', () => { - const result = render() + const storeHookForTest = getStoreHook() + const result = render( + + + , + ) checkPlaceholder(result, null) }) it('ensures that the placeholder property shows in the input field', () => { + const storeHookForTest = getStoreHook() const result = render( - , + + + , ) checkPlaceholder(result, 'this is a placeholder') }) it('ensures that the unknown control styles property shows in the input field', () => { + const storeHookForTest = getStoreHook() const result = render( - , + + + , ) checkPlaceholder(result, 'Unknown') }) it('ensures that the mixed control styles property shows in the input field', () => { + const storeHookForTest = getStoreHook() const result = render( - , + + + , ) checkPlaceholder(result, 'Mixed') }) From b6563b81d27b2ed39e7e193962508f9b23057069 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 10 Jan 2024 11:29:52 +0100 Subject: [PATCH 7/8] useIsMyProject --- .../canvas/controls/new-canvas-controls.tsx | 6 +++--- .../components/canvas/design-panel-root.tsx | 10 ++++------ .../editor/store/collaborative-editing.ts | 8 ++++++++ .../inspector/controls/color-control.tsx | 6 +++--- .../controls/color-picker-swatches.tsx | 10 +++++----- .../inspector/controls/option-control.tsx | 6 +++--- .../inspector/controls/slider-control.tsx | 6 +++--- editor/src/components/inspector/inspector.tsx | 7 +++---- .../background-picker.tsx | 8 ++++---- editor/src/components/user-bar.tsx | 10 ++++------ editor/src/uuiui/inputs/number-input.tsx | 18 +++++++++--------- editor/src/uuiui/inputs/string-input.tsx | 6 +++--- .../uuiui/widgets/popup-list/popup-list.tsx | 6 +++--- 13 files changed, 55 insertions(+), 52 deletions(-) diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx index be02babf9b55..1d705eff25fc 100644 --- a/editor/src/components/canvas/controls/new-canvas-controls.tsx +++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx @@ -66,7 +66,7 @@ import { import { useSelectionArea } from './selection-area-hooks' import { RemixSceneLabelControl } from './select-mode/remix-scene-label' import { NO_OP } from '../../../core/shared/utils' -import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' +import { useIsMyProject } from '../../editor/store/collaborative-editing' import { useStatus } from '../../../../liveblocks.config' import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper' import { MultiplayerPresence } from '../multiplayer-presence' @@ -502,7 +502,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => { }) } - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() const resizeStatus = getResizeStatus() @@ -540,7 +540,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => { {when( - allowedToEdit, + isMyProject, <> {inspectorFocusedControls.map((c) => ( ((props) => { onClickTab(RightMenuTab.Settings) }, [onClickTab]) - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() if (!isRightMenuExpanded) { return null @@ -191,7 +189,7 @@ export const RightPane = React.memo((props) => { onClick={onClickInspectorTab} /> {when( - allowedToEdit, + isMyProject, <> store.projectServerState.isMyProject === 'yes', + 'useIsMyProject', + ) +} diff --git a/editor/src/components/inspector/controls/color-control.tsx b/editor/src/components/inspector/controls/color-control.tsx index 77e3ef250271..ea65f96cb403 100644 --- a/editor/src/components/inspector/controls/color-control.tsx +++ b/editor/src/components/inspector/controls/color-control.tsx @@ -8,7 +8,7 @@ import type { ControlStyles } from '../common/control-styles' import type { ControlStatus } from '../common/control-status' import { useColorTheme, UtopiaTheme } from '../../../uuiui' import Utils from '../../../utils/utils' -import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' +import { useIsMyProject } from '../../editor/store/collaborative-editing' export interface ColorControlProps { value: CSSColor @@ -82,7 +82,7 @@ export const ColorControl = React.memo((props: ColorControlProps) => { const closePopup = React.useCallback(() => setPopupOpen(false), [setPopupOpen]) - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() const picker = !popupOpen ? null : ( { value={props.value} onSubmitValue={props.onSubmitValue} onTransientSubmitValue={props.onTransientSubmitValue} - disabled={!allowedToEdit} + disabled={!isMyProject} /> ) diff --git a/editor/src/components/inspector/controls/color-picker-swatches.tsx b/editor/src/components/inspector/controls/color-picker-swatches.tsx index dbf56385a851..7057ec8118d2 100644 --- a/editor/src/components/inspector/controls/color-picker-swatches.tsx +++ b/editor/src/components/inspector/controls/color-picker-swatches.tsx @@ -15,7 +15,7 @@ import { useDispatch } from '../../editor/store/dispatch-context' import type { ColorSwatch } from '../../editor/store/editor-state' import { Substores, useEditorState } from '../../editor/store/store-hook' import { cssColorToChromaColorOrDefault } from '../common/css-utils' -import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' +import { useIsMyProject } from '../../editor/store/collaborative-editing' const { checkerboardBackground } = UtopiaStyles.backgrounds @@ -54,14 +54,14 @@ export const ColorPickerSwatches = React.memo((props: ColorPickerSwatchesProps) } }, [colorSwatches]) - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() const toggleEditing = React.useCallback(() => { - if (!allowedToEdit) { + if (!isMyProject) { return } setEditing(!editing) - }, [editing, allowedToEdit]) + }, [editing, isMyProject]) const onAddColor = React.useCallback(() => { if (currentColor == null) { @@ -112,7 +112,7 @@ export const ColorPickerSwatches = React.memo((props: ColorPickerSwatchesProps) style={{ padding: '0 6px', }} - disabled={!allowedToEdit} + disabled={!isMyProject} onMouseDown={toggleEditing} > {when(editing, )} diff --git a/editor/src/components/inspector/controls/option-control.tsx b/editor/src/components/inspector/controls/option-control.tsx index c1490b9852e2..a5c3ad26cee2 100644 --- a/editor/src/components/inspector/controls/option-control.tsx +++ b/editor/src/components/inspector/controls/option-control.tsx @@ -6,7 +6,7 @@ import type { DEPRECATEDControlProps, DEPRECATEDGenericControlOptions } from './ import { colorTheme } from '../../../uuiui' import type { IcnProps } from '../../../uuiui' import { UtopiaTheme, Tooltip, Icn } from '../../../uuiui' -import { useAllowedToEditProject } from '../../editor/store/collaborative-editing' +import { useIsMyProject } from '../../editor/store/collaborative-editing' export interface DEPRECATEDOptionControlOptions extends DEPRECATEDGenericControlOptions { icon?: IcnProps @@ -61,7 +61,7 @@ export const OptionControl: React.FunctionComponent< } } - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() const background = (() => { if (props.controlStatus === 'overridden' && props.value) { @@ -134,7 +134,7 @@ export const OptionControl: React.FunctionComponent< }} type='checkbox' checked={isChecked} - disabled={!props.controlStyles.interactive || !allowedToEdit} + disabled={!props.controlStyles.interactive || !isMyProject} onChange={onSubmitValue} />
((props: InspectorProps) => { 'Inspector anyKnownElements', ) - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() function renderInspectorContents() { return ( @@ -385,7 +384,7 @@ export const Inspector = React.memo((props: InspectorProps) => { hideAllSections, <> {when( - allowedToEdit, + isMyProject, ) : ( ) ) : null} diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx index 2da2ed0b3102..f8c63e1afa36 100644 --- a/editor/src/components/user-bar.tsx +++ b/editor/src/components/user-bar.tsx @@ -21,6 +21,7 @@ import { showToast, switchEditorMode } from './editor/actions/action-creators' import { EditorModes, isFollowMode } from './editor/editor-modes' import { useDispatch } from './editor/store/dispatch-context' import { Substores, useEditorState } from './editor/store/store-hook' +import { useIsMyProject } from './editor/store/collaborative-editing' const MAX_VISIBLE_OTHER_PLAYERS = 4 @@ -58,11 +59,8 @@ export const SinglePlayerUserBar = React.memo(() => { (store) => getUserPicture(store.userState.loginState), 'SinglePlayerUserBar userPicture', ) - const amIOwner = useEditorState( - Substores.projectServerState, - (store) => store.projectServerState.isMyProject === 'yes', - 'SinglePlayerUserBar amIOwner', - ) + const isMyProject = useIsMyProject() + return (
{ }} > - {amIOwner ? : null} + {isMyProject ? : null}
) }) diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx index 151fd3c0c68b..db5e7cf393b0 100644 --- a/editor/src/uuiui/inputs/number-input.tsx +++ b/editor/src/uuiui/inputs/number-input.tsx @@ -50,7 +50,7 @@ import { InspectorInput, } from './base-input' import { usePropControlledStateV2 } from '../../components/inspector/common/inspector-utils' -import { useAllowedToEditProject } from '../../components/editor/store/collaborative-editing' +import { useIsMyProject } from '../../components/editor/store/collaborative-editing' export type LabelDragDirection = 'horizontal' | 'vertical' @@ -189,7 +189,7 @@ export const NumberInput = React.memo( const ref = React.useRef(null) const colorTheme = useColorTheme() - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() const controlStyles = React.useMemo((): ControlStyles => { return { @@ -556,7 +556,7 @@ export const NumberInput = React.memo( const onIncrementMouseDown = React.useCallback( (e: React.MouseEvent) => { - if (!allowedToEdit) { + if (!isMyProject) { return } if (e.button === 0) { @@ -570,7 +570,7 @@ export const NumberInput = React.memo( }, repeatThreshold) } }, - [incrementBy, stepSize, repeatIncrement, onIncrementMouseUp, allowedToEdit], + [incrementBy, stepSize, repeatIncrement, onIncrementMouseUp, isMyProject], ) const onDecrementMouseUp = React.useCallback(() => { @@ -602,7 +602,7 @@ export const NumberInput = React.memo( const onDecrementMouseDown = React.useCallback( (e: React.MouseEvent) => { - if (!allowedToEdit) { + if (!isMyProject) { return } if (e.button === 0) { @@ -617,12 +617,12 @@ export const NumberInput = React.memo( ) } }, - [incrementBy, stepSize, repeatIncrement, onDecrementMouseUp, allowedToEdit], + [incrementBy, stepSize, repeatIncrement, onDecrementMouseUp, isMyProject], ) const onLabelMouseDown = React.useCallback( (e: React.MouseEvent) => { - if (!allowedToEdit) { + if (!isMyProject) { return } if (e.button === 0) { @@ -637,7 +637,7 @@ export const NumberInput = React.memo( setGlobalCursor?.(CSSCursor.ResizeEW) } }, - [scrubOnMouseMove, scrubOnMouseUp, setGlobalCursor, value, allowedToEdit], + [scrubOnMouseMove, scrubOnMouseUp, setGlobalCursor, value, isMyProject], ) const placeholder = getControlStylesAwarePlaceholder(controlStyles) @@ -690,7 +690,7 @@ export const NumberInput = React.memo( controlStyles={controlStyles} controlStatus={controlStatus} testId={testId} - disabled={!allowedToEdit} + disabled={!isMyProject} focused={isFocused} hasLabel={labelInner != null} roundCorners={roundCorners} diff --git a/editor/src/uuiui/inputs/string-input.tsx b/editor/src/uuiui/inputs/string-input.tsx index 619e6bc89ec4..670e7f9d68b3 100644 --- a/editor/src/uuiui/inputs/string-input.tsx +++ b/editor/src/uuiui/inputs/string-input.tsx @@ -10,7 +10,7 @@ import { getControlStyles } from '../../components/inspector/common/control-styl import { preventDefault, stopPropagation } from '../../components/inspector/common/inspector-utils' import { useColorTheme } from '../styles/theme' import { InspectorInputEmotionStyle, getControlStylesAwarePlaceholder } from './base-input' -import { useAllowedToEditProject } from '../../components/editor/store/collaborative-editing' +import { useIsMyProject } from '../../components/editor/store/collaborative-editing' interface StringInputOptions { focusOnMount?: boolean @@ -51,10 +51,10 @@ export const StringInput = React.memo( } }, [focusOnMount, ref]) - const allowedToEdit = useAllowedToEditProject() + const isMyProject = useIsMyProject() const controlStyles: ControlStyles = getControlStyles(controlStatus) - const disabled = !controlStyles.interactive || !allowedToEdit + const disabled = !controlStyles.interactive || !isMyProject const inputPropsKeyDown = inputProps.onKeyDown diff --git a/editor/src/uuiui/widgets/popup-list/popup-list.tsx b/editor/src/uuiui/widgets/popup-list/popup-list.tsx index 2471e6c06aac..d938c2ea8771 100644 --- a/editor/src/uuiui/widgets/popup-list/popup-list.tsx +++ b/editor/src/uuiui/widgets/popup-list/popup-list.tsx @@ -27,7 +27,7 @@ import type { ControlStyles, SelectOption } from '../../../uuiui-deps' import { CommonUtils, getControlStyles } from '../../../uuiui-deps' import { SmallerIcons } from '../../../uuiui/icons' import { Tooltip } from '../../tooltip' -import { useAllowedToEditProject } from '../../../components/editor/store/collaborative-editing' +import { useIsMyProject } from '../../../components/editor/store/collaborative-editing' type ContainerMode = 'default' | 'showBorderOnHover' | 'noBorder' @@ -592,8 +592,8 @@ export const PopupList = React.memo( }, ref, ) => { - const allowedToEdit = useAllowedToEditProject() - const disabled = initialDisabled || !controlStyles.interactive || !allowedToEdit + const isMyProject = useIsMyProject() + const disabled = initialDisabled || !controlStyles.interactive || !isMyProject const selectOnSubmitValue = React.useCallback( (newValue: ValueType) => { From ac5685db2512fa1dd29ed00cded251c24887fad7 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 10 Jan 2024 12:05:49 +0100 Subject: [PATCH 8/8] revert --- editor/src/components/canvas/design-panel-root.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx index 52fb51e1f448..124a88253e5e 100644 --- a/editor/src/components/canvas/design-panel-root.tsx +++ b/editor/src/components/canvas/design-panel-root.tsx @@ -35,7 +35,7 @@ import { useRoom, useStatus } from '../../../liveblocks.config' import { isFeatureEnabled } from '../../utils/feature-switches' import { CommentsPane } from '../inspector/comments-pane' import { EditorModes, isCommentMode } from '../editor/editor-modes' -import { useIsMyProject } from '../editor/store/collaborative-editing' +import { useAllowedToEditProject } from '../editor/store/collaborative-editing' function isCodeEditorEnabled(): boolean { if (typeof window !== 'undefined') { @@ -162,7 +162,7 @@ export const RightPane = React.memo((props) => { onClickTab(RightMenuTab.Settings) }, [onClickTab]) - const isMyProject = useIsMyProject() + const allowedToEdit = useAllowedToEditProject() if (!isRightMenuExpanded) { return null @@ -189,7 +189,7 @@ export const RightPane = React.memo((props) => { onClick={onClickInspectorTab} /> {when( - isMyProject, + allowedToEdit, <>