From 5adf51b5e01fdc72fd51c82ad05bf07fd55f519f Mon Sep 17 00:00:00 2001
From: Peter Amstutz <pamstutz@veritasgenetics.com>
Date: Fri, 25 Oct 2019 15:22:29 -0400
Subject: [PATCH] 15530: Use ResourceCluster to render cluster links.

---
 .../data-explorer/renderers.tsx               |  20 +-
 .../link-account-panel-root.tsx               | 220 +++++++++---------
 .../search-results-panel-view.tsx             |  12 +-
 .../site-manager-panel-root.tsx               |   5 +-
 4 files changed, 132 insertions(+), 125 deletions(-)

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index cc311248..16389e07 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -237,15 +237,17 @@ export const ResourceCluster = (props: { uuid: string }) => {
     const CLUSTER_ID_LENGTH = 5;
     const pos = props.uuid.indexOf('-');
     const clusterId = pos >= CLUSTER_ID_LENGTH ? props.uuid.substr(0, pos) : '';
-    const ci = pos >= CLUSTER_ID_LENGTH ? (props.uuid.charCodeAt(0) + props.uuid.charCodeAt(1)) % clusterColors.length : 0;
-    return <Typography>
-        <span style={{
-            backgroundColor: clusterColors[ci][0],
-            color: clusterColors[ci][1],
-            padding: "2px 7px",
-            borderRadius: 3
-        }}>{clusterId}</span>
-    </Typography>;
+    const ci = pos >= CLUSTER_ID_LENGTH ? (((((
+        (props.uuid.charCodeAt(0) * props.uuid.charCodeAt(1))
+        + props.uuid.charCodeAt(2))
+        * props.uuid.charCodeAt(3))
+        + props.uuid.charCodeAt(4))) % clusterColors.length) : 0;
+    return <span style={{
+        backgroundColor: clusterColors[ci][0],
+        color: clusterColors[ci][1],
+        padding: "2px 7px",
+        borderRadius: 3
+    }}>{clusterId}</span>;
 };
 
 export const ComputeNodeInfo = withResourceData('info', renderNodeInfo);
diff --git a/src/views/link-account-panel/link-account-panel-root.tsx b/src/views/link-account-panel/link-account-panel-root.tsx
index 359f7798..cbbeac60 100644
--- a/src/views/link-account-panel/link-account-panel-root.tsx
+++ b/src/views/link-account-panel/link-account-panel-root.tsx
@@ -71,117 +71,117 @@ type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPane
 
 export const LinkAccountPanelRoot = withStyles(styles)(
     ({ classes, targetUser, userToLink, status, isProcessing, error, startLinking, cancelLinking, linkAccount,
-        remoteHostsConfig, hasRemoteHosts, selectedCluster, setSelectedCluster, localCluster, loginCluster }: LinkAccountPanelRootProps) => {
-        return <Card className={classes.root}>
-            <CardContent>
-                {isProcessing && <Grid container item direction="column" alignContent="center" spacing={24}>
-                    <Grid item>
-                        Loading user info. Please wait.
+       remoteHostsConfig, hasRemoteHosts, selectedCluster, setSelectedCluster, localCluster, loginCluster }: LinkAccountPanelRootProps) => {
+           return <Card className={classes.root}>
+           <CardContent>
+           {isProcessing && <Grid container item direction="column" alignContent="center" spacing={24}>
+               <Grid item>
+                   Loading user info. Please wait.
+	       </Grid>
+               <Grid item style={{ alignSelf: 'center' }}>
+                   <CircularProgress />
+               </Grid>
+           </Grid>}
+           {!isProcessing && status === LinkAccountPanelStatus.INITIAL && targetUser && <div>
+               {isLocalUser(targetUser.uuid, localCluster) ? <Grid container spacing={24}>
+                   <Grid container item direction="column" spacing={24}>
+                       <Grid item>
+                           You are currently logged in as {displayUser(targetUser, true)}
+                       </Grid>
+                       <Grid item>
+                           You can link Arvados accounts. After linking, either login will take you to the same account.
+		       </Grid >
+                   </Grid>
+                   <Grid container item direction="row" spacing={24}>
+                       <Grid item>
+                           <Button disabled={!targetUser.isActive} color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_OTHER_LOGIN)}>
+                               Add another login to this account
+			   </Button>
+                       </Grid>
+                       <Grid item>
+                           <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
+                               Use this login to access another account
+			   </Button>
+                       </Grid>
+                   </Grid>
+                   {hasRemoteHosts && selectedCluster && <Grid container item direction="column" spacing={24}>
+                       <Grid item>
+                           You can also link {displayUser(targetUser, false)} with an account from a remote cluster.
 		       </Grid>
-                    <Grid item style={{ alignSelf: 'center' }}>
-                        <CircularProgress />
+                       <Grid item>
+                           Please select the cluster that hosts the account you want to link with:
+                           <Select id="remoteHostsDropdown" native defaultValue={selectedCluster} style={{ marginLeft: "1em" }}
+                                   onChange={(event) => setSelectedCluster(event.target.value)}>
+                               {Object.keys(remoteHostsConfig).map((k) => k !== localCluster ? <option key={k} value={k}>{k}</option> : null)}
+                           </Select>
+                       </Grid>
+                       <Grid item>
+                           <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_REMOTE_ACCOUNT)}>
+                               Link with an account on&nbsp;{hasRemoteHosts ? <label>{selectedCluster} </label> : null}
+                           </Button>
+                       </Grid>
+                   </Grid>}
+               </Grid> :
+                <Grid container spacing={24}>
+                    <Grid container item direction="column" spacing={24}>
+                        <Grid item>
+                            You are currently logged in as {displayUser(targetUser, true, true)}
+                        </Grid>
+                        {targetUser.isActive ? (loginCluster === "" ?
+						<> <Grid item>
+						    This a remote account. You can link a local Arvados account to this one. After linking, you can access the local account's data by logging into the <b>{localCluster}</b> cluster as user <b>{targetUser.email}</b> from <b>{targetUser.uuid.substr(0, 5)}</b>.
+						</Grid >
+						<Grid item>
+						    <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_LOCAL_TO_REMOTE)}>
+							Link an account from {localCluster} to this account
+						    </Button>
+						</Grid> </>
+					      : <Grid item>Please visit cluster <a href={remoteHostsConfig[loginCluster].workbench2Url + "/link_account"}>{loginCluster}</a> to perform account linking.</Grid>
+                        )
+                         : <Grid item>
+                             This an inactive remote account. An administrator must activate your account before you can proceed. After your accounts is activated, you can link a local Arvados account hosted by the <b>{localCluster}</b> cluster to this one.
+			 </Grid >}
                     </Grid>
                 </Grid>}
