CB-4317 fix: require authentication to load connection origin details (#2189)

* CB-4317 fix: require authentication to load connection origin details

* CB-4317 fix: ensure user loaded and up to date

---------

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/packages/core-ui/src/AuthenticationProvider.tsx

@@ -6,19 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, Container, GroupItem, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, Container, useTranslate } from '@cloudbeaver/core-blocks';
 
 import { useAuthenticationAction } from './useAuthenticationAction';
 
-const styles = css`
-  Container {
-    justify-content: center;
-    align-items: center;
-  }
-`;
-
 export type Props = {
   providerId: string;
   className?: string;
@@ -29,21 +21,22 @@ export type Props = {
 
 export const AuthenticationProvider = observer<Props>(function AuthenticationProvider(props) {
   const translate = useTranslate();
-  const style = useStyles(styles);
   const action = useAuthenticationAction(props);
 
   if (action.authorized) {
     return (props.children?.() as null) || null;
   }
 
-  return styled(style)(
-    <Container className={props.className} gap vertical>
-      <GroupItem keepSize>{translate('authentication_request_token')}</GroupItem>
-      <GroupItem keepSize>
-        <Button type="button" mod={['unelevated']} loading={action.authenticating} onClick={action.auth}>
-          {translate('authentication_authenticate')}
-        </Button>
-      </GroupItem>
-    </Container>,
+  return (
+    <Container className={props.className} gap vertical center>
+      <Container keepSize center vertical gap dense>
+        <Container keepSize>{translate('authentication_request_token')}</Container>
+        <Container keepSize>
+          <Button type="button" mod={['unelevated']} loading={action.authenticating} onClick={action.auth}>
+            {translate('authentication_authenticate')}
+          </Button>
+        </Container>
+      </Container>
+    </Container>
   );
 });

webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx

@@ -9,6 +9,7 @@ import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';
 
+import { AUTH_PROVIDER_LOCAL_ID, AuthProvidersResource, UserInfoResource } from '@cloudbeaver/core-authentication';
 import {
   ColoredContainer,
   ExceptionMessage,
@@ -20,7 +21,7 @@ import {
   useStyles,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
-import { createConnectionParam } from '@cloudbeaver/core-connections';
+import { createConnectionParam, DatabaseAuthModelsResource, DBDriverResource } from '@cloudbeaver/core-connections';
 import { TabContainerPanelComponent, useTab, useTabState } from '@cloudbeaver/core-ui';
 
 import type { IConnectionFormProps } from '../IConnectionFormProps';
@@ -38,12 +39,25 @@ const style = css`
   }
 `;
 
-export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = observer(function OriginInfo({ tabId, state: { info, resource } }) {
+export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = observer(function OriginInfo({
+  tabId,
+  state: { info, resource, config },
+}) {
   const tab = useTab(tabId);
   const translate = useTranslate();
-  // const userInfoService = useService(UserInfoResource);
+  const userInfoLoader = useResource(OriginInfo, UserInfoResource, undefined);
   const state = useTabState<Record<string, any>>();
   const styles = useStyles(style);
+  const driverLoader = useResource(OriginInfo, DBDriverResource, config.driverId ?? null);
+  const authModeLoader = useResource(
+    OriginInfo,
+    DatabaseAuthModelsResource,
+    config.authModelId ?? info?.authModel ?? driverLoader.data?.defaultAuthModel ?? null,
+  );
+
+  const providerId = authModeLoader.data?.requiredAuth ?? info?.requiredAuth ?? AUTH_PROVIDER_LOCAL_ID;
+  const isAuthenticated = userInfoLoader.resource.hasToken(providerId);
+  const providerLoader = useResource(OriginInfo, AuthProvidersResource, providerId);
 
   const connection = useResource(
     OriginInfo,
@@ -53,7 +67,7 @@ export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = obse
       includes: ['includeOrigin', 'customIncludeOriginDetails'] as const,
     },
     {
-      // isActive: () => !info?.origin || userInfoService.hasOrigin(info.origin),
+      active: isAuthenticated,
       onData: connection => {
         runInAction(() => {
           if (!connection.origin.details) {
@@ -89,15 +103,17 @@ export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = obse
     );
   }
 
-  // const authorized = !info?.origin || userInfoService.hasOrigin(info.origin);
-
-  // if (!authorized && info?.origin) {
-  //   return styled(styles)(
-  //     <ColoredContainer parent vertical>
-  //       <AuthenticationProvider origin={info.origin} onAuthenticate={connection.reload} />
-  //     </ColoredContainer>
-  //   );
-  // }
+  if (!isAuthenticated) {
+    return styled(styles)(
+      <ColoredContainer parent>
+        <TextPlaceholder>
+          {translate('connections_public_connection_cloud_auth_required', undefined, {
+            providerLabel: providerLoader.data?.label,
+          })}
+        </TextPlaceholder>
+      </ColoredContainer>,
+    );
+  }
 
   if (!connection.data?.origin.details || connection.data.origin.details.length === 0) {
     return styled(styles)(