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

@@ -13,6 +13,8 @@ import { translateMessage } from '../../../utils/translate-messages';
 import SubmitButton from '../../../views/common/submit-button/SubmitButton';
 import { queryRunnerStyles } from '../QueryRunner.styles';
 import { AutoComplete } from './auto-complete';
+import { ShareQuery } from './share-query';
+
 
 const QueryInput = (props: IQueryInputProps) => {
   const {
@@ -74,43 +76,49 @@ const QueryInput = (props: IQueryInputProps) => {
   };
 
   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>
-      <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}
-        />
-      </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}
-        />
+    <>
+      <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>
+        <div className='col-lg-2 col-sm-10 col-xs-10'>
+          <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 col-sm-2 col-xs-2'>
+          <ShareQuery/>
+        </div>
       </div>
-    </div>)
+    </>
+  )
 }
 
 // @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;
 };

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

@@ -86,36 +86,43 @@ const SuffixRenderer = () => {
   const hintsAvailable = hints.length > 0;
   const infoIcon: IIconProps = {iconName: 'Info'};
 
-  if (hintsAvailable) {
-    return (
-      <>
+
+  return (
+    <>
+      <TooltipHost
+        content={translateMessage('More info')}
+        id={getId()}
+        calloutProps={calloutProps}
+        styles={hostStyles}
+      >
         <IconButton
           iconProps={infoIcon}
           className={styles.iconButton}
           onClick={toggleCallout}
           id={buttonId}
           ariaLabel={translateMessage('More Info')}
+          disabled={!hintsAvailable}
         />
-        {isCalloutVisible && (
-          <Callout
-            className={styles.callout}
-            ariaLabelledBy={labelId}
-            ariaDescribedBy={descriptionId}
-            role='alertdialog'
-            gapSpace={0}
-            target={`#${buttonId}`}
-            onDismiss={toggleCallout}
-            setInitialFocus
-          >
-            <Text block variant='xLarge' className={styles.title} id={labelId}>
+      </TooltipHost>
+      {isCalloutVisible && (
+        <Callout
+          className={styles.callout}
+          ariaLabelledBy={labelId}
+          ariaDescribedBy={descriptionId}
+          role='alertdialog'
+          gapSpace={0}
+          target={`#${buttonId}`}
+          onDismiss={toggleCallout}
+          setInitialFocus
+        >
+          <Text block variant='xLarge' className={styles.title} id={labelId}>
               /{requestUrl}
-            </Text>
-            <HintList hints={hints} />
-          </Callout>
-        )}
-      </>);
-  }
-  return null;
+          </Text>
+          <HintList hints={hints} />
+        </Callout>
+      )}
+    </>
+  );
 }
 
 export default SuffixRenderer;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ShareQuery } from './ShareQuery';
+
+afterEach(cleanup);
+const renderShareQuery = () => {
+  return render (<ShareQuery />);
+}
+
+jest.mock('react-redux', () => {
+  return {
+    useSelector: jest.fn(() => {
+      return {
+        sampleQuery: {
+          selectedVerb: 'GET',
+          selectedVersion: 'v1',
+          sampleUrl: 'https://graph.microsoft.com/v1.0/me',
+          sampleHeaders: []
+        }
+      }
+    })
+  }
+})
+
+// eslint-disable-next-line no-console
+console.warn = jest.fn();
+
+describe('Tests the share button', () => {
+  it('Tests the share button rendering', () =>{
+    const { getByText } = renderShareQuery();
+    userEvent.click(screen.getByRole('button'));
+    expect(getByText(/Share this link to let people try your/)).toBeDefined();
+    expect(getByText(/Share Query/)).toBeDefined();
+    expect(getByText(/Copy/)).toBeDefined();
+    expect(getByText(/developer.microsoft.com/)).toBeDefined();
+  })
+})

src/app/views/query-runner/query-input/share-query/ShareQuery.styles.ts

@@ -0,0 +1,11 @@
+export const shareQueryStyles = () => {
+  return {
+    iconButton: {
+      root: {
+        float: 'right',
+        border: '1px solid',
+        width: '100%'
+      }
+    }
+  }
+}