Chore: Update to 6.4.0

package.json

@@ -1,6 +1,6 @@
 {
  "name": "graph-explorer-v2",
- "version": "6.3.0",
+ "version": "6.4.0",
  "private": true,
  "dependencies": {
  "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
@@ -130,4 +130,4 @@
  "resolutions": {
  "@types/react": "17.0.30"
  }
-}
+}

src/app/services/actions/query-action-creator-util.ts

@@ -35,7 +35,7 @@ export async function anonymousRequest(
  getState: Function
 ) {
  const { proxyUrl, queryRunnerStatus } = getState();
- const { graphUrl, options } =  createAnonymousRequest(query, proxyUrl, queryRunnerStatus);
+ const { graphUrl, options } = createAnonymousRequest(query, proxyUrl, queryRunnerStatus);
  dispatch(queryRunningStatus(true));
  return fetch(graphUrl, options)
  .catch(() => {

src/app/views/App.tsx

@@ -78,7 +78,7 @@ class App extends Component<IAppProps, IAppState> {
  };
  }
 
- private setSidebarTabSelection = (selectedTab : string) => {
+ private setSidebarTabSelection = (selectedTab: string) => {
  this.setState({
  sidebarTabSelection: selectedTab
  });
@@ -434,10 +434,10 @@ class App extends Component<IAppProps, IAppState> {
  height: ''
  }}
  >
- <Sidebar currentTab = { this.state.sidebarTabSelection }
- setSidebarTabSelection = { this.setSidebarTabSelection } showSidebar={showSidebar}
+ <Sidebar currentTab={this.state.sidebarTabSelection}
+ setSidebarTabSelection={this.setSidebarTabSelection} showSidebar={showSidebar}
  toggleSidebar={this.toggleSidebar}
- mobileScreen={mobileScreen}/>
+ mobileScreen={mobileScreen} />
  </Resizable>
  )}
  {graphExplorerMode === Mode.TryIt &&
@@ -455,17 +455,17 @@ class App extends Component<IAppProps, IAppState> {
  height: ''
  }}
  style={!sidebarProperties.showSidebar && !mobileScreen ? {
- marginLeft: '8px', display:'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+ marginLeft: '8px', display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
  } : {
- display:'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+ display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
  }}
  >
- <div style={{ marginBottom: 2}} >
+ <div style={{ marginBottom: 2 }} >
  <QueryRunner onSelectVerb={this.handleSelectVerb} />
  </div>
 
  <div style={{
- display:'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+ display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
  }}>
  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
  <StatusMessages />

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

@@ -30,7 +30,7 @@ const QueryResponse = () => {
  }, [dimensions]);
 
  const flexQueryElement: CSSProperties = {
- display:'flex',
+ display: 'flex',
  flexDirection: 'column',
  alignItems: 'stretch',
  flex: 1,
@@ -47,7 +47,7 @@ const QueryResponse = () => {
  return;
  }
  onPivotItemClick(sampleQuery, pivotItem);
- if(pivotItem.props.itemKey !== 'expand-response') {
+ if (pivotItem.props.itemKey !== 'expand-response') {
  setCurrentTab(pivotItem.props.itemKey!);
  }
  toggleModal(pivotItem);
@@ -60,15 +60,15 @@ const QueryResponse = () => {
  }
  };
 
- const onModalPivotItemClicked = (pivotItem? : PivotItem) => {
- if(!pivotItem){ return ;}
+ const onModalPivotItemClicked = (pivotItem?: PivotItem) => {
+ if (!pivotItem) { return; }
  setCurrentTab(pivotItem.props.itemKey!);
  onPivotItemClick(sampleQuery, pivotItem);
  };
 
  const onScroll = () => {
  const queryResponseElements = document.getElementsByClassName('query-response');
- if(queryResponseElements && queryResponseElements.length > 0){
+ if (queryResponseElements && queryResponseElements.length > 0) {
  queryResponseElements[0].scrollTop = 0;
  }
  }
@@ -95,15 +95,13 @@ const QueryResponse = () => {
  minHeight: 350,
  height: '100%',
  flex: 1
- }}
- onScroll={onScroll}>
-
+ }} onScroll={onScroll}>
  <Pivot overflowBehavior='menu'
  overflowAriaLabel={translateMessage('More items')}
  onLinkClick={handlePivotItemClick}
  className={'pivot-response'}
  selectedKey={currentTab}
