Feature: add locale to headers devxapi (#500)

* add accept-language to queries to the devxApi

* remove localisation from sample queries

* add placeholder texts to localisation

* reuse locale code to enable url overriding

* add reference to new translation files

* delete unused translation files

* add try catch to sample queries fetch

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

@@ -1,3 +1,4 @@
+import { geLocale } from '../../../appLocale';
 import { IAction } from '../../../types/action';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
@@ -44,7 +45,9 @@ export function fetchScopes(query?: IQuery): Function {
 
       const headers = {
         'Content-Type': 'application/json',
+        'Accept-Language': geLocale
       };
+
       const options: IRequestOptions = { headers };
 
       dispatch(fetchScopesPending());

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

@@ -1,3 +1,4 @@
+import { geLocale } from '../../../appLocale';
 import { IAction } from '../../../types/action';
 import { IRequestOptions } from '../../../types/request';
 import { SAMPLES_FETCH_ERROR, SAMPLES_FETCH_PENDING, SAMPLES_FETCH_SUCCESS } from '../redux-constants';
@@ -29,24 +30,23 @@ export function fetchSamples(): Function {
 
     const headers = {
       'Content-Type': 'application/json',
+      'Accept-Language': geLocale
     };
 
     const options: IRequestOptions = { headers };
 
     dispatch(fetchSamplesPending());
 
-    return fetch(samplesUrl, options)
-      .then(res => res.json())
-      .then(res => {
-        if (res.error) {
-          throw (res.error);
-        }
-        dispatch(fetchSamplesSuccess(res.sampleQueries));
-        return res.products;
-      })
-      .catch(error => {
-        dispatch(fetchSamplesError(error));
-      });
-
+    try {
+      const response = await fetch(samplesUrl, options);
+      if (!response.ok) {
+        throw response;
+      }
+      const res = await response.json();
+      return dispatch(fetchSamplesSuccess(res.sampleQueries));
+    } catch (error) {
+      const errorCode = await error.text();
+      return  dispatch(fetchSamplesError({ error: errorCode }));
+    }
   };
 }

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

@@ -426,7 +426,7 @@ export class History extends Component<IHistoryProps, any> {
     return (
       <>
         <div>
-          <SearchBox placeholder='Search history items' className={classes.searchBox}
+          <SearchBox placeholder={messages['Search history items']} className={classes.searchBox}
             onChange={(value) => this.searchValueChanged(value)}
             styles={{ field: { paddingLeft: 10 } }}
           />

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

@@ -172,14 +172,14 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
             <TooltipHost
               tooltipProps={{
                 onRenderContent: () => <div style={{ paddingBottom: 3 }}>
-                  {item.method} <FormattedMessage id={queryContent} /></div>
+                  {item.method} {queryContent} </div>
               }}
               id={getId()}
               calloutProps={{ gapSpace: 0 }}
               styles={{ root: { display: 'inline-block' } }}
             >
               <span aria-label={queryContent} className={classes.queryContent}>
-                <FormattedMessage id={queryContent} />
+                {queryContent}
               </span>
             </TooltipHost>
           </span>
@@ -308,7 +308,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
 
     return (
       <div>
-        <SearchBox className={classes.searchBox} placeholder='Search sample queries'
+        <SearchBox className={classes.searchBox} placeholder={messages['Search sample queries']}
           onChange={(value) => this.searchValueChanged(value)}
           styles={{ field: { paddingLeft: 10 } }}
         />

src/appLocale.ts

@@ -0,0 +1,22 @@
+const localeMap: any = {
+  'de-de': 'de-DE',
+  'en-us': 'en-US',
+  'es-es': 'es-ES',
+  'fr-fr': 'fr-FR',
+  'ja-jp': 'ja-JP',
+  'pt-br': 'pt-BR',
+  'ru-ru': 'ru-RU',
+  'zh-cn': 'zh-CN'
+};
+
+function getTryItLocale() {
+  return new URLSearchParams(location.search).get('locale');
+}
+
+function getPortalLocale(): string {
+  return location.pathname.split('/')[1].toLocaleLowerCase();
+}
+
+const hostDocumentLocale = getTryItLocale() || getPortalLocale();
+
+export const geLocale = hostDocumentLocale && localeMap[hostDocumentLocale] || 'en-US';

src/index.tsx

@@ -22,6 +22,7 @@ import { msalApplication } from './app/services/graph-client/msal-agent';
 import { DEFAULT_USER_SCOPES } from './app/services/graph-constants';
 import App from './app/views/App';
 import { readHistoryData } from './app/views/sidebar/history/history-utils';
+import { geLocale } from './appLocale';
 import messages from './messages';
 import { store } from './store';
 import './styles/index.scss';
@@ -76,29 +77,6 @@ msalApplication.acquireTokenSilent({ scopes: DEFAULT_USER_SCOPES.split(' ') }).t
   // ignore the error as it means that a User login is required
 });
 
-const localeMap: any = {
-  'de-de': 'de-DE',
-  'en-us': 'en-US',
-  'es-es': 'es-ES',
-  'fr-fr': 'fr-FR',
-  'ja-jp': 'ja-JP',
-  'pt-br': 'pt-BR',
-  'ru-ru': 'ru-RU',
-  'zh-cn': 'zh-CN'
-};
-
-function getTryItLocale() {
-  return new URLSearchParams(location.search).get('locale');
-}
-
-function getPortalLocale(): string {
-  return location.pathname.split('/')[1].toLocaleLowerCase();
-}
-
-const hostDocumentLocale = getTryItLocale() || getPortalLocale();
-
-const geLocale = hostDocumentLocale && localeMap[hostDocumentLocale] || 'en-US';
-
 addLocaleData([
   ...br,
   ...de,

src/messages/GE.json

@@ -302,5 +302,7 @@
   "Select different permissions": "To try out different Microsoft Graph API endpoints, choose the permissions, and then click Consent.",
   "Search permissions": "Search permissions",
   "permissions not found": "We did not find permissions",
-  "selected": "selected"
+  "selected": "selected",
+  "Search sample queries": "Search sample queries",
+  "Search history items": "Search history items"
 }