Investigate test breakage more

editor/src/components/editor/store/project-server-state.tsx

@@ -6,6 +6,7 @@ import { updateProjectServerState } from '../actions/action-creators'
 import { checkProjectOwned, projectIsStoredLocally } from '../persistence/persistence-backend'
 import type { ProjectOwnership } from '../persistence/generic/persistence-types'
 import { CollaborationEndpoints } from '../collaborative-endpoints'
+import { IS_TEST_ENVIRONMENT } from '../../../common/env-vars'
 
 export interface ProjectMetadataFromServer {
   title: string
@@ -163,7 +164,7 @@ export interface ProjectServerStateUpdaterProps {
 }
 
 let serverStateWatcherInstance: number | null = null
-const baseWatcherIntervalTime: number = 10 * 1000
+const baseWatcherIntervalTime: number = (IS_TEST_ENVIRONMENT ? 100 : 10) * 1000
 let currentWatcherIntervalMultiplier: number = 1
 
 function restartServerStateWatcher(

editor/src/components/inspector/sections/component-section/component-section.spec.browser2.tsx

@@ -8,6 +8,7 @@ import {
   DataPickerPopupTestId,
   VariableFromScopeOptionTestId,
 } from './component-section'
+import { ImagePreviewTestId } from './property-control-controls'
 
 describe('Set element prop via the data picker', () => {
   it('can pick from the property data picker', async () => {
@@ -320,3 +321,72 @@ registerExternalComponent(
     ],
   },
 )`
+
+const projectWithImage = (imageUrl: string) => `import * as React from 'react'
+import {
+  Storyboard,
+  Scene,
+  registerInternalComponent,
+} from 'utopia-api'
+
+function Image({ url }) {
+  return <img src={url} />
+}
+
+var Playground = ({ style }) => {
+  return (
+    <div style={style} data-uid='root'>
+      <Image url='${imageUrl}' data-uid='image' />
+    </div>
+  )
+}
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      style={{
+        width: 521,
+        height: 266,
+        position: 'absolute',
+        left: 554,
+        top: 247,
+        backgroundColor: 'white',
+      }}
+      data-uid='scene'
+      data-testid='scene'
+      commentId='120'
+    >
+      <Playground
+        style={{
+          width: 454,
+          height: 177,
+          position: 'absolute',
+          left: 34,
+          top: 44,
+          backgroundColor: 'white',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        title='Hello Utopia'
+        data-uid='pg'
+      />
+    </Scene>
+  </Storyboard>
+)
+
+registerInternalComponent(Image, {
+  supportsChildren: false,
+  properties: {
+    url: {
+      control: 'string-input',
+    },
+  },
+  variants: [
+    {
+      code: '<Image />',
+    },
+  ],
+})
+
+`

editor/src/components/inspector/sections/component-section/property-control-controls.tsx

@@ -55,6 +55,7 @@ import {
   normalisePathToUnderlyingTarget,
 } from '../../../custom-code/code-file'
 import { useDispatch } from '../../../editor/store/dispatch-context'
+import { isImage } from '../../../../core/shared/utils'
 
 export interface ControlForPropProps<T extends BaseControlDescription> {
   propPath: PropertyPath
@@ -437,28 +438,68 @@ const NumberWithSliderControl = React.memo(
   },
 )
 
+export const ImagePreviewTestId = 'image-preview'
+
 export const StringInputPropertyControl = React.memo(
   (props: ControlForPropProps<StringInputControlDescription>) => {
     const { propName, propMetadata, controlDescription } = props
 
     const controlId = `${propName}-string-input-property-control`
     const value = propMetadata.propertyStatus.set ? propMetadata.value : undefined
 
+    const safeValue = typeof value === 'string' ? value : ''
+
     return (
-      <StringControl
-        key={controlId}
-        id={controlId}
-        testId={controlId}
-        value={value ?? ''}
-        onSubmitValue={propMetadata.onSubmitValue}
-        controlStatus={propMetadata.controlStatus}
-        controlStyles={propMetadata.controlStyles}
-        focus={props.focusOnMount}
-      />
+      <FlexColumn style={{ gap: 5 }}>
+        <StringControl
+          key={controlId}
+          id={controlId}
+          testId={controlId}
+          value={safeValue}
+          onSubmitValue={propMetadata.onSubmitValue}
+          controlStatus={propMetadata.controlStatus}
+          controlStyles={propMetadata.controlStyles}
+          focus={props.focusOnMount}
+        />
+        <ImagePreview url={safeValue} />
+      </FlexColumn>
     )
   },
 )
 
+interface ImagePreviewProps {
+  url: string
+}
+const ImagePreview = React.memo(({ url }: ImagePreviewProps) => {
+  const [imageCanBeLoaded, setImageCanBeLoaded] = React.useState(isImage(url))
+
+  // we need to track if the url has changed so we retry loading the image even if it failed before
+  const urlRef = React.useRef<string>(url)
+  if (urlRef.current !== url) {
+    setImageCanBeLoaded(isImage(url))
+    urlRef.current = url
+  }
+
+  // don't render the img when it can not be loaded
+  const onImageError = React.useCallback(() => {
+    setImageCanBeLoaded(false)
+  }, [setImageCanBeLoaded])
+
+  if (!imageCanBeLoaded) {
+    return null
+  }
+
+  return (
+    <img
+      data-testid={ImagePreviewTestId}
+      src={url}
+      style={{ width: '100%' }}
+      onError={onImageError}
+    />
+  )
+})
+ImagePreview.displayName = 'ImagePreview'
+
 function keysForVectorOfType(vectorType: 'vector2' | 'vector3' | 'vector4'): Array<string> {
   switch (vectorType) {
     case 'vector2':