- styles={{text: {fontSize: FontSizes.size14}}}
+ styles={{ text: { fontSize: FontSizes.size14 } }}
  >
  {GetPivotItems()}
  <PivotItem
@@ -123,7 +121,7 @@ const QueryResponse = () => {
  <Modal
  isOpen={showModal}
  onDismiss={toggleExpandResponse}
- styles={ modalStyles }
+ styles={modalStyles}
  >
  <IconButton
  styles={{

src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx

@@ -1,6 +1,8 @@
 import * as AdaptiveCardsAPI from 'adaptivecards';
-import { FontSizes, getTheme, IStyle, ITheme, Label, Link,
- MessageBar, MessageBarType, Pivot, PivotItem, styled } from '@fluentui/react';
+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';
 import { connect } from 'react-redux';
@@ -57,7 +59,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
  if (JSON.stringify(this.props.body) !== JSON.stringify(nextProps.body)) {
  return true; // body has changed so card will too
  }
- if (JSON.stringify(nextProps.card.data) === JSON.stringify(this.props.card.data) ) {
+ if (JSON.stringify(nextProps.card.data) === JSON.stringify(this.props.card.data)) {
  return false; // card still the same no need to re-render
  }
  return true;
@@ -84,7 +86,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
  if (body && !pending) {
  if (!data || (queryStatus && !queryStatus.ok)) {
  return (
- <Label styles={{root: this.textStyle}}>
+ <Label styles={{ root: this.textStyle }}>
  <FormattedMessage id='The Adaptive Card for this response is not available' />
  &nbsp;
  <Link
@@ -102,13 +104,14 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
  try {
  this.adaptiveCard!.parse(data.card);
  const renderedCard = this.adaptiveCard!.render();
- const handleCopy = async () =>{ trackedGenericCopy(JSON.stringify(data.template, null, 4),
- componentNames.JSON_SCHEMA_COPY_BUTTON, sampleQuery);
+ const handleCopy = async () => {
+ trackedGenericCopy(JSON.stringify(data.template, null, 4),
+ componentNames.JSON_SCHEMA_COPY_BUTTON, sampleQuery);
  }
  return (
  <Pivot className='pivot-response'
  onLinkClick={(pivotItem) => onPivotItemClick(sampleQuery, pivotItem)}
- styles={{text: {fontSize: FontSizes.size14}}}>
+ styles={{ text: { fontSize: FontSizes.size14 } }}>
  <PivotItem
  itemKey='card'
  ariaLabel={translateMessage('card')}
@@ -121,10 +124,10 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
  <div id={'card-tab'}
  ref={(n) => {
  if (n && !n.firstChild) {
- n.appendChild(renderedCard as HTMLElement);
+ n.appendChild(renderedCard as HTMLElement as HTMLElement);
  } else {
  if (n && n.firstChild) {
- n.replaceChild(renderedCard as HTMLElement, n.firstChild);
+ n.replaceChild(renderedCard as HTMLElement as HTMLElement, n.firstChild);
  }
  }
  }}
@@ -171,7 +174,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
  </PivotItem>
  </Pivot>
  );
- } catch (err : any) {
+ } catch (err: any) {
  return <div style={{ color: 'red' }}>{err.message}</div>;
  }
  }

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx

@@ -3,20 +3,14 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import {
- getTheme,
- IStyle,
- ITheme,
- Label,
- Link,
- MessageBar,
- MessageBarType,
- styled
+ getTheme, IStyle, ITheme, Label, Link,
+ MessageBar, MessageBarType, styled
 } from '@fluentui/react';
-import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { componentNames, telemetry } from '../../../../telemetry';
-import { queryResponseStyles } from '../queryResponse.styles';
 import { IRootState } from '../../../../types/root';
+import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { translateMessage } from '../../../utils/translate-messages';
+import { queryResponseStyles } from '../queryResponse.styles';
 
 class GraphToolkit extends Component<any> {
  constructor(props: any) {
@@ -51,7 +45,7 @@ class GraphToolkit extends Component<any> {
  }
 
  return (
- <Label styles={{root: this.textStyle}}>
+ <Label styles={{ root: this.textStyle }}>
  <FormattedMessage id='We did not find a Graph toolkit for this query' />
  &nbsp;
  <Link

src/app/views/query-response/pivot-items/pivot-items.tsx

@@ -88,7 +88,7 @@ export const GetPivotItems = () => {
  'aria-controls': 'response-headers-tab'
  }}
  >
- <div id={'response-headers-tab'}><ResponseHeaders/></div>
+ <div id={'response-headers-tab'}><ResponseHeaders /></div>
  </PivotItem>
  ];
  if (mode === Mode.Complete) {

src/app/views/query-response/snippets/Snippets.tsx

@@ -1,15 +1,14 @@
 import { FontSizes, Pivot, PivotItem } from '@fluentui/react';
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
 
 import { componentNames, telemetry } from '../../../../telemetry';
 import { IRootState } from '../../../../types/root';
 import { setSnippetTabSuccess } from '../../../services/actions/snippet-action-creator';
 import { renderSnippets } from './snippets-helper';
-
 function GetSnippets() {
  const dispatch = useDispatch();
- const { snippets } =  useSelector((state: IRootState) => state);
+ const { snippets } = useSelector((state: IRootState) => state);
  const supportedLanguages = {
  'CSharp': {
  sdkDownloadLink: 'https://aka.ms/csharpsdk',
@@ -44,7 +43,7 @@ function GetSnippets() {
  className={'pivot-response'}
  selectedKey={snippets.snippetTab}
  onLinkClick={handlePivotItemClick}
- styles={{text: {fontSize: FontSizes.size14}}}
+ styles={{ text: { fontSize: FontSizes.size14 } }}
  >
  {renderSnippets(supportedLanguages)}
  </Pivot>;

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

@@ -50,7 +50,7 @@ const QueryInput = (props: IQueryInputProps) => {
  dispatch(setSampleQuery(updatedQuery));
  };
 
- const getChangedQueryContent = (newUrl: string) : IQuery => {
+ const getChangedQueryContent = (newUrl: string): IQuery => {
 
  const query = { ...sampleQuery };
  const { queryVersion: newQueryVersion } = parseSampleUrl(newUrl);

src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx

@@ -190,7 +190,10 @@ const AutoComplete = (props: IAutoCompleteProps) => {
  setSuggestions(filtered);
  setShouldShowSuggestions(true);
  }
+ } else {
+ setShouldShowSuggestions(false);
  }
+
  }
 
  const trackSuggestionSelectionEvent = (suggestion: string) => {

src/app/views/query-runner/query-input/auto-complete/auto-complete.util.ts

@@ -63,4 +63,4 @@ export {
  cleanUpSelectedSuggestion,
  getLastCharacterOf,
  getSearchText
-}
+}

src/app/views/query-runner/request/Request.tsx

@@ -179,7 +179,7 @@ export class Request extends Component<IRequestComponent, any> {
  onLinkClick={this.handlePivotItemClick}
  className='pivot-request'
  selectedKey={pivot}
- styles={{text: {fontSize: FontSizes.size14}}}
+ styles={{ text: { fontSize: FontSizes.size14 } }}
  >
  {requestPivotItems}
  </Pivot>