diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx index 9a3b10192..b9adb71ce 100644 --- a/src/app/views/main-header/FeedbackButton.tsx +++ b/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} /> diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx index 2719f9500..f60307146 100644 --- a/src/app/views/main-header/MainHeader.tsx +++ b/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 = (props: Mai feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles, tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen); + const feedbackRef = React.createRef(); + const onSetFocus = () => { + feedbackRef.current!.focus(); + } + return ( = (props: Mai } - + diff --git a/src/app/views/query-runner/query-input/QueryInput.tsx b/src/app/views/query-runner/query-input/QueryInput.tsx index 51fa78824..501fd711e 100644 --- a/src/app/views/query-runner/query-input/QueryInput.tsx +++ b/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; } diff --git a/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx b/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx index f370aae4f..d9a62a929 100644 --- a/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx +++ b/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; diff --git a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx index d2f1fec64..da1864f85 100644 --- a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx +++ b/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}` }); }