Fix: Modify permissions styling (#2263)

microsoftgraph · Nov 29, 2022 · 8a7e29e · 8a7e29e
1 parent 561fc11
commit 8a7e29e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -138,11 +138,11 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
 
  const adminLabel = (item: any): JSX.Element => {
  if (item.isAdmin) {
- return <div style={{ textAlign: 'center' }}>
+ return <div style={{ textAlign: 'left', paddingLeft:'10px' }}>
  <Label><FormattedMessage id='Yes' /></Label>
  </div>;
  } else {
- return <div style={{ textAlign: 'center' }}>
+ return <div style={{ textAlign: 'left', paddingLeft: '10px' }}>
  <Label><FormattedMessage id='No' /></Label>
  </div>;
  }
@@ -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 <PrimaryButton onClick={() => handleRevoke(item)} style={{width: '100px', textAlign:'center'}}>
+ return <PrimaryButton onClick={() => handleRevoke(item)} style={{width: '100px', textAlign:'left'}}>
  <FormattedMessage id='Revoke' />
  </PrimaryButton>;
  }
@@ -196,14 +196,14 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
  const permissionConsentTypeLabel = (permissionInAllPrincipal : boolean) : JSX.Element => {
  if(permissionInAllPrincipal){
  return (
- <div style={{textAlign: 'center'}}>
+ <div style={{textAlign: 'left', paddingLeft: '10px'}}>
  <Label>{translateMessage('AllPrincipal')}</Label>
  </div>
  )
  }
  else{
  return (
- <div style={{textAlign: 'center'}}>
+ <div style={{textAlign: 'left', paddingLeft: '10px'}}>
  <Label>{translateMessage('Principal')}</Label>
  </div>
  )
@@ -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 (<div style={{ textAlign: 'center'}}>
+ return (<div style={{ textAlign: 'left', display: 'flex'}}>
  <IconButton
  iconProps={infoIcon}
  className={styles.iconButton}
  id={'buttonId'}
  ariaLabel={translateMessage(headerText)}
  onClick={() => openExternalWebsite(headerText)}
+ styles={{root: { position: 'relative', right: '1px'}}}
  >
  </IconButton>
- <span style={{position: 'relative', left: '4px', margin: '-8px'}}>
+ <span style={{paddingTop: '4px' }}>
  {translateMessage(headerText)}
  </span>
  </div>)

diff --git 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 {