diff --git a/webapp/packages/core-blocks/src/Containers/Container.tsx b/webapp/packages/core-blocks/src/Containers/Container.tsx index af6ebe228b..f6e4c5b4e1 100644 --- a/webapp/packages/core-blocks/src/Containers/Container.tsx +++ b/webapp/packages/core-blocks/src/Containers/Container.tsx @@ -14,16 +14,21 @@ import { filterContainerFakeProps, getContainerProps } from './filterContainerFa import type { IContainerProps } from './IContainerProps'; import elementsSizeStyle from './shared/ElementsSize.m.css'; -export const Container = forwardRef>(function Container( - { className, ...rest }, +interface Props { + as?: 'div' | 'header' | 'footer' | 'section' | 'aside' | 'main' | 'nav'; +} + +export const Container = forwardRef>(function Container( + { as = 'div', className, ...rest }, ref, ) { const styles = useS(style, elementsSizeStyle); const divProps = filterContainerFakeProps(rest); const containerProps = getContainerProps(rest); + const Element = as; return ( -
>(function Group( - { form, center, box, secondary, boxNoOverflow, hideOverflow, className, ...rest }, + { form, center, box, border, secondary, boxNoOverflow, hideOverflow, className, ...rest }, ref, ) { const styles = useS(style, containerStyles, elementsSizeStyles); @@ -51,6 +52,7 @@ export const Group = forwardRef tr { diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx index 2cfd10dfc0..96d34d0079 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { Container, Group, GroupTitle, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks'; +import { Container, Group, GroupTitle, Loader, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import style from './CreateTeam.m.css'; @@ -24,12 +24,14 @@ export const CreateTeam: React.FC = observer(function CreateTeam() { } return ( - + - - + + + + ); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css index 08b446ef0f..b808a2abc2 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css @@ -1,28 +1,15 @@ -.group { - position: relative; -} +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ -.group, -.container, -.tableContainer { +.group { height: 100%; -} -.container { - display: flex; - flex-direction: column; - width: 100%; + & .header { + flex: 0 0 auto; + } } - -.tableContainer { - overflow: auto; -} - -.grantedConnectionsTableHeader { - flex: 0 0 auto; -} - -.table { - composes: theme-background-surface theme-text-on-surface from global; - width: 100%; -} \ No newline at end of file diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx index 0759eeca36..aa5967b97d 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx @@ -11,6 +11,7 @@ import { useCallback, useState } from 'react'; import { Button, + Container, getComputed, getSelectedItems, Group, @@ -26,11 +27,11 @@ import { import { Connection, DBDriverResource } from '@cloudbeaver/core-connections'; import { useService } from '@cloudbeaver/core-di'; +import styles from './ConnectionList.m.css'; import { getFilteredConnections } from './getFilteredConnections'; import { GrantedConnectionsTableHeader, IFilterState } from './GrantedConnectionsTableHeader/GrantedConnectionsTableHeader'; import { GrantedConnectionsTableInnerHeader } from './GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader'; import { GrantedConnectionsTableItem } from './GrantedConnectionsTableItem'; -import styles from './ConnectionList.m.css'; interface Props { connectionList: Connection[]; @@ -60,40 +61,40 @@ export const ConnectionList = observer(function ConnectionList({ connecti const keys = connections.map(connection => connection.id); return ( - -
- + + + - -
- !grantedSubjects.includes(item)} size="big"> - - - {!connections.length && filterState.filterValue && ( - - {translate('ui_search_no_result_placeholder')} - - )} - {connections.map(connection => { - const driver = driversResource.get(connection.driverId); - return ( - - ); - })} - -
-
-
+ + + + !grantedSubjects.includes(item)}> + + + {!connections.length && filterState.filterValue && ( + + {translate('ui_search_no_result_placeholder')} + + )} + {connections.map(connection => { + const driver = driversResource.get(connection.driverId); + return ( + + ); + })} + +
+
); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx index 0d0f10edee..364000c718 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx @@ -8,7 +8,6 @@ import { observer } from 'mobx-react-lite'; import { - ColoredContainer, Container, getComputed, Group, @@ -76,7 +75,7 @@ export const GrantedConnections: TabContainerPanelComponent = ob return ( {() => ( - + {!connections.length ? ( {translate('administration_teams_team_granted_connections_empty')} @@ -102,7 +101,7 @@ export const GrantedConnections: TabContainerPanelComponent = ob )} - + )} ); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css index 5671a83df0..b808a2abc2 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css @@ -1,28 +1,15 @@ -.box { - position: relative; -} - -.box, -.innerBox, -.tableBox { +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +.group { height: 100%; -} - -.innerBox { - display: flex; - flex-direction: column; - width: 100%; -} - -.header { - flex: 0 0 auto; -} - -.tableBox { - overflow: auto; -} -.table { - composes: theme-background-surface theme-text-on-surface from global; - width: 100%; + & .header { + flex: 0 0 auto; + } } diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx index 0432ca14b6..d9db50eaed 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx @@ -11,6 +11,7 @@ import { useCallback, useState } from 'react'; import { Button, + Container, getComputed, getSelectedItems, Group, @@ -70,43 +71,45 @@ export const GrantedConnectionList = observer(function GrantedConnectionL } return ( - -
- + + + + + - -
- - - - {tableInfoText && ( - - {translate(tableInfoText)} - - )} - {connections.map(connection => { - const driver = driversResource.get(connection.driverId); - return ( - - ); - })} - -
-
-
+ + + + + + + {tableInfoText && ( + + {translate(tableInfoText)} + + )} + {connections.map(connection => { + const driver = driversResource.get(connection.driverId); + return ( + + ); + })} + +
+
); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css index 9756fef33f..d1ca9b666b 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.m.css @@ -1,18 +1,12 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ .header { - composes: theme-border-color-background theme-background-surface theme-text-on-surface from global; - overflow: hidden; - position: sticky; - top: 0; - z-index: 1; - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px; - gap: 16px; + composes: theme-border-color-background from global; border-bottom: 1px solid; -} - -.buttons { - display: flex; - gap: 16px; + flex-shrink: 0; } diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx index f3a0e88a92..19ec3f71a7 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks'; +import { Container, Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks'; import style from './GrantedConnectionsTableHeader.m.css'; @@ -26,14 +26,14 @@ export const GrantedConnectionsTableHeader = observer(function GrantedCon const translate = useTranslate(); return ( -
+ -
{children}
-
+ {children} + ); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css index 202675a708..b808a2abc2 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.m.css @@ -1,27 +1,15 @@ -.box { - position: relative; -} - -.box, -.innerBox, -.tableBox { +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +.group { height: 100%; -} - -.innerBox { - display: flex; - flex-direction: column; - width: 100%; -} - -.header { - flex: 0 0 auto; -} - -.tableBox { - overflow: auto; -} -.table { - composes: theme-background-surface theme-text-on-surface from global; + & .header { + flex: 0 0 auto; + } } diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx index af186ae5e1..85a150b35d 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUserList.tsx @@ -12,6 +12,7 @@ import { useCallback, useState } from 'react'; import { UsersResource } from '@cloudbeaver/core-authentication'; import { Button, + Container, getComputed, getSelectedItems, Group, @@ -81,40 +82,42 @@ export const GrantedUserList = observer(function GrantedUserList({ grante } return ( - -
- + + + + + - -
- isEditable(item)}> - - - {tableInfoText && ( - - {translate(tableInfoText)} - - )} - {users.map(user => ( - - ))} - -
-
-
+ + + + isEditable(item)}> + + + {tableInfoText && ( + + {translate(tableInfoText)} + + )} + {users.map(user => ( + + ))} + +
+
); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx index 4977c9cb6e..f1fe31856d 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsers.tsx @@ -9,7 +9,6 @@ import { observer } from 'mobx-react-lite'; import { AdminUser, UsersResource, UsersResourceFilterKey } from '@cloudbeaver/core-authentication'; import { - ColoredContainer, Container, getComputed, Group, @@ -58,18 +57,18 @@ export const GrantedUsers: TabContainerPanelComponent = observer if (isDefaultTeam) { return ( - + {translate('plugin_authentication_administration_team_default_users_tooltip')} - + ); } return ( {() => ( - + {!users.resource.values.length ? ( {translate('administration_teams_team_granted_users_empty')} @@ -90,7 +89,7 @@ export const GrantedUsers: TabContainerPanelComponent = observer )} - + )} ); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css index 9756fef33f..55d3274892 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.m.css @@ -1,18 +1,11 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ .header { - composes: theme-border-color-background theme-background-surface theme-text-on-surface from global; - overflow: hidden; - position: sticky; - top: 0; - z-index: 1; - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px; - gap: 16px; + composes: theme-border-color-background from global; border-bottom: 1px solid; } - -.buttons { - display: flex; - gap: 16px; -} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx index d9cdb396bb..2186d30bca 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks'; +import { Container, Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks'; import style from './GrantedUsersTableHeader.m.css'; @@ -26,14 +26,14 @@ export const GrantedUsersTableHeader = observer(function GrantedUsersTabl const translate = useTranslate(); return ( -
+ -
{children}
-
+ {children} + ); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css index 202675a708..692f3ead06 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.m.css @@ -1,27 +1,14 @@ -.box { - position: relative; -} - -.box, -.innerBox, -.tableBox { +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ +.group { height: 100%; } -.innerBox { - display: flex; - flex-direction: column; - width: 100%; -} - .header { flex: 0 0 auto; } - -.tableBox { - overflow: auto; -} - -.table { - composes: theme-background-surface theme-text-on-surface from global; -} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx index 21cb1e9bbf..85005f1a1f 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedUsers/UserList.tsx @@ -12,6 +12,7 @@ import { useCallback, useState } from 'react'; import { UsersResource } from '@cloudbeaver/core-authentication'; import { Button, + Container, getComputed, getSelectedItems, Group, @@ -71,42 +72,37 @@ export const UserList = observer(function UserList({ userList, grantedUse } return ( - -
- + + + - -
- isEditable(item) && !grantedUsers.includes(item)} - > - - - {!users.length && filterState.filterValue && ( - - {translate('ui_search_no_result_placeholder')} - - )} - {users.map(user => ( - - ))} - -
-
-
+ + + + isEditable(item) && !grantedUsers.includes(item)}> + + + {!users.length && filterState.filterValue && ( + + {translate('ui_search_no_result_placeholder')} + + )} + {users.map(user => ( + + ))} + +
+
); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx index 3d1ed36a6a..7103c0cd59 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { ColoredContainer, Group, InputField, Textarea, useResource, useTranslate } from '@cloudbeaver/core-blocks'; +import { Container, Group, InputField, Textarea, useResource, useTranslate } from '@cloudbeaver/core-blocks'; import { ServerConfigResource } from '@cloudbeaver/core-root'; import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui'; @@ -21,7 +21,7 @@ export const TeamOptions: TabContainerPanelComponent = observer( const edit = state.mode === 'edit'; return ( - + {translate('administration_teams_team_id')} @@ -35,6 +35,6 @@ export const TeamOptions: TabContainerPanelComponent = observer( {!serverConfigResource.resource.distributed && } - + ); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css index d1fdd531ef..b9090587dd 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.m.css @@ -1,17 +1,14 @@ -.form { - width: 100%; - height: 100%; - display: flex; - flex: 1; - flex-direction: column; - overflow: auto; -} +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ .topBar { - composes: theme-border-color-background theme-background-secondary theme-text-on-secondary from global; - position: relative; - display: flex; - padding-top: 16px; + composes: theme-border-color-background from global; + margin-bottom: 16px; } .topBar:before { @@ -22,50 +19,3 @@ border-bottom: solid 2px; border-color: inherit; } - -.topBarTabs { - flex: 1; -} - -.topBarActions { - display: flex; - align-items: center; - padding: 0 24px; - gap: 16px; -} - -.statusMessage { - composes: theme-typography--caption from global; - height: 24px; - padding: 0 16px; - display: flex; - align-items: center; - gap: 8px; -} - -.statusMessage .iconOrImage { - height: 24px; - width: 24px; -} - -.box { - composes: theme-background-secondary theme-text-on-secondary from global; - display: flex; - flex-direction: column; - flex: 1; - height: 100%; - overflow: auto; -} -.content { - composes: theme-background-secondary theme-border-color-background from global; - position: relative; - display: flex; - flex: 1; - flex-direction: column; - overflow: auto; -} -.tabList { - position: relative; - flex-shrink: 0; - align-items: center; -} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx index e538ae5f75..88c57fc443 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamForm.tsx @@ -9,8 +9,21 @@ import { observer } from 'mobx-react-lite'; import { useEffect } from 'react'; import type { TeamInfo } from '@cloudbeaver/core-authentication'; -import { Form, IconOrImage, Loader, Placeholder, s, useExecutor, useForm, useObjectRef, useS, useTranslate } from '@cloudbeaver/core-blocks'; +import { + Container, + Form, + Loader, + Placeholder, + s, + StatusMessage, + useExecutor, + useForm, + useObjectRef, + useS, + useTranslate, +} from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; +import { ENotificationType } from '@cloudbeaver/core-events'; import { TabList, TabPanelList, TabsState } from '@cloudbeaver/core-ui'; import { teamContext } from './Contexts/teamContext'; @@ -58,33 +71,26 @@ export const TeamForm = observer(function TeamForm({ state, onCancel, onS }, []); return ( -
+ -
-
-
-
- {state.statusMessage && ( - <> - - {translate(state.statusMessage)} - - )} -
- -
-
+ + + + + + + -
-
-
+ + + -
-
+ +
); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css index b2e3ec8e74..769db6084c 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.m.css @@ -1,8 +1,11 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + .box { - composes: theme-background-secondary theme-text-on-secondary from global; - box-sizing: border-box; - padding-bottom: 24px; - display: flex; - flex-direction: column; height: 664px; } diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx index beac2879ce..d0b05b90e3 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamEdit.tsx @@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite'; import { useCallback, useContext } from 'react'; import { TeamsResource } from '@cloudbeaver/core-authentication'; -import { s, TableContext, useS } from '@cloudbeaver/core-blocks'; +import { Container, s, TableContext, useS } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { TeamForm } from '../TeamForm'; @@ -34,8 +34,8 @@ export const TeamEdit = observer(function TeamEdit({ item }) { data.config.teamId = item; return ( -
+ -
+ ); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css index 3f7d709ce4..d8633380d7 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.m.css @@ -6,10 +6,8 @@ * you may not use this file except in compliance with the License. */ -.bar { - composes: theme-border-color-background theme-background-secondary theme-text-on-secondary from global; - position: relative; - display: flex; +.header { + composes: theme-border-color-background from global; margin-bottom: 16px; &:before { @@ -22,24 +20,6 @@ } } -.tabList { - display: flex; - position: relative; - flex-shrink: 0; - align-items: center; -} - -.contentBox { - composes: theme-background-secondary theme-text-on-secondary theme-border-color-background from global; - display: flex; - flex: 1; - flex-direction: column; - overflow: auto; -} - -.submittingForm { - flex: 1; - overflow: auto; - display: flex; - flex-direction: column; +.statusMessage { + margin-bottom: 8px; } diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx index 277b4de4e3..0babe5e59f 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/AdministrationUserForm.tsx @@ -62,13 +62,18 @@ export const AdministrationUserForm = observer(function AdministrationUse useAutoLoad(AdministrationUserForm, state); return ( -
+ - - + + - - + + {editing && ( diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx index a903b645ae..cb5846299e 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccess.tsx @@ -8,7 +8,7 @@ import { observer } from 'mobx-react-lite'; import { - ColoredContainer, + Container, Group, Table, TableBody, @@ -68,11 +68,11 @@ export const UserFormConnectionAccess: TabContainerPanelComponent if (connections.length === 0) { return ( - + {translate('authentication_administration_user_connections_empty')} - + ); } @@ -92,9 +92,9 @@ export const UserFormConnectionAccess: TabContainerPanelComponent // } return ( - + {/* {info && } */} - + @@ -114,6 +114,6 @@ export const UserFormConnectionAccess: TabContainerPanelComponent
-
+
); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx index 6cd6896344..b102127d84 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/ConnectionAccess/UserFormConnectionAccessPanel.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { ColoredContainer, Group, TextPlaceholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks'; +import { ColoredContainer, Container, Group, TextPlaceholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks'; import { type TabContainerPanelComponent, useTab } from '@cloudbeaver/core-ui'; import type { UserFormProps } from '../AdministrationUserFormService'; @@ -29,11 +29,9 @@ export const UserFormConnectionAccessPanel: TabContainerPanelComponent - - {translate('connections_connection_access_admin_info')} - - + + {translate('connections_connection_access_admin_info')} + ); } diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx index 49f5fe6d9e..ffcf2a7818 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfo.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { ColoredContainer, Container, FieldCheckbox, Group, GroupTitle, Placeholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks'; +import { Container, FieldCheckbox, Group, GroupTitle, Placeholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { TabContainerPanelComponent, useTab, useTabState } from '@cloudbeaver/core-ui'; @@ -30,29 +30,21 @@ export const UserFormInfo: TabContainerPanelComponent = observer( const disabled = tabState.isLoading(); const userManagementDisabled = administrationUsersManagementService.externalUserProviderEnabled; - // let info: TLocalizationToken | null = null; - - // if (formState.mode === FormMode.Edit && tabState.isChanged()) { - // info = 'ui_save_reminder'; - // } return ( - - {/* {info && } */} - - - - - - - {translate('authentication_user_status')} - - {translate('authentication_user_enabled')} - - - - - - + + + + + + + {translate('authentication_user_status')} + + {translate('authentication_user_enabled')} + + + + + ); }); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx index 8436266bba..67c344ecd5 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Origin/UserFormOriginInfoPanel.tsx @@ -11,7 +11,6 @@ import { Fragment } from 'react'; import { AdminUserOrigin, UsersResource } from '@cloudbeaver/core-authentication'; import { Button, - ColoredContainer, Combobox, ConfirmationDialog, Container, @@ -87,7 +86,7 @@ export const UserFormOriginInfoPanel: TabContainerPanelComponent } return ( - + {origin && ( - + + +
+ ); }); diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx index d735164dce..5dc5a1e36e 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx @@ -26,8 +26,8 @@ export const TableHeader = observer(function TableHeader({ model, resultI const service = useService(TableHeaderService); return ( -
+
-
+ ); });