Port ConnectionSettings to React

app/components-react/index.ts

@@ -65,6 +65,7 @@ import PlatformAppPopOut from './windows/PlatformAppPopOut';
 import RecentEventsWindow from './windows/RecentEvents';
 import NewBadge from './shared/NewBadge';
 import RecordingHistory from './windows/RecordingHistory';
+import ConnectionSettings from './windows/scene-transitions/ConnectionSettings';
 import UltraIcon from './shared/UltraIcon';
 import EditTransform from './windows/EditTransform';
 import InstalledApps from './windows/settings/InstalledApps';
@@ -141,5 +142,6 @@ export const components = {
   EditTransform,
   InstalledApps,
   Blank,
+  ConnectionSettings,
   Hotkeys,
 };

app/components-react/windows/scene-transitions/ConnectionSettings.tsx

@@ -0,0 +1,53 @@
+import { useVuex } from 'components-react/hooks';
+import { Services } from 'components-react/service-provider';
+import FormFactory from 'components-react/shared/inputs/FormFactory';
+import React from 'react';
+import { $t } from 'services/i18n';
+import { metadata } from '../../shared/inputs/metadata';
+
+export default function SceneTransitions(p: { connectionId: string }) {
+  const { TransitionsService, ScenesService, EditorCommandsService } = Services;
+
+  const { connection, transitionOptions } = useVuex(() => ({
+    connection: TransitionsService.state.connections.find(conn => conn.id === p.connectionId),
+    transitionOptions: TransitionsService.state.transitions.map(transition => ({
+      label: transition.name,
+      value: transition.id,
+    })),
+  }));
+
+  if (!connection) return <></>;
+
+  const values = {
+    fromSceneId: connection.fromSceneId,
+    transitionId: connection.transitionId,
+    toSceneId: connection.toSceneId,
+  };
+
+  const sceneOptions = [
+    { label: $t('All'), value: 'ALL' },
+    ...ScenesService.views.scenes.map(scene => ({ label: scene.name, value: scene.id })),
+  ];
+
+  const meta = {
+    fromSceneId: metadata.list({ label: $t('Beginning Scene'), options: sceneOptions }),
+    transitionId: metadata.list({ label: $t('Scene Transition'), options: transitionOptions }),
+    toSceneId: metadata.list({ label: $t('Ending Scene'), options: sceneOptions }),
+  };
+
+  function handleInput(key: string) {
+    return (value: string) =>
+      EditorCommandsService.actions.executeCommand('EditConnectionCommand', p.connectionId, {
+        [key]: value,
+      });
+  }
+
+  return (
+    <FormFactory
+      values={values}
+      metadata={meta}
+      onChange={handleInput}
+      formOptions={{ layout: 'vertical' }}
+    />
+  );
+}

app/components/shared/ReactComponentList.tsx

@@ -69,6 +69,9 @@ export class BrowserView extends ReactComponent {}
 })
 export class Chat extends ReactComponent {}
 
+@Component({ props: { name: { default: 'ConnectionSettings' } } })
+export class ConnectionSettings extends ReactComponent {}
+
 @Component({
   props: {
     name: { default: 'Display' },

app/components/windows/SceneTransitions.vue

@@ -96,7 +96,7 @@
       </modal>
       <modal name="connection-settings" :height="550">
         <div class="connection-settings-modal">
-          <connection-settings :connection-id="inspectedConnection" />
+          <connection-settings :componentProps="{ connectionId: inspectedConnection }" />
           <button
             class="button button--action transition-done"
             @click="dismissModal('connection-settings')"

app/components/windows/SceneTransitions.vue.ts

@@ -8,7 +8,7 @@ import TransitionSettings from 'components/TransitionSettings.vue';
 import { $t } from 'services/i18n';
 import Tabs, { ITab } from 'components/Tabs.vue';
 import { ScenesService } from 'services/scenes';
-import ConnectionSettings from 'components/ConnectionSettings';
+import { ConnectionSettings } from 'components/shared/ReactComponentList';
 import VModal from 'vue-js-modal';
 import { EditorCommandsService } from 'services/editor-commands';
 import Scrollable from 'components/shared/Scrollable';

test/regular/transitions.ts

@@ -3,7 +3,14 @@ import { clickSceneTransitions, addScene } from '../helpers/modules/scenes';
 import { getFormInput } from '../helpers/webdriver/forms';
 import { dismissModal } from '../helpers/webdriver/modals';
 import { FormMonkey } from '../helpers/form-monkey';
-import { click, clickButton, focusChild, focusMain } from '../helpers/modules/core';
+import {
+  click,
+  clickButton,
+  focusChild,
+  focusMain,
+  waitForDisplayed,
+} from '../helpers/modules/core';
+import { setInputValue } from '../helpers/modules/forms';
 
 useWebdriver({
   restartAppAfterEachTest: false,
@@ -79,12 +86,10 @@ test('Changing connections', async t => {
   await dismissModal(t);
   await (await app.client.$('button=Connections')).click();
   await (await app.client.$('button=Add Connection')).click();
-  const form = new FormMonkey(t);
-  await form.fillByTitles({
-    'Beginning Scene': connectionBegin,
-    'Scene Transition': connectionTransition,
-    'Ending Scene': connectionEnd,
-  });
+  await setInputValue('[data-name="fromSceneId"]', connectionBegin);
+  await setInputValue('[data-name="transitionId"]', connectionTransition);
+  await setInputValue('[data-name="toSceneId"]', connectionEnd);
+
   await (await t.context.app.client.$('button=Done')).click();
   await focusMain();
   await clickSceneTransitions();
@@ -93,13 +98,10 @@ test('Changing connections', async t => {
   await (await app.client.$('button=Connections')).click();
   await (await app.client.$('.icon-edit')).click();
 
-  t.true(
-    await form.includesByTitles({
-      'Beginning Scene': connectionBegin,
-      'Scene Transition': connectionTransition,
-      'Ending Scene': connectionEnd,
-    }),
-  );
+  await waitForDisplayed(`[data-selected-option-label="${connectionBegin}"]`);
+  await waitForDisplayed(`[data-selected-option-label="${connectionTransition}"]`);
+  await waitForDisplayed(`[data-selected-option-label="${connectionEnd}"]`);
+  t.pass();
 });
 
 test('Showing redudant connection warning', async t => {