feat: inavlaid syntax issue

src/features/Apiexplorer/LoginDialog/LoginDialog.module.scss

@@ -1,24 +1,36 @@
 @use 'src/styles/utility' as *;
 
 .wrapper {
-    width: rem(44);
+  width: rem(44);
+}
+
+.modal {
+  padding: rem(0.8) 0 0 rem(2.4);
+  font-size: rem(1.4);
+  line-height: rem(2);
+  @media (max-width: 992px) {
+    padding: 0 0 0 rem(1.6);
   }
-  .modal {
-    padding: rem(0.8) 0 0 rem(2.4);
-    font-size: rem(1.4);
-    line-height: rem(2);
-    @media (max-width: 992px) {
-      padding: 0 0 0 rem(1.6);
-    }
+}
+.buttonWrapper {
+  display: flex;
+  justify-content: end;
+  padding: rem(2.4);
+  gap: rem(0.8);
+
+  .btn {
+    padding: rem(1) rem(1.6);
   }
-
-  .buttonWrapper {
-    display: flex;
-    justify-content: end;
-    padding: rem(2.4);
-    gap: rem(0.8);
-
-    .btn {
-      padding: rem(1) rem(1.6);
-    }
+}
+
+.validwrapper {
+  width: rem(30);
+}
+.validmodal {
+  padding: rem(0.8) rem(2.4) rem(2.4) rem(2.4);
+  font-size: rem(1.4);
+  line-height: rem(2);
+  @media (max-width: 992px) {
+    padding: rem(0.8) rem(1.6) rem(1.6) rem(1.6);
   }
+}

src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx

@@ -41,7 +41,7 @@ describe('RequestResponseRenderer', () => {
     handleChange: jest.fn(),
     request_example: '{"app_list": 1}',
     name: 'app_list' as TSocketEndpointNames,
-    auth: 0,
+    auth: 1,
   };
 
   beforeEach(() => {

src/features/Apiexplorer/RequestResponseRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { TSocketEndpointNames, TSocketRequestProps } from '@site/src/configs/websocket/types';
 import { Button } from '@deriv/ui';
 import useWS from '@site/src/hooks/useWs';
@@ -7,6 +7,7 @@ import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import PlaygroundSection from './PlaygroundSection';
 import LoginDialog from '../LoginDialog';
 import styles from '../RequestJSONBox/RequestJSONBox.module.scss';
+import { ValidDialog } from '../ValidDialog';
 
 export interface IResponseRendererProps<T extends TSocketEndpointNames> {
   name: T;
@@ -24,6 +25,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
   const { full_response, is_loading, send, clear, error } = useWS<T>(name);
   const [toggle_modal, setToggleModal] = useState(false);
   const [response_state, setResponseState] = useState(false);
+  const [is_valid, setIsValid] = useState(false);
 
   const parseRequestJSON = () => {
     let request_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
@@ -32,6 +34,9 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
       request_data = JSON.parse(reqData);
     } catch (error) {
       console.error('Could not parse the JSON data while trying to send the request: ', error);
+      console.log(error);
+      setIsValid(true);
+      setToggleModal(false);
     }
 
     return request_data;
@@ -60,16 +65,20 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
           Clear
         </Button>
       </div>
-      {!is_logged_in && toggle_modal ? (
-        <LoginDialog setToggleModal={setToggleModal} />
+      {!is_valid ? (
+        !is_logged_in && toggle_modal ? (
+          <LoginDialog setToggleModal={setToggleModal} />
+        ) : (
+          <PlaygroundSection
+            loader={is_loading}
+            response_state={response_state}
+            full_response={full_response}
+            error={error}
+            name={name}
+          />
+        )
       ) : (
-        <PlaygroundSection
-          loader={is_loading}
-          response_state={response_state}
-          full_response={full_response}
-          error={error}
-          name={name}
-        />
+        <ValidDialog setIsValid={setIsValid} setToggleModal={setToggleModal} />
       )}
     </div>
   );

src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx

@@ -54,7 +54,7 @@ const mockUnsubscribe = jest.fn();
 mockUseSubscription.mockImplementation(() => ({
   subscribe: mockSubscribe,
   unsubscribe: mockUnsubscribe,
-  error: 'random error',
+  error: '',
   full_response: {
     tick: 1,
     echo_req: { tick: 1 },
@@ -106,10 +106,8 @@ describe('SubscribeRenderer', () => {
     console.error = mockedError;
 
     render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
-
-    const send_request_button = screen.getByRole('button', { name: 'Send Request' });
-
-    await userEvent.click(send_request_button);
+    const button = await screen.findByRole('button', { name: /Send Request/i });
+    await userEvent.click(button);
 
     expect(consoleOutput[0]).toEqual(
       'Could not parse the JSON data while trying to send the request: ',

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -10,6 +10,7 @@ import useSubscription from '@site/src/hooks/useSubscription';
 import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import LoginDialog from '../LoginDialog';
 import PlaygroundSection from '../RequestResponseRenderer/PlaygroundSection';
+import ValidDialog from '../ValidDialog';
 
 export interface IResponseRendererProps<T extends TSocketSubscribableEndpointNames> {
   name: T;
@@ -27,23 +28,21 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   const { full_response, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
   const [response_state, setResponseState] = useState(false);
   const [toggle_modal, setToggleModal] = useState(false);
-
-  useEffect(() => {
-    if (error) {
-      setToggleModal(true);
-    }
-  }, [error]);
+  const [is_valid, setIsValid] = useState(false);
 
   const parseRequestJSON = () => {
-    let json_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
+    let request_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
 
     try {
-      json_data = JSON.parse(reqData);
+      request_data = JSON.parse(reqData);
     } catch (error) {
       console.error('Could not parse the JSON data while trying to send the request: ', error);
+      console.log(error);
+      setIsValid(true);
+      setToggleModal(false);
     }
 
-    return json_data;
+    return request_data;
   };
 
   const handleClick = useCallback(() => {
@@ -67,7 +66,9 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
           Clear
         </Button>
       </div>
-      {!is_logged_in && auth == 1 && toggle_modal ? (
+      {is_valid ? (
+        <ValidDialog setIsValid={setIsValid} setToggleModal={setToggleModal} />
+      ) : !is_logged_in && auth == 1 && toggle_modal ? (
         <LoginDialog setToggleModal={setToggleModal} />
       ) : (
         <PlaygroundSection

src/features/Apiexplorer/ValidDialog/__tests__/ValidDialog.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ValidDialog from '..';
+import { screen, render } from '@testing-library/react';
+
+describe('ValidDialog', () => {
+  test('if correct test is rendered', () => {
+    location.assign = jest.fn();
+
+    render(<ValidDialog setIsValid={jest.fn()} setToggleModal={jest.fn()} />);
+    const text = screen.getByText(
+      'Your JSON object is invalid. Please make sure you provide the correct syntax for your JSON object.',
+    );
+
+    expect(text).toBeVisible();
+  });
+});

src/features/Apiexplorer/ValidDialog/index.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { Modal } from '@deriv/ui';
+import styles from '../LoginDialog/LoginDialog.module.scss';
+
+type TValidDialog = {
+  setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
+  setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const ValidDialog = ({ setIsValid, setToggleModal }: TValidDialog) => {
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        setIsValid(false);
+        setToggleModal(false);
+      }
+    },
+    [setIsValid, setToggleModal],
+  );
+  return (
+    <Modal defaultOpen onOpenChange={onOpenChange}>
+      <Modal.Portal>
+        <div className='modal-overlay'>
+          <Modal.Overlay />
+          <Modal.PageContent
+            title={'Invalid JSON'}
+            has_close_button
+            className={styles.validwrapper}
+          >
+            <div className={styles.validmodal}>
+              Your JSON object is invalid. Please make sure you provide the correct syntax for your
+              JSON object.
+            </div>
+          </Modal.PageContent>
+        </div>
+      </Modal.Portal>
+    </Modal>
+  );
+};
+
+export default ValidDialog;

src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx

@@ -60,7 +60,7 @@ mockUseDynamicImportJSON.mockImplementation(() => ({
   text_data: {
     name: null,
     selected_value: 'Select API Call - Version 3',
-    request: '',
+    request: '{ "echo_req": 1 } ',
   },
 }));
 
@@ -126,6 +126,26 @@ describe('ApiExplorerFeatures', () => {
 
       const close_button = screen.getByTestId('close-button');
 
+      await userEvent.click(close_button);
+      expect(dialog).not.toBeVisible();
+    });
+    it('should render ValidDialog and it can be closed', async () => {
+      const playground_select = screen.getByText(/select api call/i);
+      await userEvent.click(playground_select);
+
+      const select_option = screen.getByText(/application: get details/i);
+      expect(select_option).toBeVisible();
+
+      await userEvent.click(select_option);
+
+      const send_request = screen.getByText(/send request/i);
+      await userEvent.click(send_request);
+
+      const dialog = await screen.findByRole('dialog');
+      expect(dialog).toBeVisible();
+
+      const close_button = screen.getByTestId('close-button');
+
       await userEvent.click(close_button);
       expect(dialog).not.toBeVisible();
     });