Feat/104 (#140)

* feat/104: isolate control components
* feat/104: open components in isolated window
* feat/104: update tests

client/src/features/control/message/MessageControlExport.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box } from '@chakra-ui/layout';
+import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
+import MessageControl from './MessageControl';
+import style from '../../editors/Editor.module.scss';
+import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+import { handleLinks } from '../../../common/utils/linkUtils';
+
+export default function MessageControlExport() {
+  return (
+    <Box className={style.messages}>
+      <h1>Messages Control</h1>
+      <FiArrowUpRight className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
+      <div className={style.content}>
+        <ErrorBoundary>
+          <MessageControl />
+        </ErrorBoundary>
+      </div>
+    </Box>
+  );
+}

client/src/features/control/playback/TimerControlExport.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box } from '@chakra-ui/layout';
+import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
+import PlaybackControl from './PlaybackControl';
+import styles from '../../editors/Editor.module.scss';
+import style from '../../editors/Editor.module.scss';
+import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+import { handleLinks } from '../../../common/utils/linkUtils';
+
+export default function TimerControlExport() {
+  return (
+    <Box className={styles.playback}>
+      <h1>Timer Control</h1>
+      <FiArrowUpRight className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
+      <div className={styles.content}>
+        <ErrorBoundary>
+          <PlaybackControl />
+        </ErrorBoundary>
+      </div>
+    </Box>
+  );
+}