Merge branch 'master' of https://github.com/concrete-utopia/utopia in…

…to feature/variable-value-ordering

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

@@ -293,6 +293,39 @@ describe('Set element prop via the data picker', () => {
   })
 })
 
+// comment out tests temporarily because it causes a dom-walker test to fail
+// describe('Image preview for string control', () => {
+//   it('shows image preview for urls with image extension', async () => {
+//     const editor = await renderTestEditorWithCode(
+//       projectWithImage(
+//         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQIW2P8z8AARAwMjDAGACwBA/+8RVWvAAAAAElFTkSuQmCC',
+//       ),
+//       'await-first-dom-report',
+//     )
+//     await selectComponentsForTest(editor, [EP.fromString('sb/scene/pg:root/image')])
+
+//     expect(editor.renderedDOM.queryAllByTestId(ImagePreviewTestId)).toHaveLength(1)
+//   })
+//   it('does not show image preview for urls without image extension', async () => {
+//     const editor = await renderTestEditorWithCode(
+//       projectWithImage('https://i.pinimg.com/474x/4d/79/99/4d7999a51a1a397189a6f98168bcde45'),
+//       'await-first-dom-report',
+//     )
+//     await selectComponentsForTest(editor, [EP.fromString('sb/scene/pg:root/image')])
+
+//     expect(editor.renderedDOM.queryAllByTestId(ImagePreviewTestId)).toHaveLength(0)
+//   })
+//   it('does not show image preview for non-urls', async () => {
+//     const editor = await renderTestEditorWithCode(
+//       projectWithImage('hello'),
+//       'await-first-dom-report',
+//     )
+//     await selectComponentsForTest(editor, [EP.fromString('sb/scene/pg:root/image')])
+
+//     expect(editor.renderedDOM.queryAllByTestId(ImagePreviewTestId)).toHaveLength(0)
+//   })
+// })
+
 describe('Controls from registering components', () => {
   it('registering internal component', async () => {
     const editor = await renderTestEditorWithCode(
@@ -639,3 +672,72 @@ export var storyboard = (
   </Storyboard>
 )`
 }
+
+// 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 = 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':

utopia-remix/.env.sample

@@ -1,5 +1,5 @@
+APP_ENV="local"
+BACKEND_URL="http://127.0.0.1:8001"
 CORS_ORIGIN="http://localhost:8000"
-BACKEND_URL="http://localhost:8001"
-SERVER_ENV="local"
 DATABASE_URL="postgres://<username>:postgres@localhost:5432/utopia"
 REACT_APP_EDITOR_URL="http://localhost:8000"

utopia-remix/app/env.server.ts

@@ -1,13 +1,13 @@
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
-      SERVER_ENV?: 'local' | 'stage' | 'prod' | 'test'
+      APP_ENV?: 'local' | 'stage' | 'prod' | 'test'
     }
   }
 }
 
 export const ServerEnvironment = {
-  environment: process.env.SERVER_ENV,
+  environment: process.env.APP_ENV,
   // The URL of the actual backend server in the form <scheme>://<host>:<port>
   BackendURL: process.env.BACKEND_URL ?? '',
   // the CORS allowed origin for incoming requests

utopia-remix/readme.md

@@ -3,7 +3,19 @@
 ## Local setup
 
 0. cd to `utopia-remix`, run `pnpm install`
-1. Set up the `.env` file, there's a `.env.sample` file you can use as a blueprint.
+1. Set up the `.env` file, there's a `.env.sample` file you can use as a blueprint. See [#environment-variables]([#environment-variables]) for more details.
 2. Restart Utopia.
 3. Requests to the backend APIs will now be proxied via the Remix BFF.
 4. If you want to change that and have direct connections, update the value of `BACKEND_TYPE` inside `env-vars.ts`.
+
+## Environment variables
+
+These are the required environment variables; for local development they can be put in a `.env` file, using `.env.sample` as a blueprint.
+
+| Name                   | Description                                                                                                                                                                                                                                        | Example                                             |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
+| `APP_ENV`              | The environment the app is running on, with possible values shown [here](https://github.com/concrete-utopia/utopia/blob/e881cbf330e2ab68f8ea45f5afdbe8ed2c59ebca/utopia-remix/app/env.server.ts#L4).                                               | `local`                                             |
+| `BACKEND_URL`          | The base URL for the Haskell server, as `<scheme>://<host>:<port>`                                                                                                                                                                                 | `http://127.0.0.1:8001`                             |
+| `CORS_ORIGIN`          | The allowed origin for CORS requests, it should match the host of the browser app.                                                                                                                                                                 | `http://localhost:8000`                             |
+| `DATABASE_URL`         | The Postgres database connection string, as `postgres://<username>:<password>@<host>:<port>/<database>`. **For local development** the username field should be populated with your local machine username, as obtained with the `whoami` command. | `postgres://johndoe:postgres@localhost:5432/utopia` |
+| `REACT_APP_EDITOR_URL` | The base URL for the editor, as used in the frontend portions of the Remix app.                                                                                                                                                                    | `http://localhost:8000`                             |