Fix: add fallback texts to placeholder text (#690)

* create function to provide fallback texts for placeholder texts

* display object value

* add fallback text translator to pivot items

src/app/utils/translate-messages.ts

@@ -0,0 +1,22 @@
+import { geLocale } from '../../appLocale';
+import messages from '../../messages';
+
+export function translateMessage(messageId: string): string {
+  const translatedMessage = getTranslation(messageId, geLocale);
+  if (translatedMessage) {
+    return translatedMessage;
+  }
+  return getTranslation(messageId, 'en-US') || messageId;
+}
+
+function getTranslation(messageId: string, locale: string) {
+  const localeMessages: object = (messages as { [key: string]: object })[locale];
+  if (localeMessages) {
+    const key: any = Object.keys(localeMessages).find(k => k === messageId);
+    const message = (localeMessages as { [key: string]: object })[key];
+    if (message) {
+      return message.toString();
+    }
+  }
+  return null;
+}

src/app/views/query-response/pivot-items/pivot-items.tsx

@@ -1,12 +1,11 @@
 import { getId, getTheme, Icon, IconButton, PivotItem, TooltipHost } from 'office-ui-fabric-react';
 import React from 'react';
-
 import { ThemeContext } from '../../../../themes/theme-context';
 import { ContentType, Mode } from '../../../../types/enums';
-import { IQuery } from '../../../../types/query-runner';
 import { isImageResponse } from '../../../services/actions/query-action-creator-util';
 import { lookupTemplate } from '../../../utils/adaptive-cards-lookup';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
+import { translateMessage } from '../../../utils/translate-messages';
 import { Image, Monaco } from '../../common';
 import { genericCopy } from '../../common/copy';
 import { formatXml } from '../../common/monaco/util/format-xml';
@@ -18,7 +17,7 @@ import { Snippets } from '../snippets';
 
 export const getPivotItems = (properties: any) => {
 
-  const { headers, body, messages, mode, sampleQuery } = properties;
+  const { headers, body, mode, sampleQuery } = properties;
   const resultComponent = displayResultComponent(headers, body);
   const currentTheme = getTheme();
   const dotStyle = queryResponseStyles(currentTheme).dot;
@@ -60,18 +59,18 @@ export const getPivotItems = (properties: any) => {
       key='response-preview'
       ariaLabel='Response Preview'
       itemIcon='Reply'
-      headerText={messages['Response Preview']}
-      title={messages['Response Preview']}
+      headerText={translateMessage('Response Preview')}
+      title={translateMessage('Response Preview')}
       onRenderItemLink={renderItemLink}
     >
       {resultComponent}
     </PivotItem>,
     <PivotItem
       key='response-headers'
       ariaLabel='Response Headers'
-      headerText={messages['Response Headers']}
+      headerText={translateMessage('Response Headers')}
       itemIcon='FileComment'
-      title={messages['Response Headers']}
+      title={translateMessage('Response Headers')}
       onRenderItemLink={renderItemLink}
     >
       {headers && <div><IconButton style={{ float: 'right', zIndex: 1 }} iconProps={{
@@ -86,8 +85,8 @@ export const getPivotItems = (properties: any) => {
       <PivotItem
         key='code-snippets'
         ariaLabel='Code Snippets'
-        title={messages.Snippets}
-        headerText={messages.Snippets}
+        title={translateMessage('Snippets')}
+        headerText={translateMessage('Snippets')}
         itemIcon='PasteAsCode'
         onRenderItemLink={renderItemLink}
       >
@@ -97,8 +96,8 @@ export const getPivotItems = (properties: any) => {
         key='graph-toolkit'
         ariaLabel='Graph Toolkit'
         itemIcon='CustomizeToolbar'
-        headerText={messages['Graph toolkit']}
-        title={messages['Graph toolkit']}
+        headerText={translateMessage('Graph toolkit')}
+        title={translateMessage('Graph toolkit')}
         onRenderItemLink={renderItemLink}
       >
         <GraphToolkit />
@@ -107,8 +106,8 @@ export const getPivotItems = (properties: any) => {
       <PivotItem
         key='adaptive-cards'
         ariaLabel='Adaptive Cards'
-        headerText={messages['Adaptive Cards']}
-        title={messages['Adaptive Cards']}
+        headerText={translateMessage('Adaptive Cards')}
+        title={translateMessage('Adaptive Cards')}
         itemIcon='ContactCard'
         onRenderItemLink={renderItemLink}
       >
@@ -127,8 +126,8 @@ export const getPivotItems = (properties: any) => {
       <PivotItem
         key='code-snippets'
         ariaLabel='Code Snippets'
-        title={messages.Snippets}
-        headerText={messages.Snippets}
+        title={translateMessage('Snippets')}
+        headerText={translateMessage('Snippets')}
         itemIcon='PasteAsCode'
         onRenderItemLink={renderItemLink}
       >