diff --git a/src/app/utils/device-characteristics-telemetry.ts b/src/app/utils/device-characteristics-telemetry.ts index 63d293972..63cdd2880 100644 --- a/src/app/utils/device-characteristics-telemetry.ts +++ b/src/app/utils/device-characteristics-telemetry.ts @@ -1,4 +1,7 @@ export function getBrowserScreenSize(browserWidth: number){ + if (browserWidth >= 2560) { + return 'xxxxl'; + } if(browserWidth >= 1920){ return 'xxxl'; } diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx index d4bb427db..c7b1faf17 100644 --- a/src/app/views/query-runner/request/Request.tsx +++ b/src/app/views/query-runner/request/Request.tsx @@ -127,7 +127,7 @@ const Request = (props: any) => { const heightInPx = requestHeight.replace('px', '').trim(); const requestHeightInVh = convertPxToVh(parseFloat(heightInPx)).toString(); const maxDeviceVerticalHeight = 90; - const dimen = { ...props.dimensions }; + const dimen = { ...dimensions }; dimen.request.height = requestHeightInVh; const response = maxDeviceVerticalHeight - parseFloat(requestHeightInVh.replace('vh', '')); dimen.response.height = response + 'vh'; diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx index 240c2da8d..de1b61d11 100644 --- a/src/app/views/query-runner/request/permissions/PanelList.tsx +++ b/src/app/views/query-runner/request/permissions/PanelList.tsx @@ -77,14 +77,12 @@ const PanelList = ({ messages, }); const searchValueChanged = (event: any, value?: string): void => { - let valueToSearch = ''; - valueToSearch = value!; - setSearchValue(valueToSearch); + setSearchValue(value!); shouldGenerateGroups.current = true; setSearchStarted((search) => !search); let filteredPermissions = scopes.data.fullPermissions; - if (valueToSearch) { - const keyword = valueToSearch.toLowerCase(); + if (value) { + const keyword = value.toLowerCase(); filteredPermissions = fullPermissions.filter((permission: IPermission) => { const name = permission.value.toLowerCase(); diff --git a/src/app/views/query-runner/request/permissions/Permission.styles.ts b/src/app/views/query-runner/request/permissions/Permission.styles.ts index 8d8603f1e..100bf134d 100644 --- a/src/app/views/query-runner/request/permissions/Permission.styles.ts +++ b/src/app/views/query-runner/request/permissions/Permission.styles.ts @@ -67,9 +67,7 @@ export const permissionStyles = (theme: ITheme) => { cellTitle: { display: 'flex', flex: 1, - position: 'relative' as 'relative', - right: '4px', - textAlign: 'center' + textAlign: 'left' } }, cellTitleStyles: { @@ -82,7 +80,7 @@ export const permissionStyles = (theme: ITheme) => { root: { height: '40px', lineHeight: '20px', - textAlign: 'center', + textAlign: 'left', marginTop: '7px' } } diff --git a/src/app/views/query-runner/request/permissions/Permission.tsx b/src/app/views/query-runner/request/permissions/Permission.tsx index 1a617b2ac..b1b5524b8 100644 --- a/src/app/views/query-runner/request/permissions/Permission.tsx +++ b/src/app/views/query-runner/request/permissions/Permission.tsx @@ -138,11 +138,11 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { const adminLabel = (item: any): JSX.Element => { if (item.isAdmin) { - return
+ return
; } else { - return
+ return
; } @@ -151,7 +151,7 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { const consentedButton = (consented: boolean, item: any, hostId: string): JSX.Element => { if (consented) { if(userHasRequiredPermissions()){ - return handleRevoke(item)} style={{width: '100px', textAlign:'center'}}> + return handleRevoke(item)} style={{width: '100px', textAlign:'left'}}> ; } @@ -196,14 +196,14 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { const permissionConsentTypeLabel = (permissionInAllPrincipal : boolean) : JSX.Element => { if(permissionInAllPrincipal){ return ( -
+
) } else{ return ( -
+
) @@ -260,7 +260,7 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { fieldName: 'consentDescription', isResizable: true, minWidth: (tokenPresent) ? columnSizes.minWidth : 600, - maxWidth: (tokenPresent) ? columnSizes.maxWidth : 1000, + maxWidth: (tokenPresent) ? columnSizes.maxWidth : 750, isMultiline: true, columnActionsMode: 0 } @@ -272,8 +272,8 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { key: 'isAdmin', name: translateMessage('Admin consent required'), fieldName: 'isAdmin', - minWidth: (tokenPresent) ? 150 : 200, - maxWidth: (tokenPresent) ? 200 : 300, + minWidth: 150, + maxWidth: 200, ariaLabel: translateMessage('Administrator permission'), isMultiline: true, headerClassName: 'permissionHeader', @@ -289,8 +289,8 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { name: translateMessage('Status'), isResizable: false, fieldName: 'consented', - minWidth: 100, - maxWidth: 120, + minWidth: 90, + maxWidth: 100, onRenderHeader: () => renderColumnHeader('Status'), styles: columnCellStyles }, @@ -303,8 +303,8 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { name: translateMessage('Consent type'), isResizable: false, fieldName: 'consentType', - minWidth: 100, - maxWidth: 100, + minWidth: 110, + maxWidth: 120, onRenderHeader: () => renderColumnHeader('Consent type'), styles: columnCellStyles, ariaLabel: translateMessage('Permission consent type') @@ -345,16 +345,17 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => { ) } - return (
+ return (
openExternalWebsite(headerText)} + styles={{root: { position: 'relative', right: '1px'}}} > - + {translateMessage(headerText)}
) diff --git a/src/app/views/query-runner/request/permissions/util.ts b/src/app/views/query-runner/request/permissions/util.ts index 64eb58623..e8e6ef959 100644 --- a/src/app/views/query-runner/request/permissions/util.ts +++ b/src/app/views/query-runner/request/permissions/util.ts @@ -37,17 +37,22 @@ export function setDescriptionColumnSize(): IDescriptionSize { case 'xl': return { minWidth: 240, - maxWidth: 390 + maxWidth: 370 } case 'xxl': return { - minWidth: 390, - maxWidth: 490 + minWidth: 370, + maxWidth: 420 } case 'xxxl': return { minWidth: 490, - maxWidth: 590 + maxWidth: 550 + } + case 'xxxxl': + return { + minWidth: 500, + maxWidth: 1000 } default: return {