Fix: Autocomplete validation (#2811)

src/app/services/context/validation-context/ValidationContext.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+interface ValidationContext {
+ isValid: boolean;
+ validate: (queryUrl: string) => void;
+ query: string;
+ error: string;
+}
+
+export const ValidationContext = createContext<ValidationContext>(
+ {} as ValidationContext
+);

src/app/services/context/validation-context/ValidationProvider.tsx

@@ -0,0 +1,66 @@
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+
+import { ValidationService } from '../../../../modules/validation/validation-service';
+import { useAppSelector } from '../../../../store';
+import { IResource } from '../../../../types/resources';
+import { ValidationError } from '../../../utils/error-utils/ValidationError';
+import { getResourcesSupportedByVersion } from '../../../utils/resources/resources-filter';
+import { parseSampleUrl } from '../../../utils/sample-url-generation';
+import { GRAPH_API_VERSIONS } from '../../graph-constants';
+import { ValidationContext } from './ValidationContext';
+
+interface ValidationProviderProps {
+ children: ReactNode;
+}
+
+export const ValidationProvider = ({ children }: ValidationProviderProps) => {
+ const { resources } = useAppSelector((state) => state);
+ const base = getResourcesSupportedByVersion(resources.data.children, GRAPH_API_VERSIONS[0]);
+
+ const [isValid, setIsValid] = useState<boolean>(false);
+ const [query, setQuery] = useState<string>('');
+ const [validationError, setValidationError] = useState<string>('');
+
+ const [versionedResources, setVersionedResources] =
+ useState<IResource[]>(resources.data.children.length > 0 ? base : []);
+ const [version, setVersion] = useState<string>(GRAPH_API_VERSIONS[0]);
+
+ const { queryVersion } = parseSampleUrl(query);
+
+ useEffect(() => {
+ if (resources.data.children.length > 0) {
+ setVersionedResources(getResourcesSupportedByVersion(resources.data.children, GRAPH_API_VERSIONS[0]));
+ }
+ }, [resources])
+
+ useEffect(() => {
+ if (version !== queryVersion && GRAPH_API_VERSIONS.includes(queryVersion) && resources.data.children.length > 0) {
+ setVersionedResources(getResourcesSupportedByVersion(resources.data.children, queryVersion));
+ setVersion(queryVersion);
+ }
+ }, [query]);
+
+ const validate = (queryToValidate: string) => {
+ setQuery(queryToValidate);
+ try {
+ ValidationService.validate(queryToValidate, versionedResources);
+ setIsValid(true);
+ setValidationError('');
+ } catch (error: unknown) {
+ const theError = error as ValidationError;
+ setValidationError(theError.message);
+ setIsValid(theError.type === 'warning');
+ }
+ };
+
+ const contextValue = useMemo(() => {
+ return { isValid, validate, query, error: validationError };
+ }, [isValid, validate, query, validationError]);
+
+ return (
+ <ValidationContext.Provider value={contextValue}>
+ {children}
+ </ValidationContext.Provider>
+ );
+
+};

src/app/utils/error-utils/ValidationError.ts

@@ -0,0 +1,14 @@
+type ErrorType = 'warning' | 'error';
+
+class ValidationError extends Error {
+ type: ErrorType;
+
+ constructor(message: string, type: ErrorType, name: string = 'ValidationError') {
+ super(message);
+ this.name = name;
+ this.type = type;
+ this.message = message;
+ }
+}
+
+export { ValidationError };

src/app/utils/sample-url-generation.ts

@@ -89,3 +89,8 @@ export function hasPlaceHolders(url: string): boolean {
  return placeHolderChars.length > 1 && placeHolderChars.every((char) => url.includes(char));
 }
 
+export function isValidHostname(hostname: string): boolean {
+ const regex = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)?graph\.microsoft\.com$/;
+ return regex.test(hostname);
+}
+

src/app/views/App.tsx

@@ -39,6 +39,7 @@ import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
 import { Sidebar } from './sidebar/Sidebar';
+import { ValidationProvider } from '../services/context/validation-context/ValidationProvider';
 export interface IAppProps {
  theme?: ITheme;
  styles?: object;
@@ -465,18 +466,19 @@ class App extends Component<IAppProps, IAppState> {
  display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
  }}
  >