-                {!isProcessing && status === LinkAccountPanelStatus.INITIAL && targetUser && <div>
-                    {isLocalUser(targetUser.uuid, localCluster) ? <Grid container spacing={24}>
-                        <Grid container item direction="column" spacing={24}>
-                            <Grid item>
-                                You are currently logged in as {displayUser(targetUser, true)}
-                            </Grid>
-                            <Grid item>
-                                You can link Arvados accounts. After linking, either login will take you to the same account.
-			</Grid >
-                        </Grid>
-                        <Grid container item direction="row" spacing={24}>
-                            <Grid item>
-                                <Button disabled={!targetUser.isActive} color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_OTHER_LOGIN)}>
-                                    Add another login to this account
-			    </Button>
-                            </Grid>
-                            <Grid item>
-                                <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
-                                    Use this login to access another account
-			    </Button>
-                            </Grid>
-                        </Grid>
-                        {hasRemoteHosts && selectedCluster && <Grid container item direction="column" spacing={24}>
-                            <Grid item>
-                                You can also link {displayUser(targetUser, false)} with an account from a remote cluster.
-			</Grid>
-                            <Grid item>
-                                Please select the cluster that hosts the account you want to link with:
-                            <Select id="remoteHostsDropdown" native defaultValue={selectedCluster} style={{ marginLeft: "1em" }}
-                                    onChange={(event) => setSelectedCluster(event.target.value)}>
-                                    {Object.keys(remoteHostsConfig).map((k) => k !== localCluster ? <option key={k} value={k}>{k}</option> : null)}
-                                </Select>
-                            </Grid>
-                            <Grid item>
-                                <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_REMOTE_ACCOUNT)}>
-                                    Link with an account on&nbsp;{hasRemoteHosts ? <label>{selectedCluster} </label> : null}
-                                </Button>
-                            </Grid>
-                        </Grid>}
-                    </Grid> :
-                        <Grid container spacing={24}>
-                            <Grid container item direction="column" spacing={24}>
-                                <Grid item>
-                                    You are currently logged in as {displayUser(targetUser, true, true)}
-                                </Grid>
-                                {targetUser.isActive ? (loginCluster === "" ?
-                                    <> <Grid item>
-                                        This a remote account. You can link a local Arvados account to this one. After linking, you can access the local account's data by logging into the <b>{localCluster}</b> cluster as user <b>{targetUser.email}</b> from <b>{targetUser.uuid.substr(0, 5)}</b>.
-						 </Grid >
-                                        <Grid item>
-                                            <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_LOCAL_TO_REMOTE)}>
-                                                Link an account from {localCluster} to this account
-						     </Button>
-                                        </Grid> </>
-                                    : <Grid item>Must perform account linking on login cluster <a href={remoteHostsConfig[loginCluster].workbench2Url + "/link_account"}>{loginCluster}</a></Grid>
-                                )
-                                    : <Grid item>
-                                        This an inactive remote account. An administrator must activate your account before you can proceed. After your accounts is activated, you can link a local Arvados account hosted by the <b>{localCluster}</b> cluster to this one.
-			  </Grid >}
-                            </Grid>
-                        </Grid>}
-                </div>}
-                {!isProcessing && (status === LinkAccountPanelStatus.LINKING || status === LinkAccountPanelStatus.ERROR) && userToLink && targetUser &&
-                    <Grid container spacing={24}>
-                        {status === LinkAccountPanelStatus.LINKING && <Grid container item direction="column" spacing={24}>
-                            <Grid item>
-                                Clicking 'Link accounts' will link {displayUser(userToLink, true, !isLocalUser(targetUser.uuid, localCluster))} to {displayUser(targetUser, true, !isLocalUser(targetUser.uuid, localCluster))}.
-			    </Grid>
-                            {(isLocalUser(targetUser.uuid, localCluster)) && <Grid item>
-                                After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(targetUser)}.
-			    </Grid>}
-                            <Grid item>
-                                Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(targetUser)}.
-			    </Grid>
-                            {!isLocalUser(targetUser.uuid, localCluster) && <Grid item>
-                                You can access <b>{userToLink.email}</b> data by logging into <b>{localCluster}</b> with the <b>{targetUser.email}</b> account.
-			    </Grid>}
-                        </Grid>}
-                        {error === LinkAccountPanelError.NON_ADMIN && <Grid item>
-                            Cannot link admin account {displayUser(userToLink)} to non-admin account {displayUser(targetUser)}.
-			</Grid>}
-                        {error === LinkAccountPanelError.SAME_USER && <Grid item>
-                            Cannot link {displayUser(targetUser)} to the same account.
-			</Grid>}
-                        {error === LinkAccountPanelError.INACTIVE && <Grid item>
-                            Cannot link account {displayUser(userToLink)} to inactive account {displayUser(targetUser)}.
-			</Grid>}
-                        <Grid container item direction="row" spacing={24}>
-                            <Grid item>
-                                <Button variant="contained" onClick={() => cancelLinking()}>
-                                    Cancel
-				</Button>
-                            </Grid>
-                            <Grid item>
-                                <Button disabled={status === LinkAccountPanelStatus.ERROR} color="primary" variant="contained" onClick={() => linkAccount()}>
-                                    Link accounts
-				</Button>
-                            </Grid>
-                        </Grid>
-                    </Grid>}
+           </div>}
+           {!isProcessing && (status === LinkAccountPanelStatus.LINKING || status === LinkAccountPanelStatus.ERROR) && userToLink && targetUser &&
+            <Grid container spacing={24}>
+                {status === LinkAccountPanelStatus.LINKING && <Grid container item direction="column" spacing={24}>
+                    <Grid item>
+                        Clicking 'Link accounts' will link {displayUser(userToLink, true, !isLocalUser(targetUser.uuid, localCluster))} to {displayUser(targetUser, true, !isLocalUser(targetUser.uuid, localCluster))}.
+		    </Grid>
+                    {(isLocalUser(targetUser.uuid, localCluster)) && <Grid item>
+                        After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(targetUser)}.
+		    </Grid>}
+                    <Grid item>
+                        Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(targetUser)}.
+		    </Grid>
+                    {!isLocalUser(targetUser.uuid, localCluster) && <Grid item>
+                        You can access <b>{userToLink.email}</b> data by logging into <b>{localCluster}</b> with the <b>{targetUser.email}</b> account.
+		    </Grid>}
+                </Grid>}
+                {error === LinkAccountPanelError.NON_ADMIN && <Grid item>
+                    Cannot link admin account {displayUser(userToLink)} to non-admin account {displayUser(targetUser)}.
+		</Grid>}
+                {error === LinkAccountPanelError.SAME_USER && <Grid item>
+                    Cannot link {displayUser(targetUser)} to the same account.
+		</Grid>}
+                {error === LinkAccountPanelError.INACTIVE && <Grid item>
+                    Cannot link account {displayUser(userToLink)} to inactive account {displayUser(targetUser)}.
+		</Grid>}
+                <Grid container item direction="row" spacing={24}>
+                    <Grid item>
+                        <Button variant="contained" onClick={() => cancelLinking()}>
+                            Cancel
+			</Button>
+                    </Grid>
+                    <Grid item>
+                        <Button disabled={status === LinkAccountPanelStatus.ERROR} color="primary" variant="contained" onClick={() => linkAccount()}>
+                            Link accounts
+			</Button>
+                    </Grid>
+                </Grid>
+            </Grid>}
             </CardContent>
