Fix: run query over sanitization (#1925)

src/app/views/main-header/FeedbackButton.tsx

@@ -7,11 +7,14 @@ import { IRootState } from '../../../types/root';
 import { ACCOUNT_TYPE } from '../../services/graph-constants';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
 
-export const FeedbackButton = () => {
+interface IFeedback {
+  feedbackRef: any;
+  onSetFocus: Function
+}
+export const FeedbackButton = (props: IFeedback) => {
   const [enableSurvey, setEnableSurvey] = useState(false);
   const { profile } = useSelector( (state: IRootState) => state );
   const currentTheme = getTheme();
-
   const feedbackIcon : IIconProps = {
     iconName : 'Feedback'
   }
@@ -67,6 +70,7 @@ export const FeedbackButton = () => {
             styles={feedbackIconStyles}
             role={'button'}
             disabled={enableSurvey}
+            componentRef = {props.feedbackRef}
           />
         </TooltipHost>
 

src/app/views/main-header/MainHeader.tsx

@@ -3,6 +3,7 @@ import {
   FontIcon,
   getId,
   getTheme,
+  IButton,
   IconButton,
   IStackTokens,
   Label,
@@ -49,6 +50,11 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
     feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles,
     tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen);
 
+  const feedbackRef = React.createRef<IButton>();
+  const onSetFocus = () => {
+    feedbackRef.current!.focus();
+  }
+
   return (
     <Stack tokens={sectionStackTokens}>
       <Stack
@@ -113,7 +119,8 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
           }
           <span style={ moreInformationStyles }> <Settings /> </span>
           <span style={ moreInformationStyles }> <Help /> </span>
-          <span style={ feedbackIconAdjustmentStyles }> <FeedbackButton /> </span>
+          <span style={ feedbackIconAdjustmentStyles }> <FeedbackButton onSetFocus={onSetFocus}
+            feedbackRef={feedbackRef}/> </span>
           <Authentication />
         </Stack>
       </Stack>

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

@@ -2,7 +2,7 @@ import { Dropdown, IDropdownOption } from '@fluentui/react';
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { httpMethods, IQueryInputProps } from '../../../../types/query-runner';
+import { httpMethods, IQuery, IQueryInputProps } from '../../../../types/query-runner';
 
 import { IRootState } from '../../../../types/root';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
@@ -49,7 +49,7 @@ const QueryInput = (props: IQueryInputProps) => {
     dispatch(setSampleQuery(updatedQuery));
   };
 
-  const getChangedQueryContent = (newUrl: string) => {
+  const getChangedQueryContent = (newUrl: string) : IQuery => {
 
     const query = { ...sampleQuery };
     const { queryVersion: newQueryVersion } = parseSampleUrl(newUrl);
@@ -58,7 +58,6 @@ const QueryInput = (props: IQueryInputProps) => {
       query.selectedVersion = newQueryVersion;
       query.sampleUrl = newUrl;
     }
-
     return query;
   }
 

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

@@ -149,7 +149,7 @@ const AutoComplete = (props: IAutoCompleteProps) => {
 
 
   const requestForAutocompleteOptions = (url: string, context: SignContext) => {
-    const signature = sanitizeQueryUrl(url);
+    const signature = url;//sanitizeQueryUrl(url);
     const { requestUrl, queryVersion } = parseSampleUrl(signature);
     if (!GRAPH_API_VERSIONS.includes(queryVersion.toLowerCase())) {
       return;

src/app/views/query-runner/query-input/share-query/ShareQuery.tsx

@@ -2,7 +2,7 @@ import {
   DefaultButton, Dialog, DialogFooter, DialogType, DirectionalHint, FontSizes,
   IconButton, IIconProps, TooltipHost
 } from '@fluentui/react';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { componentNames, eventTypes, telemetry } from '../../../../../telemetry';
@@ -18,13 +18,11 @@ import { shareQueryStyles } from './ShareQuery.styles';
 export const ShareQuery = () => {
   const { sampleQuery } = useSelector((state: IRootState) => state);
   const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
-  const [shareLink, setShareLink] = useState(() => createShareLink(sampleQuery));
 
-  useEffect(() => {
-    const sanitizedQueryUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);
-    sampleQuery.sampleUrl = sanitizedQueryUrl;
-    setShareLink(createShareLink(sampleQuery));
-  }, [sampleQuery]);
+  const query = { ...sampleQuery };
+  const sanitizedQueryUrl = sanitizeQueryUrl(query.sampleUrl);
+  query.sampleUrl = sanitizedQueryUrl;
+  const shareLink = createShareLink(query);
 
   const toggleShareQueryDialogState = () => {
     setShareQuaryDialogStatus(prevState => !prevState);
@@ -36,11 +34,10 @@ export const ShareQuery = () => {
   }
 
   const trackCopyEvent = () => {
-    const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);
     telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT,
       {
         ComponentName: componentNames.SHARE_QUERY_COPY_BUTTON,
-        QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedUrl}`
+        QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedQueryUrl}`
       });
   }