Fix: add version select

src/app/services/actions/query-input-action-creators.ts

@@ -1,10 +1,17 @@
 import { IAction } from '../../../types/action';
 import { IQuery } from '../../../types/query-runner';
-import { SET_SAMPLE_QUERY_SUCCESS } from '../redux-constants';
+import { SELECT_VERSION_SUCCESS, SET_SAMPLE_QUERY_SUCCESS } from '../redux-constants';
 
 export function setSampleQuery(response: IQuery): IAction {
   return {
     type: SET_SAMPLE_QUERY_SUCCESS,
     response,
   };
 }
+
+export function selectQueryVersion(response: IQuery): IAction {
+  return {
+    type: SELECT_VERSION_SUCCESS,
+    response,
+  };
+}

src/app/services/reducers/index.ts

@@ -2,7 +2,7 @@ import { combineReducers } from 'redux';
 import { adaptiveCard } from './adaptive-cards-reducer';
 import { authToken } from './auth-reducers';
 import { graphExplorerMode } from './graph-explorer-mode-reducer';
-import { sampleQuery } from './query-input-reducers';
+import { sampleQuery, selectedVersion } from './query-input-reducers';
 import { isLoadingData } from './query-loading-reducers';
 import { queryRunnerError } from './query-runner-error';
 import { graphResponse } from './query-runner-reducers';
@@ -23,10 +23,11 @@ export default combineReducers({
   history,
   isLoadingData,
   queryRunnerError,
-  termsOfUse,
   sampleQuery,
   samples,
+  selectedVersion,
   sidebarProperties,
   snippets,
+  termsOfUse,
   theme,
 });

src/app/services/reducers/query-input-reducers.ts

@@ -1,5 +1,5 @@
 import { IAction } from '../../../types/action';
