Merge pull request #178 from sanjam-deriv/disableTextbox

Author: hubert-deriv

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

@@ -73,6 +73,19 @@ describe('RequestResponseRenderer', () => {
     expect(placeholder).toHaveLength(1);
   });
 
+  it('should disable text box if no api call is selected in the dropdown', () => {
+    const newProps = {
+      handleChange: jest.fn(),
+      request_example: '',
+      name: null as TSocketEndpointNames,
+      auth: 0,
+    };
+    cleanup();
+    render(<RequestJSONBox {...newProps} />);
+    const textarea = screen.getByLabelText('Request JSON');
+    expect(textarea).toBeDisabled();
+  });
+
   it('should render response renderer component', async () => {
     const primaryButton = screen.getByRole('button', { name: /Send Request/i });
     const secondaryButton = screen.getByRole('button', { name: /clear/i });

src/features/Apiexplorer/RequestJSONBox/index.tsx

@@ -1,6 +1,6 @@
 import { TSocketEndpointNames } from '@site/src/configs/websocket/types';
 import clsx from 'clsx';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import RequestResponseRenderer from '../RequestResponseRenderer';
 import style from './RequestJSONBox.module.scss';
 import SubscribeRenderer from '../SubscribeRenderer';
@@ -22,6 +22,15 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
   const is_subscribe = useMemo(() => {
     return request_example?.includes('subscribe');
   }, [request_example]);
+  const [isdisabled, setIsDisabled] = useState(false);
+
+  useEffect(() => {
+    if (name === null) {
+      setIsDisabled(true);
+    } else {
+      setIsDisabled(false);
+    }
+  }, [name]);
 
   return (
     <div className={style.playgroundBox}>
@@ -35,6 +44,7 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
           placeholder={'Request JSON'}
           onChange={handleChange}
           value={request_example}
+          disabled={isdisabled}
         ></textarea>
         {is_subscribe ? (
           <SubscribeRenderer

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

@@ -151,13 +151,6 @@ describe('ApiExplorerFeatures', () => {
       await userEvent.click(close_button);
       expect(dialog).not.toBeVisible();
     });
-
-    it('should change the text when writing in the textbox', async () => {
-      const json_box = screen.getByPlaceholderText('Request JSON');
-      expect(json_box).toBeVisible();
-      await userEvent.type(json_box, 'test123');
-      expect(mockHandleSelectChange).toHaveBeenCalled();
-    });
   });
 
   describe('Logged in', () => {