Input/controls constraints for viewers (#4713)

* disable inputs for non-editors

* update snaps

* update snaps

* fix guideline test

* snaps

* update tests with store hook

* useIsMyProject

* revert

editor/src/components/canvas/controls/new-canvas-controls.tsx

@@ -66,9 +66,10 @@ import {
 import { useSelectionArea } from './selection-area-hooks'
 import { RemixSceneLabelControl } from './select-mode/remix-scene-label'
 import { NO_OP } from '../../../core/shared/utils'
+import { useIsMyProject } from '../../editor/store/collaborative-editing'
+import { useStatus } from '../../../../liveblocks.config'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerPresence } from '../multiplayer-presence'
-import { useStatus } from '../../../../liveblocks.config'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -501,6 +502,8 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
       })
   }
 
+  const isMyProject = useIsMyProject()
+
   const resizeStatus = getResizeStatus()
 
   return (
@@ -531,42 +534,56 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
         {when(
           resizeStatus !== 'disabled',
           <>
-            {inspectorFocusedControls.map((c) => (
-              <RenderControlMemoized key={c.key} control={c.control} propsForControl={c.props} />
-            ))}
-            {inspectorHoveredControls.map((c) => (
-              <RenderControlMemoized key={c.key} control={c.control} propsForControl={c.props} />
-            ))}
-            {when(
-              isSelectMode(editorMode),
-              <RemixSceneLabelControl
-                maybeHighlightOnHover={maybeHighlightOnHover}
-                maybeClearHighlightsOnHoverEnd={maybeClearHighlightsOnHoverEnd}
-              />,
-            )}
-            {when(isSelectMode(editorMode) && !anyStrategyActive, <PinLines />)}
-            {when(isSelectMode(editorMode), <InsertionControls />)}
             {renderHighlightControls()}
-            {renderTextEditableControls()}
             {unless(dragInteractionActive, <LayoutParentControl />)}
-            {when(isSelectMode(editorMode), <AbsoluteChildrenOutline />)}
             <MultiSelectOutlineControl localSelectedElements={localSelectedViews} />
             <ZeroSizedElementControls.control showAllPossibleElements={false} />
+
             {when(
-              isSelectOrInsertMode(editorMode) &&
-                !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
+              isMyProject,
               <>
-                {strategyControls.map((c) => (
+                {inspectorFocusedControls.map((c) => (
+                  <RenderControlMemoized
+                    key={c.key}
+                    control={c.control}
+                    propsForControl={c.props}
+                  />
+                ))}
+                {inspectorHoveredControls.map((c) => (
                   <RenderControlMemoized
                     key={c.key}
-                    control={c.control.control}
+                    control={c.control}
                     propsForControl={c.props}
                   />
                 ))}
+                {when(
+                  isSelectMode(editorMode),
+                  <RemixSceneLabelControl
+                    maybeHighlightOnHover={maybeHighlightOnHover}
+                    maybeClearHighlightsOnHoverEnd={maybeClearHighlightsOnHoverEnd}
+                  />,
+                )}
+                {when(isSelectMode(editorMode) && !anyStrategyActive, <PinLines />)}
+                {when(isSelectMode(editorMode), <InsertionControls />)}
+                {renderTextEditableControls()}
+                {when(isSelectMode(editorMode), <AbsoluteChildrenOutline />)}
+                {when(
+                  isSelectOrInsertMode(editorMode) &&
+                    !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
+                  <>
+                    {strategyControls.map((c) => (
+                      <RenderControlMemoized
+                        key={c.key}
+                        control={c.control.control}
+                        propsForControl={c.props}
+                      />
+                    ))}
+                  </>,
+                )}
+                {when(isSelectMode(editorMode), <DistanceGuidelineControl />)}
+                <GuidelineControls />
               </>,
             )}
-            {when(isSelectMode(editorMode), <DistanceGuidelineControl />)}
-            <GuidelineControls />
             {when(
               roomStatus === 'connected',
               <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>

editor/src/components/canvas/design-panel-root.tsx

@@ -20,7 +20,7 @@ import {
 import { ConsoleAndErrorsPane } from '../code-editor/console-and-errors-pane'
 import { CanvasStrategyInspector } from './canvas-strategies/canvas-strategy-inspector'
 import { getQueryParam } from '../../common/env-vars'
-import { unless, when } from '../../utils/react-conditionals'
+import { when } from '../../utils/react-conditionals'
 import { InsertMenuPane } from '../navigator/insert-menu-pane'
 import { VariablesMenuPane } from '../navigator/variables-menu-pane'
 import { useDispatch } from '../editor/store/dispatch-context'
@@ -31,9 +31,7 @@ import { SettingsPane } from '../navigator/left-pane/settings-pane'
 import { MenuTab } from '../../uuiui/menu-tab'
 import { FlexRow } from 'utopia-api'
 import type { StoredPanel } from './stored-layout'
-import { MultiplayerPresence } from './multiplayer-presence'
 import { useRoom, useStatus } from '../../../liveblocks.config'
-import { MultiplayerWrapper } from '../../utils/multiplayer-wrapper'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import { CommentsPane } from '../inspector/comments-pane'
 import { EditorModes, isCommentMode } from '../editor/editor-modes'

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 []
         }

editor/src/components/editor/store/collaborative-editing.ts

@@ -790,3 +790,11 @@ export function useAllowedToEditProject(): boolean {
     'useAllowedToEditProject',
   )
 }
+
+export function useIsMyProject(): boolean {
+  return useEditorState(
+    Substores.projectServerState,
+    (store) => store.projectServerState.isMyProject === 'yes',
+    'useIsMyProject',
+  )
+}

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 { useIsMyProject } 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 isMyProject = useIsMyProject()
+
   const picker = !popupOpen ? null : (
     <ColorPicker
       id={props.id}
@@ -91,6 +94,7 @@ export const ColorControl = React.memo((props: ColorControlProps) => {
       value={props.value}
       onSubmitValue={props.onSubmitValue}
       onTransientSubmitValue={props.onTransientSubmitValue}
+      disabled={!isMyProject}
     />
   )
 

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 { useIsMyProject } from '../../editor/store/collaborative-editing'
 
 const { checkerboardBackground } = UtopiaStyles.backgrounds
 
@@ -53,9 +54,14 @@ export const ColorPickerSwatches = React.memo((props: ColorPickerSwatchesProps)
     }
   }, [colorSwatches])
 
+  const isMyProject = useIsMyProject()
+
   const toggleEditing = React.useCallback(() => {
+    if (!isMyProject) {
+      return
+    }
     setEditing(!editing)
-  }, [editing])
+  }, [editing, isMyProject])
 
   const onAddColor = React.useCallback(() => {
     if (currentColor == null) {
@@ -106,6 +112,7 @@ export const ColorPickerSwatches = React.memo((props: ColorPickerSwatchesProps)
             style={{
               padding: '0 6px',
             }}
+            disabled={!isMyProject}
             onMouseDown={toggleEditing}
           >
             {when(editing, <Icons.Checkmark />)}

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<HTMLDivElement>) => {
     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<HTMLDivElement>) => {
     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<HTMLDivElement>) => {
     e.stopPropagation()
+    if (this.props.disabled) {
+      return
+    }
+
     if (this.AlphaControlRef.current != null) {
       this.setState({
         isScrubbing: true,

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 { useIsMyProject } 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 isMyProject = useIsMyProject()
 
   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 || !isMyProject}
             onChange={onSubmitValue}
           />
           <div

editor/src/components/inspector/controls/slider-control.tsx

@@ -3,6 +3,7 @@ import Slider from 'rc-slider'
 import React from 'react'
 import { FlexRow, UtopiaTheme } from '../../../uuiui'
 import type { DEPRECATEDControlProps, DEPRECATEDGenericControlOptions } from './control'
+import { useIsMyProject } from '../../editor/store/collaborative-editing'
 
 export interface DEPRECATEDSliderControlOptions extends DEPRECATEDGenericControlOptions {
   minimum: number
@@ -101,6 +102,8 @@ export const SliderControl: React.FunctionComponent<React.PropsWithChildren<Slid
     }
   }
 
+  const isMyProject = useIsMyProject()
+
   return (
     <FlexRow
       style={{
@@ -115,7 +118,7 @@ export const SliderControl: React.FunctionComponent<React.PropsWithChildren<Slid
       onContextMenu={props.onContextMenu}
     >
       <Slider
-        disabled={!props.controlStyles.interactive}
+        disabled={!props.controlStyles.interactive || !isMyProject}
         value={isSliding ? slidingValue : value}
         onBeforeChange={handleBeforeChange}
         onChange={handleDragging}

editor/src/components/inspector/inspector.tsx

@@ -79,8 +79,8 @@ import { FlexCol } from 'utopia-api'
 import { SettingsPanel } from './sections/settings-panel/inspector-settingspanel'
 import { strictEvery } from '../../core/shared/array-utils'
 import { SimplifiedLayoutSubsection } from './sections/layout-section/self-layout-subsection/simplified-layout-subsection'
-import { isFeatureEnabled } from '../../utils/feature-switches'
 import { ConstraintsSection } from './constraints-section'
+import { useIsMyProject } from '../editor/store/collaborative-editing'
 
 export interface ElementPathElement {
   name?: string
@@ -336,6 +336,8 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
     'Inspector anyKnownElements',
   )
 
+  const isMyProject = useIsMyProject()
+
   function renderInspectorContents() {
     return (
       <React.Fragment>
@@ -378,18 +380,20 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
             )}
             <CodeElementSection paths={selectedViews} />
             <ConditionalSection paths={selectedViews} />
-
             {unless(
               hideAllSections,
               <>
-                <TargetSelectorSection
-                  targets={props.targets}
-                  selectedTargetPath={props.selectedTargetPath}
-                  onSelectTarget={props.onSelectTarget}
-                  onStyleSelectorRename={props.onStyleSelectorRename}
-                  onStyleSelectorDelete={props.onStyleSelectorDelete}
-                  onStyleSelectorInsert={props.onStyleSelectorInsert}
-                />
+                {when(
+                  isMyProject,
+                  <TargetSelectorSection
+                    targets={props.targets}
+                    selectedTargetPath={props.selectedTargetPath}
+                    onSelectTarget={props.onSelectTarget}
+                    onStyleSelectorRename={props.onStyleSelectorRename}
+                    onStyleSelectorDelete={props.onStyleSelectorDelete}
+                    onStyleSelectorInsert={props.onStyleSelectorInsert}
+                  />,
+                )}
                 {when(multiselectedContract === 'fragment', <FragmentSection />)}
                 {unless(
                   multiselectedContract === 'fragment',

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 { useIsMyProject } from '../../../../editor/store/collaborative-editing'
 
 const backgroundLayerOptionsByValue: {
   [key in CSSBackgroundLayerType]: CSSBackgroundLayerTypeSelectOption
@@ -545,6 +546,8 @@ export const BackgroundPicker: React.FunctionComponent<
     }
   })()
 
+  const isMyProject = useIsMyProject()
+
   return (
     <InspectorModal
       offsetX={props.offsetX - colorPickerWidth}
@@ -631,6 +634,7 @@ export const BackgroundPicker: React.FunctionComponent<
                   offsetY={props.offsetY}
                   id={props.id}
                   testId={props.testId}
+                  disabled={!isMyProject}
                 />
               ) : (
                 <ColorPickerInner
@@ -641,6 +645,7 @@ export const BackgroundPicker: React.FunctionComponent<
                   offsetY={props.offsetY}
                   id={props.id}
                   testId={props.testId}
+                  disabled={!isMyProject}
                 />
               )
             ) : null}