PMM-10847 Fix QAN incomplete example query (#1400)

* PMM-10847 Fix invalid mongo query example crash

* PMM-10847 Update message & add test

* PMM-10847 Extract Parse Error into own component

* PMM-10847 Use only part of message

pmm-app/src/pmm-qan/panel/components/Details/Example/Example.test.tsx

@@ -59,6 +59,27 @@ describe('Example tab page render test', () => {
     expect(container.querySelector('.json')?.getAttribute('data-src')).toContain(innerExample);
   });
 
+  it('Component renders when invalid json example is provided for mongodb', () => {
+    const props = {
+      databaseType: 'mongodb' as DatabasesType,
+      examples: [
+        {
+          example:
+            '{"ns":"admin.system.version","op":"command","command":{"collStats":"system.version"',
+          example_format: 'EXAMPLE',
+          example_type: 'RANDOM',
+          service_id: '/service_id/a0bf892b-931e-4fdd-aee1-566a3682a774',
+          service_type: 'mongodb',
+          tables: ['system.version'],
+        },
+      ],
+    };
+
+    render(<Example {...props} />);
+
+    expect(screen.getByTestId('example-query-invalid')).toBeDefined();
+  });
+
   it('Component renders classic example for mysql', () => {
     const props = {
       databaseType: 'mysql' as DatabasesType,

pmm-app/src/pmm-qan/panel/components/Details/Example/Example.tools.tsx

@@ -3,10 +3,18 @@ import sqlFormatter from 'sql-formatter';
 import { ReactJSON } from 'shared/components/Elements/ReactJSON/ReactJSON';
 import { Databases } from 'shared/core';
 import { Highlight } from 'shared/components/Hightlight/Highlight';
+import { logger } from '@percona/platform-core';
+import ParseError from './ParseError/ParseError';
 
 export const getExample = (databaseType) => (example: any): any => {
   if (databaseType === Databases.mongodb) {
-    return <ReactJSON key={example || ''} json={JSON.parse(example)} />;
+    try {
+      return <ReactJSON key={example || ''} json={JSON.parse(example)} />;
+    } catch (e) {
+      logger.error(e);
+    }
+
+    return <ParseError />;
   }
 
   return (

pmm-app/src/pmm-qan/panel/components/Details/Example/ParseError/ParseError.messages.ts

@@ -0,0 +1,4 @@
+export const Messages = {
+  parsingFailed:
+    'Example query is not successfully parsed due to the max query length limit that you set or set by default.',
+};

pmm-app/src/pmm-qan/panel/components/Details/Example/ParseError/ParseError.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ParseError from './ParseError';
+import { Messages } from './ParseError.messages';
+
+describe('Parse Error Message', () => {
+  it('renders with correct message', () => {
+    const { container } = render(<ParseError />);
+
+    expect(container.textContent).toBe(Messages.parsingFailed);
+  });
+});

pmm-app/src/pmm-qan/panel/components/Details/Example/ParseError/ParseError.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Messages } from './ParseError.messages';
+
+const ParseError: React.FC = () => <pre data-testid="example-query-invalid">{Messages.parsingFailed}</pre>;
+
+export default ParseError;