Add "OK" and "Cancel" buttons to cluster login quick picks input fields

Signed-off-by: Victor Rubezhny <vrubezhny@redhat.com>

Author: vrubezhny

src/openshift/cluster.ts

@@ -232,10 +232,10 @@ export class Cluster extends OpenShiftItem {
                     const prompt = 'Provide new Cluster URL to connect';
                     const validateInput = (value: string) => NameValidator.validateUrl('Invalid URL provided', value);
                     const newURL = await this.enterValue(prompt, '', false, validateInput);
-                    if (!newURL) {
-                        resolve(await Cluster.showQuickPick(clusterURl)); // Back
-                    } else if (newURL === null) {
+                    if (newURL === null) {
                         return null; // Cancel
+                    } else if (!newURL) {
+                        resolve(await Cluster.showQuickPick(clusterURl)); // Back
                     } else {
                        resolve(newURL);
                     }
@@ -395,8 +395,13 @@ export class Cluster extends OpenShiftItem {
                             // so it's running
                             clusterIsUp = true;
                         } catch (e) {
-                            const clusterURLObj = new URL(clusterURL);
-                            if (clusterURLObj.hostname === 'api.crc.testing') {
+                            let clusterURLObj: any = undefined;
+                            try {
+                                clusterURLObj = new URL(clusterURL);
+                            } catch (_) {
+                                // Ignore
+                            }
+                            if (clusterURLObj && clusterURLObj.hostname === 'api.crc.testing') {
                                 const startCrc = 'Start OpenShift Local';
                                 const promptResponse = await window.showWarningMessage(
                                     'The cluster appears to be a OpenShift Local cluster, but it isn\'t running',
@@ -409,7 +414,7 @@ export class Cluster extends OpenShiftItem {
                                     // it will take the cluster a few minutes to stabilize
                                     return null;
                                 }
-                            } else if (/api\.sandbox-.*openshiftapps\.com/.test(clusterURLObj.hostname)) {
+                            } else if (clusterURLObj && /api\.sandbox-.*openshiftapps\.com/.test(clusterURLObj.hostname)) {
                                 const devSandboxSignup = 'Sign up for OpenShift Dev Sandbox';
                                 const promptResponse = await window.showWarningMessage(
                                     'The cluster appears to be a OpenShift Dev Sandbox cluster, but it isn\'t running',
@@ -435,10 +440,10 @@ export class Cluster extends OpenShiftItem {
                 }
                 case Step.selectLoginMethod: {
                     const result = await Cluster.getLoginMethod();
-                    if (!result) { // Back Button is hit
-                        step = Step.selectCluster;
-                    } if (result === null) { // User cancelled the operation
+                    if (result == null) { // User cancelled the operation
                         return null;
+                    } else if (!result) { // Back button is hit
+                        step = Step.selectCluster;
                     } else if(result === 'Credentials') {
                         step = Step.loginUsingCredentials;
                     } else if (result === 'Token') {
@@ -451,10 +456,11 @@ export class Cluster extends OpenShiftItem {
                     const clusterVersions: string = step === Step.loginUsingCredentials
                         ? await Cluster.credentialsLogin(true, clusterURL)
                             : await Cluster.tokenLogin(clusterURL, true);
-                    if (!clusterVersions) { // Back Button is hit
-                        step = Step.selectLoginMethod;
-                    } else if (clusterVersions === null) { // User cancelled the operation
+
+                    if (clusterVersions === null) { // User cancelled the operation
                         return null;
+                    } else if (!clusterVersions) { // Back button is hit
+                        step = Step.selectLoginMethod;
                     } else {
                         // login successful
                         return null;
@@ -526,6 +532,11 @@ export class Cluster extends OpenShiftItem {
             quickPick.onDidTriggerButton((button) => {
                 if (button === QuickInputButtons.Back) {
                     resolve(undefined);
+                // } else if (button === enterBtn) {
+                //     await acceptInput();
+                // } else if (button === cancelBtn) {
+                //     resolve(null);
+                //     input.dispose();
                 }
             });
             quickPick.show();
@@ -545,14 +556,15 @@ export class Cluster extends OpenShiftItem {
             input.value = initialValue;
             input.prompt = prompt;
             input.password = password;
-            input.buttons = [QuickInputButtons.Back];
-            const validationMessage: string = validate(input.value);
+            const enterBtn = new quickBtn(new ThemeIcon('check'), 'Enter');
+            const cancelBtn = new quickBtn(new ThemeIcon('close'), 'Cancel');
+            input.buttons = [QuickInputButtons.Back, enterBtn, cancelBtn];
+            const validationMessage: string = validate(input.value? input.value : '');
             input.ignoreFocusOut = true;
             if (validationMessage) {
                 input.validationMessage = validationMessage;
             }
-
-            input.onDidAccept(async () => {
+            const acceptInput = async () => {
                 const value = input.value;
                 input.enabled = false;
                 input.busy = true;
@@ -562,21 +574,27 @@ export class Cluster extends OpenShiftItem {
                 }
                 input.enabled = true;
                 input.busy = false;
-            });
+            };
+            input.onDidAccept(acceptInput);
             input.onDidChangeValue(async text => {
                 const current = validate(text);
                 const validating = current;
                 const validationMessage = await current;
                 if (current === validating) {
-                input.validationMessage = validationMessage;
+                    input.validationMessage = validationMessage;
                 }
             });
             input.onDidHide(() => {
                 input.dispose();
             })
-            input.onDidTriggerButton((event) => {
+            input.onDidTriggerButton(async (event) => {
                 if (event === QuickInputButtons.Back) {
                     resolve(undefined);
+                } else if (event === enterBtn) {
+                    await acceptInput();
+                } else if (event === cancelBtn) {
+                    resolve(null);
+                    input.dispose();
                 }
             });
             input.show();
@@ -614,8 +632,7 @@ export class Cluster extends OpenShiftItem {
                     if (!username)  {
                         const addUserLabel = '$(plus) Add new user...';
                         const choice = await this.getUserName(clusterURL, addUserLabel);
-                        if (!choice || choice === null) return choice; // Back or Cancel
-
+                        if (!choice) return choice; // Back or Cancel
                         if (choice === addUserLabel) {
                             step = Step.enterUserName;
                         } else {
@@ -629,11 +646,12 @@ export class Cluster extends OpenShiftItem {
                         const prompt = 'Provide Username for basic authentication to the API server';
                         const validateInput = (value: string) => NameValidator.emptyName('User name cannot be empty', value);
                         const newUsername = await this.enterValue(prompt, '', false, validateInput);
-                        if (!newUsername) {
+
+                        if (newUsername === null) {
+                            return null; // Cancel
+                        } else if (!newUsername) {
                             username = undefined;
                             step = Step.getUserName; // Back
-                        } else if (newUsername === null) {
-                            return null; // Cancel
                         } else {
                             username = newUsername;
                             step = Step.enterPassword;
@@ -646,11 +664,12 @@ export class Cluster extends OpenShiftItem {
                         const prompt = 'Provide Password for basic authentication to the API server';
                         const validateInput = (value: string) => NameValidator.emptyName('Password cannot be empty', value);
                         const newPassword = await this.enterValue(prompt, password, true, validateInput);
-                        if (!newPassword) {
+
+                        if (newPassword === null) {
+                            return null; // Cancel
+                        } else if (!newPassword) {
                             username = undefined;
                             step = Step.getUserName; // Back
-                        } else if (newPassword === null) {
-                            return null; // Cancel
                         } else {
                             passwd = newPassword;
                             step = undefined;
@@ -743,10 +762,10 @@ export class Cluster extends OpenShiftItem {
             const validateInput = (value: string) => NameValidator.emptyName('Bearer token cannot be empty', value);
             const initialValue = token ? token : '';
             ocToken = await this.enterValue(prompt, initialValue, true, validateInput);
-            if (!ocToken) {
-                return undefined; // Back
-            } else if (ocToken === null) {
+            if (ocToken === null) {
                 return null; // Cancel
+            } else if (!ocToken) {
+                return undefined; // Back
             }
         } else {
             ocToken = userToken;