Fix: modify permissions tab UI

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

@@ -183,29 +183,22 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
         key: 'value',
         name: messages.Permission,
         fieldName: 'value',
-        minWidth: 150,
-        maxWidth: 200,
+        minWidth: 200,
+        maxWidth: 250,
         isResizable: true
       }
     ];
 
     if (!panel) {
       columns.push(
-        {
-          key: 'consentDisplayName',
-          name: messages['Display string'],
-          fieldName: 'consentDisplayName',
-          isResizable: true,
-          minWidth: 250,
-          maxWidth: 300
-        },
         {
           key: 'consentDescription',
           name: messages.Description,
           fieldName: 'consentDescription',
           isResizable: true,
-          minWidth: (tokenPresent) ? 400 : 650,
-          maxWidth: (tokenPresent) ? 500 : 700
+          minWidth: (tokenPresent) ? 400 : 700,
+          maxWidth: (tokenPresent) ? 700 : 1000,
+          isMultiline: true
         }
       );
     }
@@ -216,8 +209,8 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
         isResizable: true,
         name: messages['Admin consent required'],
         fieldName: 'isAdmin',
-        minWidth: (tokenPresent) ? 150 : 100,
-        maxWidth: (tokenPresent) ? 150 : 100,
+        minWidth: (tokenPresent) ? 150 : 150,
+        maxWidth: (tokenPresent) ? 200 : 300,
         ariaLabel: translateMessage('Administrator permission')
       }
     );

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

@@ -1,6 +1,7 @@
 import { DetailsList, DetailsListLayoutMode, IColumn, Label, SelectionMode } from 'office-ui-fabric-react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 
 import { IPermission } from '../../../../../types/permissions';
 
@@ -12,14 +13,17 @@ interface ITabList {
   renderDetailsHeader: Function;
 }
 
+
 const TabList = ({ permissions, columns, classes, renderItemColumn, renderDetailsHeader }: ITabList) => {
+  const tokenPresent = useSelector((state: any) => state.authToken);
   return (
     <>
       <Label className={classes.permissionLength}>
         <FormattedMessage id='Permissions' />&nbsp;({permissions.length})
       </Label>
       <Label className={classes.permissionText}>
-        <FormattedMessage id='permissions required to run the query' />
+        {!tokenPresent && <FormattedMessage id='sign in to consent to permissions' />}
+        {tokenPresent && <FormattedMessage id='permissions required to run the query' />}
       </Label>
       <DetailsList styles={{ root: { minHeight: '300px' } }}
         items={permissions}

src/messages/GE.json

@@ -293,7 +293,7 @@
   "Status": "Status",
   "Admin consent required": "Admin consent required",
   "Consent": "Consent",
-  "permissions required to run the query": "The following permissions are required to run the query. To consent to the permissions, click Consent.",
+  "permissions required to run the query": "One of the following permissions is required to run the query. Select a permission and click Consent.",
   "tab": " tab",
   "View the": " View the",
   "viewing a cached set": "You are viewing a cached set of samples because of a network connection failure.",
@@ -306,7 +306,7 @@
   "Snippet not available": "Snippet not available",
   "Select different permissions": "To try out different Microsoft Graph API endpoints, choose the permissions, and then click Consent.",
   "Search permissions": "Search permissions",
-  "permissions not found": "We did not find permissions",
+  "permissions not found": "We did not find any permissions. To view a list of all available permissions, click on the Settings icon and Select Permissions.",
   "selected": "selected",
   "Search sample queries": "Search sample queries",
   "Search history items": "Search history items",
@@ -326,5 +326,6 @@
   "HTTP request method option": "HTTP request method option",
   "Microsoft Graph API Version option": "Microsoft Graph API Version option",
   "Query Sample Input": "Query sample input",
-  "popup blocked, allow pop-up windows in your browser": "popup blocked, allow pop-up windows in your browser"
-}
+  "popup blocked, allow pop-up windows in your browser": "popup blocked, allow pop-up windows in your browser",
+  "sign in to consent to permissions": "One of the following permissions is required to run the query. Sign in with an account that can consent to the permission you will choose."
+}

src/types/permissions.ts

@@ -3,7 +3,6 @@ import { IQuery } from './query-runner';
 
 export interface IPermission {
   value: string;
-  consentDisplayName: string;
   consentDescription: string;
   isAdmin: boolean;
   consented: boolean;