Add version select

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

@@ -16,27 +16,41 @@ export class QueryInput extends Component<IQueryInputProps, any> {
       handleOnRunQuery,
       handleOnMethodChange,
       handleOnUrlChange,
+      handleOnVersionChange,
       handleOnBlur,
       httpMethods,
       selectedVerb,
+      selectedVersion,
+      urlVersions,
       sampleUrl,
       submitting,
-      mode,
+      mode
     } = this.props;
 
     return (
       <div className='row'>
-        <div className='col-sm-3'>
+        <div className='col-sm-1' style={{ paddingRight: 0 }}>
           <Dropdown
             ariaLabel='Query sample option'
             role='listbox'
             selectedKey={selectedVerb}
             options={httpMethods}
             disabled={mode === Mode.TryIt}
+            styles={{ title: { paddingRight: 0 } }}
             onChange={(event, method) => handleOnMethodChange(method)}
           />
         </div>
-        <div className='col-sm-7'>
+
+        <div className='col-sm-1'>
+          <Dropdown
+            ariaLabel='Query sample option'
+            role='listbox'
+            selectedKey={selectedVersion || 'v1.0'}
+            options={urlVersions}
+            onChange={(event, method) => handleOnVersionChange(method)}
+          />
+        </div>
+        <div className='col-sm-8' style={{ paddingRight: 0, paddingLeft: 0 }}>
           <TextField
             ariaLabel='Query Sample Input'
             role='textbox'
@@ -65,7 +79,7 @@ function mapStateToProps(state: any) {
     sampleUrl: state.sampleQuery.sampleUrl,
     selectedVerb: state.sampleQuery.selectedVerb,
     appTheme: state.theme,
-    mode: state.graphExplorerMode,
+    mode: state.graphExplorerMode
   };
 }
 export default connect(

src/app/views/query-runner/QueryRunner.tsx

@@ -18,7 +18,7 @@ import Request from './request/Request';
 export class QueryRunner extends Component<
   IQueryRunnerProps,
   IQueryRunnerState
-  > {
+> {
   constructor(props: IQueryRunnerProps) {
     super(props);
     this.state = {
@@ -29,6 +29,11 @@ export class QueryRunner extends Component<
         { key: 'PATCH', text: 'PATCH' },
         { key: 'DELETE', text: 'DELETE' }
       ],
+      urlVersions: [
+        { key: 'v1.0', text: 'v1.0' },
+        { key: 'v2.0', text: 'v2.0' }
+      ],
+      selectedVersion: '',
       url: ''
     };
   }
@@ -85,11 +90,27 @@ export class QueryRunner extends Component<
     }
   };
 
-  public render() {
-    const { httpMethods } = this.state;
-    const { graphExplorerMode, isLoadingData } = this.props;
+  private handleOnVersionChange = (option?: IDropdownOption) => {
+    const { sampleQuery } = this.props;
+    if (option !== undefined) {
+      this.setState({
+        selectedVersion: option.text
+      });
+      if (this.props.actions !== undefined) {
+        this.props.actions.setSampleQuery({
+          ...sampleQuery,
+          sampleUrl: sampleQuery.sampleUrl.replace(
+            /v[0-9]+\.[0-9]+/g,
+            option.text
+          )
+        });
+      }
+    }
+  };
 
-    const displayRequestComponent = (graphExplorerMode === Mode.Complete);
+  public render() {
+    const { httpMethods, urlVersions, selectedVersion } = this.state;
+    const { graphExplorerMode, isLoadingData, sampleQuery } = this.props;
 
     return (
       <div>
@@ -98,20 +119,21 @@ export class QueryRunner extends Component<
             <QueryInput
               handleOnRunQuery={this.handleOnRunQuery}
               handleOnMethodChange={this.handleOnMethodChange}
+              handleOnVersionChange={this.handleOnVersionChange}
               handleOnUrlChange={this.handleOnUrlChange}
               handleOnBlur={this.handleOnBlur}
               httpMethods={httpMethods}
               submitting={isLoadingData}
+              urlVersions={urlVersions}
+              selectedVersion={selectedVersion}
             />
           </div>
         </div>
-        {displayRequestComponent && (
-          <div className='row'>
-            <div className='col-sm-12 col-lg-12'>
-              <Request handleOnEditorChange={this.handleOnEditorChange} />
-            </div>
+        <div className='row'>
+          <div className='col-sm-12 col-lg-12'>
+            <Request handleOnEditorChange={this.handleOnEditorChange} />
           </div>
-        )}
+        </div>
       </div>
     );
   }
@@ -135,4 +157,7 @@ function mapStateToProps(state: any) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(QueryRunner);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(QueryRunner);

src/types/query-runner.ts

@@ -2,21 +2,23 @@ import { ITheme } from '@uifabric/styling';
 import { Mode } from './action';
 
 export interface IQueryRunnerState {
-  httpMethods: Array<{ key: string; text: string; }>;
+  httpMethods: Array<{ key: string; text: string }>;
+  urlVersions: Array<{ key: string; text: string }>;
   sampleBody?: string;
+  selectedVersion: string;
   url: string;
 }
 
 export interface IQuery {
   selectedVerb: string;
   sampleUrl: string;
   sampleBody?: string;
-  sampleHeaders: Array<{ name: string; value: string; }>;
+  sampleHeaders: Array<{ name: string; value: string }>;
 }
 
 export interface IQueryRunnerProps {
   isLoadingData: boolean;
-  headers: Array<{ name: string; value: string; }>;
+  headers: Array<{ name: string; value: string }>;
   onSelectVerb: Function;
   sampleQuery: IQuery;
   graphExplorerMode: Mode;
@@ -34,14 +36,16 @@ export interface IQueryInputProps {
   handleOnRunQuery: Function;
   handleOnMethodChange: Function;
   handleOnUrlChange: Function;
+  handleOnVersionChange: Function;
   handleOnBlur: Function;
   httpMethods: Array<{ key: string; text: string }>;
   selectedVerb: string;
+  selectedVersion: string;
+  urlVersions: Array<{ key: string; text: string }>;
   sampleUrl: string;
   submitting: boolean;
 }
 
-
 export interface IInitMessage {
   /** Message type. */
   type: 'init';
@@ -70,7 +74,7 @@ export interface ISampleQuery {
   humanName: string;
   tip?: string;
   postBody?: string;
-  headers?: Array<{ name: string; value: string; }>;
+  headers?: Array<{ name: string; value: string }>;
 }
 
 export interface ISampleQueriesProps {