refactor(front-end): use novnc npm package instead of partially cloned novnc repo

striker-ui/components/Display/FullSize.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import KeyboardIcon from '@material-ui/icons/Keyboard';
 import IconButton from '@material-ui/core/IconButton';
-import RFB from './noVNC/core/rfb';
+import RFB from '@novnc/novnc/core/rfb';
 import { Panel } from '../Panels';
 import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 import keyCombinations from './keyCombinations';
@@ -18,6 +18,8 @@ const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
 
 const useStyles = makeStyles(() => ({
   displayBox: {
+    width: '75vw',
+    height: '75vh',
     paddingTop: '1em',
     paddingBottom: 0,
     paddingLeft: 0,
@@ -77,16 +79,12 @@ interface VncConnectionProps {
 
 const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const rfb = useRef<RFB>();
+  const rfb = useRef<typeof RFB>();
   const hostname = useRef<string | undefined>(undefined);
   const [vncConnection, setVncConnection] = useState<
     VncConnectionProps | undefined
   >(undefined);
   const [isError, setIsError] = useState<boolean>(false);
-  const [displaySize] = useState<{
-    width: string;
-    height: string;
-  }>({ width: '100%', height: '75vh' });
   const classes = useStyles();
 
   useEffect(() => {
@@ -146,14 +144,11 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
       <Box flexGrow={1}>
         <HeaderText text={`Server: ${serverName}`} />
       </Box>
-
-      <Box display="flex" className={classes.displayBox}>
       {vncConnection ? (
-          <>
+        <Box display="flex" className={classes.displayBox}>
           <VncDisplay
             rfb={rfb}
             url={`${vncConnection.protocol}://${hostname.current}:${vncConnection.forward_port}`}
-              style={displaySize}
             viewOnly={false}
             focusOnClick={false}
             clipViewport={false}
@@ -208,14 +203,12 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
               </Menu>
             </Box>
           </Box>
-          </>
+        </Box>
       ) : (
         <Box display="flex" className={classes.spinnerBox}>
           {!isError ? (
             <>
-                <HeaderText
+              <HeaderText text={`Establishing connection with ${serverName}`} />
-                  text={`Establishing connection with ${serverName}`}
-                />
               <HeaderText text="This may take a few minutes" />
               <Spinner />
             </>
@@ -231,10 +224,7 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
                 }}
                 style={{ textTransform: 'none' }}
               >
-                  <Typography
+                <Typography className={classes.buttonText} variant="subtitle1">
-                    className={classes.buttonText}
-                    variant="subtitle1"
-                  >
                   Reconnect
                 </Typography>
               </Button>
@@ -242,7 +232,6 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
           )}
         </Box>
       )}
-      </Box>
     </Panel>
   );
 };

striker-ui/components/Display/VncDisplay.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useRef, MutableRefObject, memo } from 'react';
-import RFB from './noVNC/core/rfb';
+import RFB from '@novnc/novnc/core/rfb';
 
 type Props = {
-  rfb: MutableRefObject<RFB | undefined>;
+  rfb: MutableRefObject<typeof RFB | undefined>;
   url: string;
-  style: { width: string; height: string };
   viewOnly: boolean;
   focusOnClick: boolean;
   clipViewport: boolean;
@@ -23,7 +22,6 @@ const VncDisplay = (props: Props): JSX.Element => {
   const {
     rfb,
     url,
-    style,
     viewOnly,
     focusOnClick,
     clipViewport,
@@ -86,7 +84,13 @@ const VncDisplay = (props: Props): JSX.Element => {
     if (rfb?.current) rfb.current.focus();
   };
 
-  return <div style={style} ref={screen} onMouseEnter={handleMouseEnter} />;
+  return (
+    <div
+      style={{ width: '100%', height: '75vh' }}
+      ref={screen}
+      onMouseEnter={handleMouseEnter}
+    />
+  );
 };
 
 export default memo(VncDisplay);