Merge pull request #1073 from joshunrau/playground-background

fix: set default background color for interactive task to white

Author: joshunrau

.env.template

@@ -77,7 +77,7 @@ GATEWAY_DEV_SERVER_PORT=3500
 # The port to use for the Vite (full web app) development server
 WEB_DEV_SERVER_PORT=3000
 # Set an arbitrary delay (in milliseconds) for all responses (useful for testing suspense)
-API_RESPONSE_DELAY=0
+API_RESPONSE_DELAY=
 # If set to 'true' and NODE_ENV === 'development', then login is automated
 VITE_DEV_BYPASS_AUTH=false
 # The username to use if VITE_DEV_BYPASS_AUTH is set to true

apps/api/src/configuration/configuration.schema.ts

@@ -1,3 +1,4 @@
+import { isNumberLike, parseNumber } from '@douglasneuroinformatics/libjs';
 import { $BooleanString } from '@opendatacapture/schemas/core';
 import { z } from 'zod';
 
@@ -10,18 +11,27 @@ const $OptionalURL = z.preprocess(
     .transform((arg) => (arg ? new URL(arg) : undefined))
 );
 
+const $ParsedNumber = <TSchema extends z.ZodTypeAny>(schema: TSchema) => {
+  return z.preprocess((arg) => {
+    if (!isNumberLike(arg)) {
+      return undefined;
+    }
+    return parseNumber(arg);
+  }, schema);
+};
+
 export const $Configuration = z
   .object({
-    API_DEV_SERVER_PORT: z.coerce.number().positive().int().optional(),
-    API_PROD_SERVER_PORT: z.coerce.number().positive().int().default(80),
-    API_RESPONSE_DELAY: z.coerce.number().positive().int().optional(),
+    API_DEV_SERVER_PORT: $ParsedNumber(z.number().positive().int().optional()),
+    API_PROD_SERVER_PORT: $ParsedNumber(z.number().positive().int().default(80)),
+    API_RESPONSE_DELAY: $ParsedNumber(z.number().positive().int().optional()),
     DANGEROUSLY_DISABLE_PBKDF2_ITERATION: $BooleanString.default(false),
     DEBUG: $BooleanString,
     GATEWAY_API_KEY: z.string().min(32),
-    GATEWAY_DEV_SERVER_PORT: z.coerce.number().positive().int().optional(),
+    GATEWAY_DEV_SERVER_PORT: $ParsedNumber(z.number().positive().int().optional()),
     GATEWAY_ENABLED: $BooleanString,
     GATEWAY_INTERNAL_NETWORK_URL: $OptionalURL,
-    GATEWAY_REFRESH_INTERVAL: z.coerce.number().positive().int(),
+    GATEWAY_REFRESH_INTERVAL: $ParsedNumber(z.number().positive().int()),
     GATEWAY_SITE_ADDRESS: $OptionalURL,
     MONGO_DIRECT_CONNECTION: z.string().optional(),
     MONGO_REPLICA_SET: z.string().optional(),

package.json

@@ -1,7 +1,7 @@
 {
   "name": "opendatacapture",
   "type": "module",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "private": true,
   "packageManager": "[email protected]",
   "license": "Apache-2.0",

packages/instrument-renderer/src/components/InteractiveContent/InteractiveContent.tsx

@@ -112,7 +112,7 @@ export const InteractiveContent = React.memo<InteractiveContentProps>(function I
           name="interactive-instrument"
           ref={iFrameRef}
           srcDoc={`<script type="module">${bootstrapScript}</script>`}
-          style={{ height: dimensions, scale: `${scale}%`, width: dimensions }}
+          style={{ backgroundColor: 'white', height: dimensions, scale: `${scale}%`, width: dimensions }}
           title="Open Data Capture - Interactive Instrument"
         />
       </div>