fix(striker-ui): match front-end VNC connect

striker-ui/components/Display/FullSize.tsx

@@ -1,25 +1,31 @@
-import { useState, useRef, useEffect, FC } from 'react';
+import {
-import dynamic from 'next/dynamic';
+  Close as CloseIcon,
+  Keyboard as KeyboardIcon,
+} from '@mui/icons-material';
 import {
   Box,
-  Button,
   IconButton,
   IconButtonProps,
   Menu,
   MenuItem,
+  styled,
   Typography,
 } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import CloseIcon from '@mui/icons-material/Close';
-import KeyboardIcon from '@mui/icons-material/Keyboard';
 import RFB from '@novnc/novnc/core/rfb';
-import { Panel } from '../Panels';
+import { useState, useRef, useEffect, FC } from 'react';
+import dynamic from 'next/dynamic';
+
+import API_BASE_URL from '../../lib/consts/API_BASE_URL';
 import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
+
+import ContainedButton from '../ContainedButton';
+import { HeaderText } from '../Text';
 import keyCombinations from './keyCombinations';
+import { Panel } from '../Panels';
 import putFetch from '../../lib/fetchers/putFetch';
 import putFetchWithTimeout from '../../lib/fetchers/putFetchWithTimeout';
-import { HeaderText } from '../Text';
 import Spinner from '../Spinner';
+import useProtectedState from '../../hooks/useProtectedState';
 
 const PREFIX = 'FullSize';
 
@@ -31,7 +37,6 @@ const classes = {
   closeBox: `${PREFIX}-closeBox`,
   buttonsBox: `${PREFIX}-buttonsBox`,
   keysItem: `${PREFIX}-keysItem`,
-  buttonText: `${PREFIX}-buttonText`,
 };
 
 const StyledDiv = styled('div')(() => ({
@@ -85,12 +90,10 @@ const StyledDiv = styled('div')(() => ({
       backgroundColor: TEXT,
     },
   },
-
-  [`& .${classes.buttonText}`]: {
-    color: BLACK,
-  },
 }));
 
+const CMD_VNC_PIPE_URL = `${API_BASE_URL}/command/vnc-pipe`;
+
 const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
 
 type FullSizeOptionalProps = {
@@ -104,7 +107,7 @@ type FullSizeProps = FullSizeOptionalProps & {
 
 type VncConnectionProps = {
   protocol: string;
-  forward_port: number;
+  forwardPort: number;
 };
 
 const FULL_SIZE_DEFAULT_PROPS: Required<
@@ -122,43 +125,54 @@ const FullSize: FC<FullSizeProps> = ({
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const rfb = useRef<typeof RFB>();
   const hostname = useRef<string | undefined>(undefined);
-  const [vncConnection, setVncConnection] = useState<
+  const [vncConnection, setVncConnection] = useProtectedState<
     VncConnectionProps | undefined
   >(undefined);
-  const [isError, setIsError] = useState<boolean>(false);
+  const [vncConnecting, setVncConnecting] = useProtectedState<boolean>(false);
+  const [isError, setIsError] = useProtectedState<boolean>(false);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       hostname.current = window.location.hostname;
     }
 
-    if (!vncConnection)
+    if (!vncConnection && !vncConnecting)
       (async () => {
+        setVncConnecting(true);
+
         try {
           const res = await putFetchWithTimeout(
-            `${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`,
+            CMD_VNC_PIPE_URL,
             {
-              server_uuid: serverUUID,
+              serverUuid: serverUUID,
-              is_open: true,
+              open: true,
             },
             120000,
           );
+
           setVncConnection(await res.json());
         } catch {
           setIsError(true);
+        } finally {
+          setVncConnecting(false);
         }
       })();
-  }, [serverUUID, vncConnection, isError]);
+  }, [
+    serverUUID,
+    vncConnection,
+    isError,
+    setVncConnection,
+    setIsError,
+    vncConnecting,
+    setVncConnecting,
+  ]);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
     setAnchorEl(event.currentTarget);
   };
 
   const handleClickClose = async () => {
-    await putFetch(`${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`, {
+    await putFetch(CMD_VNC_PIPE_URL, { serverUuid: serverUUID });
-      server_uuid: serverUUID,
-      is_open: false,
-    });
   };
 
   const handleSendKeys = (scans: string[]) => {
@@ -189,7 +203,7 @@ const FullSize: FC<FullSizeProps> = ({
           <Box display="flex" className={classes.displayBox}>
             <VncDisplay
               rfb={rfb}
-              url={`${vncConnection.protocol}://${hostname.current}:${vncConnection.forward_port}`}
+              url={`${vncConnection.protocol}://${hostname.current}:${vncConnection.forwardPort}`}
               viewOnly={false}
               focusOnClick={false}
               clipViewport={false}
@@ -262,20 +276,13 @@ const FullSize: FC<FullSizeProps> = ({
                 <Box style={{ paddingBottom: '2em' }}>
                   <HeaderText text="There was a problem connecting to the server, please try again" />
                 </Box>
-                <Button
+                <ContainedButton
-                  variant="contained"
                   onClick={() => {
                     setIsError(false);
                   }}
-                  style={{ textTransform: 'none' }}
                 >
-                  <Typography
+                  Reconnect
-                    className={classes.buttonText}
+                </ContainedButton>
-                    variant="subtitle1"
-                  >
-                    Reconnect
-                  </Typography>
-                </Button>
               </>
             )}
           </Box>