feat: Collapsible Bottom View

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",

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(
+        <BottomView
+          behaviour={ViewHideBehaviour.COLLAPSE}
+          height={300}
+          hidden={false}
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(getByText("Hey test")).toBeTruthy();
+    });
+    it("it can be toggled when hidden = false", () => {
+      const onViewHideToggle = jest.fn();
+      const { getByRole } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.COLLAPSE}
+          height={300}
+          hidden={false}
+          onHideClick={onViewHideToggle}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      const viewHideToggle = getByRole("button");
+      act(() => {
+        fireEvent.click(viewHideToggle);
+      });
+      expect(onViewHideToggle).toBeCalled();
+    });
+
+    it("assert container height when hidden = false", () => {
+      const { container } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.COLLAPSE}
+          height={300}
+          hidden={false}
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(container.children[0]).toHaveAttribute("style", "height: 300px;");
+    });
+
+    // HIDDEN = TRUE
+    it("it is visible when hidden = true", () => {
+      const { getByText } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.COLLAPSE}
+          height={300}
+          hidden
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(getByText("Hey test")).toBeTruthy();
+    });
+
+    it("it can be toggled when hidden = true", () => {
+      const onViewHideToggle = jest.fn();
+      const { getByRole } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.COLLAPSE}
+          height={300}
+          hidden
+          onHideClick={onViewHideToggle}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      const viewHideToggle = getByRole("button");
+      act(() => {
+        fireEvent.click(viewHideToggle);
+      });
+      expect(onViewHideToggle).toBeCalled();
+    });
+
+    it("assert container height when hidden = true", () => {
+      const { container } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.COLLAPSE}
+          height={300}
+          hidden
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(container.children[0]).toHaveAttribute("style", "height: 38px;");
+    });
+  });
+
+  describe("ViewHideBehaviour.CLOSE", () => {
+    // HIDDEN = FALSE
+    it("it is visible when hidden = false", () => {
+      const { getByText } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.CLOSE}
+          height={300}
+          hidden={false}
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(getByText("Hey test")).toBeTruthy();
+    });
+    it("it can be toggled when hidden = false", () => {
+      const onViewHideToggle = jest.fn();
+      const { getByRole } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.CLOSE}
+          height={300}
+          hidden={false}
+          onHideClick={onViewHideToggle}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      const viewHideToggle = getByRole("button");
+      act(() => {
+        fireEvent.click(viewHideToggle);
+      });
+      expect(onViewHideToggle).toBeCalled();
+    });
+
+    it("assert container height when hidden = false", () => {
+      const { container } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.CLOSE}
+          height={300}
+          hidden={false}
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(container.children[0]).toHaveAttribute("style", "height: 300px;");
+    });
+
+    // HIDDEN = TRUE
+    it("it is visible when hidden = true", () => {
+      const { getByText } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.CLOSE}
+          height={300}
+          hidden
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(getByText("Hey test")).toBeTruthy();
+    });
+
+    it("it can be toggled when hidden = true", () => {
+      const onViewHideToggle = jest.fn();
+      const { getByRole } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.CLOSE}
+          height={300}
+          hidden
+          onHideClick={onViewHideToggle}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      const viewHideToggle = getByRole("button");
+      act(() => {
+        fireEvent.click(viewHideToggle);
+      });
+      expect(onViewHideToggle).toBeCalled();
+    });
+
+    it("assert container height when hidden = true", () => {
+      const { container } = render(
+        <BottomView
+          behaviour={ViewHideBehaviour.CLOSE}
+          height={300}
+          hidden
+          onHideClick={noop}
+          setHeight={noop}
+        >
+          <div id="bottomview">Hey test</div>
+        </BottomView>,
+      );
+
+      expect(container.children[0]).toHaveAttribute("style", "height: 0px;");
+    });
+  });
+});

app/client/src/IDE/Components/BottomView.tsx

@@ -0,0 +1,152 @@
+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 {
+  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 (
+    <ViewHideButton
+      className="view-hide-button"
+      data-testid="t--view-hide-button"
+      isIconButton
+      kind="tertiary"
+      onClick={props.onToggle}
+      size="md"
+      startIcon={icon}
+    />
+  );
+};
+
+const BottomView = (props: Props) => {
+  const panelRef = useRef<HTMLDivElement>(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 (
+    <Container
+      className={`select-text`}
+      displayMode={props.displayMode || ViewDisplayMode.BLOCK}
+      ref={panelRef}
+    >
+      {!props.hidden && (
+        <Resizer
+          initialHeight={props.height}
+          minHeight={VIEW_MIN_HEIGHT + 50}
+          onResizeComplete={props.setHeight}
+          panelRef={panelRef}
+        />
+      )}
+      <ViewWrapper>
+        {props.children}
+        <ViewHide
+          hideBehaviour={props.behaviour}
+          isHidden={props.hidden}
+          onToggle={props.onHideClick}
+        />
+      </ViewWrapper>
+    </Container>
+  );
+};
+
+export default BottomView;