Fix: Permissions styling (#2445)

src/app/views/query-runner/request/permissions/PanelList.tsx

@@ -143,7 +143,8 @@ const PanelList = ({ messages,
   const groupHeaderStyles = () => {
     return {
       check: { display: 'none'},
-      root: { background: theme.palette.white}
+      root: { background: theme.palette.white},
+      title: { padding: '10px' }
     }
   }
 

src/app/views/query-runner/request/permissions/Permission.styles.ts

@@ -67,22 +67,35 @@ export const permissionStyles = (theme: ITheme) => {
       cellTitle: {
         display: 'flex',
         flex: 1,
-        textAlign: 'left'
+        textAlign: 'center'
       }
     },
     cellTitleStyles: {
       root: {
         position: 'relative' as 'relative',
-        top: '4px'
+        top: '5px'
       }
     },
     detailsHeaderStyles: {
       root: {
-        height: '40px',
+        height: '42px',
         lineHeight: '20px',
         textAlign: 'left',
         marginTop: '7px'
       }
+    },
+    adminLabelStyles: {
+      textAlign: 'center' as 'center',
+      paddingRight: '28px'
+    },
+    consentButtonStyles: {
+      root: {
+        width: '100%'
+      }
+    },
+    consentTypeLabelStyles: {
+      textAlign: 'center' as 'center',
+      paddingLeft: '10px'
     }
   };
 };

src/app/views/query-runner/request/permissions/Permission.tsx

@@ -28,9 +28,7 @@ import messages from '../../../../../messages';
 import { ADMIN_CONSENT_DOC_LINK, CONSENT_TYPE_DOC_LINK,
   REVOKING_PERMISSIONS_REQUIRED_SCOPES } from '../../../../services/graph-constants';
 import { styles } from '../../query-input/auto-complete/suffix/suffix.styles';
-import { setDescriptionColumnSize } from './util';
 import { componentNames, telemetry } from '../../../../../telemetry';
-
 export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
 
   const { sampleQuery, scopes, dimensions, authToken, consentedScopes } =
@@ -48,7 +46,7 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
   const classes = classNames(classProps);
   const theme = getTheme();
   const {panelContainer: panelStyles, tooltipStyles, columnCellStyles, cellTitleStyles,
-    detailsHeaderStyles} = permissionStyles(theme);
+    detailsHeaderStyles, adminLabelStyles, consentButtonStyles, consentTypeLabelStyles } = permissionStyles(theme);
   const tabHeight = convertVhToPx(dimensions.request.height, 110);
 
   const getPermissions = (): void => {
@@ -141,44 +139,39 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
   }
 
   const setAdminLabel = (item: any): JSX.Element => {
-    if (item.isAdmin) {
-      return <div style={{ textAlign: 'left', paddingLeft:'10px' }}>
-        <Label><FormattedMessage id='Yes' /></Label>
-      </div>;
-    } else {
-      return <div style={{ textAlign: 'left', paddingLeft: '10px' }}>
-        <Label><FormattedMessage id='No' /></Label>
-      </div>;
-    }
+    return <div style={adminLabelStyles}>
+      <Label>{item.isAdmin ? <FormattedMessage id='Yes' /> : <FormattedMessage id='No' />}</Label>
+    </div>;
   }
 
   const createConsentButton = (consented: boolean, item: any, hostId: string): JSX.Element => {
     if (consented) {
       if(userHasRequiredPermissions()){
-        return <PrimaryButton onClick={() => handleRevoke(item)} style={{width: '100px', textAlign:'left'}}>
+        return <PrimaryButton onClick={() => handleRevoke(item)}
+          styles={consentButtonStyles}
+        >
           <FormattedMessage id='Revoke' />
-        </PrimaryButton>;
+        </PrimaryButton>
       }
       else{
         return <TooltipHost
           content={translateMessage('You require the following permissions to revoke')}
           id={hostId}
           calloutProps={{ gapSpace: 0 }}
-          styles={{ root: { display: 'inline-block' } }}
         >
           <DefaultButton
-            toggle
-            checked={false}
-            text={translateMessage('Revoke')}
             iconProps={buttonIcon}
             allowDisabledFocus
             disabled={true}
-            style={{width: '100px'}}
-          />
-        </TooltipHost>;
+            styles={consentButtonStyles}>
+            {translateMessage('Revoke')}
+          </DefaultButton>
+        </TooltipHost>
       }
     } else {
-      return <PrimaryButton onClick={() => handleConsent(item)} style={{width: '100px'}}>
+      return <PrimaryButton onClick={() => handleConsent(item)}
+        styles={consentButtonStyles}
+      >
         <FormattedMessage id='Consent' />
       </PrimaryButton>;
     }
@@ -193,9 +186,11 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
       const permissionInAllPrincipal = allPrincipalPermissions.some((permission: string) =>
         item.value === permission);
       return (
-        <Label>
-          {permissionInAllPrincipal ? translateMessage('AllPrincipal') : translateMessage('Principal')}
-        </Label>
+        <div style={consentTypeLabelStyles}>
+          <Label>
+            {permissionInAllPrincipal ? translateMessage('AllPrincipal') : translateMessage('Principal')}
+          </Label>
+        </div>
       )
     }
     return <div />
