chore(release): 4.1.11 (#768)

* package.json

* chore(release): 4.1.4

* add 4.1.4 build files

* chore(release): 4.1.5

* add version 4.1.5 build files

* fix copy paste failure when query bar is empty

* HB of localized GE.jsons (#660)

Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* ci: add Azure Static Web Apps workflow file
on-behalf-of: @Azure opensource@microsoft.com

* change multiline property

* remove main tag

* Fix: sovereign clouds metadata (#676)

* fix crashing when fetching soverign metadata

* remove dead code

* add comment to explain why only the first value is taken

* Feature: Add Graph toolkit tab (#452)

* create graph toolkit views

* add localisation for missing graph toolkit

* move implementation to json file and use succinct code

* display open in mgtdev message and change missing toolkit text

* adds source to example url

* add new examples. move file to root of project

* updates icon in code snippet

* fixes messaging changes requested

* removes unnecessary period

* display blue dot on supported queries

* add space to 'no toolkit' messaging

* display text and icon in mobile view

* Feature: History items ttl (#677)

* show history items younger than 30 days, remove the rest

* change terminology to expiry

* flip expiry check

* Fix: add fallback texts to placeholder text (#690)

* create function to provide fallback texts for placeholder texts

* display object value

* add fallback text translator to pivot items

* Localize tooltip message

* add render details header function

* add tooltip on 'admin consent required' header

* remove unnecessary white space

* add translate message function

* add tooltip on permissions panel

* Fix: remove unnecessary code snippets tab (#695)

* Task: update azure pipeline (#691)

* create drop files and version number variable

* remove publish code coverage results

* remove conditions when publishing artifacts

* temporarily pause reporting pipeline failure

* change to ubuntu-latest

* display sources directory

* Change to default working directory

* reset to build sources directory

* pause deployment

* vs2017-win2016

* remove set version number

* temporarily pause the notification task

* change vmImage

* fix merge conflicts

* add build id

* remove name from pipeline

* comment deployment steps

* remove name from build

* add test coverage back to pipeline

* remove build folder from source code

* add build folder to .gitignore

* skip tag creation, change version script

* remove condition so that there is always a build folder

* disable unwanted steps

* adds triggers and filters to the steps

* split pipeline to two jobs

* add display name

* rename job id

* add job dependency on previous task

* move publishing tasks to publishing job

* run npm install before publish

* add date to run name

* remove source branch from name

* publish code coverage results

* remove publish code coverage task

* change position of setversion number;
add condition

* update version to latest

* remove disabled tasks

* Task: HandBack of localized GE.jsons (#698)

Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* Task: Reduce padding/spacing on request header  (#696)

* remove excess padding

* remove styling

* remove break

* Release: sept 2020 (#701)

* Release: july 2020 2 (#650)

* chore(release): 4.1.5

* add version 4.1.5 build files

* Release: august 2020 (#662)

* chore(release): 4.1.4

* add 4.1.4 build files

* chore(release): 4.1.5

* add version 4.1.5 build files

* fix copy paste failure when query bar is empty

* HB of localized GE.jsons (#660)

Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* chore(release): 4.1.6

* create 4.1.6 build files

Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* chore(release): 4.1.7

Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* Task: removes depracated setConsent method (#703)

* Task: Change adaptive cards message  (#704)

* remove excess padding

* remove styling

* remove break

* Change adaptive card message

* format localized string

* add label styles

* refactor code

* capitalize words

* add query status check

* rename labelStyles property

* Telemetry for Graph Explorer usage (#672)

* Capture telemetry data for actions on History tab

* Capture telemetry data for actions on Sample Queries tab

* Capture telemetry data for theme change actions

* Capture telemetry data for office dev program link click

* Capture telemetry data for Graph API version change event

* Capture telemetry data for Adaptive Cards tab click

* Capture telemetry data for Code Snippets click and copy events

* Update .gitignore file

* Remove QueryUrl from history item telemetry data

* Capture old version and new version telemetry data on version change

* Update query version comparison to strict equality comparison

* Capture telemetry data for clicking history tab on header click

* Capture telemetry data for Permissions and Auth tab click events

* Fix imports ordering

* Add telemetry for tabs in query response section

* Rename RUN_QUERY_EVENT

* Update how we send telemetry data for custom events

* Add property to telemetry data to report if a user was authenitcated or not during an event

* Update method for collecting telemetry data for request tabs

* Update azure-pipelines to use a different AppInsights instrumentation key for staging

* Track component usage for permissions, auth, snippets and history tabs

* Provide name of component for AppInsights React component tracking

* Use interface as type instead of any when tracking documentation link click event

* Enable telemetry

* Rename telemetry custom property from QueryUrl to QuerySignature

* Disable telemetry if AppInsights instrumentation key does not exist

* HB of localized GE.jsons (#727)

* HB of localized GE.jsons

Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* Task: display history items ttl message (#733)

* Fix: create onenote page (#708)

* display the page content in the request body

* fix linting errors

* add appropriate content type header

* remove filter for content-type header

* refine comment for clarity

* upgrade to the latest javascript sdk

* remove content type header checks

* simplify json content check

* refactor code to be concise

* Format code on save and paste

* Fix: breaking change with the adaptive cards templating library (#735)

* update adaptive card templating library

* fix breaking change

* fix linting error

* fix formatting

* HB of localized GE.jsons (#742)

Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* Release: October 2020 (#748)

* chore(release): 4.1.9 (#716)

* Feature: History items ttl (#677)

* Fix: add fallback texts to placeholder text (#690)

* Task: Reduce padding/spacing on request header  (#696)

* Task: removes depracated setConsent method (#703)

* chore(release): 4.1.9

Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>
Co-authored-by: Azure Static Web Apps <opensource@microsoft.com>
Co-authored-by: Elinor <ekaguongo@gmail.com>

* chore(release): 4.1.10

Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>
Co-authored-by: Azure Static Web Apps <opensource@microsoft.com>
Co-authored-by: Elinor <ekaguongo@gmail.com>

* Fix: duplicate aria labels (#752)

* Update aria-label

* localize aria labels

* HB of localized GE.jsons (#757)

Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* Adding JWT.ms support in the Access Token view (#754)

* Adding JWT.ms support in the Access Token view

* Adding translate method

* Removing the translated keys.

* format code to pass linting check

Authored-by: Sebastien <@sebastienlevert>
Co-authored-by: Elinor <ekaguongo@gmail.com>

* descriptive message after pop-up blocked in browser (#762)

* descriptive message after pop-up blocked in browser

* fix lint

* add message translation

* Fix: focus order (#763)

* restructure pivot items

* add 'expand' and 'share' options as pivot items

* add pivot items styling

* Remove color

* Add tooltips

* remove unused function

* add translateMessage function

* HB of localized GE.jsons (#767)

Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>

* chore(release): 4.1.11

Co-authored-by: jobala <japhethobalak@gmail.com>
Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com>
Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com>
Co-authored-by: Azure Static Web Apps <opensource@microsoft.com>
Co-authored-by: Elinor <ekaguongo@gmail.com>
Co-authored-by: Millicent Achieng <achieng.milli@gmail.com>
Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>
Co-authored-by: Ezrqn Kemboi <ezrqnkemboi@gmail.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "graph-explorer-v2",
-  "version": "4.1.10",
+  "version": "4.1.11",
   "private": true,
   "dependencies": {
     "@babel/core": "7.2.2",

src/app/views/authentication/Authentication.tsx

@@ -9,6 +9,7 @@ import { Mode } from '../../../types/enums';
 import * as authActionCreators from '../../services/actions/auth-action-creators';
 import * as queryStatusActionCreators from '../../services/actions/query-status-action-creator';
 import { logIn } from '../../services/graph-client/msal-service';
+import { translateMessage } from '../../utils/translate-messages';
 import { classNames } from '../classnames';
 import { showSignInButtonOrProfile } from './auth-util-components';
 import { authenticationStyles } from './Authentication.styles';
@@ -38,7 +39,9 @@ export class Authentication extends Component<IAuthenticationProps, { loginInPro
       this.props.actions!.setQueryResponseStatus({
         ok: false,
         statusText: messages['Authentication failed'],
-        status: errorCode.replace('_', ' '),
+        status: errorCode === 'popup_window_error'
+          ? translateMessage('popup blocked, allow pop-up windows in your browser')
+          : errorCode.replace('_', ' '),
         messageType: MessageBarType.error
       });
       this.setState({ loginInProgress: false });

src/app/views/query-response/QueryResponse.tsx

@@ -1,21 +1,38 @@
 import {
-  DefaultButton, FontSizes,
-  getId, IconButton, Modal, Pivot,
-  PrimaryButton, TooltipHost
+  DefaultButton,
+  FontSizes,
+  getId,
+  Icon,
+  IconButton,
+  Modal,
+  Pivot,
+  PivotItem,
+  PrimaryButton,
+  TooltipHost,
 } from 'office-ui-fabric-react';
-import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
+import {
+  Dialog,
+  DialogFooter,
+  DialogType,
+} from 'office-ui-fabric-react/lib/Dialog';
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Mode } from '../../../types/enums';
-import { IQueryResponseProps, IQueryResponseState } from '../../../types/query-response';
+import {
+  IQueryResponseProps,
+  IQueryResponseState,
+} from '../../../types/query-response';
+import { translateMessage } from '../../utils/translate-messages';
 import { copy } from '../common/copy';
 import { createShareLink } from '../common/share';
 import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
 import './query-response.scss';
 
-class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState> {
+class QueryResponse extends Component<
+  IQueryResponseProps,
+  IQueryResponseState
+> {
   constructor(props: any) {
     super(props);
     this.state = {
@@ -25,31 +42,58 @@ class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState>
     };
   }
 
-  public shouldComponentUpdate(nextProps: IQueryResponseProps, nextState: IQueryResponseState) {
-    return nextProps.graphResponse !== this.props.graphResponse
-      || nextProps.mobileScreen !== this.props.mobileScreen
-      || nextState !== this.state
-      || nextProps.theme !== this.props.theme;
+  public shouldComponentUpdate(
+    nextProps: IQueryResponseProps,
+    nextState: IQueryResponseState
+  ) {
+    return (
+      nextProps.graphResponse !== this.props.graphResponse ||
+      nextProps.mobileScreen !== this.props.mobileScreen ||
+      nextState !== this.state ||
+      nextProps.theme !== this.props.theme
+    );
   }
 
   public handleCopy = () => {
-    copy('share-query-text')
-      .then(() => this.toggleShareQueryDialogState());
-  }
+    copy('share-query-text').then(() => this.toggleShareQueryDialogState());
+  };
 
   public handleShareQuery = () => {
     const { sampleQuery } = this.props;
     const shareableLink = createShareLink(sampleQuery);
     this.setState({ query: shareableLink });
     this.toggleShareQueryDialogState();
-  }
+  };
 
   public toggleShareQueryDialogState = () => {
     this.setState({ showShareQueryDialog: !this.state.showShareQueryDialog });
   };
 
-  public toggleModal = () => {
+  public toggleExpandResponse = () => {
     this.setState({ showModal: !this.state.showModal });
+  };
+
+  public toggleModal = (event: any) => {
+    const { key } = event;
+    if (key && key.includes('expand')) {
+      this.toggleExpandResponse();
+    }
+    if (key && key.includes('share')) {
+      this.handleShareQuery();
+    }
+  };
+
+  public renderItemLink(link: any) {
+    return (
+      <TooltipHost
+        content={link.title}
+        id={getId()}
+        calloutProps={{ gapSpace: 0 }}
+      >
+        <Icon iconName={link.itemIcon} style={{ paddingRight: 5 }} />
+        {link.headerText}
+      </TooltipHost>
+    );
   }
 
   public render() {
@@ -58,7 +102,7 @@ class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState>
     const {
       intl: { messages },
       verb,
-      sampleQuery
+      sampleQuery,
     }: any = this.props;
 
     const { showShareQueryDialog, query, showModal } = this.state;
@@ -70,86 +114,60 @@ class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState>
     }
 
     const pivotProperties = {
-      messages, body, verb, mode, headers, mobileScreen, sampleQuery
+      messages,
+      body,
+      verb,
+      mode,
+      headers,
+      mobileScreen,
+      sampleQuery,
     };
 
     const pivotItems = getPivotItems(pivotProperties);
 
     return (
       <div>
         <div className='query-response'>
-          {mode === Mode.Complete && <>
-            <div style={{
-              float: 'right',
-              padding: '0px',
-              zIndex: 1,
-            }}>
-
-              <TooltipHost
-                content={`${messages['Share Query Message']}`}
-                id={getId()}
-                calloutProps={{ gapSpace: 0 }}
-                styles={{ root: { display: 'inline-block' } }}
-              >
-                <IconButton
-                  onClick={this.handleShareQuery}
-                  className='share-query-btn'
-                  iconProps={{ iconName: 'Share'}}
-                  aria-label={'Share query message'}
-                />
-              </TooltipHost>
-            </div>
-
-            <div style={{
-              float: 'right',
-              padding: '0px',
-              zIndex: 1,
-            }}>
-              <TooltipHost
-                content={`${messages['Expand response']}`}
-                id={getId()}
-                calloutProps={{ gapSpace: 0 }}
-                styles={{ root: { display: 'inline-block' } }}
-              >
-                <IconButton
-                  onClick={this.toggleModal}
-                  className='share-query-btn'
-                  iconProps={{ iconName: 'MiniExpandMirrored'}}
-                  aria-label={'Expand response'}
-                />
-              </TooltipHost>
-            </div>
-          </>}
-          <Pivot className='pivot-response'
-            styles={{ root: { display: 'flex', flexWrap: 'wrap' } }}
-            onLinkClick={(pivotItem) => onPivotItemClick(pivotItem)}
-            >
+          <Pivot className='pivot-response' onLinkClick={this.toggleModal}>
             {pivotItems}
+            <PivotItem
+              headerText='Share'
+              key='share'
+              itemIcon='Share'
+              ariaLabel={translateMessage('Share Query Message')}
+              title={translateMessage('Share Query Message')}
+              onRenderItemLink={this.renderItemLink}
+            />
+            <PivotItem
+              headerText='Expand'
+              key='expand'
+              itemIcon='MiniExpandMirrored'
+              ariaLabel={translateMessage('Expand response')}
+              title={translateMessage('Expand response')}
+              onRenderItemLink={this.renderItemLink}
+            />
           </Pivot>
         </div>
 
         {
           // @ts-ignore
           <Modal
             isOpen={showModal}
-            onDismiss={this.toggleModal}
-            styles={{ main: { width: '80%', height: '90%' }, }}
+            onDismiss={this.toggleExpandResponse}
+            styles={{ main: { width: '80%', height: '90%' } }}
           >
-
             <IconButton
               styles={{
                 root: {
                   float: 'right',
-                  zIndex: 1
+                  zIndex: 1,
                 },
               }}
               iconProps={{ iconName: 'Cancel' }}
               ariaLabel='Close popup modal'
-              onClick={this.toggleModal}
+              onClick={this.toggleExpandResponse}
             />
-            <Pivot className='pivot-response'>
-              {pivotItems}
-            </Pivot>
+            <Pivot className='pivot-response'>{pivotItems}</Pivot>
           </Modal>
         }
         <Dialog
@@ -159,25 +177,33 @@ class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState>
             type: DialogType.normal,
             title: 'Share Query',
             isMultiline: true,
-            subText: messages['Share Query Message']
+            subText: messages['Share Query Message'],
           }}
         >
-          <textarea style={{
-            wordWrap: 'break-word',
-            fontFamily: 'monospace',
-            fontSize: FontSizes.xSmall,
-            width: '100%',
-            height: 63,
-            overflowY: 'scroll',
-            border: 'none',
-            resize: 'none'
-          }} className='share-query-params' id='share-query-text' defaultValue={query} />
+          <textarea
+            style={{
+              wordWrap: 'break-word',
+              fontFamily: 'monospace',
+              fontSize: FontSizes.xSmall,
+              width: '100%',
+              height: 63,
+              overflowY: 'scroll',
+              border: 'none',
+              resize: 'none',
+            }}
+            className='share-query-params'
+            id='share-query-text'
+            defaultValue={query}
+          />
           <DialogFooter>
             <PrimaryButton text={messages.Copy} onClick={this.handleCopy} />
-            <DefaultButton text={messages.Close} onClick={this.toggleShareQueryDialogState} />
+            <DefaultButton
+              text={messages.Close}
+              onClick={this.toggleShareQueryDialogState}
+            />
           </DialogFooter>
         </Dialog>
-      </div >
+      </div>
     );
   }
 }
@@ -189,11 +215,10 @@ function mapStateToProps(state: any) {
     mode: state.graphExplorerMode,
     scopes: state.scopes.data,
     sampleQuery: state.sampleQuery,
-    mobileScreen: !!state.sidebarProperties.mobileScreen
+    mobileScreen: !!state.sidebarProperties.mobileScreen,
   };
 }
 
 // @ts-ignore
 const WithIntl = injectIntl(QueryResponse);
 export default connect(mapStateToProps)(WithIntl);
-

src/app/views/query-response/query-response.scss

@@ -14,6 +14,14 @@
     width: 100%;
   }
 
+  .pivot-response *[data-content='Expand xx'] {
+    float: right !important;
+    }
+
+  .pivot-response *[data-content='Share xx'] {
+    float: right !important;
+    }
+
   .default-text {
     display: flex;
     width: 100%;

src/app/views/query-runner/QueryInput.tsx

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { Mode } from '../../../types/enums';
 import { IQueryInputProps } from '../../../types/query-runner';
 import { getStyleFor } from '../../utils/badge-color';
+import { translateMessage } from '../../utils/translate-messages';
 import SubmitButton from '../common/submit-button/SubmitButton';
 import { queryRunnerStyles } from './QueryRunner.styles';
 
@@ -72,7 +73,7 @@ export class QueryInput extends Component<IQueryInputProps, any> {
       <div className='row'>
         <div className='col-xs-12 col-lg-2'>
           <Dropdown
-            ariaLabel='Query sample option'
+            ariaLabel={translateMessage('HTTP request method option')}
             role='listbox'
             selectedKey={selectedVerb}
             options={httpMethodsToDisplay}
@@ -82,7 +83,7 @@ export class QueryInput extends Component<IQueryInputProps, any> {
         </div>
         <div className='col-xs-12 col-lg-2'>
           <Dropdown
-            ariaLabel='Query sample option'
+            ariaLabel={translateMessage('Microsoft Graph API Version option')}
             role='listbox'
             selectedKey={selectedVersion || 'v1.0'}
             options={urlVersions}
@@ -91,7 +92,7 @@ export class QueryInput extends Component<IQueryInputProps, any> {
         </div>
         <div className='col-xs-12 col-lg-6'>
           <TextField
-            ariaLabel='Query Sample Input'
+            ariaLabel={translateMessage('Query Sample Input')}
             role='textbox'
             placeholder={messages['Query Sample']}
             onChange={(event, value) => handleOnUrlChange(value)}

src/app/views/query-runner/request/auth/Auth.styles.ts

@@ -6,7 +6,7 @@ export const authStyles = (theme: ITheme) => {
       padding: 10
     },
     accessTokenContainer: {
-      width: 120,
+      width: 160,
       display: 'flex',
       flexDirection: 'row',
       justifyContent: 'space-between',