fix(striker-ui): link server name to server detail page

striker-ui/components/Display/FullSize.tsx

@@ -94,7 +94,7 @@ const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
 
 interface FullSizeProps {
   setMode: Dispatch<SetStateAction<boolean>>;
-  uuid: string;
+  serverUUID: string;
   serverName: string | string[] | undefined;
 }
 
@@ -105,7 +105,7 @@ interface VncConnectionProps {
 
 const FullSize = ({
   setMode,
-  uuid,
+  serverUUID,
   serverName,
 }: FullSizeProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -127,7 +127,7 @@ const FullSize = ({
           const res = await putFetchWithTimeout(
             `${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`,
             {
-              server_uuid: uuid,
+              server_uuid: serverUUID,
               is_open: true,
             },
             120000,
@@ -137,7 +137,7 @@ const FullSize = ({
           setIsError(true);
         }
       })();
-  }, [uuid, vncConnection, isError]);
+  }, [serverUUID, vncConnection, isError]);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
     setAnchorEl(event.currentTarget);
@@ -145,7 +145,7 @@ const FullSize = ({
 
   const handleClickClose = async () => {
     await putFetch(`${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`, {
-      server_uuid: uuid,
+      server_uuid: serverUUID,
       is_open: false,
     });
   };

striker-ui/components/Display/Preview.tsx

@@ -26,11 +26,11 @@ type PreviewOptionalProps = {
   isFetchPreview?: boolean;
   isShowControls?: boolean;
   isUseInnerPanel?: boolean;
+  serverName?: string;
   setMode?: Dispatch<SetStateAction<boolean>> | null;
 };
 
 type PreviewProps = PreviewOptionalProps & {
-  serverName: string | string[] | undefined;
   serverUUID: string;
 };
 
@@ -41,6 +41,7 @@ const PREVIEW_DEFAULT_PROPS: Required<PreviewOptionalProps> = {
   isFetchPreview: true,
   isShowControls: true,
   isUseInnerPanel: false,
+  serverName: '',
   setMode: null,
 };
 
@@ -54,19 +55,18 @@ const PreviewPanel: FC<{ isUseInnerPanel: boolean }> = ({
     <Panel>{children}</Panel>
   );
 
-const PreviewPanelHeader: FC<{ isUseInnerPanel: boolean; text: string }> = ({
-  children,
-  isUseInnerPanel,
-  text,
-}) =>
+const PreviewPanelHeader: FC<{
+  isUseInnerPanel: boolean;
+  text: string | undefined;
+}> = ({ children, isUseInnerPanel, text }) =>
   isUseInnerPanel ? (
     <InnerPanelHeader>
-      <BodyText text={text} />
+      {text ? <BodyText text={text} /> : <></>}
       {children}
     </InnerPanelHeader>
   ) : (
     <PanelHeader>
-      <HeaderText text={text} />
+      {text ? <HeaderText text={text} /> : <></>}
       {children}
     </PanelHeader>
   );
@@ -114,10 +114,7 @@ const Preview: FC<PreviewProps> = ({
 
   return (
     <PreviewPanel isUseInnerPanel={isUseInnerPanel}>
-      <PreviewPanelHeader
-        isUseInnerPanel={isUseInnerPanel}
-        text={`${serverName}`}
-      >
+      <PreviewPanelHeader isUseInnerPanel={isUseInnerPanel} text={serverName}>
         {headerEndAdornment}
       </PreviewPanelHeader>
       <Box

striker-ui/pages/index.tsx

@@ -53,22 +53,28 @@ const createServerPreviewContainer = (
       }) => (
         <Preview
           externalPreview={screenshot}
-          headerEndAdornment={
+          headerEndAdornment={[
+            <Link
+              href={`/server?uuid=${serverUUID}&server_name=${serverName}`}
+              key={`server_list_to_server_${serverUUID}`}
+            >
+              {serverName}
+            </Link>,
             <Link
               href={`/anvil?anvil_uuid=${anvilUUID}`}
+              key={`server_list_server_${serverUUID}_to_anvil_${anvilUUID}`}
               sx={{
                 opacity: 0.7,
               }}
             >
               {anvilName}
-            </Link>
-          }
+            </Link>,
+          ]}
           isExternalPreviewStale={isScreenshotStale}
           isFetchPreview={false}
           isShowControls={false}
           isUseInnerPanel
           key={`server-preview-${serverUUID}`}
-          serverName={serverName}
           serverUUID={serverUUID}
           setMode={() => {
             router.push(`/server?uuid=${serverUUID}&server_name=${serverName}`);

striker-ui/pages/server/index.tsx

@@ -36,31 +36,32 @@ const Server = (): JSX.Element => {
 
   const router = useRouter();
   const { uuid, server_name } = router.query;
+  const serverUUID: string = uuid?.toString() || '';
+  const serverName: string = server_name?.toString() || '';
 
   return (
     <StyledDiv>
       <Head>
-        <title>{server_name}</title>
+        <title>{serverName}</title>
       </Head>
       <Header />
-      {typeof uuid === 'string' &&
-        (previewMode ? (
-          <Box className={classes.preview}>
-            <Preview
-              setMode={setPreviewMode}
-              serverName={server_name}
-              serverUUID={uuid}
-            />
-          </Box>
-        ) : (
-          <Box className={classes.fullView}>
-            <FullSize
-              setMode={setPreviewMode}
-              uuid={uuid}
-              serverName={server_name}
-            />
-          </Box>
-        ))}
+      {previewMode ? (
+        <Box className={classes.preview}>
+          <Preview
+            setMode={setPreviewMode}
+            serverName={serverName}
+            serverUUID={serverUUID}
+          />
+        </Box>
+      ) : (
+        <Box className={classes.fullView}>
+          <FullSize
+            setMode={setPreviewMode}
+            serverUUID={serverUUID}
+            serverName={serverName}
+          />
+        </Box>
+      )}
     </StyledDiv>
   );
 };