From f8f33868de654c1bdded337cb2ad5c486ccf1c93 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Fri, 18 Feb 2022 18:48:08 -0300
Subject: [PATCH] 17754: Attempts to improve code layout for better
 readability.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
 .../link-account-panel-root.tsx               | 225 +++++++++---------
 1 file changed, 112 insertions(+), 113 deletions(-)

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 c5c86eb2..9dc28d66 100644
--- a/src/views/link-account-panel/link-account-panel-root.tsx
+++ b/src/views/link-account-panel/link-account-panel-root.tsx
@@ -73,125 +73,124 @@ 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.
-	                </Grid>
-                    <Grid item style={{ alignSelf: 'center' }}>
-                        <CircularProgress />
+        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>}
-                {!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 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 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 item>
+                            <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
+                                Use this login to access another account
+                            </Button>
                         </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>
+                    {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.substring(0, 5)}</b>.
+                            </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 color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_LOCAL_TO_REMOTE)}>
+                                    Link an account from {localCluster} to this account
                                 </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.substring(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>}
-                </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></>
+                            : <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> }
+            </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>}
-                        {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 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>}
-            </CardContent>
-        </Card>;
+                    <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>;
     });
-- 
2.30.2