Improve Login to DevSandbox button workflow

Signed-off-by: Jessica He <jhe@redhat.com>

Author: JessicaJHee

src/openshift/cluster.ts

@@ -500,6 +500,16 @@ export class Cluster extends OpenShiftItem {
         );
     }
 
+    static async validateLoginToken(userClusterUrl: string, userToken: string): Promise<boolean> {
+        try {
+            await Cluster.cli.executeTool(Command.odoLoginWithToken(userClusterUrl, userToken.trim()), undefined, true);
+            await Cluster.cli.executeTool(Command.odoLogout());
+            return true;
+        } catch { //token is invalid
+            return false;
+        }
+    }
+
     @vsCommand('openshift.explorer.login.clipboard')
     static async loginUsingClipboardToken(apiEndpointUrl: string, oauthRequestTokenUrl: string): Promise<string | null> {
         const clipboard = await Cluster.readFromClipboard();

src/webview/cluster/app/sandboxView.tsx

@@ -382,6 +382,9 @@ export default function addSandboxView(props): JSX.Element {
             postMessage('sandboxLoginUsingDataInClipboard', {apiEndpointUrl: currentState.apiEndpoint, oauthRequestTokenUrl: `${currentState.oauthTokenEndpoint}/request`});
         };
 
+        const invalidToken = currentState.errorCode === 'invalidToken';
+        const loginSandboxTitle = !invalidToken ? 'Login to DevSandbox OpenShift cluster with token from clipboard' : 'Token in clipboard is invalid. Select the Get Token option and copy to clipboard';
+
         return (
             <>
                 {( currentState.action === 'sandboxPageProvisioned' ) && (
@@ -413,8 +416,8 @@ export default function addSandboxView(props): JSX.Element {
                         <Tooltip title='Copy token from DevSandbox console page in browser' placement='bottom'>
                             <Button variant='contained' className='button' href={`${currentState.oauthTokenEndpoint}/request`}>Get token</Button>
                         </Tooltip>
-                        <Tooltip title='Login to DevSandbox OpenShift cluster with token from clipboard' placement='bottom'>
-                            <Button variant='contained' className='buttonSecondary' onClick={handleLoginButton}>Login to DevSandbox</Button>
+                        <Tooltip title={loginSandboxTitle} placement='bottom'>
+                            <span><Button variant='contained' disabled={invalidToken} className='button' onClick={handleLoginButton}>Login to DevSandbox</Button></span>
                         </Tooltip>
                     </div>
                 )}

src/webview/cluster/clusterViewLoader.ts

@@ -110,7 +110,12 @@ async function clusterEditorMessageListener (event: any ): Promise<any> {
                 } else {
                     if (signupStatus.status.ready) {
                         const oauthInfo = await sandboxAPI.getOauthServerInfo(signupStatus.apiEndpoint);
-                        panel.webview.postMessage({action: 'sandboxPageProvisioned', statusInfo: signupStatus.username, consoleDashboard: signupStatus.consoleURL, apiEndpoint: signupStatus.apiEndpoint, oauthTokenEndpoint: oauthInfo.token_endpoint });
+                        let errCode = '';
+                        if (!await Cluster.validateLoginToken(signupStatus.apiEndpoint, await vscode.env.clipboard.readText())) {
+                            errCode = 'invalidToken';
+                        }
+                        panel.webview.postMessage({ action: 'sandboxPageProvisioned', statusInfo: signupStatus.username, consoleDashboard: signupStatus.consoleURL, apiEndpoint: signupStatus.apiEndpoint, oauthTokenEndpoint: oauthInfo.token_endpoint, errorCode: errCode });
+                        pollClipboard(signupStatus);
                     } else {
                         // cluster is not ready and the reason is
                         if (signupStatus.status.verificationRequired) {
@@ -185,6 +190,22 @@ async function clusterEditorMessageListener (event: any ): Promise<any> {
     }
 }
 
+async function pollClipboard(signupStatus) {
+    while (panel) {
+        const previousContent = await vscode.env.clipboard.readText();
+        await new Promise(r => setTimeout(r, 500));
+        const currentContent = await vscode.env.clipboard.readText();
+        if (previousContent && previousContent !== currentContent) {
+            const oauthInfo = await sandboxAPI.getOauthServerInfo(signupStatus.apiEndpoint);
+            let errCode = '';
+            if (!await Cluster.validateLoginToken(signupStatus.apiEndpoint, currentContent)){
+                errCode = 'invalidToken';
+            }
+            panel.webview.postMessage({action: 'sandboxPageProvisioned', statusInfo: signupStatus.username, consoleDashboard: signupStatus.consoleURL, apiEndpoint: signupStatus.apiEndpoint, oauthTokenEndpoint: oauthInfo.token_endpoint, errorCode: errCode});
+        }
+    }
+}
+
 export default class ClusterViewLoader {
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     static get extensionPath() {