From be63e188a218f44652dd05213e5f8a4ed349a24d Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Fri, 2 Jun 2023 11:21:05 +0400
Subject: [PATCH 1/4] fix: disabletextbox

---
 src/features/Apiexplorer/RequestJSONBox/index.tsx | 10 +++++++++-
 src/features/Apiexplorer/index.tsx                |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/features/Apiexplorer/RequestJSONBox/index.tsx b/src/features/Apiexplorer/RequestJSONBox/index.tsx
index 12b52411d..1f1959b24 100644
--- a/src/features/Apiexplorer/RequestJSONBox/index.tsx
+++ b/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,13 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
   const is_subscribe = useMemo(() => {
     return request_example?.includes('subscribe');
   }, [request_example]);
+  const [isdisabled, setIsDisabled] = useState(false);
+
+  useEffect(() => {
+    if (name === undefined) {
+      setIsDisabled(true);
+    }
+  }, [name]);
 
   return (
     <div className={style.playgroundBox}>
@@ -35,6 +42,7 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
           placeholder={'Request JSON'}
           onChange={handleChange}
           value={request_example}
+          disabled={isdisabled}
         ></textarea>
         {is_subscribe ? (
           <SubscribeRenderer
diff --git a/src/features/Apiexplorer/index.tsx b/src/features/Apiexplorer/index.tsx
index a68deeb6d..608b1150e 100644
--- a/src/features/Apiexplorer/index.tsx
+++ b/src/features/Apiexplorer/index.tsx
@@ -1,5 +1,5 @@
 import { Text } from '@deriv/ui';
-import React from 'react';
+import React, { useState } from 'react';
 import { Dropdown } from './Dropdown/Dropdown';
 import styles from './styles.module.scss';
 import SchemaWrapper from './Schema/SchemaWrapper';

From c4dd511239b21ce412eb3d109d0dd31d9714f693 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Fri, 2 Jun 2023 11:21:40 +0400
Subject: [PATCH 2/4] fix: disabletextbox

---
 src/features/Apiexplorer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Apiexplorer/index.tsx b/src/features/Apiexplorer/index.tsx
index 608b1150e..a68deeb6d 100644
--- a/src/features/Apiexplorer/index.tsx
+++ b/src/features/Apiexplorer/index.tsx
@@ -1,5 +1,5 @@
 import { Text } from '@deriv/ui';
-import React, { useState } from 'react';
+import React from 'react';
 import { Dropdown } from './Dropdown/Dropdown';
 import styles from './styles.module.scss';
 import SchemaWrapper from './Schema/SchemaWrapper';

From 54d501dcfd99730a1d49259bac9a504ce2cf39f1 Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Fri, 2 Jun 2023 11:42:23 +0400
Subject: [PATCH 3/4] fix: added test case

---
 .../__tests__/RequestJsonBox.test.tsx               | 13 +++++++++++++
 src/features/Apiexplorer/RequestJSONBox/index.tsx   |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx b/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
index 996a9c20c..949aa5fda 100644
--- a/src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx
+++ b/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 });
diff --git a/src/features/Apiexplorer/RequestJSONBox/index.tsx b/src/features/Apiexplorer/RequestJSONBox/index.tsx
index 1f1959b24..88b409c87 100644
--- a/src/features/Apiexplorer/RequestJSONBox/index.tsx
+++ b/src/features/Apiexplorer/RequestJSONBox/index.tsx
@@ -25,8 +25,10 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
   const [isdisabled, setIsDisabled] = useState(false);
 
   useEffect(() => {
-    if (name === undefined) {
+    if (name === null) {
       setIsDisabled(true);
+    } else {
+      setIsDisabled(false);
     }
   }, [name]);
 

From 482a3275b942ec87877c0ba3a5502557a13d4fee Mon Sep 17 00:00:00 2001
From: sanjam chhatwal <sanjam@deriv.com>
Date: Fri, 2 Jun 2023 12:33:49 +0400
Subject: [PATCH 4/4] fix: added test case

---
 src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
index 72c3cde28..1d8ef9c31 100644
--- a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx
+++ b/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', () => {