fix: allowing bottom tabs to be selectable as text

app/client/cypress/tags.js

@@ -68,5 +68,6 @@ module.exports = {
     "@tag.Visual",
     "@tag.Module",
     "@tag.Workflows",
+    "@tag.Debugger",
   ],
 };

app/client/src/components/editorComponents/ApiResponseView.test.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import ApiResponseView from "./ApiResponseView";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils";
+import { lightTheme } from "selectors/themeSelectors";
+import { BrowserRouter as Router } from "react-router-dom";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import "@testing-library/jest-dom/extend-expect";
+
+const mockStore = configureStore([]);
+
+const storeState = {
+  ...unitTestBaseMockStore,
+  evaluations: {
+    tree: {},
+  },
+  ui: {
+    ...unitTestBaseMockStore.ui,
+    users: {
+      featureFlag: {
+        data: {},
+        overriddenFlags: {},
+      },
+    },
+    ide: {
+      view: EditorViewMode.FullScreen,
+    },
+    debugger: {
+      context: {
+        errorCount: 0,
+      },
+    },
+    apiPane: {
+      debugger: {
+        open: true,
+        responseTabHeight: 200,
+        selectedTab: "response",
+      },
+    },
+  },
+};
+
+describe("ApiResponseView", () => {
+  let store: any;
+
+  beforeEach(() => {
+    store = mockStore(storeState);
+  });
+
+  it("the container should have class select-text to enable the selection of text for user", () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <ApiResponseView
+              apiName="Api1"
+              isRunning={false}
+              onRunClick={() => {}}
+              responseDataTypes={[]}
+              responseDisplayFormat={{ title: "JSON", value: "JSON" }}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    expect(
+      container
+        .querySelector(".t--api-bottom-pane-container")
+        ?.classList.contains("select-text"),
+    ).toBe(true);
+  });
+});

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -546,7 +546,10 @@ function ApiResponseView(props: Props) {
   if (!open) return null;
 
   return (
-    <ResponseContainer className="t--api-bottom-pane-container" ref={panelRef}>
+    <ResponseContainer
+      className="t--api-bottom-pane-container select-text"
+      ref={panelRef}
+    >
       <Resizer
         initialHeight={responseTabHeight}
         onResizeComplete={(height: number) => {

app/client/src/components/editorComponents/JSResponseView.test.tsx

@@ -141,4 +141,36 @@ describe("JSResponseView", () => {
     // nothing should be rendered here since the implementation for component is in EE code
     expect(queryByText(document.body, EMPTY_RESPONSE_LAST_HALF())).toBeNull();
   });
+
+  it("the container should have class select-text to enable the selection of text for user", () => {
+    // mock the return value of isBrowserExecutionAllowed
+    (
+      actionExecutionUtils.isBrowserExecutionAllowed as jest.Mock
+    ).mockImplementation(() => false);
+
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <JSResponseView
+              currentFunction={null}
+              disabled={false}
+              errors={[]}
+              isLoading={false}
+              jsCollectionData={collectionData}
+              onButtonClick={function (): void {
+                throw new Error("Function not implemented.");
+              }}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    expect(
+      container
+        .querySelector(".t--js-editor-bottom-pane-container")
+        ?.classList.contains("select-text"),
+    ).toBe(true);
+  });
 });

app/client/src/components/editorComponents/JSResponseView.tsx

@@ -336,7 +336,7 @@ function JSResponseView(props: Props) {
   // Do not render if header tab is selected in the bottom bar.
   return open && selectedTab ? (
     <ResponseContainer
-      className="t--js-editor-bottom-pane-container"
+      className="t--js-editor-bottom-pane-container select-text"
       ref={panelRef}
     >
       <Resizer

app/client/src/pages/Editor/DataSourceEditor/Debugger.test.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils";
+import { lightTheme } from "selectors/themeSelectors";
+import { BrowserRouter as Router } from "react-router-dom";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import "@testing-library/jest-dom/extend-expect";
+import Debugger from "./Debugger";
+
+jest.mock("components/editorComponents/Debugger/ErrorLogs/ErrorLog", () => ({
+  __esModule: true,
+  default: () => <div />,
+}));
+
+const mockStore = configureStore([]);
+
+const storeState = {
+  ...unitTestBaseMockStore,
+  evaluations: {
+    tree: {},
+  },
+  ui: {
+    ...unitTestBaseMockStore.ui,
+    users: {
+      featureFlag: {
+        data: {},
+        overriddenFlags: {},
+      },
+    },
+    ide: {
+      view: EditorViewMode.FullScreen,
+    },
+    debugger: {
+      isOpen: true,
+      errors: {},
+      expandId: "",
+      hideErrors: false,
+      context: {
+        scrollPosition: 0,
+        selectedDebuggerTab: "ERROR",
+        responseTabHeight: 252.1953125,
+        errorCount: 0,
+        selectedDebuggerFilter: "error",
+      },
+      logs: [],
+    },
+  },
+};
+
+describe("ApiResponseView", () => {
+  let store: any;
+
+  beforeEach(() => {
+    store = mockStore(storeState);
+  });
+
+  it("the container should have class select-text to enable the selection of text for user", () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <Debugger />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    expect(
+      container
+        .querySelector(".t--datasource-bottom-pane-container")
+        ?.classList.contains("select-text"),
+    ).toBe(true);
+  });
+});

app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx

@@ -156,7 +156,7 @@ export default function Debugger() {
 
   return shouldRender ? (
     <TabbedViewContainer
-      className="t--datasource-bottom-pane-container"
+      className="t--datasource-bottom-pane-container select-text"
       ref={panelRef}
     >
       <Resizable

app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils";
+import { lightTheme } from "selectors/themeSelectors";
+import { BrowserRouter as Router } from "react-router-dom";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import "@testing-library/jest-dom/extend-expect";
+import QueryDebuggerTabs from "./QueryDebuggerTabs";
+import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils";
+
+const mockStore = configureStore([]);
+
+const storeState = {
+  ...unitTestBaseMockStore,
+  evaluations: {
+    tree: {},
+  },
+  entities: {
+    plugins: {
+      list: [],
+    },
+    datasources: {
+      structure: {},
+    },
+  },
+  ui: {
+    ...unitTestBaseMockStore.ui,
+    users: {
+      featureFlag: {
+        data: {},
+        overriddenFlags: {},
+      },
+    },
+    ide: {
+      view: EditorViewMode.FullScreen,
+    },
+    debugger: {
+      context: {
+        errorCount: 0,
+      },
+    },
+    queryPane: {
+      debugger: {
+        open: true,
+        responseTabHeight: 200,
+        selectedTab: "response",
+      },
+    },
+  },
+};
+
+describe("ApiResponseView", () => {
+  let store: any;
+
+  beforeEach(() => {
+    store = mockStore(storeState);
+  });
+
+  it("the container should have class select-text to enable the selection of text for user", () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <QueryDebuggerTabs
+              actionName="Query1"
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              isRunning={false}
+              onRunClick={() => {}}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    expect(
+      container
+        .querySelector(".t--query-bottom-pane-container")
+        ?.classList.contains("select-text"),
+    ).toBe(true);
+  });
+});

app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx

@@ -247,7 +247,7 @@ function QueryDebuggerTabs({
 
   return (
     <TabbedViewContainer
-      className="t--query-bottom-pane-container"
+      className="t--query-bottom-pane-container select-text"
       ref={panelRef}
     >
       <Resizable