From 0532b7b1dc197f20f3bc5783b53a7c54de7af446 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Mon, 28 Oct 2024 11:23:39 +0200
Subject: [PATCH] Move view styled components to corresponding component
folders (#49140)
---
.../components/view/View/View.styled.tsx | 85 -------------------
.../components/view/View/{ => View}/View.jsx | 18 ++--
.../components/view/View/View/View.styled.tsx | 21 +++++
.../components/view/View/View/index.ts | 1 +
.../ViewHeaderContainer.jsx | 7 +-
.../ViewHeaderContainer.styled.tsx | 18 ++++
.../ViewMainContainer/ViewMainContainer.jsx | 12 +--
.../ViewMainContainer.styled.tsx | 32 +++++++
.../ViewNativeQueryEditor.jsx | 3 +-
.../ViewNativeQueryEditor.styled.tsx | 18 ++++
10 files changed, 112 insertions(+), 103 deletions(-)
delete mode 100644 frontend/src/metabase/query_builder/components/view/View/View.styled.tsx
rename frontend/src/metabase/query_builder/components/view/View/{ => View}/View.jsx (92%)
create mode 100644 frontend/src/metabase/query_builder/components/view/View/View/View.styled.tsx
create mode 100644 frontend/src/metabase/query_builder/components/view/View/View/index.ts
create mode 100644 frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.styled.tsx
create mode 100644 frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.styled.tsx
create mode 100644 frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.styled.tsx
diff --git a/frontend/src/metabase/query_builder/components/view/View/View.styled.tsx b/frontend/src/metabase/query_builder/components/view/View/View.styled.tsx
deleted file mode 100644
index c4d4978f2b5..00000000000
--- a/frontend/src/metabase/query_builder/components/view/View/View.styled.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-import DebouncedFrame from "metabase/components/DebouncedFrame";
-import { SyncedParametersList } from "metabase/query_builder/components/SyncedParametersList";
-import { breakpointMaxSmall } from "metabase/styled-components/theme/media-queries";
-
-import { ViewTitleHeader } from "../ViewHeader";
-
-export const QueryBuilderViewRoot = styled.div`
- display: flex;
- flex-direction: column;
- background-color: var(--mb-color-bg-white);
- height: 100%;
- position: relative;
-`;
-
-export const QueryBuilderContentContainer = styled.div`
- display: flex;
- flex: 1 0 auto;
- position: relative;
-
- ${breakpointMaxSmall} {
- justify-content: end;
- }
-`;
-
-export const QueryBuilderMain = styled.main<{ isSidebarOpen: boolean }>`
- display: flex;
- flex-direction: column;
- flex: 1 0 auto;
- flex-basis: 0;
-
- ${breakpointMaxSmall} {
- ${props =>
- props.isSidebarOpen &&
- css`
- display: none !important;
- `};
- position: relative;
- }
-`;
-
-/**
- * The height of the header for the query builder view.
- * Currently hard coded based on the observation from the dev tools.
- * It prevents the header from jumping when the notebook view is toggled.
- *
- * If we want to calculate this heaight based on the children of the header,
- * we have to take into account the size of the buttons being used, as well as
- * their line-height + font size. We should add the padding and the border to that.
- *
- * @link https://github.com/metabase/metabase/issues/40334
- */
-const headerHeight = "4rem";
-
-export const BorderedViewTitleHeader = styled(ViewTitleHeader)`
- border-bottom: 1px solid var(--mb-color-border);
- padding-top: 8px;
- padding-bottom: 8px;
- min-height: ${headerHeight};
-`;
-
-export const QueryBuilderViewHeaderContainer = styled.div`
- flex-shrink: 0;
- background-color: var(--mb-color-bg-white);
- position: relative;
- z-index: 3;
-`;
-
-export const NativeQueryEditorContainer = styled.div`
- margin-bottom: 1rem;
- border-bottom: 1px solid var(--mb-color-border);
- z-index: 2;
-`;
-
-export const StyledDebouncedFrame = styled(DebouncedFrame)`
- flex: 1 0 auto;
- flex-grow: 1;
-`;
-
-export const StyledSyncedParametersList = styled(SyncedParametersList)`
- margin-top: 1rem;
- margin-left: 1.5rem;
-`;
diff --git a/frontend/src/metabase/query_builder/components/view/View/View.jsx b/frontend/src/metabase/query_builder/components/view/View/View/View.jsx
similarity index 92%
rename from frontend/src/metabase/query_builder/components/view/View/View.jsx
rename to frontend/src/metabase/query_builder/components/view/View/View/View.jsx
index 2d77fc00a51..221f398bc9b 100644
--- a/frontend/src/metabase/query_builder/components/view/View/View.jsx
+++ b/frontend/src/metabase/query_builder/components/view/View/View/View.jsx
@@ -17,20 +17,20 @@ import {
rememberLastUsedDatabase,
setArchivedQuestion,
} from "metabase/query_builder/actions";
-import { ViewHeaderContainer } from "metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer";
-import { ViewLeftSidebarContainer } from "metabase/query_builder/components/view/View/ViewLeftSidebarContainer/ViewLeftSidebarContainer";
-import { ViewMainContainer } from "metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer";
-import { ViewRightSidebarContainer } from "metabase/query_builder/components/view/View/ViewRightSidebarContainer/ViewRightSidebarContainer";
import { SIDEBAR_SIZES } from "metabase/query_builder/constants";
import { MetricEditor } from "metabase/querying/metrics/components/MetricEditor";
import * as Lib from "metabase-lib";
-import DatasetEditor from "../../DatasetEditor";
-import { QueryModals } from "../../QueryModals";
-import { SavedQuestionIntroModal } from "../../SavedQuestionIntroModal";
-import ViewSidebar from "../ViewSidebar";
+import DatasetEditor from "../../../DatasetEditor";
+import { QueryModals } from "../../../QueryModals";
+import { SavedQuestionIntroModal } from "../../../SavedQuestionIntroModal";
+import ViewSidebar from "../../ViewSidebar";
+import { NotebookContainer } from "../NotebookContainer";
+import { ViewHeaderContainer } from "../ViewHeaderContainer";
+import { ViewLeftSidebarContainer } from "../ViewLeftSidebarContainer";
+import { ViewMainContainer } from "../ViewMainContainer";
+import { ViewRightSidebarContainer } from "../ViewRightSidebarContainer";
-import { NotebookContainer } from "./NotebookContainer";
import {
QueryBuilderContentContainer,
QueryBuilderViewRoot,
diff --git a/frontend/src/metabase/query_builder/components/view/View/View/View.styled.tsx b/frontend/src/metabase/query_builder/components/view/View/View/View.styled.tsx
new file mode 100644
index 00000000000..d14e9fea8b3
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/View/View.styled.tsx
@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+
+import { breakpointMaxSmall } from "metabase/styled-components/theme/media-queries";
+
+export const QueryBuilderViewRoot = styled.div`
+ display: flex;
+ flex-direction: column;
+ background-color: var(--mb-color-bg-white);
+ height: 100%;
+ position: relative;
+`;
+
+export const QueryBuilderContentContainer = styled.div`
+ display: flex;
+ flex: 1 0 auto;
+ position: relative;
+
+ ${breakpointMaxSmall} {
+ justify-content: end;
+ }
+`;
diff --git a/frontend/src/metabase/query_builder/components/view/View/View/index.ts b/frontend/src/metabase/query_builder/components/view/View/View/index.ts
new file mode 100644
index 00000000000..4c1d08c04b0
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/View/index.ts
@@ -0,0 +1 @@
+export * from "./View";
diff --git a/frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.jsx b/frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.jsx
index d3aaad00943..06d25288e91 100644
--- a/frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.jsx
+++ b/frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.jsx
@@ -2,12 +2,13 @@
import { ArchivedEntityBanner } from "metabase/archive/components/ArchivedEntityBanner";
import CS from "metabase/css/core/index.css";
import NewQuestionHeader from "metabase/query_builder/components/view/NewQuestionHeader";
+import { Transition } from "metabase/ui";
+import * as Lib from "metabase-lib";
+
import {
BorderedViewTitleHeader,
QueryBuilderViewHeaderContainer,
-} from "metabase/query_builder/components/view/View/View.styled";
-import { Transition } from "metabase/ui";
-import * as Lib from "metabase-lib";
+} from "./ViewHeaderContainer.styled";
const fadeIn = {
in: { opacity: 1 },
diff --git a/frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.styled.tsx b/frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.styled.tsx
new file mode 100644
index 00000000000..ae8ee4bcc4a
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.styled.tsx
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+
+import { ViewTitleHeader } from "metabase/query_builder/components/view/ViewHeader";
+
+const headerHeight = "4rem";
+
+export const BorderedViewTitleHeader = styled(ViewTitleHeader)`
+ border-bottom: 1px solid var(--mb-color-border);
+ padding-top: 8px;
+ padding-bottom: 8px;
+ min-height: ${headerHeight};
+`;
+export const QueryBuilderViewHeaderContainer = styled.div`
+ flex-shrink: 0;
+ background-color: var(--mb-color-bg-white);
+ position: relative;
+ z-index: 3;
+`;
diff --git a/frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.jsx b/frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.jsx
index 0b0f62f038c..9a587c3567b 100644
--- a/frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.jsx
+++ b/frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.jsx
@@ -1,15 +1,17 @@
/* eslint-disable react/prop-types */
import CS from "metabase/css/core/index.css";
import QueryVisualization from "metabase/query_builder/components/QueryVisualization";
+import { TimeseriesChrome } from "metabase/querying/filters/components/TimeseriesChrome";
+import * as Lib from "metabase-lib";
+
+import { ViewFooter } from "../../ViewFooter";
+import { ViewNativeQueryEditor } from "../ViewNativeQueryEditor";
+
import {
QueryBuilderMain,
StyledDebouncedFrame,
StyledSyncedParametersList,
-} from "metabase/query_builder/components/view/View/View.styled";
-import { ViewNativeQueryEditor } from "metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor";
-import { ViewFooter } from "metabase/query_builder/components/view/ViewFooter";
-import { TimeseriesChrome } from "metabase/querying/filters/components/TimeseriesChrome";
-import * as Lib from "metabase-lib";
+} from "./ViewMainContainer.styled";
export const ViewMainContainer = props => {
const {
diff --git a/frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.styled.tsx b/frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.styled.tsx
new file mode 100644
index 00000000000..390e18b7b00
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.styled.tsx
@@ -0,0 +1,32 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+import DebouncedFrame from "metabase/components/DebouncedFrame";
+import { SyncedParametersList } from "metabase/query_builder/components/SyncedParametersList";
+import { breakpointMaxSmall } from "metabase/styled-components/theme";
+
+export const QueryBuilderMain = styled.main<{
+ isSidebarOpen: boolean;
+}>`
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 auto;
+ flex-basis: 0;
+
+ ${breakpointMaxSmall} {
+ ${props =>
+ props.isSidebarOpen &&
+ css`
+ display: none !important;
+ `};
+ position: relative;
+ }
+`;
+export const StyledDebouncedFrame = styled(DebouncedFrame)`
+ flex: 1 0 auto;
+ flex-grow: 1;
+`;
+export const StyledSyncedParametersList = styled(SyncedParametersList)`
+ margin-top: 1rem;
+ margin-left: 1.5rem;
+`;
diff --git a/frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.jsx b/frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.jsx
index 138daae3e6d..d74e843cca3 100644
--- a/frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.jsx
+++ b/frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.jsx
@@ -1,8 +1,9 @@
/* eslint-disable react/prop-types */
import NativeQueryEditor from "metabase/query_builder/components/NativeQueryEditor";
-import { NativeQueryEditorContainer } from "metabase/query_builder/components/view/View/View.styled";
import * as Lib from "metabase-lib";
+import { NativeQueryEditorContainer } from "./ViewNativeQueryEditor.styled";
+
export const ViewNativeQueryEditor = props => {
const {
question,
diff --git a/frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.styled.tsx b/frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.styled.tsx
new file mode 100644
index 00000000000..da8f69d98e9
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.styled.tsx
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+
+/**
+ * The height of the header for the query builder view.
+ * Currently hard coded based on the observation from the dev tools.
+ * It prevents the header from jumping when the notebook view is toggled.
+ *
+ * If we want to calculate this heaight based on the children of the header,
+ * we have to take into account the size of the buttons being used, as well as
+ * their line-height + font size. We should add the padding and the border to that.
+ *
+ * @link https://github.com/metabase/metabase/issues/40334
+ */
+export const NativeQueryEditorContainer = styled.div`
+ margin-bottom: 1rem;
+ border-bottom: 1px solid var(--mb-color-border);
+ z-index: 2;
+`;
--
GitLab