[Ingest Pipelines] Replace newline character to make flyout details m…

…ore readable (#182640)
elastic · May 13, 2024 · 781b5ee · 781b5ee
1 parent a7423bb
commit 781b5ee
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/...ck/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts b/...ck/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts
@@ -110,4 +110,5 @@ export type PipelineListTestSubjects =
   | 'emptyList.title'
   | 'sectionLoading'
   | 'pipelineLoadError'
+  | 'jsonCodeBlock'
   | 'reloadButton';
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts
@@ -43,7 +43,18 @@ describe('<PipelinesList />', () => {
     const pipeline3 = {
       name: 'test_pipeline3',
       description: 'test_pipeline3 description',
-      processors: [],
+      processors: [
+        {
+          script: {
+            lang: 'painless',
+            source: `String[] envSplit = ctx['env'].splitOnToken(params['delimiter']);\nArrayList tags = new ArrayList();\ntags.add(envSplit[params['position']].trim());\nctx['tags'] = tags;`,
+            params: {
+              delimiter: '-',
+              position: 1,
+            },
+          },
+        },
+      ],
       deprecated: true,
     };
 
@@ -123,6 +134,14 @@ describe('<PipelinesList />', () => {
       expect(find('pipelineDetails.title').text()).toBe(pipeline1.name);
     });
 
+    test('Replaces newline characters for spaces in flyout for json blocks', async () => {
+      const { find, actions } = testBed;
+
+      await actions.clickPipelineAt(1);
+
+      expect(find('jsonCodeBlock').text()).not.toContain(`\n`);
+    });
+
     test('should delete a pipeline', async () => {
       const { actions, component } = testBed;
       const { name: pipelineName } = pipeline1;

diff --git a/...lugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx b/...lugins/ingest_pipelines/public/application/sections/pipelines_list/details_json_block.tsx
@@ -18,15 +18,21 @@ export const PipelineDetailsJsonBlock: FunctionComponent<Props> = ({ json }) =>
   const uuid = useRef(0);
   uuid.current++;
 
+  // Convert JSON object to string
+  const jsonString = JSON.stringify(json, null, 2);
+  // Replace all newline characters with empty spaces
+  const formattedString = jsonString.replace(/\\n/g, ' ');
+
   return (
     <EuiCodeBlock
       paddingSize="s"
       language="json"
       overflowHeight={json.length > 0 ? 300 : undefined}
       isCopyable
       key={uuid.current}
+      data-test-subj="jsonCodeBlock"
     >
-      {JSON.stringify(json, null, 2)}
+      {formattedString}
     </EuiCodeBlock>
   );
 };