From 9c82c3bcc8c3412648b5acc729da006f2c845dc2 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Sat, 16 May 2020 04:01:45 +0300
Subject: [PATCH] fix(authentication): tabs

---
 .../authentication/src/Dialog/AuthDialog.tsx    | 17 +++++++++++++----
 .../src/Dialog/AuthDialogController.ts          |  3 +++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/webapp/packages/authentication/src/Dialog/AuthDialog.tsx b/webapp/packages/authentication/src/Dialog/AuthDialog.tsx
index 18cbe67015..2823f8bd67 100644
--- a/webapp/packages/authentication/src/Dialog/AuthDialog.tsx
+++ b/webapp/packages/authentication/src/Dialog/AuthDialog.tsx
@@ -7,8 +7,9 @@
  */
 
 import { observer } from 'mobx-react';
-import { useEffect } from 'react';
-import { useTabState, Tab as BaseTab, TabList } from 'reakit/Tab';
+import {
+  useTabState, Tab as BaseTab, TabList
+} from 'reakit/Tab';
 import styled, { css } from 'reshadow';
 
 import { SubmittingForm, ErrorMessage } from '@dbeaver/core/blocks';
@@ -102,7 +103,6 @@ export const AuthDialog: DialogComponent<null, null> = observer(
       selectedId: controller.provider?.id,
     });
     tab.selectedId = controller.provider?.id || null;
-    useEffect(() => controller.selectProvider(tab.selectedId!), [tab.selectedId]);
 
     return styled(useStyles(styles))(
       <CommonDialogWrapper
@@ -111,7 +111,15 @@ export const AuthDialog: DialogComponent<null, null> = observer(
         header={(
           <TabList {...tab} aria-label="My tabs">
             {controller.providers.map(provider => (
-              <BaseTab {...tab} key={provider.id} type='button' stopId={provider.id}>{provider.label}</BaseTab>
+              <BaseTab
+                {...tab}
+                key={provider.id}
+                type='button'
+                stopId={provider.id}
+                onClick={() => controller.selectProvider(provider.id)}
+              >
+                {provider.label}
+              </BaseTab>
             ))}
           </TabList>
         )}
@@ -131,6 +139,7 @@ export const AuthDialog: DialogComponent<null, null> = observer(
               authenticate={controller.isAuthenticating}
             />
           )}
+          {!controller.provider && <>Select available provider</>}
         </SubmittingForm>
         {controller.error.responseMessage && (
           <ErrorMessage
diff --git a/webapp/packages/authentication/src/Dialog/AuthDialogController.ts b/webapp/packages/authentication/src/Dialog/AuthDialogController.ts
index 960dfef58b..ba86ba4a20 100644
--- a/webapp/packages/authentication/src/Dialog/AuthDialogController.ts
+++ b/webapp/packages/authentication/src/Dialog/AuthDialogController.ts
@@ -74,6 +74,9 @@ export class AuthDialogController implements IInitializableController, IDestruct
   }
 
   selectProvider = (providerId: string) => {
+    if (providerId === this.provider?.id) {
+      return;
+    }
     this.provider = this.authProviderService
       .providers.data.find(provider => provider.id === providerId) || null;
     this.credentials = {};