Fix: Remove pivot tooltips (#1952)

microsoftgraph · Jul 22, 2022 · 01a8e74 · 01a8e74
1 parent 3b3d668
commit 01a8e74
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 40 deletions.
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
@@ -1,7 +1,7 @@
 import {
   Announced, Dialog, DialogFooter, DialogType,
-  DefaultButton, FontSizes, getId, Icon, IconButton,
-  Modal, Pivot, PivotItem, TooltipHost
+  DefaultButton, FontSizes, IconButton,
+  Modal, Pivot, PivotItem
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
 import React, { useState, useEffect } from 'react';
@@ -85,19 +85,6 @@ const QueryResponse = (props: IQueryResponseProps) => {
     if(!pivotItem){ return ;}
     setCurrentTab(pivotItem.props.itemKey!);
     onPivotItemClick(sampleQuery, pivotItem);
-  }
-
-  const renderItemLink = (link: any) => {
-    return (
-      <TooltipHost
-        content={link.title}
-        id={getId()}
-        calloutProps={{ gapSpace: 0 }}
-      >
-        <Icon iconName={link.itemIcon} style={{ paddingRight: 5 }} />
-        {link.headerText}
-      </TooltipHost>
-    );
   };
 
   return (
@@ -137,7 +124,6 @@ const QueryResponse = (props: IQueryResponseProps) => {
               itemKey='expand-response'
               ariaLabel={translateMessage('Expand response')}
               title={translateMessage('Expand response')}
-              onRenderItemLink={renderItemLink}
             />
           </Pivot>
         </div>

diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -1,4 +1,4 @@
-import { getId, getTheme, Icon, ITheme, PivotItem, TooltipHost } from '@fluentui/react';
+import { getTheme, Icon, ITheme, PivotItem } from '@fluentui/react';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
@@ -49,13 +49,14 @@ export const getPivotItems = () => {
 
   function renderItemLink(link: any) {
     return (
-      <TooltipHost content={link.title} id={getId()} calloutProps={{ gapSpace: 0 }}>
+      <>
         <Icon iconName={link.itemIcon} style={{ paddingRight: 5 }} />
         {link.headerText}
 
         {link.itemKey === 'adaptive-cards' && showDotIfAdaptiveCardPresent()}
         {link.itemKey === 'toolkit-component' && showDotIfGraphToolkitPresent()}
-      </TooltipHost>
+      </>
+
     );
   }
 

diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
@@ -1,9 +1,6 @@
 import {
-  getId,
-  Icon,
   Pivot,
-  PivotItem,
-  TooltipHost
+  PivotItem
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
 import React, { Component, CSSProperties } from 'react';
@@ -52,7 +49,6 @@ export class Request extends Component<IRequestComponent, any> {
         key='request-body'
         itemIcon='Send'
         itemKey='request-body' // To be used to construct component name for telemetry data
-        onRenderItemLink={this.getTooltipDisplay}
         ariaLabel={messages['request body']}
         title={messages['request body']}
         headerText={messages['request body']}
@@ -68,7 +64,6 @@ export class Request extends Component<IRequestComponent, any> {
         key='request-headers'
         itemIcon='FileComment'
         itemKey='request-headers'
-        onRenderItemLink={this.getTooltipDisplay}
         ariaLabel={messages['request header']}
         title={messages['request header']}
         headerText={messages['request header']}
@@ -84,7 +79,6 @@ export class Request extends Component<IRequestComponent, any> {
         key='modify-permissions'
         itemIcon='AzureKeyVault'
         itemKey='modify-permissions'
-        onRenderItemLink={this.getTooltipDisplay}
         ariaLabel={translateMessage('modify permissions')}
         title={translateMessage('permissions preview')}
         headerText={messages['modify permissions']}
@@ -103,7 +97,6 @@ export class Request extends Component<IRequestComponent, any> {
           key='access-token'
           itemIcon='AuthenticatorApp'
           itemKey='access-token'
-          onRenderItemLink={this.getTooltipDisplay}
           ariaLabel={translateMessage('Access Token')}
           title={translateMessage('Access Token')}
           headerText={translateMessage('Access Token')}
@@ -120,19 +113,6 @@ export class Request extends Component<IRequestComponent, any> {
     return pivotItems;
   }
 
-  private getTooltipDisplay(link: any) {
-    return (
-      <TooltipHost
-        content={link.title}
-        id={getId()}
-        calloutProps={{ gapSpace: 0 }}
-      >
-        <Icon iconName={link.itemIcon} style={{ paddingRight: 5 }} />
-        {link.headerText}
-      </TooltipHost>
-    );
-  }
-
   private handlePivotItemClick = (pivotItem?: PivotItem) => {
     if (!pivotItem) {
       return;