import { observer } from 'mobx-react-lite' ; import styled , { css } from 'reshadow' ; import { AUTH_PROVIDER_LOCAL_ID } from '@cloudbeaver/core-authentication' ; import { TabList , TabsState , UNDERLINE_TAB_STYLES } from '@cloudbeaver/core-ui' ; import { BASE_CONTAINERS_STYLES , Button , IconOrImage } from '@cloudbeaver/core-blocks' ; import { useTranslate } from '@cloudbeaver/core-localization' ; import type { UserInfo } from '@cloudbeaver/core-sdk' ; import { composes , useStyles } from '@cloudbeaver/core-theming' ; import { AuthenticationPanel } from './Authentication/AuthenticationPanel' ; import { AuthenticationTab } from './Authentication/AuthenticationTab' ; import type { IUserProfileFormState } from './IUserProfileFormState' ; import { UserInfoPanel } from './UserInfo/UserInfoPanel' ; import { UserInfoTab } from './UserInfo/UserInfoTab' ; const tabsStyles = css `
  TabList {
    position: relative;
    flex-shrink: 0;
    align-items: center;
  }
  Tab {
    height: 46px!important;
    text-transform: uppercase;
    font-weight: 500 !important;
  }
` ; const topBarStyles = composes ( css `
    top-bar {
      composes: theme-border-color-background theme-background-secondary theme-text-on-secondary from global;
    }
  ` , css `
    top-bar {
      position: relative;
      display: flex;
      padding-top: 16px;

      &:before {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        border-bottom: solid 2px;
        border-color: inherit;
      }
    }
    top-bar-tabs {
      flex: 1;
    }

    top-bar-actions {
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 16px;
    }

    /*Button:not(:first-child) {
      margin-right: 24px;
    }*/

    status-message {
      composes: theme-typography--caption from global;
      height: 24px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 8px;

      & IconOrImage {
        height: 24px;
        width: 24px;
      }
    }
  ` ) ; const formStyles = composes ( css `
    box {
      composes: theme-background-secondary theme-text-on-secondary from global;
    }

    content-box {
      composes: theme-background-secondary theme-border-color-background from global;
    }
  ` , css `
    flex-box {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      overflow: auto;
    }
    content-box {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: auto;
    }
  ` ) ; interface Props { user : UserInfo ; state : IUserProfileFormState ; onClose ? : ( ) => void ; } export const UserForm = observer < Props > ( function UserForm ( { user , state , onClose , } ) { const translate = useTranslate ( ) ; const style = [ tabsStyles , UNDERLINE_TAB_STYLES ] ; const styles = useStyles ( style , BASE_CONTAINERS_STYLES , topBarStyles , formStyles ) ; const localProvider = user . linkedAuthProviders . includes ( AUTH_PROVIDER_LOCAL_ID ) ; return styled ( styles ) ( < flex - box > < TabsState > < top - bar > < top - bar - tabs > < status - message > { state . info . statusMessage && ( < > < IconOrImage icon = '/icons/info_icon.svg' /> { translate ( state . info . statusMessage ) } < />)} < /status-message> < TabList style = { style } disabled = { state . info . disabled } > < UserInfoTab style = { style } / > { localProvider && < AuthenticationTab style = { style } / > } { } < /TabList> < /top-bar-tabs> < top - bar - actions > { onClose && ( < Button type = "button" mod = { [ 'outlined' ] } onClick = { onClose } > { translate ( 'ui_processing_cancel' ) } < /Button>)} < /top-bar-actions> < /top-bar> < content - box > < UserInfoPanel user = { user } style = { style } / > { localProvider && < AuthenticationPanel style = { style } />} { } < /content-box> < /TabsState> < /flex-box>); } ) ;