Generate the sample doc differently for sourceField vs fieldMappings (#154980)

## Summary

Generates the sample document for testing your pipeline differently
depending on if you are working with `sourceField` and
`destinationField` vs if you're using a `FieldMapping[]`.

Before:
<img width="339" alt="Screenshot 2023-04-14 at 2 05 58 PM"
src="https://user-images.githubusercontent.com/5288246/232134387-d57f5368-c01d-4556-92af-9bfbe570db76.png">


After:
<img width="442" alt="Screenshot 2023-04-14 at 2 06 06 PM"
src="https://user-images.githubusercontent.com/5288246/232134403-0c759823-1fa0-4968-95fa-267f86157e42.png">



### Checklist


- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)



### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx

@@ -34,7 +34,7 @@ import './add_inference_pipeline_flyout.scss';
 export const TestPipeline: React.FC = () => {
   const {
     addInferencePipelineModal: {
-      configuration: { sourceField },
+      configuration: { sourceField, fieldMappings },
       indexName,
     },
     getDocumentsErr,
@@ -49,6 +49,12 @@ export const TestPipeline: React.FC = () => {
 
   const isSmallerViewport = useIsWithinMaxBreakpoint('s');
   const inputRef = useRef<HTMLInputElement>();
+  const sampleFieldValue = i18n.translate(
+    'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.test.sampleValue',
+    {
+      defaultMessage: 'REPLACE ME',
+    }
+  );
 
   return (
     <>
@@ -152,7 +158,22 @@ export const TestPipeline: React.FC = () => {
                   </p>
                 </EuiText>
                 <EuiCodeBlock fontSize="m" isCopyable language="json" paddingSize="m">
-                  {`[{"_index":"index","_id":"id","_source":{"${sourceField}":"bar"}}]`}
+                  {JSON.stringify(
+                    JSON.parse(
+                      `[{"_index":"index", "_id":"id", "_source":{${
+                        fieldMappings
+                          ? fieldMappings
+                              .map(
+                                (fieldMapping) =>
+                                  `"${fieldMapping.sourceField}": "${sampleFieldValue}"`
+                              )
+                              .join(', ')
+                          : `"${sourceField}":"${sampleFieldValue}"`
+                      }}}]`
+                    ),
+                    null,
+                    2
+                  )}
                 </EuiCodeBlock>
               </EuiFlexItem>
             </EuiFlexGroup>