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.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 ${(props) => props.theme.spaces[11]}px;
+      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 (
+    <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 tabs 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 ${props.className}`}
+      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;

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

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