Move view styled components to corresponding component folders (#49140)

frontend/src/metabase/query_builder/components/view/View/View.jsx → 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,

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

+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;
+  }
+`;

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

+export * from "./View";

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

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

+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;
+`;

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

 /* 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 {

frontend/src/metabase/query_builder/components/view/View/View.styled.tsx → frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.styled.tsx

@@ -3,29 +3,11 @@ 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 { breakpointMaxSmall } from "metabase/styled-components/theme";
 
-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 }>`
+export const QueryBuilderMain = styled.main<{
+  isSidebarOpen: boolean;
+}>`
   display: flex;
   flex-direction: column;
   flex: 1 0 auto;
@@ -40,45 +22,10 @@ export const QueryBuilderMain = styled.main<{ isSidebarOpen: boolean }>`
     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;

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

 /* 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,

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

+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;
+`;