Fix typing in Studio.tsx

app/components-react/editor/elements/LegacyEvents.tsx

@@ -9,15 +9,14 @@ import styles from './RecentEvents.m.less';
 
 const mins = { x: 360, y: 150 };
 
-export function LegacyEvents(p: { onPopout: () => void }) {
+export function LegacyEvents() {
   const { UserService, RecentEventsService, MagicLinkService } = Services;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const magicLinkDisabled = useRef(false);
 
   function popoutRecentEvents() {
-    p.onPopout();
-    return RecentEventsService.openRecentEventsWindow();
+    return RecentEventsService.actions.openRecentEventsWindow();
   }
 
   function handleBrowserViewReady(view: Electron.BrowserView) {

app/components-react/editor/elements/index.ts

@@ -1,7 +1,7 @@
-export { MiniFeed } from './Minifeed';
+export { MiniFeed as Minifeed } from './Minifeed';
 export { LegacyEvents } from './LegacyEvents';
-export { SceneSelectorElement } from './SceneSelector';
-export { SourceSelectorElement } from './SourceSelector';
+export { SceneSelectorElement as Scenes } from './SceneSelector';
+export { SourceSelectorElement as Sources } from './SourceSelector';
 export { Mixer } from './Mixer';
 export { RecordingPreview } from './RecordingPreview';
 export { StreamPreview } from './StreamPreview';

app/components-react/pages/Studio.tsx

@@ -1,10 +1,10 @@
 import React, { ReactNode, useMemo } from 'react';
-import cx from 'classnames';
 import { ELayoutElement, IVec2Array } from 'services/layout';
 import * as elements from 'components-react/editor/elements';
 import * as layouts from 'components-react/editor/layouts';
 import { Services } from 'components-react/service-provider';
 import { useVuex } from 'components-react/hooks';
+import { TLayoutElement } from 'services/layout/layout-data';
 
 export default function Studio(p: { onTotalWidth: (width: Number) => void; className?: string }) {
   const { LayoutService } = Services;
@@ -29,7 +29,7 @@ export default function Studio(p: { onTotalWidth: (width: Number) => void; class
     const children: Dictionary<ReactNode> = {};
     const childrenMins: Dictionary<IVec2> = {};
     elementsToRender.forEach((el: ELayoutElement) => {
-      const componentName = LayoutService.views.elementComponent(el);
+      const componentName: TLayoutElement = LayoutService.views.elementComponent(el);
       const Component = elements[componentName];
       const slot = slottedElements[el]?.slot;
       if (slot && Component) {
@@ -42,7 +42,8 @@ export default function Studio(p: { onTotalWidth: (width: Number) => void; class
 
   return (
     <Layout
-      className={cx('editor-page', p.className)}
+      className={p.className}
+      data-name="editor-page"
       childrenMins={childrenMins}
       onTotalWidth={(slots: IVec2Array, isColumns: boolean) => totalWidthHandler(slots, isColumns)}
     >

app/components-react/root/ResizeBar.tsx

@@ -87,8 +87,8 @@ export default function ResizeBar(p: React.PropsWithChildren<ResizeBarProps>) {
       {...resizableProps}
       handle={
         <div
-          className={cx(styles.resizeBar, styles[p.position], {
-            [styles['unset']]: v.hideStyleBlockers,
+          className={cx(styles.resizeBar, styles[p.position], p.className, {
+            [styles.unset]: v.hideStyleBlockers,
           })}
         >
           <div className={styles.resizeLine} />

app/components-react/windows/Main.m.less

@@ -20,7 +20,7 @@
   flex-grow: 1;
   height: 100%;
   position: relative;
-  overflow: auto;
+  // overflow: auto;
 }
 
 .main-contents--right {

app/services/layout/index.ts

@@ -6,7 +6,14 @@ import { mutation } from 'services/core/stateful-service';
 import { CustomizationService } from 'services/customization';
 import { $t } from 'services/i18n';
 import uuid from 'uuid/v4';
-import { LAYOUT_DATA, ELEMENT_DATA, ELayout, ELayoutElement } from './layout-data';
+import {
+  LAYOUT_DATA,
+  ELEMENT_DATA,
+  ELayout,
+  ELayoutElement,
+  TLayout,
+  TLayoutElement,
+} from './layout-data';
 import { UsageStatisticsService } from 'services/usage-statistics';
 import { menuTitles } from 'services/side-nav/menu-data';
 
@@ -35,13 +42,13 @@ class LayoutViews extends ViewHandler<ILayoutServiceState> {
     return this.state.tabs[this.state.currentTab];
   }
 
-  get component() {
+  get component(): TLayout {
     return LAYOUT_DATA[this.currentTab.currentLayout].component;
   }
 
   get elementsToRender() {
     return Object.keys(this.currentTab.slottedElements).filter(
-      key => this.currentTab.slottedElements[key].slot,
+      (key: TLayoutElement) => this.currentTab.slottedElements[key].slot,
     );
   }
 
@@ -62,7 +69,6 @@ class LayoutViews extends ViewHandler<ILayoutServiceState> {
   }
 
   elementComponent(element: ELayoutElement) {
-    if (!element) return '';
     return ELEMENT_DATA()[element].component;
   }
 

app/services/layout/layout-data.ts

@@ -11,23 +11,13 @@ export enum ELayout {
   Pyramid = 'Pyramid',
 }
 
-export enum ELayoutElement {
-  Minifeed = 'Minifeed',
-  LegacyEvents = 'LegacyEvents',
-  Display = 'Display',
-  Mixer = 'Mixer',
-  Scenes = 'Scenes',
-  Sources = 'Sources',
-  StreamPreview = 'StreamPreview',
-  RecordingPreview = 'RecordingPreview',
-  Browser = 'Browser',
-}
+export type TLayout = `${ELayout}`;
 
 type ILayoutData = {
   [Layout in ELayout]: {
     resizeDefaults: { bar1: number; bar2: number };
     className: string;
-    component: string;
+    component: TLayout;
   };
 };
 
@@ -74,10 +64,24 @@ export const LAYOUT_DATA: ILayoutData = {
   },
 };
 
+export enum ELayoutElement {
+  Minifeed = 'Minifeed',
+  LegacyEvents = 'LegacyEvents',
+  Display = 'Display',
+  Mixer = 'Mixer',
+  Scenes = 'Scenes',
+  Sources = 'Sources',
+  StreamPreview = 'StreamPreview',
+  RecordingPreview = 'RecordingPreview',
+  Browser = 'Browser',
+}
+
+export type TLayoutElement = `${ELayoutElement}`;
+
 type IElementData = {
   [Element in ELayoutElement]: {
     title: string;
-    component: string;
+    component: TLayoutElement;
   };
 };
 
@@ -88,19 +92,19 @@ export const ELEMENT_DATA = (): IElementData => ({
   },
   [ELayoutElement.Minifeed]: {
     title: $t('Mini Feed'),
-    component: 'MiniFeed',
+    component: 'Minifeed',
   },
   [ELayoutElement.Mixer]: {
     title: $t('Audio Mixer'),
     component: 'Mixer',
   },
   [ELayoutElement.Scenes]: {
     title: $t('Scene Selector'),
-    component: 'SceneSelectorElement',
+    component: 'Scenes',
   },
   [ELayoutElement.Sources]: {
     title: $t('Source Selector'),
-    component: 'SourceSelectorElement',
+    component: 'Sources',
   },
   [ELayoutElement.LegacyEvents]: {
     title: $t('Legacy Events'),

test/regular/themes.ts

@@ -43,7 +43,7 @@ test.skip('Installing a theme', async (t: TExecutionContext) => {
 
   // wait for installation complete
   await focusMain();
-  await waitForDisplayed('.editor-page', { timeout: 60000 });
+  await waitForDisplayed('[data-name="editor-page"]', { timeout: 60000 });
 
   // Should've loaded the overlay as a new scene collection
   await waitForDisplayed(`span=${OVERLAY_NAME}`);