Enable useNextVariants and replace depracated typography variants

[arvados-workbench2.git] / src / views / virtual-machine-panel / virtual-machine-user-panel.tsx

diff --git a/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx b/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx
index 175630530cb0b99c595d3e5e122fa72ca9b52af8..291041b3b984cbf4ddf3951b99c1931043f5335c 100644 (file)
--- a/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx
+++ b/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx
@@ -57,10 +57,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-const mapStateToProps = ({ virtualMachines }: RootState) => {
+const mapStateToProps = (state: RootState) => {
     return {
-        requestedDate: virtualMachines.date,
-        ...virtualMachines
+        requestedDate: state.virtualMachines.date,
+        userUuid: state.auth.user!.uuid,
+        ...state.virtualMachines
     };
 };
 
@@ -72,6 +73,7 @@ const mapDispatchToProps = (dispatch: Dispatch): Pick<VirtualMachinesPanelAction
 interface VirtualMachinesPanelDataProps {
     requestedDate: string;
     virtualMachines: ListResults<any>;
+    userUuid: string;
     links: ListResults<any>;
 }
 
@@ -108,7 +110,7 @@ const CardContentWithoutVirtualMachines = (props: VirtualMachineProps) =>
         <Card>
             <CardContent className={props.classes.cardWithoutMachines}>
                 <Grid item xs={6}>
-                    <Typography variant="body2">
+                    <Typography variant='body1'>
                         You do not have access to any virtual machines. Some Arvados features require using the command line. You may request access to a hosted virtual machine with the command line shell.
                     </Typography>
                 </Grid>
@@ -147,7 +149,7 @@ const virtualMachineSendRequest = (props: VirtualMachineProps) =>
             SEND REQUEST FOR SHELL ACCESS
         </Button>
         {props.requestedDate &&
-            <Typography variant="body1">
+            <Typography >
                 A request for shell access was sent on {props.requestedDate}
             </Typography>}
     </span>;
@@ -166,11 +168,11 @@ const virtualMachinesTable = (props: VirtualMachineProps) =>
             {props.virtualMachines.items.map((it, index) =>
                 <TableRow key={index}>
                     <TableCell>{it.hostname}</TableCell>
-                    <TableCell>{getUsername(props.links)}</TableCell>
-                    <TableCell>ssh {getUsername(props.links)}@{it.hostname}.arvados</TableCell>
+                    <TableCell>{getUsername(props.links, props.userUuid)}</TableCell>
+                    <TableCell>ssh {getUsername(props.links, props.userUuid)}@{it.hostname}.arvados</TableCell>
                     <TableCell>
-                        <a href={`https://workbench.c97qk.arvadosapi.com${it.href}/webshell/${getUsername(props.links)}`} target="_blank" className={props.classes.link}>
-                            Log in as {getUsername(props.links)}
+                        <a href={`https://workbench.c97qk.arvadosapi.com${it.href}/webshell/${getUsername(props.links, props.userUuid)}`} target="_blank" className={props.classes.link}>
+                            Log in as {getUsername(props.links, props.userUuid)}
                         </a>
                     </TableCell>
                 </TableRow>
@@ -178,16 +180,16 @@ const virtualMachinesTable = (props: VirtualMachineProps) =>
         </TableBody>
     </Table>;
 
-const getUsername = (links: ListResults<any>) => {
-    return links.items[0].properties.username;
+const getUsername = (links: ListResults<any>, userUuid: string) => {
+    return links.items.map(it => it.tailUuid === userUuid ? it.properties.username : '');
 };
 
 const CardSSHSection = (props: VirtualMachineProps) =>
     <Grid item xs={12}>
         <Card>
             <CardContent>
-                <Typography variant="body2">
-                    In order to access virtual machines using SSH, <Link to={Routes.SSH_KEYS} className={props.classes.link}>add an SSH key to your account</Link> and add a section like this to your SSH configuration file ( ~/.ssh/config):
+                <Typography variant='body1'>
+                    In order to access virtual machines using SSH, <Link to={Routes.SSH_KEYS_USER} className={props.classes.link}>add an SSH key to your account</Link> and add a section like this to your SSH configuration file ( ~/.ssh/config):
                 </Typography>
                 <DefaultCodeSnippet
                     className={props.classes.codeSnippet}