fix: Object examples not properly displayed as placeholders (#4126)

* stringifying object examples * adding test * removing format message Co-authored-by: Andy Brown <asbrown002@gmail.com>
microsoft · Sep 24, 2020 · ad90706 · ad90706
1 parent eb9e10a
commit ad90706
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/Composer/packages/adaptive-form/src/utils/__tests__/uiOptionsHelpers.test.ts b/Composer/packages/adaptive-form/src/utils/__tests__/uiOptionsHelpers.test.ts
@@ -3,7 +3,7 @@
 
 import { FieldProps, UIOptions } from '@bfc/extension-client';
 
-import { getUiLabel, getUiDescription, getUiPlaceholder } from '../uiOptionsHelpers';
+import { getUiDescription, getUiLabel, getUiPlaceholder } from '../uiOptionsHelpers';
 
 let props;
 
@@ -90,4 +90,10 @@ describe('getUiPlaceholder', () => {
       'ex. one, two'
     );
   });
+
+  it('correctly display examples for non string types', () => {
+    expect(
+      getUiPlaceholder({ ...props, placeholder: undefined, schema: { examples: [true, 5, { arg1: 'test' }] } })
+    ).toEqual('ex. true, 5, {"arg1":"test"}');
+  });
 });
diff --git a/Composer/packages/adaptive-form/src/utils/uiOptionsHelpers.ts b/Composer/packages/adaptive-form/src/utils/uiOptionsHelpers.ts
@@ -3,7 +3,6 @@
 
 import { FieldProps } from '@bfc/extension-client';
 import startCase from 'lodash/startCase';
-import formatMessage from 'format-message';
 
 export function getUiLabel(props: FieldProps): string | false | undefined {
   const { uiOptions, schema, name, value, label } = props;
@@ -47,7 +46,13 @@ export function getUiPlaceholder(props: FieldProps): string | undefined {
   } else if (placeholder) {
     fieldUIPlaceholder = placeholder;
   } else if (schema && Array.isArray(schema.examples) && schema.examples.length > 0) {
-    fieldUIPlaceholder = formatMessage('ex. { example }', { example: schema.examples.join(', ') });
+    const examplesStrings = schema.examples.map((example) => {
+      if (typeof example === 'object') {
+        return JSON.stringify(example);
+      }
+      return example;
+    });
+    fieldUIPlaceholder = `ex. ${examplesStrings.join(', ')}`;
   }
 
   if (fieldUIPlaceholder && schema.pattern) {