Fix:share button enhancement

src/app/views/App.spec.tsx

@@ -100,7 +100,6 @@ describe('It should render the main GE site', () => {
     getByText('Toolkit component');
     getByText('Adaptive cards');
     getByText('Expand');
-    getByText('Share');
     getByText('Authentication');
     getByText('Sample queries');
     getByText('History');

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

@@ -17,7 +17,6 @@ import { expandResponseArea } from '../../services/actions/response-expanded-act
 import { translateMessage } from '../../utils/translate-messages';
 import { copy } from '../common/copy';
 import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
-import { createShareLink } from '../common/share';
 import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
 import './query-response.scss';
 import { IRootState } from '../../../types/root';
@@ -29,7 +28,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
 
   const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
   const [showModal, setShowModal] = useState(false);
-  const [query, setQuery] = useState('');
+  const [query] = useState('');
   const [responseHeight, setResponseHeight] = useState('610px');
   const { dimensions, sampleQuery } = useSelector((state: IRootState) => state);
 
@@ -72,20 +71,11 @@ const QueryResponse = (props: IQueryResponseProps) => {
     toggleModal(pivotItem);
   };
 
-  const handleShareQuery = () => {
-    const shareableLink = createShareLink(sampleQuery);
-    setQuery(shareableLink);
-    toggleShareQueryDialogState();
-  };
-
   const toggleModal = (event: any) => {
     const { key } = event;
     if (key && key.includes('expand')) {
       toggleExpandResponse();
     }
-    if (key && key.includes('share')) {
-      handleShareQuery();
-    }
   };
 
   const renderItemLink = (link: any) => {
@@ -127,15 +117,6 @@ const QueryResponse = (props: IQueryResponseProps) => {
           <Pivot overflowBehavior="menu" onLinkClick={handlePivotItemClick}
             className={'pivot-response'} >
             {getPivotItems()}
-            <PivotItem
-              headerText='Share'
-              key='share'
-              itemIcon='Share'
-              itemKey='share-query' // To be used to construct component name for telemetry data
-              ariaLabel={translateMessage('Share Query Message')}
-              title={translateMessage('Share Query Message')}
-              onRenderItemLink={renderItemLink}
-            />
             <PivotItem
               headerText='Expand'
               key='expand'

src/app/views/query-runner/QueryRunner.styles.ts

@@ -8,6 +8,13 @@ export const queryRunnerStyles = () => {
       caretDown: {
         color: '#ffffff !important'
       }
+    },
+    iconButton: {
+      root: {
+        float: 'right',
+        border: '1px solid',
+        width: '100%'
+      }
     }
   };
 };

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

@@ -69,14 +69,44 @@ jest.mock('react-redux', () => {
           pending: false,
           token: true
         },
-        isLoadingData: false
+        isLoadingData: false,
+        autoComplete: {
+          data: {},
+          error: null,
+          pending: false
+        },
+        samples: {
+          pending: false,
+          error: null,
+          queries: [
+            {
+              category: 'Sample category',
+              requestUrl: '/me',
+              method: 'GET',
+              humanName: 'Sample name',
+              docLink: 'https://graph.microsoft.com/v1.0/me'
+            }
+          ]
+        },
+        queryRunnerStatus: {
+          messageType: 1,
+          ok: true,
+          status: 200,
+          statusText:''
+        },
+        sidebarProperties: {
+          showSidebar: false,
+          mobileScreen: false
+        }
       })
     })
   }
 })
 
 describe('Renders QueryInput component without crashing', () => {
   it('renders without crashing', () => {
-    renderQueryInput();
+    const { getByText } = renderQueryInput()
+    getByText(/Run query/);
+    expect(renderQueryInput()).toBeDefined();
   });
 })

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

