Improve in-progress auth UI (#1038)

- Configuration view shows "connecting" message when relevant
- Connection manager now jump into the "connecting" state earlier
- `ConnectionManager.login` is now `connect`, since we don't actually
login there
- Remove unnecessary auth provider `check` call inside the `connect`
- Show progress UI during `connect` (and we already have another
progress during login, which happens earlier)

Author: ilia-db

packages/databricks-vscode/src/configuration/ConnectionManager.ts

@@ -174,7 +174,19 @@ export class ConnectionManager implements Disposable {
         return this._workspaceClient?.apiClient;
     }
 
-    async resolveAuth() {
+    private async loginWithSavedAuth() {
+        const authProvider = await this.resolveAuth();
+        if (authProvider === undefined) {
+            await this.logout();
+            return;
+        }
+        await this.connect(authProvider);
+    }
+
+    @onError({popup: {prefix: "Failed to login."}})
+    @Mutex.synchronise("loginLogoutMutex")
+    private async resolveAuth() {
+        this.updateState("CONNECTING");
         const host = await this.configModel.get("host");
         const target = this.configModel.target;
         if (host === undefined || target === undefined) {
@@ -211,63 +223,52 @@ export class ConnectionManager implements Disposable {
         }
     }
 
-    @onError({
-        popup: {prefix: "Can't login with saved auth."},
-    })
-    private async loginWithSavedAuth() {
-        const authProvider = await this.resolveAuth();
-        if (authProvider === undefined) {
-            await this.logout();
-            return;
-        }
-        await this.login(authProvider);
-    }
-
-    private async login(authProvider: AuthProvider): Promise<void> {
-        if (!(await authProvider.check())) {
-            // We return without any state changes. This ensures that
-            // if users move from a working auth type to an invalid
-            // auth, the old auth will continue working and they will not
-            // have to re authenticate even the old one.
-            return;
-        }
-
+    private async connect(authProvider: AuthProvider): Promise<void> {
         try {
-            await this.loginLogoutMutex.synchronise(async () => {
-                this.updateState("CONNECTING");
-
-                const databricksWorkspace = await DatabricksWorkspace.load(
-                    authProvider.getWorkspaceClient(),
-                    authProvider
-                );
-                this._databricksWorkspace = databricksWorkspace;
-                this._workspaceClient = authProvider.getWorkspaceClient();
-
-                await this._databricksWorkspace.optionalEnableFilesInReposPopup(
-                    this._workspaceClient
-                );
-                await this.configModel.set(
-                    "authProfile",
-                    authProvider.toJSON().profile as string | undefined
-                );
-                await this.configModel.setAuthProvider(authProvider);
-                await this.updateSyncDestinationMapper();
-                await this.updateClusterManager();
-                await this._metadataService.setApiClient(this.apiClient);
-                this.updateState("CONNECTED");
-            });
+            await window.withProgress(
+                {
+                    location: {viewId: "configurationView"},
+                    title: "Connecting to the workspace",
+                },
+                () => this._connect(authProvider)
+            );
         } catch (e) {
-            NamedLogger.getOrCreate("Extension").error(`Login failed`, e);
+            NamedLogger.getOrCreate("Extension").error(
+                `Can't connect to the workspace`,
+                e
+            );
             if (e instanceof Error) {
                 await window.showWarningMessage(
-                    `Login failed with error: "${e.message}"."`
+                    `Can't connect to the workspace: "${e.message}"."`
                 );
             }
             await this.logout();
         }
     }
 
-    @onError({popup: {prefix: "Can't logout"}})
+    @Mutex.synchronise("loginLogoutMutex")
+    private async _connect(authProvider: AuthProvider) {
+        this.updateState("CONNECTING");
+        this._databricksWorkspace = await DatabricksWorkspace.load(
+            authProvider.getWorkspaceClient(),
+            authProvider
+        );
+        this._workspaceClient = authProvider.getWorkspaceClient();
+        await this._databricksWorkspace.optionalEnableFilesInReposPopup(
+            this._workspaceClient
+        );
+        await this.configModel.set(
+            "authProfile",
+            authProvider.toJSON().profile as string | undefined
+        );
+        await this.configModel.setAuthProvider(authProvider);
+        await this.updateSyncDestinationMapper();
+        await this.updateClusterManager();
+        await this._metadataService.setApiClient(this.apiClient);
+        this.updateState("CONNECTED");
+    }
+
+    @onError({popup: {prefix: "Can't logout."}})
     @Mutex.synchronise("loginLogoutMutex")
     async logout() {
         this._workspaceClient = undefined;
@@ -288,8 +289,7 @@ export class ConnectionManager implements Disposable {
         if (!authProvider) {
             return;
         }
-
-        await this.login(authProvider);
+        await this.connect(authProvider);
     }
 
     @onError({

packages/databricks-vscode/src/configuration/ui/AuthTypeComponent.ts

@@ -28,18 +28,20 @@ export class AuthTypeComponent extends BaseComponent {
         const authProvider =
             this.connectionManager.databricksWorkspace?.authProvider;
 
-        if (this.configModel.target === undefined) {
-            return [];
+        if (this.connectionManager.state === "CONNECTING") {
+            return [
+                {
+                    label: "Connecting to the workspace",
+                    iconPath: new ThemeIcon("sync~spin"),
+                },
+            ];
         }
 
         if (authProvider === undefined) {
             const label = "Login to Databricks";
             return [
                 {
-                    label: {
-                        label: label,
-                        highlights: [[0, label.length]],
-                    },
+                    label: {label},
                     iconPath: new ThemeIcon(
                         "account",
                         new ThemeColor("notificationsErrorIcon.foreground")