- <div style={{ marginBottom: 2 }} >
- <QueryRunner onSelectVerb={this.handleSelectVerb} />
- </div>
-
- <div style={{
- display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
- }}>
- <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
- <StatusMessages />
+ <ValidationProvider>
+ <div style={{ marginBottom: 2 }} >
+ <QueryRunner onSelectVerb={this.handleSelectVerb} />
+ </div>
+ <div style={{
+ display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1
+ }}>
+ <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
+ <StatusMessages />
+ </div>
+ <QueryResponse verb={this.state.selectedVerb} />
  </div>
- <QueryResponse verb={this.state.selectedVerb} />
- </div>
+ </ValidationProvider>
  </Resizable>
  )}
  </div>

src/app/views/query-response/snippets/Snippets.tsx

@@ -1,13 +1,19 @@
-import { FontSizes, Pivot, PivotItem } from '@fluentui/react';
+import { FontSizes, Label, Pivot, PivotItem } from '@fluentui/react';
 import { useDispatch } from 'react-redux';
+import { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { AppDispatch, useAppSelector } from '../../../../store';
 import { componentNames, telemetry } from '../../../../telemetry';
 import { setSnippetTabSuccess } from '../../../services/actions/snippet-action-creator';
-import { renderSnippets } from './snippets-helper';
+import { ValidationContext } from '../../../services/context/validation-context/ValidationContext';
 import { translateMessage } from '../../../utils/translate-messages';
+import { renderSnippets } from './snippets-helper';
+
 function GetSnippets() {
  const dispatch: AppDispatch = useDispatch();
+ const validation = useContext(ValidationContext);
+
  const { snippets, sampleQuery } = useAppSelector((state) => state);
  const supportedLanguages = {
  'CSharp': {
@@ -52,7 +58,7 @@ function GetSnippets() {
  dispatch(setSnippetTabSuccess(pivotItem.props.itemKey!));
  }
 
- return <Pivot
+ return validation.isValid ? <Pivot
  className={'unstyled-pivot'}
  selectedKey={snippets.snippetTab}
  onLinkClick={handlePivotItemClick}
@@ -61,8 +67,11 @@ function GetSnippets() {
  overflowAriaLabel={translateMessage('More items')}
  >
  {renderSnippets(supportedLanguages)}
- </Pivot>;
-}
+ </Pivot> : <Label style={{ marginLeft: '12px' }}>
+ <FormattedMessage id={'Invalid URL'} />!
+ </Label>
+};
+
 const Snippets = telemetry.trackReactComponent(
  GetSnippets,
  componentNames.CODE_SNIPPETS_TAB

src/app/views/query-runner/query-input/QueryInput.styles.ts

@@ -1,7 +1,7 @@
 import { ITheme } from '@fluentui/react';
 
 export const queryInputStyles = (theme: ITheme) => {
- const controlWidth = '96.5%';
+ const controlWidth = '94%';
  return {
  autoComplete: {
  input: {

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

@@ -1,10 +1,12 @@
 import { Dropdown, IDropdownOption, IStackTokens, Stack } from '@fluentui/react';
+import { useContext } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { AppDispatch, useAppSelector } from '../../../../store';
 import { IQuery, IQueryInputProps, httpMethods } from '../../../../types/query-runner';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
+import { ValidationContext } from '../../../services/context/validation-context/ValidationContext';
 import { GRAPH_API_VERSIONS } from '../../../services/graph-constants';
 import { getStyleFor } from '../../../utils/http-methods.utils';
 import { parseSampleUrl } from '../../../utils/sample-url-generation';
@@ -23,6 +25,7 @@ const QueryInput = (props: IQueryInputProps) => {
  } = props;
 
  const dispatch: AppDispatch = useDispatch();
+ const validation = useContext(ValidationContext);
 
  const urlVersions: IDropdownOption[] = [];
  GRAPH_API_VERSIONS.forEach(version => {
@@ -69,7 +72,7 @@ const QueryInput = (props: IQueryInputProps) => {
  if (queryUrl) {
  query = getChangedQueryContent(queryUrl);
  }
- if (!query.sampleUrl || query.sampleUrl.indexOf('graph.microsoft.com') === -1) {
+ if (!validation.isValid) {
  return;
  }
  handleOnRunQuery(query);
@@ -111,7 +114,7 @@ const QueryInput = (props: IQueryInputProps) => {
  <SubmitButton
  className='run-query-button'
  text={translateMessage('Run Query')}
- disabled={showError || !sampleQuery.sampleUrl}
+ disabled={showError || !sampleQuery.sampleUrl || !validation.isValid}
  role='button'
  handleOnClick={() => runQuery()}
  submitting={submitting}

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

@@ -1,8 +1,70 @@
-import { ITheme } from '@fluentui/react';
+import { IStyle, ITheme } from '@fluentui/react';
 
 export const autoCompleteStyles = (theme: ITheme) => {
  const controlWidth = '95.5%';
 
+ const suggestions: IStyle = {
+ maxHeight: '250px',
+ overflow: 'auto',
+ paddingLeft: 0,
+ position: 'absolute',
+ backgroundColor: theme.palette.neutralLighter,
+ minWidth: '40%',
+ maxWidth: '50%',
+ zIndex: 1,
+ cursor: 'pointer',
+ color: theme.palette.black
+ };
+ const suggestionOption: IStyle = {
+ display: 'block',
+ selectors: {
+ ':hover': {
+ background: theme.palette.neutralLight
+ }
+ },
+ cursor: 'pointer',
+ backgroundColor: theme.palette.white,
+ boxShadow: 'none',
+ margin: '0px 0px 0px 0px',
+ padding: '10px 32px 12px 10px',
+ boxSizing: 'border-box',
+ height: '32px',
+ lineHeight: '30px',
+ position: 'relative',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+ borderColor: theme.palette.neutralLight,
+ overflow: 'hidden'
+ };
+ const suggestionActive: IStyle = {
+ display: 'block',
+ cursor: 'pointer',
+ boxShadow: 'none',
+ margin: '0px 0px 0px 0px',
+ padding: '10px 32px 12px 10px',
+ boxSizing: 'border-box',
+ height: '32px',
+ lineHeight: '30px',
+ position: 'relative',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+ overflow: 'hidden',
+ wordWrap: 'normal',
+ backgroundColor: theme.palette.neutralLight
+ };
+ const suggestionTitle: IStyle = {
+ display: 'flex',
+ height: '100%',
+ flexWrap: 'nowrap',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ fontWeight: 400
+ };
+
  return {
  input: {
  minWidth: controlWidth,
@@ -12,66 +74,9 @@ export const autoCompleteStyles = (theme: ITheme) => {
  color: theme.palette.black,
  padding: 10
  },
- suggestions: {
- maxHeight: '250px',
- overflow: 'auto',
- paddingLeft: 0,
- position: 'absolute',
- backgroundColor: theme.palette.neutralLighter,
- minWidth: '40%',
- maxWidth: '50%',
- zIndex: 1,
- cursor: 'pointer',
- color: theme.palette.black
- },
- suggestionOption: {
- display: 'block',
- selectors: {
- ':hover': {
- background: theme.palette.neutralLight
- }
- },
- cursor: 'pointer',
- backgroundColor: theme.palette.white,
- boxShadow: 'none',
- margin: '0px 0px 0px 0px',
- padding: '10px 32px 12px 10px',
- boxSizing: 'border-box',
- height: '32px',
- lineHeight: '30px',
- position: 'relative',
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- borderWidth: '1px',
- borderStyle: 'solid',
- borderColor: theme.palette.neutralLight,
- overflow: 'hidden'
- },
- suggestionActive: {
- display: 'block',
- cursor: 'pointer',
- boxShadow: 'none',
- margin: '0px 0px 0px 0px',
- padding: '10px 32px 12px 10px',
- boxSizing: 'border-box',
- height: '32px',
- lineHeight: '30px',
- position: 'relative',
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- borderWidth: '1px',
- borderStyle: 'solid',
- overflow: 'hidden',
- wordWrap: 'normal',
- backgroundColor: theme.palette.neutralLight
- },
- suggestionTitle: {
- display: 'flex',
- height: '100%',
- flexWrap: 'nowrap',
- justifyContent: 'flex-start',
- alignItems: 'center',
- fontWeight: 400
- }
+ suggestions,
+ suggestionOption,
+ suggestionActive,
+ suggestionTitle
  };
 };