@@ -1,19 +1,26 @@
-import { IDropdownOption, Dropdown } from '@fluentui/react';
-import React from 'react';
+import { IDropdownOption, Dropdown, Dialog, IconButton, DialogType,
+  FontSizes, DialogFooter, DefaultButton, IIconProps, TooltipHost, DirectionalHint } from '@fluentui/react';
+import React, { useEffect, useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
+import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
 import { httpMethods, IQueryInputProps } from '../../../../types/query-runner';
 
 import { IRootState } from '../../../../types/root';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
 import { GRAPH_API_VERSIONS } from '../../../services/graph-constants';
 import { getStyleFor } from '../../../utils/http-methods.utils';
+import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../../utils/sample-url-generation';
 import { translateMessage } from '../../../utils/translate-messages';
 import SubmitButton from '../../../views/common/submit-button/SubmitButton';
+import { copy } from '../../common/copy';
+import { CopyButton } from '../../common/copy/CopyButton';
+import { createShareLink } from '../../common/share';
 import { queryRunnerStyles } from '../QueryRunner.styles';
 import { AutoComplete } from './auto-complete';
 
+
 const QueryInput = (props: IQueryInputProps) => {
   const {
     handleOnRunQuery,
@@ -32,16 +39,41 @@ const QueryInput = (props: IQueryInputProps) => {
   });
 
   const { sampleQuery, authToken,
-    isLoadingData: submitting } = useSelector((state: IRootState) => state);
+    isLoadingData: submitting, sidebarProperties } = useSelector((state: IRootState) => state);
   const authenticated = !!authToken.token;
 
+  const { mobileScreen } = sidebarProperties;
+
+  const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
+  const [shareLink, setShareLink] = useState(() => createShareLink(sampleQuery));
+
+  const toggleShareQueryDialogState = () => {
+    setShareQuaryDialogStatus(prevState => !prevState);
+  };
+
+  useEffect(() => {
+    setShareLink(createShareLink(sampleQuery));
+  }, [sampleQuery]);
+
+  const iconProps : IIconProps = {
+    iconName: 'Share'
+  }
+
   const showError = !authenticated && sampleQuery.selectedVerb !== 'GET';
   const verbSelector: any = queryRunnerStyles().verbSelector;
   verbSelector.title = {
     ...verbSelector.title,
     background: getStyleFor(sampleQuery.selectedVerb)
   };
 
+  const shareButtonStyles = queryRunnerStyles().iconButton;
+
+  const calloutProps = {
+    gapSpace: 0
+  };
+
+  const content = <div style={{padding:'3px'}}>{translateMessage('Share Query')}</div>
+
   const contentChanged = (value: string) => {
     const query = { ...sampleQuery, ...{ sampleUrl: value } };
     changeUrlVersion(value);
@@ -73,44 +105,140 @@ const QueryInput = (props: IQueryInputProps) => {
     }, 500);
   };
 
