Fix: show template variables (#287)

* substitutes tokens in urls [anonymous experience]

* adds profile to state and reducers

* substitutes token for authenticated user

* autogenerates password in the postbody

package.json

@@ -33,6 +33,7 @@
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
+    "guid-typescript": "^1.0.9",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
     "isomorphic-fetch": "2.2.1",

src/app/services/actions/permissions-action-creator.ts

@@ -1,8 +1,6 @@
 import { IAction } from '../../../types/action';
 import { IRequestOptions } from '../../../types/request';
-
-import { FETCH_SCOPES_ERROR, FETCH_SCOPES_SUCCESS, GET_CONSENT_ERROR } from '../redux-constants';
-import { authenticatedRequest, parseResponse, queryResponse } from './query-action-creator-util';
+import { FETCH_SCOPES_ERROR, FETCH_SCOPES_SUCCESS } from '../redux-constants';
 
 export function fetchScopesSuccess(response: object): IAction {
   return {

src/app/services/actions/profile-action-creators.ts

@@ -1,6 +1,6 @@
 import { IQuery } from '../../../types/query-runner';
-import { PROFILE_REQUEST_ERROR, PROFILE_REQUEST_SUCCESS } from '../redux-constants';
-import { authenticatedRequest, parseResponse } from './query-action-creator-util';
+import { PROFILE_IMAGE_REQUEST_SUCCESS, PROFILE_REQUEST_ERROR, PROFILE_REQUEST_SUCCESS } from '../redux-constants';
+import { authenticatedRequest, isImageResponse, parseResponse } from './query-action-creator-util';
 
 export function profileRequestSuccess(response: object): any {
   return {
@@ -9,6 +9,13 @@ export function profileRequestSuccess(response: object): any {
   };
 }
 
+export function profileImageRequestSuccess(response: object): any {
+  return {
+    type: PROFILE_IMAGE_REQUEST_SUCCESS,
+    response,
+  };
+}
+
 export function profileRequestError(response: object): any {
   return {
     type: PROFILE_REQUEST_ERROR,
@@ -24,12 +31,18 @@ export function getProfileInfo(query: IQuery): Function {
 
       if (response && response.ok) {
         const json = await parseResponse(response, respHeaders);
-        return dispatch(
-          profileRequestSuccess({
-            body: json,
-            headers: respHeaders
-          }),
-        );
+        const contentType = respHeaders['content-type'];
+        const isImageResult = isImageResponse(contentType);
+
+        if (isImageResult) {
+          return dispatch(
+            profileImageRequestSuccess(json),
+          );
+        } else {
+          return dispatch(
+            profileRequestSuccess(json),
+          );
+        }
       }
       return dispatch(profileRequestError({ response }));
     });

src/app/services/reducers/index.ts

@@ -3,6 +3,7 @@ import { adaptiveCard } from './adaptive-cards-reducer';
 import { authToken, consentedScopes } from './auth-reducers';
 import { graphExplorerMode } from './graph-explorer-mode-reducer';
 import { scopes } from './permissions-reducer';
+import { profile } from './profile-reducer';
 import { sampleQuery } from './query-input-reducers';
 import { isLoadingData } from './query-loading-reducers';
 import { graphResponse } from './query-runner-reducers';
@@ -24,6 +25,7 @@ export default combineReducers({
   headersAdded,
   history,
   isLoadingData,
+  profile,
   queryRunnerStatus,
   sampleQuery,
   samples,

src/app/services/reducers/profile-reducer.ts

@@ -0,0 +1,13 @@
+import { IAction } from '../../../types/action';
+import { LOGOUT_SUCCESS, PROFILE_REQUEST_SUCCESS } from '../redux-constants';
+
+export function profile(state = null, action: IAction): any {
+  switch (action.type) {
+    case LOGOUT_SUCCESS:
+      return null;
+    case PROFILE_REQUEST_SUCCESS:
+      return action.response;
+    default:
+      return state;
+  }
+}

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

@@ -2,6 +2,7 @@ import { IAction } from '../../../types/action';
 import {
   FETCH_SCOPES_ERROR,
   GET_CONSENT_ERROR,
+  PROFILE_IMAGE_REQUEST_SUCCESS,
   PROFILE_REQUEST_ERROR,
   PROFILE_REQUEST_SUCCESS,
   QUERY_GRAPH_RUNNING,
@@ -27,6 +28,8 @@ export function isLoadingData(state = {}, action: IAction): any {
       return false;
     case PROFILE_REQUEST_SUCCESS:
       return false;
+    case PROFILE_IMAGE_REQUEST_SUCCESS:
+      return false;
     default:
       return state;
   }

src/app/services/redux-constants.ts

@@ -9,6 +9,7 @@ export const HEADER_REMOVE_SUCCESS = 'HEADER_REMOVE_SUCCESS';
 export const SET_GRAPH_EXPLORER_MODE_SUCCESS = 'SET_GRAPH_EXPLORER_MODE_SUCCESS';
 export const SET_SAMPLE_QUERY_SUCCESS = 'SET_SAMPLE_QUERY_SUCCESS';
 export const PROFILE_REQUEST_SUCCESS = 'PROFILE_REQUEST_SUCCESS';
+export const PROFILE_IMAGE_REQUEST_SUCCESS = 'PROFILE_IMAGE_REQUEST_SUCCESS';
 export const PROFILE_REQUEST_ERROR = 'PROFILE_REQUEST_ERROR';
 export const GET_SNIPPET_SUCCESS = 'GET_SNIPPET_SUCCESS';
 export const REMOVE_HISTORY_ITEM_SUCCESS = 'REMOVE_HISTORY_ITEM_SUCCESS';

src/app/utils/token-helpers.ts

@@ -0,0 +1,63 @@
+import { IQuery } from '../../types/query-runner';
+import { IToken } from '../../types/sidebar';
+import { getTokens } from '../views/sidebar/sample-queries/tokens';
+
+/*
+ * Given a token, go through each of the possible replacement scenarios and find which value to
+ * replace the token with.
+ * Order: Authenticated user values, demo tenant replacament values, default replacement values.
+ */
+export function getTokenSubstituteValue(token: IToken, isAuthenticated: boolean) {
+  const priorityOrder = []; // Desc
+  if (isAuthenticated) {
+    priorityOrder.push(token.authenticatedUserValueFn);
+    priorityOrder.push(token.authenticatedUserValue);
+  } else {
+    priorityOrder.push(token.demoTenantValueFn);
+    priorityOrder.push(token.demoTenantValue);
+  }
+
+  priorityOrder.push(token.defaultValueFn);
+  priorityOrder.push(token.defaultValue);
+
+  for (const tokenVal of priorityOrder) {
+    if (!tokenVal) {
+      continue;
+    }
+    if (typeof tokenVal === 'string') {
+      return tokenVal;
+    } else if (typeof tokenVal === 'function') {
+      return tokenVal();
+    }
+  }
+
+}
+
+/**
+ * Given a query, replace all tokens in the request URL and the POST body with their
+ * values.  When a token is found, use getTokenSubstituteValue() to find the right
+ * value to substitute based on the session.
+ */
+
+export function substituteTokens(query: IQuery, profile: object) {
+  type QueryFields = keyof IQuery;
+  const tokens = getTokens(profile);
+  const authenticated = !!profile;
+  for (const token of tokens) {
+    const queryFieldsToCheck: QueryFields[] = ['sampleBody', 'sampleUrl'];
+
+    for (const queryField of queryFieldsToCheck) {
+      if (!query[queryField]) {
+        continue;
+      }
+
+      if ((query[queryField] as string).indexOf(`{${token.placeholder}}`) !== -1) {
+        const substitutedValue = getTokenSubstituteValue(token, authenticated);
+        if (!substitutedValue) {
+          continue;
+        }
+        query[queryField] = (query[queryField] as string).replace(`{${token.placeholder}}`, substitutedValue);
+      }
+    }
+  }
+}

src/app/views/authentication/profile/Profile.tsx

@@ -37,7 +37,7 @@ export class Profile extends Component<IProfileProps, IProfileState> {
       })
       : null;
 
-    const userInfo = jsonUserInfo.response.body;
+    const userInfo = jsonUserInfo.response;
     if (userInfo) {
       let imageUrl = '';
 
@@ -50,7 +50,7 @@ export class Profile extends Component<IProfileProps, IProfileState> {
           : null;
 
         if (userPicture) {
-          const buffer = await userPicture.response.body.arrayBuffer();
+          const buffer = await userPicture.response.arrayBuffer();
           const blob = new Blob([buffer], { type: 'image/jpeg' });
           imageUrl = URL.createObjectURL(blob);
         }
@@ -153,17 +153,17 @@ export class Profile extends Component<IProfileProps, IProfileState> {
         {!mobileScreen &&
           <Card compact={true} tokens={profileCardTokens}>
             <Card.Item fill={true}>
-            <Persona {...persona} coinSize={60} size={PersonaSize.size40} hidePersonaDetails={true} />
+              <Persona {...persona} coinSize={60} size={PersonaSize.size40} hidePersonaDetails={true} />
             </Card.Item>
-          <Card.Section>
-            <span className={classes.personaText}>
-              {persona.text}
-            </span>
-            <span className={classes.personaSecondaryText}>{persona.secondaryText}</span>
-            <ActionButton ariaLabel='profile' role='button' menuProps={menuProperties}>
-              <FormattedMessage id='More actions' />
-            </ActionButton>
-          </Card.Section>
+            <Card.Section>
+              <span className={classes.personaText}>
+                {persona.text}
+              </span>
+              <span className={classes.personaSecondaryText}>{persona.secondaryText}</span>
+              <ActionButton ariaLabel='profile' role='button' menuProps={menuProperties}>
+                <FormattedMessage id='More actions' />
+              </ActionButton>
+            </Card.Section>
           </Card>
         }
       </div>

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

@@ -14,6 +14,7 @@ import * as queryInputActionCreators from '../../../services/actions/query-input
 import * as samplesActionCreators from '../../../services/actions/samples-action-creators';
 import { GRAPH_URL } from '../../../services/graph-constants';
 import { getStyleFor } from '../../../utils/badge-color';
+import { substituteTokens } from '../../../utils/token-helpers';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
 
@@ -97,7 +98,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
     });
   }
 
-  public getToolTipContent (item: any, queryContent: any) {
+  public getToolTipContent(item: any, queryContent: any) {
     let selectionDisabled = false;
 
     if (!this.props.tokenPresent && item.method !== 'GET') {
@@ -129,7 +130,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
           />;
 
         case 'method':
-        return <TooltipHost
+          return <TooltipHost
             tooltipProps={{ onRenderContent: () => <div style={{ paddingBottom: 3 }}>{toolTipContent}</div> }}
             id={hostId}
             calloutProps={{ gapSpace: 0 }}
@@ -143,7 +144,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
         default:
           return <>
             <TooltipHost
-              tooltipProps={{ onRenderContent: () => <div style={{ paddingBottom: 3 }}>{toolTipContent}</div>}}
+              tooltipProps={{ onRenderContent: () => <div style={{ paddingBottom: 3 }}>{toolTipContent}</div> }}
               id={hostId}
               calloutProps={{ gapSpace: 0 }}
               styles={{ root: { display: 'inline-block' } }}
@@ -173,7 +174,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
             {...props}
             className={classes.queryRow + ' ' + (selectionDisabled ? classes.rowDisabled : '')}
             data-selection-disabled={selectionDisabled}
-            />
+          />
         </div>
       );
     }
@@ -242,7 +243,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
 
     const selection = new Selection({
       onSelectionChanged: () => {
-        const { actions } = this.props;
+        const { actions, profile } = this.props;
         const selectedQuery = selection.getSelection()[0] as any;
         if (!selectedQuery) { return; }
 
@@ -255,6 +256,8 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
           selectedVersion: queryVersion,
         };
 
+        substituteTokens(sampleQuery, profile);
+
         if (actions) {
           if (sampleQuery.selectedVerb === 'GET') {
             sampleQuery.sampleBody = JSON.parse('{}');
@@ -300,6 +303,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
 function mapStateToProps(state: any) {
   return {
     tokenPresent: !!state.authToken,
+    profile: state.profile,
     samples: state.samples
   };
 }