From 2ad88d074b615a57b8dbdf2497a626cfc2df91a2 Mon Sep 17 00:00:00 2001
From: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>
Date: Wed, 20 Mar 2024 10:40:06 +0100
Subject: [PATCH] Rename `QueryViewNotebook` to `NotebookContainer` (#40316)
* 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`
---
.../query_builder/components/view/View.jsx | 6 +--
.../NotebookContainer/NotebookContainer.tsx | 52 +++++++++++++++++++
.../view/View/NotebookContainer/index.ts | 1 +
.../QueryViewNotebook/QueryViewNotebook.jsx | 40 --------------
.../QueryViewNotebook.styled.tsx | 39 --------------
.../view/View/QueryViewNotebook/index.js | 1 -
6 files changed, 56 insertions(+), 83 deletions(-)
create mode 100644 frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
create mode 100644 frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts
delete mode 100644 frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx
delete mode 100644 frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx
delete mode 100644 frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js
diff --git a/frontend/src/metabase/query_builder/components/view/View.jsx b/frontend/src/metabase/query_builder/components/view/View.jsx
index c8f579e0176..a307e37990f 100644
--- a/frontend/src/metabase/query_builder/components/view/View.jsx
+++ b/frontend/src/metabase/query_builder/components/view/View.jsx
@@ -25,7 +25,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,
@@ -384,8 +384,8 @@ class View extends Component {
{isHeaderVisible && this.renderHeader()}
<QueryBuilderContentContainer>
{!isNative && (
- <QueryViewNotebook
- isNotebookContainerOpen={isNotebookContainerOpen}
+ <NotebookContainer
+ isOpen={isNotebookContainerOpen}
{...this.props}
/>
)}
diff --git a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
new file mode 100644
index 00000000000..dbf4989727b
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
@@ -0,0 +1,52 @@
+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>
+ );
+};
diff --git a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts
new file mode 100644
index 00000000000..902bdd5dd72
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts
@@ -0,0 +1 @@
+export { NotebookContainer } from "./NotebookContainer";
diff --git a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx b/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx
deleted file mode 100644
index 208b481656f..00000000000
--- a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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;
diff --git a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx b/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx
deleted file mode 100644
index 557512fb69e..00000000000
--- a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-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;
- }
-`;
diff --git a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js b/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js
deleted file mode 100644
index a64be44a922..00000000000
--- a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./QueryViewNotebook";
--
GitLab