Task: Add tooltip to 'admin consent required' header(#692)

Task: Add tooltip to 'admin consent required' header
microsoftgraph · Sep 14, 2020 · e5ae6b2 · e5ae6b2
2 parents 4419110 + 72fee85
commit e5ae6b2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx
@@ -23,11 +23,12 @@ interface IPanelList {
   selection: any;
   renderItemColumn: any;
   searchValueChanged: Function;
+  renderDetailsHeader: Function;
 }
 
 const PanelList = ({ messages, permissions,
   columns, classes, selection,
-  renderItemColumn, searchValueChanged }: IPanelList) => {
+  renderItemColumn, searchValueChanged, renderDetailsHeader }: IPanelList) => {
 
   const groups = generatePermissionGroups(permissions);
   permissions = permissions.sort(dynamicSort('value', SortOrder.ASC));
@@ -63,6 +64,7 @@ const PanelList = ({ messages, permissions,
         ariaLabelForSelectionColumn={messages['Toggle selection'] || 'Toggle selection'}
         ariaLabelForSelectAllCheckbox={messages['Toggle selection for all items'] || 'Toggle selection for all items'}
         checkButtonAriaLabel={messages['Row checkbox'] || 'Row checkbox'}
+        onRenderDetailsHeader={(props?: any, defaultRender?: any) => renderDetailsHeader(props, defaultRender)}
       />
     </>
   );

diff --git a/src/app/views/query-runner/request/permissions/Permission.tsx b/src/app/views/query-runner/request/permissions/Permission.tsx
@@ -16,6 +16,7 @@ import { bindActionCreators, Dispatch } from 'redux';
 
 import { IPermission, IPermissionProps, IPermissionState } from '../../../../../types/permissions';
 import * as permissionActionCreators from '../../../../services/actions/permissions-action-creator';
+import { translateMessage } from '../../../../utils/translate-messages';
 import { classNames } from '../../../classnames';
 import PanelList from './PanelList';
 import { permissionStyles } from './Permission.styles';
@@ -161,14 +162,25 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
     }
   };
 
+  private renderDetailsHeader(props: any, defaultRender?: any) {
+    return defaultRender!({
+      ...props,
+      onRenderColumnHeaderTooltip: (tooltipHostProps: any) => {
+        return (
+          <TooltipHost {...tooltipHostProps} />
+        );
+      }
+    });
+}
+
   private getColumns = () => {
     const {
       tokenPresent,
       panel,
       intl: { messages },
     }: any = this.props;
 
-    const columns = [
+    const columns: IColumn[] = [
       {
         key: 'value',
         name: messages.Permission,
@@ -208,6 +220,7 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
         fieldName: 'isAdmin',
         minWidth: (tokenPresent) ? 150 : 100,
         maxWidth: (tokenPresent) ? 150 : 100,
+        ariaLabel: translateMessage('Administrator permission')
       }
     );
 
@@ -269,6 +282,8 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
               classes={classes}
               renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
                 this.renderItemColumn(item, index, column)}
+              renderDetailsHeader={this.renderDetailsHeader}
+
             />}
             {panel &&
               <div data-is-scrollable={true}>
@@ -282,6 +297,7 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
                     this.renderItemColumn(item, index, column)}
                   searchValueChanged={(event?: React.ChangeEvent<HTMLInputElement>, value?: string) =>
                     this.searchValueChanged(event, value)}
+                  renderDetailsHeader={this.renderDetailsHeader}
                 />
               </div>
             }

diff --git a/src/app/views/query-runner/request/permissions/TabList.tsx b/src/app/views/query-runner/request/permissions/TabList.tsx
@@ -9,9 +9,10 @@ interface ITabList {
   columns: any[];
   classes: any;
   renderItemColumn: Function;
+  renderDetailsHeader: Function;
 }
 
-const TabList = ({ permissions, columns, classes, renderItemColumn }: ITabList) => {
+const TabList = ({ permissions, columns, classes, renderItemColumn, renderDetailsHeader }: ITabList) => {
   return (
     <>
       <Label className={classes.permissionLength}>
@@ -25,7 +26,8 @@ const TabList = ({ permissions, columns, classes, renderItemColumn }: ITabList)
         columns={columns}
         onRenderItemColumn={(item?: any, index?: number, column?: IColumn) => renderItemColumn(item, index, column)}
         selectionMode={SelectionMode.none}
-        layoutMode={DetailsListLayoutMode.justified} />
+        layoutMode={DetailsListLayoutMode.justified}
+        onRenderDetailsHeader={(props?: any, defaultRender?: any) => renderDetailsHeader(props, defaultRender)} />
     </>
   );
 };

diff --git a/src/messages/GE.json b/src/messages/GE.json
@@ -315,5 +315,6 @@
   "Minimize sidebar": "Minimize sidebar",
   "Toggle selection for all items": "Toggle selection for all items",
   "Toggle selection": "Toggle selection",
-  "Row checkbox": "Row checkbox"
+  "Row checkbox": "Row checkbox",
+  "Administrator permission": "Admin of the tenant needs to authorize first before you can consent to this permission"
 }