-        </Card>;
-    });
+           </Card>;
+       });
diff --git a/src/views/search-results-panel/search-results-panel-view.tsx b/src/views/search-results-panel/search-results-panel-view.tsx
index 45638b89..a834effe 100644
--- a/src/views/search-results-panel/search-results-panel-view.tsx
+++ b/src/views/search-results-panel/search-results-panel-view.tsx
@@ -123,10 +123,14 @@ export const SearchResultsPanelView = withStyles(styles, { withTheme: true })(
             contextMenuColumn={false}
             hideSearchInput
             title={
-                <div>{(props.localCluster !== homeCluster && loggedIn.length === 1) ?
-                    <span>Searching local cluster {props.localCluster} only.  To search multiple clusters, <a href={props.remoteHostsConfig[homeCluster] && props.remoteHostsConfig[homeCluster].workbench2Url}> start from your home Workbench.</a></span> :
-                    <span>Searching clusters: {loggedIn.map((ss) => <span key={ss.clusterId}> <a href={props.remoteHostsConfig[ss.clusterId].workbench2Url}> {ss.clusterId}</a></span>)}</span>}
-                    <span style={{ marginLeft: "2em" }}>Use <Link to={Routes.SITE_MANAGER} >Site Manager</Link> to manage which clusters will be searched.</span>
+                <div>
+                    {loggedIn.length === 1 ?
+                        <span>Searching local cluster <ResourceCluster uuid={props.localCluster + "-"} /></span>
+                        : <span>Searching clusters: {loggedIn.map((ss) => <span key={ss.clusterId}>
+                            <a href={props.remoteHostsConfig[ss.clusterId].workbench2Url} style={{ textDecoration: 'none' }}> <ResourceCluster uuid={ss.clusterId + "-"} /></a></span>)}</span>}
+                    {loggedIn.length === 1 && props.localCluster !== homeCluster ?
+                        <span>To search multiple clusters, <a href={props.remoteHostsConfig[homeCluster] && props.remoteHostsConfig[homeCluster].workbench2Url}> start from your home Workbench.</a></span>
+                        : <span style={{ marginLeft: "2em" }}>Use <Link to={Routes.SITE_MANAGER} >Site Manager</Link> to manage which clusters will be searched.</span>}
                 </div >
             }
         />;
diff --git a/src/views/site-manager-panel/site-manager-panel-root.tsx b/src/views/site-manager-panel/site-manager-panel-root.tsx
index c0a64e1c..64457f97 100644
--- a/src/views/site-manager-panel/site-manager-panel-root.tsx
+++ b/src/views/site-manager-panel/site-manager-panel-root.tsx
@@ -27,6 +27,7 @@ import { TextField } from "~/components/text-field/text-field";
 import { addSession } from "~/store/auth/auth-action-session";
 import { SITE_MANAGER_REMOTE_HOST_VALIDATION } from "~/validators/validators";
 import { Config } from '~/common/config';
+import { ResourceCluster } from '~/views-components/data-explorer/renderers';
 
 type CssRules = 'root' | 'link' | 'buttonContainer' | 'table' | 'tableRow' |
     'remoteSiteInfo' | 'buttonAdd' | 'buttonLoggedIn' | 'buttonLoggedOut' |
@@ -123,7 +124,7 @@ export const SiteManagerPanelRoot = compose(
                     <Grid item xs={12}>
                         <Typography paragraph={true} >
                             You can log in to multiple Arvados sites here, then use the multi-site search page to search collections and projects on all sites at once.
-															     </Typography>
+		    </Typography>
                     </Grid>
                 </Grid>
                 <Grid item xs={12}>
@@ -142,7 +143,7 @@ export const SiteManagerPanelRoot = compose(
                                 const validating = session.status === SessionStatus.BEING_VALIDATED;
                                 return <TableRow key={index} className={classes.tableRow}>
                                     <TableCell>{remoteHostsConfig[session.clusterId] ?
-                                        <a href={remoteHostsConfig[session.clusterId].workbench2Url}>{session.clusterId}</a>
+                                        <a href={remoteHostsConfig[session.clusterId].workbench2Url} style={{ textDecoration: 'none' }}> <ResourceCluster uuid={session.clusterId + "-"} /></a>
                                         : session.clusterId}</TableCell>
                                     <TableCell>{session.remoteHost}</TableCell>
                                     <TableCell>{validating ? <CircularProgress size={20} /> : session.username}</TableCell>
-- 
2.30.2