fix(striker-ui): allow open VNC connection in new tab from dashboard

striker-ui/components/Display/Preview.tsx

@@ -27,6 +27,7 @@ type PreviewOptionalProps = {
   externalPreview?: string;
   externalTimestamp?: number;
   headerEndAdornment?: ReactNode;
+  hrefPreview?: string;
   isExternalLoading?: boolean;
   isExternalPreviewStale?: boolean;
   isFetchPreview?: boolean;
@@ -43,12 +44,19 @@ type PreviewProps = PreviewOptionalProps & {
 };
 
 const PREVIEW_DEFAULT_PROPS: Required<
-  Omit<PreviewOptionalProps, 'onClickConnectButton' | 'onClickPreview'>
+  Omit<
+    PreviewOptionalProps,
+    'hrefPreview' | 'onClickConnectButton' | 'onClickPreview'
+  >
 > &
-  Pick<PreviewOptionalProps, 'onClickConnectButton' | 'onClickPreview'> = {
+  Pick<
+    PreviewOptionalProps,
+    'hrefPreview' | 'onClickConnectButton' | 'onClickPreview'
+  > = {
   externalPreview: '',
   externalTimestamp: 0,
   headerEndAdornment: null,
+  hrefPreview: undefined,
   isExternalLoading: false,
   isExternalPreviewStale: false,
   isFetchPreview: true,
@@ -90,6 +98,7 @@ const Preview: FC<PreviewProps> = ({
   externalPreview = PREVIEW_DEFAULT_PROPS.externalPreview,
   externalTimestamp = PREVIEW_DEFAULT_PROPS.externalTimestamp,
   headerEndAdornment,
+  hrefPreview,
   isExternalLoading = PREVIEW_DEFAULT_PROPS.isExternalLoading,
   isExternalPreviewStale = PREVIEW_DEFAULT_PROPS.isExternalPreviewStale,
   isFetchPreview = PREVIEW_DEFAULT_PROPS.isFetchPreview,
@@ -153,6 +162,44 @@ const Preview: FC<PreviewProps> = ({
     ],
   );
 
+  const iconButton = useMemo(() => {
+    if (isPreviewLoading) {
+      return <Spinner mb="1em" mt="1em" />;
+    }
+
+    const disabled = !preview;
+    const sx: MUIIconButtonProps['sx'] = {
+      borderRadius: BORDER_RADIUS,
+      color: GREY,
+      padding: 0,
+    };
+
+    if (hrefPreview) {
+      return (
+        <MUIIconButton disabled={disabled} href={hrefPreview} sx={sx}>
+          {previewButtonContent}
+        </MUIIconButton>
+      );
+    }
+
+    return (
+      <MUIIconButton
+        component="span"
+        disabled={disabled}
+        onClick={previewClickHandler}
+        sx={sx}
+      >
+        {previewButtonContent}
+      </MUIIconButton>
+    );
+  }, [
+    hrefPreview,
+    isPreviewLoading,
+    preview,
+    previewButtonContent,
+    previewClickHandler,
+  ]);
+
   useEffect(() => {
     if (isFetchPreview) {
       (async () => {
@@ -195,24 +242,7 @@ const Preview: FC<PreviewProps> = ({
       </PreviewPanelHeader>
       <FlexBox row sx={{ '& > :first-child': { flexGrow: 1 } }}>
         {/* Box wrapper below is required to keep external preview size sane. */}
-        <Box textAlign="center">
+        <Box textAlign="center">{iconButton}</Box>
-          {isPreviewLoading ? (
-            <Spinner mt="1em" mb="1em" />
-          ) : (
-            <MUIIconButton
-              component="span"
-              disabled={!preview}
-              onClick={previewClickHandler}
-              sx={{
-                borderRadius: BORDER_RADIUS,
-                color: GREY,
-                padding: 0,
-              }}
-            >
-              {previewButtonContent}
-            </MUIIconButton>
-          )}
-        </Box>
         {isShowControls && preview && (
           <FlexBox>
             <IconButton onClick={connectButtonClickHandle}>

striker-ui/pages/index.tsx

@@ -1,7 +1,6 @@
 import { Add as AddIcon } from '@mui/icons-material';
 import { Box, Divider, Grid } from '@mui/material';
 import Head from 'next/head';
-import { NextRouter, useRouter } from 'next/router';
 import { FC, useEffect, useRef, useState } from 'react';
 
 import API_BASE_URL from '../lib/consts/API_BASE_URL';
@@ -28,10 +27,7 @@ type ServerListItem = ServerOverviewMetadata & {
   timestamp: number;
 };
 
-const createServerPreviewContainer = (
+const createServerPreviewContainer = (servers: ServerListItem[]) => (
-  servers: ServerListItem[],
-  router: NextRouter,
-) => (
   <Grid
     alignContent="stretch"
     columns={{ xs: 1, sm: 2, md: 3, xl: 4 }}
@@ -84,16 +80,12 @@ const createServerPreviewContainer = (
                 {anvilName}
               </Link>,
             ]}
+            hrefPreview={`/server?uuid=${serverUUID}&server_name=${serverName}&server_state=${serverState}&vnc=1`}
             isExternalLoading={loading}
             isExternalPreviewStale={isScreenshotStale}
             isFetchPreview={false}
             isShowControls={false}
             isUseInnerPanel
-            onClickPreview={() => {
-              router.push(
-                `/server?uuid=${serverUUID}&server_name=${serverName}&server_state=${serverState}&vnc=1`,
-              );
-            }}
             serverState={serverState}
             serverUUID={serverUUID}
           />
@@ -129,7 +121,6 @@ const filterServers = (allServers: ServerListItem[], searchTerm: string) =>
 
 const Dashboard: FC = () => {
   const componentMountedRef = useRef(true);
-  const router = useRouter();
 
   const [allServers, setAllServers] = useState<ServerListItem[]>([]);
   const [excludeServers, setExcludeServers] = useState<ServerListItem[]>([]);
@@ -244,11 +235,11 @@ const Dashboard: FC = () => {
                 value={inputSearchTerm}
               />
             </PanelHeader>
-            {createServerPreviewContainer(includeServers, router)}
+            {createServerPreviewContainer(includeServers)}
             {includeServers.length > 0 && (
               <Divider sx={{ backgroundColor: DIVIDER }} />
             )}
-            {createServerPreviewContainer(excludeServers, router)}
+            {createServerPreviewContainer(excludeServers)}
           </>
         )}
       </Panel>