fix(striker-ui): link server list preview to VNC

striker-ui/components/Display/FullSize.tsx

@@ -1,9 +1,10 @@
-import { useState, useRef, useEffect, Dispatch, SetStateAction } from 'react';
+import { useState, useRef, useEffect, FC } from 'react';
 import dynamic from 'next/dynamic';
 import {
   Box,
   Button,
   IconButton,
+  IconButtonProps,
   Menu,
   MenuItem,
   Typography,
@@ -92,22 +93,32 @@ const StyledDiv = styled('div')(() => ({
 
 const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
 
-interface FullSizeProps {
+type FullSizeOptionalProps = {
-  setMode: Dispatch<SetStateAction<boolean>>;
+  onClickCloseButton?: IconButtonProps['onClick'];
+};
+
+type FullSizeProps = FullSizeOptionalProps & {
   serverUUID: string;
   serverName: string | string[] | undefined;
-}
+};
 
-interface VncConnectionProps {
+type VncConnectionProps = {
   protocol: string;
   forward_port: number;
-}
+};
 
-const FullSize = ({
+const FULL_SIZE_DEFAULT_PROPS: Required<
-  setMode,
+  Omit<FullSizeOptionalProps, 'onClickCloseButton'>
+> &
+  Pick<FullSizeOptionalProps, 'onClickCloseButton'> = {
+  onClickCloseButton: undefined,
+};
+
+const FullSize: FC<FullSizeProps> = ({
+  onClickCloseButton,
   serverUUID,
   serverName,
-}: FullSizeProps): JSX.Element => {
+}): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const rfb = useRef<typeof RFB>();
   const hostname = useRef<string | undefined>(undefined);
@@ -196,9 +207,13 @@ const FullSize = ({
                   className={classes.closeButton}
                   style={{ color: TEXT }}
                   component="span"
-                  onClick={() => {
+                  onClick={(
+                    ...args: Parameters<
+                      Exclude<IconButtonProps['onClick'], undefined>
+                    >
+                  ) => {
                     handleClickClose();
-                    setMode(true);
+                    onClickCloseButton?.call(null, ...args);
                   }}
                 >
                   <CloseIcon />
@@ -270,4 +285,6 @@ const FullSize = ({
   );
 };
 
+FullSize.defaultProps = FULL_SIZE_DEFAULT_PROPS;
+
 export default FullSize;

striker-ui/components/Display/Preview.tsx

@@ -1,12 +1,9 @@
+import { FC, ReactNode, useEffect, useState } from 'react';
 import {
-  Dispatch,
+  Box,
-  FC,
+  IconButton as MUIIconButton,
-  ReactNode,
+  IconButtonProps as MUIIconButtonProps,
-  SetStateAction,
+} from '@mui/material';
-  useEffect,
-  useState,
-} from 'react';
-import { Box, IconButton as MUIIconButton } from '@mui/material';
 import {
   DesktopWindows as DesktopWindowsIcon,
   PowerOffOutlined as PowerOffOutlinedIcon,
@@ -15,7 +12,7 @@ import {
 import API_BASE_URL from '../../lib/consts/API_BASE_URL';
 import { BORDER_RADIUS, GREY } from '../../lib/consts/DEFAULT_THEME';
 
-import IconButton from '../IconButton';
+import IconButton, { IconButtonProps } from '../IconButton';
 import { InnerPanel, InnerPanelHeader, Panel, PanelHeader } from '../Panels';
 import { BodyText, HeaderText } from '../Text';
 
@@ -26,23 +23,28 @@ type PreviewOptionalProps = {
   isFetchPreview?: boolean;
   isShowControls?: boolean;
   isUseInnerPanel?: boolean;
+  onClickConnectButton?: IconButtonProps['onClick'];
+  onClickPreview?: MUIIconButtonProps['onClick'];
   serverName?: string;
-  setMode?: Dispatch<SetStateAction<boolean>> | null;
 };
 
 type PreviewProps = PreviewOptionalProps & {
   serverUUID: string;
 };
 
-const PREVIEW_DEFAULT_PROPS: Required<PreviewOptionalProps> = {
+const PREVIEW_DEFAULT_PROPS: Required<
+  Omit<PreviewOptionalProps, 'onClickConnectButton' | 'onClickPreview'>
+> &
+  Pick<PreviewOptionalProps, 'onClickConnectButton' | 'onClickPreview'> = {
   externalPreview: '',
   headerEndAdornment: null,
   isExternalPreviewStale: false,
   isFetchPreview: true,
   isShowControls: true,
   isUseInnerPanel: false,
+  onClickConnectButton: undefined,
+  onClickPreview: undefined,
   serverName: '',
-  setMode: null,
 };
 
 const PreviewPanel: FC<{ isUseInnerPanel: boolean }> = ({
@@ -78,9 +80,10 @@ const Preview: FC<PreviewProps> = ({
   isFetchPreview = PREVIEW_DEFAULT_PROPS.isFetchPreview,
   isShowControls = PREVIEW_DEFAULT_PROPS.isShowControls,
   isUseInnerPanel = PREVIEW_DEFAULT_PROPS.isUseInnerPanel,
+  onClickPreview: previewClickHandler,
   serverName,
   serverUUID,
-  setMode,
+  onClickConnectButton: connectButtonClickHandle = previewClickHandler,
 }) => {
   const [isPreviewStale, setIsPreviewStale] = useState<boolean>(false);
   const [preview, setPreview] = useState<string>('');
@@ -130,7 +133,7 @@ const Preview: FC<PreviewProps> = ({
         <Box>
           <MUIIconButton
             component="span"
-            onClick={() => setMode?.call(null, false)}
+            onClick={previewClickHandler}
             sx={{
               borderRadius: BORDER_RADIUS,
               color: GREY,
@@ -161,7 +164,7 @@ const Preview: FC<PreviewProps> = ({
         </Box>
         {isShowControls && (
           <Box>
-            <IconButton onClick={() => setMode?.call(null, false)}>
+            <IconButton onClick={connectButtonClickHandle}>
               <DesktopWindowsIcon />
             </IconButton>
           </Box>

striker-ui/pages/index.tsx

@@ -75,10 +75,12 @@ const createServerPreviewContainer = (
           isShowControls={false}
           isUseInnerPanel
           key={`server-preview-${serverUUID}`}
-          serverUUID={serverUUID}
+          onClickPreview={() => {
-          setMode={() => {
+            router.push(
-            router.push(`/server?uuid=${serverUUID}&server_name=${serverName}`);
+              `/server?uuid=${serverUUID}&server_name=${serverName}&vnc=1`,
+            );
           }}
+          serverUUID={serverUUID}
         />
       ),
     )}

striker-ui/pages/server/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 import { Box } from '@mui/material';
@@ -35,10 +35,17 @@ const Server = (): JSX.Element => {
   const [previewMode, setPreviewMode] = useState<boolean>(true);
 
   const router = useRouter();
-  const { uuid, server_name } = router.query;
+  const { server_name, uuid, vnc } = router.query;
+  const isConnectVNC: boolean = (vnc?.toString() || '').length > 0;
   const serverUUID: string = uuid?.toString() || '';
   const serverName: string = server_name?.toString() || '';
 
+  useEffect(() => {
+    if (isConnectVNC) {
+      setPreviewMode(false);
+    }
+  }, [isConnectVNC]);
+
   return (
     <StyledDiv>
       <Head>
@@ -48,7 +55,9 @@ const Server = (): JSX.Element => {
       {previewMode ? (
         <Box className={classes.preview}>
           <Preview
-            setMode={setPreviewMode}
+            onClickPreview={() => {
+              setPreviewMode(false);
+            }}
             serverName={serverName}
             serverUUID={serverUUID}
           />
@@ -56,7 +65,9 @@ const Server = (): JSX.Element => {
       ) : (
         <Box className={classes.fullView}>
           <FullSize
-            setMode={setPreviewMode}
+            onClickCloseButton={() => {
+              setPreviewMode(true);
+            }}
             serverUUID={serverUUID}
             serverName={serverName}
           />