refactor(website): rewrite Appetize device frame with the Appetize JS…

… SDK (#558)

* refactor(website): drop unused event hooks

* chore(website): add missing appetize events

* chore(website): add the Appetize JS SDK

* refactor(website): rework the appetize device frame using the js sdk

* chore: update appetize workflow with new constants

* refactor(website): drop outdated appetize code

* fix(website): resolve warnings in console

* fix(website): update popup url when possible and restart full app on reload

* fix(website): make appetize device selector input controlled

* chore(website): tweak the auto-scaling device preview for embeds

* fix(website): add back embed appetize device overrides

* refactor(website): use Appetize device endpoint with device names

* fix(website): use proper device prop type in device preview

.github/workflows/appetize.yml

@@ -71,16 +71,18 @@ jobs:
                 const appetizeInfo = appetizePerSdk[sdkVersion][queue]
                 if (!appetizeInfo) throw new Error(`Configured Appetize is missing queue "${queue}"`);
                 if (!appetizeInfo.android) throw new Error(`Configured Appetize queue "${queue}" is missing Android`);
+                if (!appetizeInfo.android.publicKey) throw new Error(`Configured Appetize queue "${queue}" is missing Android's public key`);
                 if (!appetizeInfo.ios) throw new Error(`Configured Appetize queue "${queue}" is missing iOS`);
+                if (!appetizeInfo.ios.publicKey) throw new Error(`Configured Appetize queue "${queue}" is missing iOS's public key`);
 
                 return {
                   sdkVersion: sdkVersion,
                   appetizeName: queue,
                   appetizeTokenName: `SNACK_RUNTIME_APPETIZE_${queue.toUpperCase()}_TOKEN`,
-                  androidAppetizeId: appetizeInfo.android,
+                  androidAppetizeId: appetizeInfo.android.publicKey,
                   androidUrl: sdkInfo.androidClientUrl,
                   androidVersion: sdkInfo.androidClientVersion,
-                  iosAppetizeId: appetizeInfo.ios,
+                  iosAppetizeId: appetizeInfo.ios.publicKey,
                   iosUrl: sdkInfo.iosClientUrl,
                   iosVersion: sdkInfo.iosClientVersion,
                 }

website/src/client/components/DevicePreview/AppetizeDeviceControl.tsx

@@ -0,0 +1,112 @@
+import { StyleSheet, css } from 'aphrodite';
+import React, { PropsWithChildren } from 'react';
+
+import { useAppetizeDevices } from '../../utils/Appetize';
+import { c } from '../ThemeProvider';
+
+export function AppetizeDeviceControl({ children }: PropsWithChildren<object>) {
+  return <div className={css(styles.container)}>{children}</div>;
+}
+
+AppetizeDeviceControl.ReloadSnack = ReloadSnack;
+AppetizeDeviceControl.SelectDevice = SelectDevice;
+
+type ReloadSnackProps = {
+  canReloadSnack: boolean;
+  onReloadSnack: () => void;
+};
+
+function ReloadSnack({ onReloadSnack, canReloadSnack }: ReloadSnackProps) {
+  return (
+    <button
+      type="button"
+      className={css(styles.button)}
+      onClick={onReloadSnack}
+      disabled={!canReloadSnack}
+    >
+      Reload Snack
+    </button>
+  );
+}
+
+type SelectDeviceProps = {
+  platform: 'android' | 'ios';
+  selectedDevice?: string;
+  onSelectDevice?: (device: string) => void;
+};
+
+function SelectDevice({ platform, onSelectDevice, selectedDevice }: SelectDeviceProps) {
+  const devices = useAppetizeDevices(platform);
+
+  if (!selectedDevice) {
+    return null;
+  }
+
+  return (
+    <select
+      className={css(styles.button)}
+      value={selectedDevice}
+      onChange={(event) => event.target.value && onSelectDevice?.(event.target.value)}
+      disabled={!onSelectDevice}
+    >
+      {!devices.length ? (
+        <option key={selectedDevice} value={selectedDevice}>
+          {selectedDevice}
+        </option>
+      ) : (
+        devices.map(({ deviceName, deviceId }) => (
+          <option key={deviceId} value={deviceId}>
+            {deviceName}
+          </option>
+        ))
+      )}
+    </select>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flex: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    appearance: 'none',
+    outline: 0,
+    border: `1px solid ${c('border')}`,
+    borderLeftWidth: 0,
+    backgroundColor: c('content'),
+    color: c('text'),
+    padding: 8,
+    margin: '16px 0',
+    textAlign: 'center',
+    width: 112,
+
+    ':first-child': {
+      borderLeftWidth: 1,
+      borderRadius: '3px 0 0 3px',
+      padding: '6px 12px',
+    },
+
+    ':last-child': {
+      borderRadius: '0 3px 3px 0',
+      padding: '6px 12px',
+    },
+
+    ':only-child': {
+      borderLeftWidth: 1,
+      borderRadius: '3px',
+      padding: '6px 12px',
+    },
+
+    ':hover': {
+      backgroundColor: c('hover'),
+    },
+
+    ':disabled': {
+      opacity: 0.5,
+      backgroundColor: c('content'),
+    },
+  },
+});