Skip to content

Commit

Permalink
Merge pull request dbeaver#413 from dbeaver/fix/access-management-styles
Browse files Browse the repository at this point in the history 
fix(core-connections) styles
  • Loading branch information
@Wroud
Wroud authored Jul 9, 2021
2 parents 6101d9d + a2154e9 commit b6c6e7e
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 95 deletions.
37 changes: 21 additions & 16 deletions webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
ColoredContainer,
Group,
IconOrImage,
Container,
} from '@cloudbeaver/core-blocks';
import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
import { useStyles } from '@cloudbeaver/core-theming';
Expand All @@ -35,7 +36,8 @@ import { useConnectionAccessState } from './useConnectionAccessState';
const styles = css`
ColoredContainer {
flex: 1;
overflow: auto;
height: 100%;
box-sizing: border-box;
}
Group {
max-height: 100%;
Expand All @@ -45,6 +47,7 @@ const styles = css`
info-item {
display: flex;
align-items: center;
flex: 0 0 auto;
}
IconOrImage {
width: 24px;
Expand Down Expand Up @@ -114,7 +117,7 @@ export const ConnectionAccess: TabContainerPanelComponent<IConnectionFormProps>
return styled(style)(
<Loader state={[users, roles, state]}>
{() => styled(style)(
<ColoredContainer parent gap>
<ColoredContainer parent gap vertical>
{!users.resource.values.length && !roles.resource.values.length ? (
<Group keepSize large>
<TextPlaceholder>{translate('connections_administration_connection_access_empty')}</TextPlaceholder>
Expand All @@ -127,22 +130,24 @@ export const ConnectionAccess: TabContainerPanelComponent<IConnectionFormProps>
{translate(infoItem.text)}
</info-item>
)}
<ConnectionAccessGrantedList
grantedUsers={grantedUsers.get()}
grantedRoles={grantedRoles.get()}
disabled={disabled}
onEdit={edit}
onRevoke={revoke}
/>
{state.editing && (
<ConnectionAccessList
userList={users.resource.values}
roleList={roles.resource.values}
grantedSubjects={state.grantedSubjects}
<Container gap overflow>
<ConnectionAccessGrantedList
grantedUsers={grantedUsers.get()}
grantedRoles={grantedRoles.get()}
disabled={disabled}
onGrant={grant}
onEdit={edit}
onRevoke={revoke}
/>
)}
{state.editing && (
<ConnectionAccessList
userList={users.resource.values}
roleList={roles.resource.values}
grantedSubjects={state.grantedSubjects}
disabled={disabled}
onGrant={grant}
/>
)}
</Container>
</>
)}
</ColoredContainer>
Expand Down
92 changes: 54 additions & 38 deletions ...ages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,21 @@ const styles = composes(
`,
css`
Group {
height: 100%;
position: relative;
overflow: auto !important;
}
Group, container, table-container {
height: 100%;
}
container {
display: flex;
flex-direction: column;
width: 100%;
}
ConnectionAccessTableHeader {
flex: 0 0 auto;
}
table-container {
overflow: auto;
}
`
);
Expand Down Expand Up @@ -92,42 +104,46 @@ export const ConnectionAccessGrantedList: React.FC<Props> = observer(function Co
}

return styled(style)(
<Group box medium>
<ConnectionAccessTableHeader filterState={filterState} disabled={disabled}>
<Button disabled={disabled || !selectedList.get().length} mod={['outlined']} onClick={revoke}>{translate('connections_connection_access_revoke')}</Button>
<Button disabled={disabled} mod={['raised']} onClick={props.onEdit}>{translate('connections_connection_access_edit')}</Button>
</ConnectionAccessTableHeader>
<Table selectedItems={selectedSubjects}>
<ConnectionAccessTableInnerHeader />
<TableBody>
<TableItem item='tableInfo' selectDisabled>
<TableColumnValue colSpan={5}>
{translate(tableInfoText)}
</TableColumnValue>
</TableItem>
{roles.get().map(role => (
<ConnectionAccessTableItem
key={role.roleId}
id={role.roleId}
name={role.roleName || ''}
description={role.description}
icon='/icons/role.svg'
iconTooltip={translate('connections_connection_access_role_tooltip')}
disabled={disabled}
/>
))}
{users.get().map(user => (
<ConnectionAccessTableItem
key={user.userId}
id={user.userId}
name={user.userId}
icon='/icons/user.svg'
iconTooltip={translate('connections_connection_access_user_tooltip')}
disabled={disabled}
/>
))}
</TableBody>
</Table>
<Group box medium overflow>
<container>
<ConnectionAccessTableHeader filterState={filterState} disabled={disabled}>
<Button disabled={disabled || !selectedList.get().length} mod={['outlined']} onClick={revoke}>{translate('connections_connection_access_revoke')}</Button>
<Button disabled={disabled} mod={['unelevated']} onClick={props.onEdit}>{translate('connections_connection_access_edit')}</Button>
</ConnectionAccessTableHeader>
<table-container>
<Table selectedItems={selectedSubjects}>
<ConnectionAccessTableInnerHeader />
<TableBody>
<TableItem item='tableInfo' selectDisabled>
<TableColumnValue colSpan={5}>
{translate(tableInfoText)}
</TableColumnValue>
</TableItem>
{roles.get().map(role => (
<ConnectionAccessTableItem
key={role.roleId}
id={role.roleId}
name={role.roleName || ''}
description={role.description}
icon='/icons/role.svg'
iconTooltip={translate('connections_connection_access_role_tooltip')}
disabled={disabled}
/>
))}
{users.get().map(user => (
<ConnectionAccessTableItem
key={user.userId}
id={user.userId}
name={user.userId}
icon='/icons/user.svg'
iconTooltip={translate('connections_connection_access_user_tooltip')}
disabled={disabled}
/>
))}
</TableBody>
</Table>
</table-container>
</container>
</Group>
);
});
96 changes: 56 additions & 40 deletions ...pp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
BASE_CONTAINERS_STYLES,
Group,
Button,
useObjectRef
useObjectRef,
} from '@cloudbeaver/core-blocks';
import { useTranslate } from '@cloudbeaver/core-localization';
import type { AdminRoleInfo, AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
Expand All @@ -38,9 +38,21 @@ const styles = composes(
`,
css`
Group {
height: 100%;
position: relative;
overflow: auto !important;
}
Group, container, table-container {
height: 100%;
}
container {
display: flex;
flex-direction: column;
width: 100%;
}
table-container {
overflow: auto;
}
ConnectionAccessTableHeader {
flex: 0 0 auto;
}
`
);
Expand Down Expand Up @@ -83,43 +95,47 @@ export const ConnectionAccessList: React.FC<Props> = observer(function Connectio
)), [filterState, userList]);