@@ -230,16 +225,15 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
   }
 
   const getColumns = () : IColumn[] => {
-    const columnSizes = setDescriptionColumnSize();
     const columns: IColumn[] = [
       {
         key: 'value',
         name: translateMessage('Permission'),
         fieldName: 'value',
-        minWidth: 150,
+        minWidth: 110,
         maxWidth: 200,
-        isResizable: true,
-        columnActionsMode: 0
+        columnActionsMode: 0,
+        isResizable: true
       }
     ];
 
@@ -249,11 +243,12 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
           key: 'consentDescription',
           name: translateMessage('Description'),
           fieldName: 'consentDescription',
-          isResizable: true,
-          minWidth: (tokenPresent) ? columnSizes.minWidth : 600,
-          maxWidth: (tokenPresent) ? columnSizes.maxWidth : 750,
+          minWidth: 300,
           isMultiline: true,
-          columnActionsMode: 0
+          columnActionsMode: 0,
+          targetWidthProportion: 1,
+          flexGrow: 1,
+          isResizable: true
         }
       );
     }
@@ -263,13 +258,14 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
         key: 'isAdmin',
         name: translateMessage('Admin consent required'),
         fieldName: 'isAdmin',
-        minWidth:  150,
-        maxWidth:  200,
+        minWidth:  187,
         ariaLabel: translateMessage('Administrator permission'),
         isMultiline: true,
         headerClassName: 'permissionHeader',
         styles: columnCellStyles,
-        onRenderHeader: () => renderColumnHeader('Admin consent required')
+        onRenderHeader: () => renderColumnHeader('Admin consent required'),
+        targetWidthProportion: 1,
+        flexGrow: 1
       }
     );
 
@@ -280,10 +276,11 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
           name: translateMessage('Status'),
           isResizable: false,
           fieldName: 'consented',
-          minWidth: 90,
-          maxWidth: 100,
+          minWidth: 130,
           onRenderHeader: () => renderColumnHeader('Status'),
-          styles: columnCellStyles
+          styles: columnCellStyles,
+          targetWidthProportion: 1,
+          flexGrow: 1
         },
 
       );
@@ -294,11 +291,12 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
         name: translateMessage('Consent type'),
         isResizable: false,
         fieldName: 'consentType',
-        minWidth: 110,
-        maxWidth: 120,
+        minWidth: 130,
         onRenderHeader: () => renderColumnHeader('Consent type'),
         styles: columnCellStyles,
-        ariaLabel: translateMessage('Permission consent type')
+        ariaLabel: translateMessage('Permission consent type'),
+        targetWidthProportion: 1,
+        flexGrow: 1
       }
     )
     return columns;
@@ -343,7 +341,7 @@ export const Permission = (permissionProps?: IPermissionProps): JSX.Element => {
         id={'buttonId'}
         ariaLabel={translateMessage(headerText)}
         onClick={() => openExternalWebsite(headerText)}
-        styles={{root: { position: 'relative', right: '1px'}}}
+        styles={{root: { position: 'relative', left: '4px'}}}
       >
       </IconButton>
       <span style={{paddingTop: '4px' }}>

src/app/views/query-runner/request/permissions/util.ts

@@ -1,5 +1,4 @@
 import { IPermission } from '../../../../../types/permissions';
-import { getBrowserScreenSize } from '../../../../utils/device-characteristics-telemetry';
 
 export function setConsentedStatus(tokenPresent: any, permissions: IPermission[], consentedScopes: string[]) {
   if (tokenPresent) {
@@ -10,54 +9,4 @@ export function setConsentedStatus(tokenPresent: any, permissions: IPermission[]
       });
     }
   }
-}
-
-interface IDescriptionSize {
-  minWidth: number;
-  maxWidth: number;
-}
-export function setDescriptionColumnSize(): IDescriptionSize {
-  const browserSize = getBrowserScreenSize(window.innerWidth);
-  switch (browserSize) {
-    case 's':
-      return {
-        minWidth: 90,
-        maxWidth: 140
-      }
-    case 'm':
-      return {
-        minWidth: 140,
-        maxWidth: 190
-      }
-    case 'l':
-      return {
-        minWidth: 190,
-        maxWidth: 240
-      }
-    case 'xl':
-      return {
-        minWidth: 240,
-        maxWidth: 370
-      }
-    case 'xxl':
-      return {
-        minWidth: 370,
-        maxWidth: 420
-      }
-    case 'xxxl':
-      return {
-        minWidth: 490,
-        maxWidth: 550
-      }
-    case 'xxxxl':
-      return {
-        minWidth: 500,
-        maxWidth: 1000
-      }
-    default:
-      return {
-        minWidth: 190,
-        maxWidth: 250
-      }
-  }
 }