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%'
+ }
+ }
+ }
+}