return styled(style)(
<Group box medium>
<ConnectionAccessTableHeader filterState={filterState} disabled={disabled}>
<Button disabled={disabled || !selectedList.get().length} mod={['raised']} onClick={grant}>{translate('connections_connection_access_grant')}</Button>
</ConnectionAccessTableHeader>
<Table selectedItems={selectedSubjects}>
<ConnectionAccessTableInnerHeader />
<TableBody>
{!roles.get().length && !users.get().length && filterState.filterValue && (
<TableItem item='tableInfo' selectDisabled>
<TableColumnValue colSpan={5}>
{translate('connections_connection_access_filter_no_result')}
</TableColumnValue>
</TableItem>
)}
{roles.get().map(role => (
<ConnectionAccessTableItem
key={role.roleId}
id={role.roleId}
name={role.roleName || ''}
description={role.description}
icon='/icons/role.svg'
iconTooltip='connections_connection_access_role_tooltip'
disabled={disabled || grantedSubjects.includes(role.roleId)}
/>
))}
{users.get().map(user => (
<ConnectionAccessTableItem
key={user.userId}
id={user.userId}
name={user.userId}
icon='/icons/user.svg'
iconTooltip={translate('connections_connection_access_user_tooltip')}
disabled={disabled || grantedSubjects.includes(user.userId)}
/>
))}
</TableBody>
</Table>
<Group box medium overflow>
<container>
<ConnectionAccessTableHeader filterState={filterState} disabled={disabled}>
<Button disabled={disabled || !selectedList.get().length} mod={['unelevated']} onClick={grant}>{translate('connections_connection_access_grant')}</Button>
</ConnectionAccessTableHeader>
<table-container>
<Table selectedItems={selectedSubjects}>
<ConnectionAccessTableInnerHeader />
<TableBody>
{!roles.get().length && !users.get().length && filterState.filterValue && (
<TableItem item='tableInfo' selectDisabled>
<TableColumnValue colSpan={5}>
{translate('connections_connection_access_filter_no_result')}
</TableColumnValue>
</TableItem>
)}
{roles.get().map(role => (
<ConnectionAccessTableItem
key={role.roleId}
id={role.roleId}
name={role.roleName || ''}
description={role.description}
icon='/icons/role.svg'
iconTooltip='connections_connection_access_role_tooltip'
disabled={disabled || grantedSubjects.includes(role.roleId)}
/>
))}
{users.get().map(user => (
<ConnectionAccessTableItem
key={user.userId}
id={user.userId}
name={user.userId}
icon='/icons/user.svg'
iconTooltip={translate('connections_connection_access_user_tooltip')}
disabled={disabled || grantedSubjects.includes(user.userId)}
/>
))}
</TableBody>
</Table>
</table-container>
</container>
</Group>
);
});
19 changes: 18 additions & 1 deletion ...ionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableInnerHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,34 @@
*/

import { observer } from 'mobx-react-lite';
import styled, { css } from 'reshadow';

import { TableColumnHeader, TableHeader } from '@cloudbeaver/core-blocks';
import { useTranslate } from '@cloudbeaver/core-localization';
import { composes, useStyles } from '@cloudbeaver/core-theming';

interface Props {
className?: string;
}

const styles = composes(
css`
TableHeader {
composes: theme-background-surface from global;
}
`,
css`
TableHeader {
position: sticky;
top: 0;
z-index: 1;
}
`
);

export const ConnectionAccessTableInnerHeader: React.FC<Props> = observer(function ConnectionAccessTableInnerHeader({ className }) {
const translate = useTranslate();
return (
return styled(useStyles(styles))(
<TableHeader className={className}>
<TableColumnHeader min />
<TableColumnHeader min />
Expand Down
1 change: 1 addition & 0 deletions webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const styles = composes(
css`
box {
box-sizing: border-box;
padding-bottom: 24px;
min-height: 420px;
max-height: 520px;
display: flex;
Expand Down

0 comments on commit b6c6e7e

Please sign in to comment.