Rename `QueryViewNotebook` to `NotebookContainer` (#40316) (#40346)

* Use Mantine Flex for the NotebookContainer

* Rename the component to `NotebookContainer`

* Convert to TS

* Explain the delay

* Use regular div

* Destructure the import type

* Simplify styling

* Shorten the prop name to `isOpen`

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>

frontend/src/metabase/query_builder/components/view/View.jsx

@@ -24,7 +24,7 @@ import { TagEditorSidebar } from "../template_tags/TagEditorSidebar";
 
 import NewQuestionHeader from "./NewQuestionHeader";
 import NewQuestionView from "./View/NewQuestionView";
-import QueryViewNotebook from "./View/QueryViewNotebook";
+import { NotebookContainer } from "./View/NotebookContainer";
 import {
   BorderedViewTitleHeader,
   NativeQueryEditorContainer,
@@ -374,8 +374,8 @@ class View extends Component {
           {isHeaderVisible && this.renderHeader()}
           <QueryBuilderContentContainer>
             {!isNative && (
-              <QueryViewNotebook
-                isNotebookContainerOpen={isNotebookContainerOpen}
+              <NotebookContainer
+                isOpen={isNotebookContainerOpen}
                 {...this.props}
               />
             )}

frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx

+import type { TransitionEventHandler } from "react";
+import { useEffect, useState } from "react";
+
+import Notebook from "metabase/query_builder/components/notebook/Notebook";
+import { Box } from "metabase/ui";
+
+// There must exist some transition time, no matter how short,
+// because we need to trigger the 'onTransitionEnd' in the component
+const delayBeforeNotRenderingNotebook = 10;
+
+interface NotebookContainerProps {
+  isOpen: boolean;
+}
+
+export const NotebookContainer = ({
+  isOpen,
+  ...props
+}: NotebookContainerProps) => {
+  const [shouldShowNotebook, setShouldShowNotebook] = useState(isOpen);
+
+  useEffect(() => {
+    isOpen && setShouldShowNotebook(isOpen);
+  }, [isOpen]);
+
+  const handleTransitionEnd: TransitionEventHandler<HTMLDivElement> = (
+    event,
+  ): void => {
+    if (event.propertyName === "opacity" && !isOpen) {
+      setShouldShowNotebook(false);
+    }
+  };
+
+  const transformStyle = isOpen ? "translateY(0)" : "translateY(-100%)";
+
+  return (
+    <Box
+      bg="white"
+      pos="absolute"
+      inset={0}
+      opacity={isOpen ? 1 : 0}
+      style={{
+        zIndex: 2,
+        overflowY: "auto",
+        transform: transformStyle,
+        transition: `transform ${delayBeforeNotRenderingNotebook}ms, opacity ${delayBeforeNotRenderingNotebook}ms`,
+      }}
+      onTransitionEnd={handleTransitionEnd}
+    >
+      {shouldShowNotebook && <Notebook {...props} />}
+    </Box>
+  );
+};

frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts

+export { NotebookContainer } from "./NotebookContainer";

frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx

-import PropTypes from "prop-types";
-import { useEffect, useState } from "react";
-
-import Notebook from "metabase/query_builder/components/notebook/Notebook";
-
-import { NotebookContainer } from "./QueryViewNotebook.styled";
-
-const delayBeforeNotRenderingNotebook = 10;
-
-const QueryViewNotebook = ({ isNotebookContainerOpen, ...props }) => {
-  const [shouldShowNotebook, setShouldShowNotebook] = useState(
-    isNotebookContainerOpen,
-  );
-
-  useEffect(() => {
-    isNotebookContainerOpen && setShouldShowNotebook(isNotebookContainerOpen);
-  }, [isNotebookContainerOpen]);
-
-  const handleTransitionEnd = event => {
-    if (event.propertyName === "opacity" && !isNotebookContainerOpen) {
-      setShouldShowNotebook(false);
-    }
-  };
-
-  return (
-    <NotebookContainer
-      isOpen={isNotebookContainerOpen}
-      transitionTime={delayBeforeNotRenderingNotebook}
-      onTransitionEnd={handleTransitionEnd}
-    >
-      {shouldShowNotebook && <Notebook {...props} />}
-    </NotebookContainer>
-  );
-};
-
-QueryViewNotebook.propTypes = {
-  isNotebookContainerOpen: PropTypes.bool.isRequired,
-};
-
-export default QueryViewNotebook;

frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx

-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-import { color } from "metabase/lib/colors";
-
-export const NotebookContainer = styled.div<{
-  transitionTime?: number;
-  isOpen?: boolean;
-}>`
-  background: white;
-  border-top: 1px solid ${color("border")};
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  overflow-y: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transform: translateY(-100%);
-  z-index: 2;
-
-  ${({ transitionTime }) =>
-    css`
-      transition: transform ${transitionTime}ms, opacity ${transitionTime}ms;
-    `}
-
-  ${({ isOpen }) =>
-    isOpen &&
-    css`
-      opacity: 1;
-      transform: translateY(0);
-    `}
-
-  @media (prefers-reduced-motion) {
-    // Must have some transition time, if tiny,
-    // so that it will trigger 'onTransitionEnd' in the component
-    transition: transform 10ms, opacity 10ms;
-  }
-`;

frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js

-export { default } from "./QueryViewNotebook";