From e4063a0faf33d7abd3fedbb130ddafa299fe2caf Mon Sep 17 00:00:00 2001
From: Wroud <wroud@yandex.ru>
Date: Sun, 26 Jun 2022 14:35:56 +0300
Subject: [PATCH] feat(plugin-authentication-administration): CB-2192 display 
 roleId

---
 .../Users/Roles/Options/RoleOptions.tsx       | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Roles/Options/RoleOptions.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Roles/Options/RoleOptions.tsx
index fef08b664e..4609f18446 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Roles/Options/RoleOptions.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Roles/Options/RoleOptions.tsx
@@ -11,11 +11,7 @@ import { useRef } from 'react';
 import styled, { css } from 'reshadow';
 
 import { PermissionsResource } from '@cloudbeaver/core-administration';
-import {
-  BASE_CONTAINERS_STYLES, ColoredContainer, FieldCheckbox, Group,
-  GroupTitle,
-  InputField, SubmittingForm, Textarea, useMapResource,
-} from '@cloudbeaver/core-blocks';
+import { BASE_CONTAINERS_STYLES, ColoredContainer, FieldCheckbox, Group, GroupTitle, InputField, SubmittingForm, Textarea, useMapResource } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { CachedMapAllKey } from '@cloudbeaver/core-sdk';
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -28,6 +24,9 @@ const styles = css`
     flex: 1;
     overflow: auto;
   }
+  caption {
+    composes: theme-text-text-hint-on-light theme-typography--caption from global;
+  }
 `;
 
 export const RoleOptions: TabContainerPanelComponent<IRoleFormProps> = observer(function RoleOptions({
@@ -79,7 +78,14 @@ export const RoleOptions: TabContainerPanelComponent<IRoleFormProps> = observer(
         <Group small gap>
           <GroupTitle>{translate('administration_roles_role_permissions')}</GroupTitle>
           {permissionsResource.resource.values.map(permission => {
-            const label = `${permission.label ?? permission.id}`;
+            let label = permission.id;
+            let caption: string | undefined;
+
+            if (permission.label) {
+              label = `${permission.label}`;
+              caption = permission.id;
+            }
+
             const tooltip = `${label}${permission.description ? '\n' + permission.description : ''}`;
             return (
               <FieldCheckbox
@@ -92,7 +98,7 @@ export const RoleOptions: TabContainerPanelComponent<IRoleFormProps> = observer(
                 readOnly={state.readonly}
                 disabled={state.disabled}
               >
-                {label}
+                {label} {caption && <caption>({caption})</caption>}
               </FieldCheckbox>
             );
           })}