Merge pull request #465 from dbeaver/feat/roles

fix(plugin-authentication): CB-1001 add identity providers icon

webapp/packages/plugin-authentication/public/icons/identity_providers.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99238 7.87594C10.7215 7.43455 12 5.86658 12 4C12 1.79086 10.2091 0 8 0C5.79086 0 4 1.79086 4 4C4 5.86658 5.27853 7.43455 7.00762 7.87594C7.00259 7.91658 7 7.95799 7 8V10H5V12H7V13H4V15H7C7 15.5523 7.44772 16 8 16C8.55228 16 9 15.5523 9 15V13V12V10V8C9 7.95799 8.99741 7.91658 8.99238 7.87594ZM10 4C10 5.10457 9.10457 6 8 6C6.89543 6 6 5.10457 6 4C6 2.89543 6.89543 2 8 2C9.10457 2 10 2.89543 10 4Z" fill="#EE8A18"/>
+</svg>

webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsDrawerItem.tsx

@@ -18,7 +18,7 @@ export const AuthConfigurationsDrawerItem: React.FC<AdministrationItemDrawerProp
 }) {
   return styled(useStyles(style))(
     <Tab tabId={item.name} disabled={disabled} onOpen={() => onSelect(item.name)}>
-      <TabIcon icon='/icons/account.svg' />
+      <TabIcon icon='/icons/identity_providers.svg' />
       <TabTitle><Translate token='administration_identity_providers_tab_title' /></TabTitle>
     </Tab>
   );

webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministrationService.ts

@@ -36,7 +36,6 @@ export class RolesAdministrationService extends Bootstrap {
   register(): void {
     this.administrationItemService.create({
       name: 'roles',
-      type: AdministrationItemType.Default,
       order: 3.1,
       configurationWizardOptions: {
         description: 'administration_roles_tab_description',

webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserInfo.tsx

@@ -8,7 +8,7 @@
 
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
-import styled from 'reshadow';
+import styled, { css } from 'reshadow';
 
 import { BASE_CONTAINERS_STYLES, ColoredContainer, FieldCheckboxNew, Group, GroupTitle, InputFieldNew, TabContainerPanelComponent } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -17,6 +17,12 @@ import { uuid } from '@cloudbeaver/core-utils';
 
 import type { IUserFormProps } from './UserFormService';
 
+const styles = css`
+  Group {
+    height: 100%;
+  }
+`;
+
 export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(function UserInfo({
   controller,
   editing,
@@ -28,10 +34,10 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
     []
   );
 
-  return styled(useStyles(BASE_CONTAINERS_STYLES))(
+  return styled(useStyles(BASE_CONTAINERS_STYLES, styles))(
     <ColoredContainer parent gap overflow>
-      <Group small gap vertical>
-        <GroupTitle>{translate('authentication_user_credentials')}</GroupTitle>
+      <Group small gap vertical overflow>
+        <GroupTitle keepSize>{translate('authentication_user_credentials')}</GroupTitle>
         <InputFieldNew
           type='text'
           name='login'
@@ -39,6 +45,7 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
           disabled={controller.isSaving}
           readOnly={editing}
           mod='surface'
+          keepSize
           tiny
           required
         >
@@ -54,6 +61,7 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
               placeholder={editing ? '••••••' : ''}
               disabled={controller.isSaving}
               mod='surface'
+              keepSize
               tiny
               required
             >
@@ -66,6 +74,7 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
               placeholder={editing ? '••••••' : ''}
               disabled={controller.isSaving}
               mod='surface'
+              keepSize
               tiny
               required
             >
@@ -74,20 +83,25 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
           </>
         )}
       </Group>
-      <Group small gap>
+      <Group small gap overflow>
         <GroupTitle>{translate('authentication_user_role')}</GroupTitle>
-        {controller.roles.map(role => (
-          <FieldCheckboxNew
-            key={role.roleId}
-            id={uuid()}
-            name='role'
-            checked={!!controller.credentials.roles.get(role.roleId)}
-            disabled={controller.isSaving}
-            onChange={checked => handleRoleChange(role.roleId, checked)}
-          >
-            {role.roleName || role.roleId}
-          </FieldCheckboxNew>
-        ))}
+        {controller.roles.map(role => {
+          const label = `${role.roleId}${role.roleName && role.roleName !== role.roleId ? ' (' + role.roleName + ')' : ''}`;
+          const tooltip = `${label}${role.description ? '\n' + role.description : ''}`;
+          return (
+            <FieldCheckboxNew
+              key={role.roleId}
+              id={uuid()}
+              title={tooltip}
+              name='role'
+              checked={!!controller.credentials.roles.get(role.roleId)}
+              disabled={controller.isSaving}
+              onChange={checked => handleRoleChange(role.roleId, checked)}
+            >
+              {label}
+            </FieldCheckboxNew>
+          );
+        })}
       </Group>
     </ColoredContainer>
   );

webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx

@@ -30,8 +30,7 @@ const styles = composes(
     box {
       box-sizing: border-box;
       padding-bottom: 24px;
-      min-height: 420px;
-      max-height: 520px;
+      height: 520px;
       display: flex;
       flex-direction: column;
     }