+  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}`
+      });
+  }
+
   return (
-    <div className='row'>
-      <div className='col-xs-12 col-lg-2'>
-        <Dropdown
-          ariaLabel={translateMessage('HTTP request method option')}
-          selectedKey={sampleQuery.selectedVerb}
-          options={httpMethods}
-          styles={verbSelector}
-          errorMessage={showError ? translateMessage('Sign in to use this method') : undefined}
-          onChange={(event, method) => handleOnMethodChange(method)}
-        />
+    <>
+      <div className='row' >
+        <div className='col-xs-12 col-lg-2'>
+          <Dropdown
+            ariaLabel={translateMessage('HTTP request method option')}
+            selectedKey={sampleQuery.selectedVerb}
+            options={httpMethods}
+            styles={verbSelector}
+            errorMessage={showError ? translateMessage('Sign in to use this method') : undefined}
+            onChange={(event, method) => handleOnMethodChange(method)}
+          />
+        </div>
+        <div className='col-xs-12 col-lg-2'>
+          <Dropdown
+            ariaLabel={translateMessage('Microsoft Graph API Version option')}
+            selectedKey={sampleQuery.selectedVersion || 'v1.0'}
+            options={urlVersions}
+            onChange={(event, method) => handleOnVersionChange(method)}
+          />
+        </div>
+        <div className='col-xs-12 col-lg-5'>
+          <AutoComplete
+            contentChanged={contentChanged}
+            runQuery={runQuery}
+          />
+        </div>
+        {!mobileScreen &&
+        <>
+          <div className='col-lg-2'>
+            <SubmitButton
+              className='run-query-button'
+              text={translateMessage('Run Query')}
+              disabled={showError || !sampleQuery.sampleUrl}
+              role='button'
+              handleOnClick={() => runQuery()}
+              submitting={submitting}
+              allowDisabledFocus={true}
+            />
+          </div>
+          <div className='col-lg-1' style={{flexShrink: 2}}>
+            <TooltipHost
+              content={content}
+              calloutProps={calloutProps}
+              directionalHint={DirectionalHint.leftBottomEdge}
+            >
+              <IconButton
+                onClick={toggleShareQueryDialogState}
+                iconProps={iconProps}
+                styles={shareButtonStyles}
+              />
+            </TooltipHost>
+          </div>
+        </>
+        }
       </div>
-      <div className='col-xs-12 col-lg-2'>
-        <Dropdown
-          ariaLabel={translateMessage('Microsoft Graph API Version option')}
-          selectedKey={sampleQuery.selectedVersion || 'v1.0'}
-          options={urlVersions}
-          onChange={(event, method) => handleOnVersionChange(method)}
-        />
-      </div>
-      <div className='col-xs-12 col-lg-6'>
-        <AutoComplete
-          contentChanged={contentChanged}
-          runQuery={runQuery}
-        />
+      {mobileScreen &&
+      <div style={{display: 'flex'}}>
+        <div style={{flexGrow: 5, flexBasis: '100%'}}>
+          <SubmitButton
+            className='run-query-button'
+            text={translateMessage('Run Query')}
+            disabled={showError || !sampleQuery.sampleUrl}
+            role='button'
+            handleOnClick={() => runQuery()}
+            submitting={submitting}
+            allowDisabledFocus={true}
+          />
+        </div>
+        <div style={{flexGrow: 1, flexShrink: 2}}>
+          <TooltipHost
+            content={content}
+            calloutProps={calloutProps}
+            directionalHint={DirectionalHint.leftBottomEdge}
+          >
+            <IconButton
+              onClick={toggleShareQueryDialogState}
+              iconProps={iconProps}
+              styles={shareButtonStyles}
+            />
+          </TooltipHost>
+        </div>
       </div>
-      <div className='col-xs-12 col-lg-2'>
-        <SubmitButton
-          className='run-query-button'
-          text={translateMessage('Run Query')}
-          disabled={showError || !sampleQuery.sampleUrl}
-          role='button'
-          handleOnClick={() => runQuery()}
-          submitting={submitting}
-          allowDisabledFocus={true}
+      }
+      <Dialog
+        hidden={showShareQueryDialog}
+        onDismiss={toggleShareQueryDialogState}
+        dialogContentProps={{
+          type: DialogType.normal,
+          title: 'Share Query',
+          isMultiline: true,
+          subText: translateMessage('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={shareLink}
+          aria-label={translateMessage('Share Query')}
         />
-      </div>
-    </div>)
+        <DialogFooter>
+          <CopyButton handleOnClick={handleCopy} isIconButton={false} />
+          <DefaultButton
+            text={translateMessage('Close')}
+            onClick={toggleShareQueryDialogState}
+          />
+        </DialogFooter>
+      </Dialog>
+    </>
+  )
 }
 
 // @ts-ignore

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

@@ -5,7 +5,7 @@ import { IHint } from './suffix-util';
 import { styles } from './suffix.styles';
 
 export const HintList = ({ hints }: any) => {
-  const listItems = hints.map((hint: IHint, index: any) => <div key={index}>
+  return hints.map((hint: IHint, index: any) => <div key={index}>
     {hint.description && <Text block variant='medium' id={'description' + index}>
       {hint.description}
     </Text>}
@@ -19,5 +19,4 @@ export const HintList = ({ hints }: any) => {
     <Separator />
   </div>
   );
-  return listItems;
 };