diff --git a/app/client/cypress/support/Pages/DebuggerHelper.ts b/app/client/cypress/support/Pages/DebuggerHelper.ts index 9be425333064..2dabfb707112 100644 --- a/app/client/cypress/support/Pages/DebuggerHelper.ts +++ b/app/client/cypress/support/Pages/DebuggerHelper.ts @@ -12,17 +12,12 @@ export class DebuggerHelper { private agHelper = ObjectsRegistry.AggregateHelper; private commonLocators = ObjectsRegistry.CommonLocators; - // ActionExecutionResizerHeight -> in repo - private readonly bottomPaneHeight = 360; - // from design system - private readonly TAB_MIN_HEIGHT = 36; - public readonly locators = { _debuggerIcon: ".t--debugger-count", _debuggerToggle: "[data-testid=t--debugger-toggle]", _debuggerDownStreamErrMsg: "[data-testid=t--debugger-downStreamErrorMsg]", _tabsContainer: ".t--debugger-tabs-container", - _closeButton: ".t--close-debugger", + _closeButton: "[data-testid=t--view-hide-button]", _logMessage: ".t--debugger-log-message", _logEntityLink: ".t--debugger-log-entity-link", _logState: ".t--debugger-log-state", diff --git a/app/client/src/IDE/Components/BottomView.test.tsx b/app/client/src/IDE/Components/BottomView.test.tsx new file mode 100644 index 000000000000..83d1a36aa5d1 --- /dev/null +++ b/app/client/src/IDE/Components/BottomView.test.tsx @@ -0,0 +1,227 @@ +import React from "react"; +import { act, fireEvent, render } from "@testing-library/react"; +import BottomView from "./BottomView"; +import { ViewHideBehaviour } from "../Interfaces/View"; +import { noop } from "lodash"; +import "@testing-library/jest-dom"; +import "jest-styled-components"; + +describe("BottomView", () => { + describe("ViewHideBehaviour.COLLAPSE", () => { + // HIDDEN = FALSE + it("it is visible when hidden = false", () => { + const { getByText } = render( + , + ); + + expect(getByText("Hey test")).toBeTruthy(); + }); + it("it can be toggled when hidden = false", () => { + const onViewHideToggle = jest.fn(); + const { getByRole } = render( + , + ); + + const viewHideToggle = getByRole("button"); + act(() => { + fireEvent.click(viewHideToggle); + }); + expect(onViewHideToggle).toBeCalled(); + }); + + it("assert container height when hidden = false", () => { + const { container } = render( + , + ); + + expect(container.children[0]).toHaveAttribute("style", "height: 300px;"); + }); + + // HIDDEN = TRUE + it("it is visible when hidden = true", () => { + const { getByText } = render( + , + ); + + expect(getByText("Hey test")).toBeTruthy(); + }); + + it("it can be toggled when hidden = true", () => { + const onViewHideToggle = jest.fn(); + const { getByRole } = render( + , + ); + + const viewHideToggle = getByRole("button"); + act(() => { + fireEvent.click(viewHideToggle); + }); + expect(onViewHideToggle).toBeCalled(); + }); + + it("assert container height when hidden = true", () => { + const { container } = render( + , + ); + + expect(container.children[0]).toHaveAttribute("style", "height: 38px;"); + }); + }); + + describe("ViewHideBehaviour.CLOSE", () => { + // HIDDEN = FALSE + it("it is visible when hidden = false", () => { + const { getByText } = render( + , + ); + + expect(getByText("Hey test")).toBeTruthy(); + }); + it("it can be toggled when hidden = false", () => { + const onViewHideToggle = jest.fn(); + const { getByRole } = render( + , + ); + + const viewHideToggle = getByRole("button"); + act(() => { + fireEvent.click(viewHideToggle); + }); + expect(onViewHideToggle).toBeCalled(); + }); + + it("assert container height when hidden = false", () => { + const { container } = render( + , + ); + + expect(container.children[0]).toHaveAttribute("style", "height: 300px;"); + }); + + // HIDDEN = TRUE + it("it is visible when hidden = true", () => { + const { getByText } = render( + , + ); + + expect(getByText("Hey test")).toBeTruthy(); + }); + + it("it can be toggled when hidden = true", () => { + const onViewHideToggle = jest.fn(); + const { getByRole } = render( + , + ); + + const viewHideToggle = getByRole("button"); + act(() => { + fireEvent.click(viewHideToggle); + }); + expect(onViewHideToggle).toBeCalled(); + }); + + it("assert container height when hidden = true", () => { + const { container } = render( + , + ); + + expect(container.children[0]).toHaveAttribute("style", "height: 0px;"); + }); + }); +}); diff --git a/app/client/src/IDE/Components/BottomView.tsx b/app/client/src/IDE/Components/BottomView.tsx new file mode 100644 index 000000000000..fe5bbb9e41b1 --- /dev/null +++ b/app/client/src/IDE/Components/BottomView.tsx @@ -0,0 +1,153 @@ +import React, { useEffect, useRef, useState } from "react"; +import styled from "styled-components"; +import Resizer, { + ResizerCSS, +} from "components/editorComponents/Debugger/Resizer"; +import { CodeEditorWithGutterStyles } from "pages/Editor/JSEditor/constants"; +import { ViewHideBehaviour, ViewDisplayMode } from "IDE/Interfaces/View"; +import { Button } from "design-system"; + +const VIEW_MIN_HEIGHT = 38; + +const Container = styled.div<{ displayMode: ViewDisplayMode }>` + ${ResizerCSS}; + width: 100%; + background-color: var(--ads-v2-color-bg); + border-top: 1px solid var(--ads-v2-color-border); + ${(props) => { + switch (props.displayMode) { + case ViewDisplayMode.OVERLAY: + return ` + position: absolute; + bottom: 0; + `; + } + }} +`; + +const ViewWrapper = styled.div` + height: 100%; + &&& { + ul.ads-v2-tabs__list { + margin: 0 var(--ads-v2-spaces-8); + height: ${VIEW_MIN_HEIGHT}px; + } + } + + & { + .ads-v2-tabs__list { + padding: var(--ads-v2-spaces-1) var(--ads-v2-spaces-7); + } + } + + & { + .ads-v2-tabs__panel { + ${CodeEditorWithGutterStyles}; + overflow-y: auto; + height: 100%; + } + } +`; + +const MIN_HEIGHT = { + [ViewHideBehaviour.COLLAPSE]: `${VIEW_MIN_HEIGHT}px`, + [ViewHideBehaviour.CLOSE]: "0px", +}; + +interface Props { + className?: string; + behaviour: ViewHideBehaviour; + displayMode?: ViewDisplayMode; + height: number; + setHeight: (height: number) => void; + hidden: boolean; + onHideClick: () => void; + children: React.ReactNode; +} + +const ViewHideButton = styled(Button)` + &.view-hide-button { + position: absolute; + top: 3px; + right: 0; + padding: 9px 11px; + } +`; + +interface ViewHideProps { + hideBehaviour: ViewHideBehaviour; + isHidden: boolean; + onToggle: () => void; +} + +const ViewHide = (props: ViewHideProps) => { + const [icon, setIcon] = useState(() => { + return props.hideBehaviour === ViewHideBehaviour.CLOSE + ? "close-modal" + : "arrow-down-s-line"; + }); + + useEffect(() => { + if (props.hideBehaviour === ViewHideBehaviour.COLLAPSE) { + if (props.isHidden) { + setIcon("arrow-up-s-line"); + } else { + setIcon("arrow-down-s-line"); + } + } + }, [props.isHidden]); + + return ( + + ); +}; + +const BottomView = (props: Props) => { + const panelRef = useRef(null); + + // Handle the height of the view when toggling the hidden state + useEffect(() => { + const panel = panelRef.current; + if (!panel) return; + if (props.hidden) { + panel.style.height = MIN_HEIGHT[props.behaviour]; + } else { + panel.style.height = `${props.height}px`; + } + }, [props.hidden, props.behaviour]); + + return ( + + {!props.hidden && ( + + )} + + {props.children} + + + + ); +}; + +export default BottomView; diff --git a/app/client/src/IDE/Interfaces/View.ts b/app/client/src/IDE/Interfaces/View.ts new file mode 100644 index 000000000000..0bfbff7391bb --- /dev/null +++ b/app/client/src/IDE/Interfaces/View.ts @@ -0,0 +1,26 @@ +/** + * Close: + * - View is not visible at all + * - View is not interactable till opened again + * + * Collapse: + * - View is visible but cannot be resized + * - Top part of the view is visible with open to reopen it + * - Children can have extra view that changes when hidden that can have different behaviours + */ +export enum ViewHideBehaviour { + CLOSE = "CLOSE", + COLLAPSE = "COLLAPSE", +} + +/** + * OVERLAY: + * - Sets an absolute position to make the view render on top of other components + * + * BLOCK: + * - Sets a block position to make the view rendered next to other components + */ +export enum ViewDisplayMode { + OVERLAY = "OVERLAY", + BLOCK = "BLOCK", +} diff --git a/app/client/src/IDE/index.ts b/app/client/src/IDE/index.ts index 1c44b527e457..5568b8167342 100644 --- a/app/client/src/IDE/index.ts +++ b/app/client/src/IDE/index.ts @@ -1,7 +1,7 @@ -/** - **** Structural Components **** - * Components that are part of the main structure of the IDE experience - **/ +/* ==================================================== + **** Structural Components **** + Components that are part of the main structure of the IDE experience +====================================================**/ /** * The IDEHeader gets exported with 3 layout subsections. @@ -11,18 +11,18 @@ */ export { default as IDEHeader } from "./Structure/Header"; -/** - **** UI Components **** - * Components that are smaller UI abstractions for easy use and standardisation within the IDE - **/ +/* ==================================================== + **** UI Components **** + Components that are smaller UI abstractions for easy use and standardisation within the IDE +=======================================================**/ /** * IDEHeaderTitle is a small text styled wrapper that is suitable to be used inside IDEHeader */ export { default as IDEHeaderTitle } from "./Components/HeaderTitle"; /** - * IDEHeaderEditorSwitcher can be used for trigger component to show a drop down for pages, modules - * or any list of elements in the header. Eg. Pages / Page 1 + * IDEHeaderEditorSwitcher can be used for a trigger component to show a dropdown for pages, modules + * or any list of elements in the header E.g., Pages / Page 1 */ export { default as IDEHeaderEditorSwitcher } from "./Components/HeaderEditorSwitcher"; /** @@ -33,6 +33,16 @@ export { default as IDEHeaderEditorSwitcher } from "./Components/HeaderEditorSwi */ export { default as IDEHeaderDropdown } from "./Components/HeaderDropdown"; /** - **** Interfaces **** - * Common types that are used by the different components of the IDE - **/ + * IDEBottomView is a versatile view meant to be at the bottom of the screen. + * It is resizable and can be hidden or collapsed based on the behavior configured + * The view is designed for showing tabs, but this component does not assume this can + * accept any view to be rendered + */ +export { default as IDEBottomView } from "./Components/BottomView"; + +/* ==================================================== + **** Interfaces **** + Common types that are used by the different components of the IDE +=======================================================**/ + +export { ViewHideBehaviour, ViewDisplayMode } from "./Interfaces/View"; diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index 7d4db11998d2..bb5d065f3e23 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -1,5 +1,4 @@ -import type { RefObject } from "react"; -import React, { useCallback, useRef, useState } from "react"; +import React, { useCallback, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import ReactJson from "react-json-view"; import styled from "styled-components"; @@ -22,9 +21,8 @@ import { EditorTheme } from "./CodeEditor/EditorConfig"; import NoResponseSVG from "assets/images/no-response.svg"; import DebuggerLogs from "./Debugger/DebuggerLogs"; import ErrorLogs from "./Debugger/Errors"; -import Resizer, { ResizerCSS } from "./Debugger/Resizer"; import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil"; -import { Classes, TAB_MIN_HEIGHT, Text, TextType } from "design-system-old"; +import { Classes, Text, TextType } from "design-system-old"; import { Button, Callout, Flex, SegmentedControl } from "design-system"; import type { BottomTab } from "./EntityBottomTabs"; import EntityBottomTabs from "./EntityBottomTabs"; @@ -45,7 +43,6 @@ import { getUpdateTimestamp } from "./Debugger/ErrorLogs/ErrorLogItem"; import type { Action } from "entities/Action"; import { SegmentedControlContainer } from "../../pages/Editor/QueryEditor/EditorJSONtoForm"; import ActionExecutionInProgressView from "./ActionExecutionInProgressView"; -import { CloseDebugger } from "./Debugger/DebuggerTabs"; import { EMPTY_RESPONSE } from "./emptyResponse"; import { setApiPaneDebuggerState } from "actions/apiPaneActions"; import { getApiPaneDebuggerState } from "selectors/apiPaneSelectors"; @@ -53,18 +50,7 @@ import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorViewMode } from "@appsmith/entities/IDE/constants"; import ApiResponseMeta from "./ApiResponseMeta"; import useDebuggerTriggerClick from "./Debugger/hooks/useDebuggerTriggerClick"; - -const ResponseContainer = styled.div` - ${ResizerCSS}; - width: 100%; - // Minimum height of bottom tabs as it can be resized - min-height: 36px; - background-color: var(--ads-v2-color-bg); - border-top: 1px solid var(--ads-v2-color-border); - .CodeMirror-code { - font-size: 12px; - } -`; +import { IDEBottomView, ViewHideBehaviour } from "IDE"; const ResponseTabWrapper = styled.div` display: flex; @@ -77,28 +63,6 @@ const ResponseTabWrapper = styled.div` } `; -const TabbedViewWrapper = styled.div` - height: 100%; - &&& { - ul.ads-v2-tabs__list { - margin: 0 ${(props) => props.theme.spaces[11]}px; - height: ${TAB_MIN_HEIGHT}; - } - } - - & { - .ads-v2-tabs__list { - padding: var(--ads-v2-spaces-1) var(--ads-v2-spaces-7); - } - } - - & { - .ads-v2-tabs__panel { - height: calc(100% - ${TAB_MIN_HEIGHT}); - } - } -`; - const NoResponseContainer = styled.div` flex: 1; width: 100%; @@ -250,7 +214,6 @@ function ApiResponseView(props: Props) { ? actionResponse.statusCode[0] !== "2" : false; - const panelRef: RefObject = useRef(null); const dispatch = useDispatch(); const errorCount = useSelector(getErrorCount); const { open, responseTabHeight, selectedTab } = useSelector( @@ -349,7 +312,7 @@ function ApiResponseView(props: Props) { source: "API_PANE", }); } - dispatch(setApiPaneDebuggerState({ selectedTab: tabKey })); + dispatch(setApiPaneDebuggerState({ open: true, selectedTab: tabKey })); }, []); // update the height of the response pane on resize. @@ -536,41 +499,28 @@ function ApiResponseView(props: Props) { // close the debugger //TODO: move this to a common place - const onClose = () => dispatch(setApiPaneDebuggerState({ open: false })); - - if (!open) return null; + const toggleHide = useCallback( + () => dispatch(setApiPaneDebuggerState({ open: !open })), + [open], + ); return ( - + ); } diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx index 490454018920..38ebc0a2c0a5 100644 --- a/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx +++ b/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx @@ -1,6 +1,4 @@ -import type { RefObject } from "react"; -import React, { useRef, useCallback } from "react"; -import styled from "styled-components"; +import React, { useCallback } from "react"; import DebuggerLogs from "./DebuggerLogs"; import { useDispatch, useSelector } from "react-redux"; import { @@ -15,7 +13,6 @@ import { } from "selectors/debuggerSelectors"; import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil"; import Errors from "./Errors"; -import Resizer, { ResizerCSS } from "./Resizer"; import EntityDeps from "./EntityDependecies"; import { createMessage, @@ -23,44 +20,13 @@ import { DEBUGGER_LOGS, INSPECT_ENTITY, } from "@appsmith/constants/messages"; -import { stopEventPropagation } from "utils/AppsmithUtils"; import { DEBUGGER_TAB_KEYS } from "./helpers"; -import { Colors } from "constants/Colors"; import EntityBottomTabs from "../EntityBottomTabs"; import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; -import { Button } from "design-system"; - -const TABS_HEADER_HEIGHT = 36; - -export const CloseDebugger = styled(Button)` - &.close-debugger { - position: absolute; - top: 3px; - right: 0px; - padding: 9px 11px; - } -`; - -const Container = styled.div` - ${ResizerCSS}; - position: absolute; - bottom: 0; - height: ${ActionExecutionResizerHeight}px; - min-height: ${TABS_HEADER_HEIGHT}px; - background-color: ${(props) => props.theme.colors.debugger.background}; - border-top: 1px solid ${Colors.ALTO}; - - ul.ads-v2-tabs__list { - padding: 0px ${(props) => props.theme.spaces[12]}px; - } - .ads-v2-tabs__panel { - height: calc(100% - ${TABS_HEADER_HEIGHT}px); - } -`; +import { IDEBottomView, ViewHideBehaviour, ViewDisplayMode } from "IDE"; function DebuggerTabs() { const dispatch = useDispatch(); - const panelRef: RefObject = useRef(null); const selectedTab = useSelector(getDebuggerSelectedTab); // fetch the error count from the store. const errorCount = useSelector(getErrorCount); @@ -106,36 +72,24 @@ function DebuggerTabs() { selectedTab === DEBUGGER_TAB_KEYS.SCHEMA_TAB ); - return shouldRender ? ( - - ) : null; + + ); } export default DebuggerTabs; diff --git a/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx b/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx index 6bb3e102540e..12310a3b96c4 100644 --- a/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx +++ b/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx @@ -24,6 +24,7 @@ interface ResizerProps { snapToHeight?: number; openResizer?: boolean; initialHeight?: number; + minHeight?: number; } function Resizer(props: ResizerProps) { @@ -52,13 +53,10 @@ function Resizer(props: ResizerProps) { const { height } = panel.getBoundingClientRect(); const updatedHeight = height - movementY; const headerHeightNumber = 35; - const minHeight = parseInt( - window.getComputedStyle(panel).minHeight.replace("px", ""), - ); if ( updatedHeight < window.innerHeight - headerHeightNumber && - updatedHeight > minHeight + updatedHeight > (props.minHeight || 0) ) { panel.style.height = `${height - movementY}px`; setHeight(height - movementY); diff --git a/app/client/src/components/editorComponents/EntityBottomTabs.tsx b/app/client/src/components/editorComponents/EntityBottomTabs.tsx index cd6e69463d8f..e31b3b802f33 100644 --- a/app/client/src/components/editorComponents/EntityBottomTabs.tsx +++ b/app/client/src/components/editorComponents/EntityBottomTabs.tsx @@ -37,6 +37,7 @@ interface EntityBottomTabsProps { tabs: Array; onSelect?: (tab: string) => void; selectedTabKey: string; + isCollapsed?: boolean; } type CollapsibleEntityBottomTabsProps = EntityBottomTabsProps & @@ -59,12 +60,29 @@ function EntityBottomTabs( } }; + // if (props.isCollapsed) { + // return ( + // + // {props.tabs.map((tab) => ( + // + // ))} + // + // ); + // } + return ( {props.tabs.map((tab) => { diff --git a/app/client/src/components/editorComponents/JSResponseView.tsx b/app/client/src/components/editorComponents/JSResponseView.tsx index d8e292b1fbfc..0cb6867524cf 100644 --- a/app/client/src/components/editorComponents/JSResponseView.tsx +++ b/app/client/src/components/editorComponents/JSResponseView.tsx @@ -1,11 +1,4 @@ -import type { RefObject } from "react"; -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import { connect, useDispatch, useSelector } from "react-redux"; import type { RouteComponentProps } from "react-router"; import { withRouter } from "react-router"; @@ -24,22 +17,18 @@ import { } from "@appsmith/constants/messages"; import type { EditorTheme } from "./CodeEditor/EditorConfig"; import DebuggerLogs from "./Debugger/DebuggerLogs"; -import Resizer, { ResizerCSS } from "./Debugger/Resizer"; import type { JSAction } from "entities/JSCollection"; import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor"; -import { Text } from "design-system"; +import { Flex, Text } from "design-system"; import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen"; import type { JSCollectionData } from "@appsmith/reducers/entityReducers/jsActionsReducer"; import type { EvaluationError } from "utils/DynamicBindingUtils"; import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers"; import type { BottomTab } from "./EntityBottomTabs"; import EntityBottomTabs from "./EntityBottomTabs"; -import { TAB_MIN_HEIGHT } from "design-system-old"; -import { CodeEditorWithGutterStyles } from "pages/Editor/JSEditor/constants"; import { getIsSavingEntity } from "selectors/editorSelectors"; import { getJSResponseViewState } from "./utils"; import { getFilteredErrors } from "selectors/debuggerSelectors"; -import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; import { NoResponse, ResponseTabErrorContainer, @@ -47,9 +36,8 @@ import { } from "./ApiResponseView"; import LogHelper from "./Debugger/ErrorLogs/components/LogHelper"; import LOG_TYPE from "entities/AppsmithConsole/logtype"; -import type { SourceEntity, Log } from "entities/AppsmithConsole"; +import type { Log, SourceEntity } from "entities/AppsmithConsole"; import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils"; -import { CloseDebugger } from "./Debugger/DebuggerTabs"; import { getJsPaneDebuggerState } from "selectors/jsPaneSelectors"; import { setJsPaneDebuggerState } from "actions/jsPaneActions"; import { getIDEViewMode } from "selectors/ideSelectors"; @@ -57,22 +45,7 @@ import { EditorViewMode } from "@appsmith/entities/IDE/constants"; import ErrorLogs from "./Debugger/Errors"; import { isBrowserExecutionAllowed } from "@appsmith/utils/actionExecutionUtils"; import JSRemoteExecutionView from "@appsmith/components/JSRemoteExecutionView"; - -const ResponseContainer = styled.div` - ${ResizerCSS}; - width: 100%; - // Minimum height of bottom tabs as it can be resized - min-height: ${TAB_MIN_HEIGHT}; - background-color: var(--ads-v2-color-bg); - height: ${ActionExecutionResizerHeight}px; - border-top: 1px solid var(--ads-v2-color-border); - - .ads-v2-tabs__panel { - ${CodeEditorWithGutterStyles}; - overflow-y: auto; - height: calc(100% - ${TAB_MIN_HEIGHT}); - } -`; +import { IDEBottomView, ViewHideBehaviour } from "../../IDE"; const ResponseTabWrapper = styled.div` display: flex; @@ -88,15 +61,6 @@ const ResponseTabWrapper = styled.div` } `; -const TabbedViewWrapper = styled.div` - height: 100%; -`; - -const ResponseViewer = styled.div` - width: 100%; - padding: 0 var(--ads-v2-spaces-7); -`; - const NoReturnValueWrapper = styled.div` padding-left: ${(props) => props.theme.spaces[12]}px; padding-top: ${(props) => props.theme.spaces[6]}px; @@ -143,7 +107,6 @@ function JSResponseView(props: Props) { const responses = (jsCollectionData && jsCollectionData.data) || {}; const isDirty = (jsCollectionData && jsCollectionData.isDirty) || {}; const isExecuting = (jsCollectionData && jsCollectionData.isExecuting) || {}; - const panelRef: RefObject = useRef(null); const dispatch = useDispatch(); const response = currentFunction && currentFunction.id && currentFunction.id in responses @@ -248,7 +211,7 @@ function JSResponseView(props: Props) { )} - + <> {localExecutionAllowed && ( <> @@ -296,7 +259,7 @@ function JSResponseView(props: Props) { )} - + ), @@ -324,7 +287,7 @@ function JSResponseView(props: Props) { // set the selected tab in the store. const setSelectedResponseTab = useCallback((selectedTab: string) => { - dispatch(setJsPaneDebuggerState({ selectedTab })); + dispatch(setJsPaneDebuggerState({ open: true, selectedTab })); }, []); // set the height of the response pane on resize. const setResponseHeight = useCallback((height: number) => { @@ -332,38 +295,29 @@ function JSResponseView(props: Props) { }, []); // close the debugger - const onClose = () => dispatch(setJsPaneDebuggerState({ open: false })); + const onToggle = useCallback( + () => dispatch(setJsPaneDebuggerState({ open: !open })), + [open], + ); // Do not render if header tab is selected in the bottom bar. - return open && selectedTab ? ( - - ) : null; + + ); } const mapStateToProps = (state: AppState) => { diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx index 732b343e38ed..7b668668fe35 100644 --- a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx +++ b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx @@ -155,7 +155,7 @@ const SettingsWrapper = styled.div` const Wrapper = styled.div` display: flex; flex-direction: row; - height: calc(100% - 135px); + height: 100%; position: relative; `; diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx index 52e55f7a0778..67cbba792d1b 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx @@ -41,8 +41,7 @@ export const Form = styled.form<{ }>` display: flex; flex-direction: column; - ${(props) => - !props.viewMode && `height: ${`calc(100% - ${props?.theme.backBanner})`};`} + ${(props) => !props.viewMode && `height: 100%`} padding-bottom: var(--ads-v2-spaces-6); overflow-y: auto; margin-left: ${(props) => (props.viewMode ? "0px" : "24px")}; diff --git a/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx b/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx index b4e9ef1bbd47..ff04caa1e4af 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx @@ -1,5 +1,4 @@ -import React, { useRef, useCallback } from "react"; -import type { RefObject } from "react"; +import React, { useCallback } from "react"; import { useDispatch, useSelector } from "react-redux"; import styled from "styled-components"; import { @@ -13,15 +12,10 @@ import { setResponsePaneHeight, showDebugger, } from "actions/debuggerActions"; -import Resizable, { - ResizerCSS, -} from "components/editorComponents/Debugger/Resizer"; import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; import Errors from "components/editorComponents/Debugger/Errors"; -import DebuggerLogs, { - LIST_HEADER_HEIGHT, -} from "components/editorComponents/Debugger/DebuggerLogs"; +import DebuggerLogs from "components/editorComponents/Debugger/DebuggerLogs"; import EntityDeps from "components/editorComponents/Debugger/EntityDependecies"; import { getDebuggerSelectedTab, @@ -29,33 +23,7 @@ import { getResponsePaneHeight, } from "selectors/debuggerSelectors"; import { ActionExecutionResizerHeight } from "../APIEditor/constants"; -import { CloseDebugger } from "components/editorComponents/Debugger/DebuggerTabs"; - -export const TabbedViewContainer = styled.div` - ${ResizerCSS} - height: ${ActionExecutionResizerHeight}px; - // Minimum height of bottom tabs as it can be resized - min-height: 36px; - width: 100%; - .ads-v2-tabs__panel { - overflow: hidden; - } - .ads-v2-tabs__list { - margin: 0px; - } - &&& { - ul.ads-v2-tabs__list { - margin: 0px ${(props) => props.theme.spaces[11]}px; - background-color: ${(props) => - props.theme.colors.apiPane.responseBody.bg}; - } - .ads-v2-tabs__panel { - height: calc(100% - ${LIST_HEADER_HEIGHT}); - } - } - background-color: ${(props) => props.theme.colors.apiPane.responseBody.bg}; - border-top: 1px solid var(--ads-v2-color-border); -`; +import { IDEBottomView, ViewHideBehaviour } from "IDE"; export const ResizerMainContainer = styled.div` display: flex; @@ -102,8 +70,6 @@ export const ResizerContentContainer = styled.div` export default function Debugger() { const dispatch = useDispatch(); - const panelRef: RefObject = useRef(null); - // fetch the height of the response pane from the store const responsePaneHeight = useSelector(getResponsePaneHeight); @@ -154,34 +120,21 @@ export default function Debugger() { selectedResponseTab === DEBUGGER_TAB_KEYS.SCHEMA_TAB ); - return shouldRender ? ( - - ) : null; + + ); } diff --git a/app/client/src/pages/Editor/JSEditor/Form.tsx b/app/client/src/pages/Editor/JSEditor/Form.tsx index 2c6ce6031bf1..0bed695763c8 100644 --- a/app/client/src/pages/Editor/JSEditor/Form.tsx +++ b/app/client/src/pages/Editor/JSEditor/Form.tsx @@ -88,7 +88,7 @@ type Props = JSFormProps; const Wrapper = styled.div` display: flex; flex-direction: row; - height: calc(100% - 64px); + height: 100%; width: 100%; `; diff --git a/app/client/src/pages/Editor/JSEditor/styledComponents.ts b/app/client/src/pages/Editor/JSEditor/styledComponents.ts index 9af05e866036..7281f698a0b0 100644 --- a/app/client/src/pages/Editor/JSEditor/styledComponents.ts +++ b/app/client/src/pages/Editor/JSEditor/styledComponents.ts @@ -31,8 +31,7 @@ export const CodeEditorWithGutterStyles = css` `; export const FormWrapper = styled.div` - height: ${({ theme }) => - `calc(100vh - ${theme.smallHeaderHeight} - ${theme.backBanner})`}; + height: ${({ theme }) => `calc(100vh - ${theme.smallHeaderHeight})`}; overflow: hidden; .${JS_OBJECT_HOTKEYS_CLASSNAME} { width: 100%; @@ -43,7 +42,7 @@ export const FormWrapper = styled.div` export const Form = styled.form` display: flex; flex-direction: column; - height: ${({ theme }) => `calc(100% - ${theme.backBanner})`}; + height: 100%; overflow: hidden; .t--no-binding-prompt { display: none; diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx index 4933c42c9409..8903a0d1a91a 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -1,15 +1,10 @@ -import { CloseDebugger } from "components/editorComponents/Debugger/DebuggerTabs"; import type { BottomTab } from "components/editorComponents/EntityBottomTabs"; import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; -import React, { useCallback, useEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import styled from "styled-components"; -import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; import { getErrorCount } from "selectors/debuggerSelectors"; import { Text, TextType } from "design-system-old"; -import Resizable, { - ResizerCSS, -} from "components/editorComponents/Debugger/Resizer"; import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; import { DEBUGGER_ERRORS, @@ -37,6 +32,7 @@ import { setQueryPaneDebuggerState } from "actions/queryPaneActions"; import { actionResponseDisplayDataFormats } from "../utils"; import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorViewMode } from "@appsmith/entities/IDE/constants"; +import { IDEBottomView, ViewHideBehaviour } from "../../../IDE"; const ResultsCount = styled.div` position: absolute; @@ -45,16 +41,6 @@ const ResultsCount = styled.div` color: var(--ads-v2-color-fg); `; -export const TabbedViewContainer = styled.div` - ${ResizerCSS}; - height: ${ActionExecutionResizerHeight}px; - // Minimum height of bottom tabs as it can be resized - min-height: 36px; - width: 100%; - background-color: var(--ads-v2-color-bg); - border-top: 1px solid var(--ads-v2-color-border); -`; - interface QueryDebuggerTabsProps { actionSource: SourceEntity; currentActionConfig?: Action; @@ -77,8 +63,6 @@ function QueryDebuggerTabs({ showSchema, }: QueryDebuggerTabsProps) { let output: Record[] | null = null; - - const panelRef = useRef(null); const dispatch = useDispatch(); const { open, responseTabHeight, selectedTab } = useSelector( @@ -186,12 +170,12 @@ function QueryDebuggerTabs({ dispatch(setQueryPaneDebuggerState({ responseTabHeight: height })); }, []); - const onClose = useCallback(() => { - dispatch(setQueryPaneDebuggerState({ open: false })); - }, []); + const onToggle = useCallback(() => { + dispatch(setQueryPaneDebuggerState({ open: !open })); + }, [open]); const setSelectedResponseTab = useCallback((tabKey: string) => { - dispatch(setQueryPaneDebuggerState({ selectedTab: tabKey })); + dispatch(setQueryPaneDebuggerState({ open: true, selectedTab: tabKey })); }, []); const ideViewMode = useSelector(getIDEViewMode); @@ -244,23 +228,15 @@ function QueryDebuggerTabs({ }); } - if (!open) return null; - return ( - + ); }