-import { SET_SAMPLE_QUERY_SUCCESS } from '../redux-constants';
+import { SELECT_VERSION_SUCCESS, SET_SAMPLE_QUERY_SUCCESS } from '../redux-constants';
 
 export function sampleQuery(state = {}, action: IAction): any {
   switch (action.type) {
@@ -8,4 +8,13 @@ export function sampleQuery(state = {}, action: IAction): any {
     default:
       return state;
   }
+}
+
+export function selectedVersion(state = {}, action: IAction): any {
+  switch (action.type) {
+    case SELECT_VERSION_SUCCESS:
+      return action.response;
+    default:
+      return state;
+  }
 }

src/app/services/redux-constants.ts

@@ -25,3 +25,4 @@ export const FETCH_ADAPTIVE_CARD_SUCCESS = 'FETCH_ADAPTIVE_CARD_SUCCESS';
 export const FETCH_ADAPTIVE_CARD_PENDING = 'FETCH_ADAPTIVE_CARD_PENDING';
 export const FETCH_ADAPTIVE_CARD_ERROR = 'FETCH_ADAPTIVE_CARD_ERROR';
 export const CLEAR_TERMS_OF_USE = 'CLEAR_TERMS_OF_USE';
+export const SELECT_VERSION_SUCCESS = 'SELECT_VERSION_SUCCESS';

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

@@ -9,34 +9,61 @@ import SubmitButton from '../common/submit-button/SubmitButton';
 export class QueryInput extends Component<IQueryInputProps, any> {
   constructor(props: any) {
     super(props);
+    this.state = {
+      httpMethods: [
+        { key: 'GET', text: 'GET' },
+        { key: 'POST', text: 'POST' },
+        { key: 'PUT', text: 'PUT' },
+        { key: 'PATCH', text: 'PATCH' },
+        { key: 'DELETE', text: 'DELETE' }
+      ],
+      urlVersions: [
+        { key: 'v1.0', text: 'v1.0' },
+        { key: 'beta', text: 'beta' }
+      ],
+    };
   }
 
   public render() {
+    const { httpMethods, urlVersions } = this.state;
+
     const {
       handleOnRunQuery,
       handleOnMethodChange,
       handleOnUrlChange,
+      handleOnVersionChange,
       handleOnBlur,
-      httpMethods,
       selectedVerb,
+      selectedVersion,
       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'
@@ -62,10 +89,11 @@ export class QueryInput extends Component<IQueryInputProps, any> {
 
 function mapStateToProps(state: any) {
   return {
+    mode: state.graphExplorerMode,
     sampleUrl: state.sampleQuery.sampleUrl,
     selectedVerb: state.sampleQuery.selectedVerb,
-    appTheme: state.theme,
-    mode: state.graphExplorerMode,
+    selectedVersion: state.selectedVersion,
+    submitting: state.isLoadingData,
   };
 }
 export default connect(

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

@@ -11,25 +11,20 @@ import {
 import * as queryActionCreators from '../../services/actions/query-action-creators';
 import * as queryInputActionCreators from '../../services/actions/query-input-action-creators';
 import { addRequestHeader } from '../../services/actions/request-headers-action-creators';
+import { GRAPH_URL } from '../../services/graph-constants';
 import './query-runner.scss';
 import QueryInput from './QueryInput';
 import Request from './request/Request';
 
 export class QueryRunner extends Component<
   IQueryRunnerProps,
   IQueryRunnerState
-  > {
+> {
   constructor(props: IQueryRunnerProps) {
     super(props);
     this.state = {
-      httpMethods: [
-        { key: 'GET', text: 'GET' },
-        { key: 'POST', text: 'POST' },
-        { key: 'PUT', text: 'PUT' },
-        { key: 'PATCH', text: 'PATCH' },
-        { key: 'DELETE', text: 'DELETE' }
-      ],
-      url: ''
+      url: '',
+      sampleBody: '',
     };
   }
 
@@ -85,10 +80,23 @@ 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) {
+      const urlObject: URL = new URL(sampleQuery.sampleUrl);
+      const requestUrl = urlObject.pathname.substr(5).replace(/\/$/, '');
+      const sampleUrl = `${GRAPH_URL}/${option.text + requestUrl + decodeURI(urlObject.search)}`;
+
+      this.props.actions!.selectQueryVersion(option.text);
+      this.props.actions!.setSampleQuery({
+        ...sampleQuery,
+        sampleUrl
+      });
+    }
+  };
 
+  public render() {
+    const { graphExplorerMode } = this.props;
     const displayRequestComponent = (graphExplorerMode === Mode.Complete);
 
     return (
@@ -98,10 +106,9 @@ 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}
             />
           </div>
         </div>
@@ -128,11 +135,13 @@ function mapDispatchToProps(dispatch: Dispatch): object {
 
 function mapStateToProps(state: any) {
   return {
-    isLoadingData: state.isLoadingData,
+    graphExplorerMode: state.graphExplorerMode,
     headers: state.headersAdded,
     sampleQuery: state.sampleQuery,
-    graphExplorerMode: state.graphExplorerMode,
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(QueryRunner);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(QueryRunner);

src/app/views/sidebar/history/History.tsx

@@ -233,8 +233,10 @@ export class History extends Component<IHistoryProps, any> {
   private onRunQuery = (query: IHistoryItem) => {
     const { actions } = this.props;
 
+    const requestUrl = query.url.replace(GRAPH_URL, '');
+    const queryVersion = requestUrl.substring(1, 5);
     const sampleQuery: IQuery = {
-      sampleUrl: GRAPH_URL + query.url.replace(GRAPH_URL, ''),
+      sampleUrl: GRAPH_URL + requestUrl,
       selectedVerb: query.method,
       sampleBody: query.body,
       sampleHeaders: query.headers
@@ -244,8 +246,9 @@ export class History extends Component<IHistoryProps, any> {
       if (sampleQuery.selectedVerb === 'GET') {
         sampleQuery.sampleBody = JSON.parse('{}');
       }
-      actions.runQuery(sampleQuery);
+      actions.selectQueryVersion(queryVersion);
       actions.setSampleQuery(sampleQuery);
+      actions.runQuery(sampleQuery);
     }
   }
 
@@ -260,14 +263,17 @@ export class History extends Component<IHistoryProps, any> {
   private onViewQuery = (query: IHistoryItem) => {
     const { actions } = this.props;
 
+    const requestUrl = query.url.replace(GRAPH_URL, '');
+    const queryVersion = requestUrl.substring(1, 5);
     const sampleQuery: IQuery = {
-      sampleUrl: GRAPH_URL + query.url.replace(GRAPH_URL, ''),
+      sampleUrl: GRAPH_URL + requestUrl,
       selectedVerb: query.method,
       sampleBody: query.body,
       sampleHeaders: query.headers
     };
 
     if (actions) {
+      actions.selectQueryVersion(queryVersion);
       actions.setSampleQuery(sampleQuery);
       actions.viewHistoryItem({
         body: query.result,

src/app/views/sidebar/sample-queries/SampleQueries.tsx

@@ -240,6 +240,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
         const selectedQuery = selection.getSelection()[0] as any;
         if (!selectedQuery) { return; }
 
+        const queryVersion = selectedQuery.requestUrl.substring(1, 5);
         const sampleQuery: IQuery = {
           sampleUrl: GRAPH_URL + selectedQuery.requestUrl,
           selectedVerb: selectedQuery.method,
@@ -248,6 +249,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
         };
 
         if (actions) {
+          actions.selectQueryVersion(queryVersion);
           if (sampleQuery.selectedVerb === 'GET') {
             sampleQuery.sampleBody = JSON.parse('{}');
             actions.runQuery(sampleQuery);

src/index.tsx

@@ -55,6 +55,7 @@ const appState = store({
     sampleBody: undefined,
     sampleHeaders: {},
   },
+  selectedVersion: 'v1.0',
 });
 
 msalApplication.acquireTokenSilent({ scopes: DEFAULT_USER_SCOPES.split(' ') }).then((token: any) => {

src/tests/services/actions/query-input-action-creators.spec.tsx

@@ -1,8 +1,8 @@
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
-import { setSampleQuery } from '../../../app/services/actions/query-input-action-creators';
-import { SET_SAMPLE_QUERY_SUCCESS } from '../../../app/services/redux-constants';
+import { selectQueryVersion, setSampleQuery } from '../../../app/services/actions/query-input-action-creators';
+import { SELECT_VERSION_SUCCESS, SET_SAMPLE_QUERY_SUCCESS } from '../../../app/services/redux-constants';
 
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
@@ -33,4 +33,19 @@ describe('actions', () => {
     expect(store.getActions()).toEqual(expectedActions);
   });
 
+  it('creates SELECT_VERSION_SUCCESS when selectQueryVersion is called', () => {
+    const expectedActions = [
+      {
+        type: SELECT_VERSION_SUCCESS,
+        response: 'beta'
+      },
+    ];
+
+    const store = mockStore({ selectedVersion: 'v1.0' });
+
+    // @ts-ignore
+    store.dispatch(selectQueryVersion('beta'));
+    expect(store.getActions()).toEqual(expectedActions);
+  });
+
 });

src/tests/services/reducers/query-input-reducers.spec.tsx

@@ -1,5 +1,5 @@
-import { sampleQuery } from '../../../app/services/reducers/query-input-reducers';
-import { SET_SAMPLE_QUERY_SUCCESS } from '../../../app/services/redux-constants';
+import { sampleQuery, selectedVersion } from '../../../app/services/reducers/query-input-reducers';
+import { SELECT_VERSION_SUCCESS, SET_SAMPLE_QUERY_SUCCESS } from '../../../app/services/redux-constants';
 
 describe('Query INput Reducer', () => {
   it('should return initial state', () => {
@@ -31,4 +31,18 @@ describe('Query INput Reducer', () => {
 
     expect(newState).toEqual(query);
   });
+
+  it('should handle SELECT_VERSION_SUCCESS', () => {
+    const initialState = {};
+
+    const version = 'beta';
+
+    const action = {
+      type: SELECT_VERSION_SUCCESS, response: 'beta'
+    };
+
+    const newState = selectedVersion(initialState, action);
+
+    expect(newState).toEqual(version);
+  });
 });

src/types/history.ts

@@ -22,6 +22,7 @@ export interface IHistoryProps {
     setSampleQuery: Function;
     removeHistoryItem: Function;
     viewHistoryItem: Function;
+    selectQueryVersion: Function;
   };
   theme?: ITheme;
   styles?: object;