Fix: Ensure consistent font sizes on all Pivots (#2067)

microsoftgraph · Aug 31, 2022 · 0f5cbf6 · 0f5cbf6
1 parent 42b7ecf
commit 0f5cbf6
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 77 deletions.
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
@@ -1,34 +1,24 @@
 import {
-  Announced, Dialog, DialogFooter, DialogType,
-  DefaultButton, FontSizes, IconButton,
+  Announced, FontSizes, IconButton,
   Modal, Pivot, PivotItem, getTheme, ITheme
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
 import React, { useState, useEffect, CSSProperties } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { componentNames, eventTypes, telemetry } from '../../../telemetry';
 
-import {
-  IQueryResponseProps
-} from '../../../types/query-response';
-import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { expandResponseArea } from '../../services/actions/response-expanded-action-creator';
 import { translateMessage } from '../../utils/translate-messages';
-import { copy } from '../common/copy';
 import { GetPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
 import './query-response.scss';
 import { IRootState } from '../../../types/root';
-import { CopyButton } from '../common/copy/CopyButton';
 import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
 import { queryResponseStyles } from './queryResponse.styles';
 
 
-const QueryResponse = (props: IQueryResponseProps) => {
+const QueryResponse = () => {
   const dispatch = useDispatch();
-  const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
   const [showModal, setShowModal] = useState(false);
-  const [query] = useState('');
   const [responseHeight, setResponseHeight] = useState('610px');
   const { sampleQuery, dimensions } = useSelector((state: IRootState) => state);
   const [currentTab, setCurrentTab] = useState<string>('response-preview');
@@ -39,40 +29,19 @@ const QueryResponse = (props: IQueryResponseProps) => {
     setResponseHeight(convertVhToPx(dimensions.response.height, 50));
   }, [dimensions]);
 
-  const {
-    intl: { messages }
-  }: any = props;
-
   const flexQueryElement: CSSProperties = {
     display:'flex',
     flexDirection: 'column',
     alignItems: 'stretch',
     flex: 1,
     marginTop: -13
   }
-  const toggleShareQueryDialogState = () => {
-    setShareQuaryDialogStatus(!showShareQueryDialog);
-  };
 
   const toggleExpandResponse = () => {
     setShowModal(!showModal);
     dispatch(expandResponseArea(!showModal));
   };
 
-  const handleCopy = () => {
-    copy('share-query-text');
-    trackCopyEvent();
-  };
-
-  const trackCopyEvent = () => {
-    const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);
-    telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT,
-      {
-        ComponentName: componentNames.SHARE_QUERY_COPY_BUTTON,
-        QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedUrl}`
-      });
-  }
-
   const handlePivotItemClick = (pivotItem?: PivotItem) => {
     if (!pivotItem) {
       return;
@@ -134,6 +103,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
             onLinkClick={handlePivotItemClick}
             className={'pivot-response'}
             selectedKey={currentTab}
+            styles={{text: {fontSize: FontSizes.size14}}}
           >
             {GetPivotItems()}
             <PivotItem
@@ -174,40 +144,6 @@ const QueryResponse = (props: IQueryResponseProps) => {
           </Pivot>
         </Modal>
       }
-      <Dialog
-        hidden={showShareQueryDialog}
-        onDismiss={toggleShareQueryDialogState}
-        dialogContentProps={{
-          type: DialogType.normal,
-          title: 'Share Query',
-          isMultiline: true,
-          subText: messages['Share Query Message']
-        }}
-      >
-        <textarea
-          style={{
-            wordWrap: 'break-word',
-            fontFamily: 'monospace',
-            fontSize: FontSizes.xSmall,
-            width: '100%',
-            height: 63,
-            overflowY: 'scroll',
-            resize: 'none',
-            color: 'black'
-          }}
-          id='share-query-text'
-          className='share-query-params'
-          defaultValue={query}
-          aria-label={translateMessage('Share Query')}
-        />
-        <DialogFooter>
-          <CopyButton handleOnClick={handleCopy} isIconButton={false} />
-          <DefaultButton
-            text={messages.Close}
-            onClick={toggleShareQueryDialogState}
-          />
-        </DialogFooter>
-      </Dialog>
     </div>
   );
 };

diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
@@ -1,5 +1,5 @@
 import * as AdaptiveCardsAPI from 'adaptivecards';
-import { getTheme, IStyle, ITheme, Label, Link,
+import { FontSizes, getTheme, IStyle, ITheme, Label, Link,
   MessageBar, MessageBarType, Pivot, PivotItem, styled } from '@fluentui/react';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -106,7 +106,9 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
           componentNames.JSON_SCHEMA_COPY_BUTTON, sampleQuery);
         }
         return (
-          <Pivot className='pivot-response' onLinkClick={(pivotItem) => onPivotItemClick(sampleQuery, pivotItem)}>
+          <Pivot className='pivot-response'
+            onLinkClick={(pivotItem) => onPivotItemClick(sampleQuery, pivotItem)}
+            styles={{text: {fontSize: FontSizes.size14}}}>
             <PivotItem
               itemKey='card'
               ariaLabel={translateMessage('card')}

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 { getTheme, Icon, ITheme, PivotItem } from '@fluentui/react';
+import { getTheme, IPivotItemProps, ITheme, PivotItem } from '@fluentui/react';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
@@ -46,17 +46,20 @@ export const GetPivotItems = () => {
     }
     return null;
   }
+  function renderItemLink(
+    link?: IPivotItemProps,
+    defaultRenderer?: (link?: IPivotItemProps) => JSX.Element | null,
+  ): JSX.Element | null {
+    if (!link || !defaultRenderer) {
+      return null;
+    }
 
-  function renderItemLink(link: any) {
     return (
       <span>
-        <Icon iconName={link.itemIcon} style={{ paddingRight: 5 }} />
-        {link.headerText}
-
+        {defaultRenderer({ ...link, itemKey: 'adaptive-cards' })}
         {link.itemKey === 'adaptive-cards' && showDotIfAdaptiveCardPresent()}
         {link.itemKey === 'toolkit-component' && showDotIfGraphToolkitPresent()}
       </span>
-
     );
   }
 

diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx
@@ -1,4 +1,4 @@
-import { Pivot, PivotItem } from '@fluentui/react';
+import { FontSizes, Pivot, PivotItem } from '@fluentui/react';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -44,6 +44,7 @@ function GetSnippets() {
     className={'pivot-response'}
     selectedKey={snippets.snippetTab}
     onLinkClick={handlePivotItemClick}
+    styles={{text: {fontSize: FontSizes.size14}}}
   >
     {renderSnippets(supportedLanguages)}
   </Pivot>;

diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
@@ -1,4 +1,5 @@
 import {
+  FontSizes,
   Pivot,
   PivotItem
 } from '@fluentui/react';
@@ -178,6 +179,7 @@ export class Request extends Component<IRequestComponent, any> {
               onLinkClick={this.handlePivotItemClick}
               className='pivot-request'
               selectedKey={pivot}
+              styles={{text: {fontSize: FontSizes.size14}}}
             >
               {requestPivotItems}
             </Pivot>

diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx
@@ -1,4 +1,5 @@
 import { DirectionalHint,
+  FontSizes,
   getTheme,
   IconButton,
   Pivot,
@@ -45,7 +46,8 @@ export const Sidebar = (props: ISidebar) =>{
       <Pivot onLinkClick={onPivotItemClick}
         overflowBehavior='menu'
         overflowAriaLabel={translateMessage('More items')}
-        defaultSelectedKey={props.currentTab}>
+        defaultSelectedKey={props.currentTab}
+        styles={{text: {fontSize: FontSizes.size14}}}>
         <PivotItem
           headerText={translateMessage('Sample Queries')}
           itemIcon='Rocket'