[superset] branch master updated: fix(dashboard): Fix dashboard's left side being cut off (#22319)

[kg...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new b2d909f529 fix(dashboard): Fix dashboard's left side being cut off (#22319)
b2d909f529 is described below

commit b2d909f529bb18f87dac88e8f4eccf6bb88de693
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Mon Dec 5 12:03:23 2022 +0100

    fix(dashboard): Fix dashboard's left side being cut off (#22319)
---
 .../DashboardBuilder/DashboardBuilder.tsx          | 34 +++++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 4a318a42ab..d2ce6a2f1a 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -22,11 +22,11 @@ import React, {
   FC,
   useCallback,
   useEffect,
-  useState,
   useMemo,
   useRef,
+  useState,
 } from 'react';
-import { JsonObject, styled, css, t } from '@superset-ui/core';
+import { css, JsonObject, styled, t } from '@superset-ui/core';
 import { Global } from '@emotion/react';
 import { useDispatch, useSelector } from 'react-redux';
 import ErrorBoundary from 'src/components/ErrorBoundary';
@@ -57,8 +57,8 @@ import {
 } from 'src/dashboard/actions/dashboardLayout';
 import {
   DASHBOARD_GRID_ID,
-  DASHBOARD_ROOT_ID,
   DASHBOARD_ROOT_DEPTH,
+  DASHBOARD_ROOT_ID,
   DashboardStandaloneMode,
 } from 'src/dashboard/util/constants';
 import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
@@ -72,10 +72,10 @@ import {
   FILTER_BAR_HEADER_HEIGHT,
   FILTER_BAR_TABS_HEIGHT,
   MAIN_HEADER_HEIGHT,
-  OPEN_FILTER_BAR_WIDTH,
   OPEN_FILTER_BAR_MAX_WIDTH,
+  OPEN_FILTER_BAR_WIDTH,
 } from 'src/dashboard/constants';
-import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
+import { getRootLevelTabsComponent, shouldFocusTabs } from './utils';
 import DashboardContainer from './DashboardContainer';
 import { useNativeFilters } from './state';
 
@@ -168,6 +168,7 @@ const StyledDashboardContent = styled.div<{
   dashboardFiltersOpen: boolean;
   editMode: boolean;
   nativeFiltersEnabled: boolean;
+  filterBarOrientation: FilterBarOrientation;
 }>`
   display: flex;
   flex-direction: row;
@@ -193,8 +194,14 @@ const StyledDashboardContent = styled.div<{
       dashboardFiltersOpen,
       editMode,
       nativeFiltersEnabled,
+      filterBarOrientation,
     }) => {
-      if (!dashboardFiltersOpen && !editMode && nativeFiltersEnabled) {
+      if (
+        !dashboardFiltersOpen &&
+        !editMode &&
+        nativeFiltersEnabled &&
+        filterBarOrientation !== FilterBarOrientation.HORIZONTAL
+      ) {
         return 0;
       }
       return theme.gridUnit * 8;
@@ -335,9 +342,19 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const draggableStyle = useMemo(
     () => ({
       marginLeft:
-        dashboardFiltersOpen || editMode || !nativeFiltersEnabled ? 0 : -32,
+        dashboardFiltersOpen ||
+        editMode ||
+        !nativeFiltersEnabled ||
+        filterBarOrientation === FilterBarOrientation.HORIZONTAL
+          ? 0
+          : -32,
     }),
-    [dashboardFiltersOpen, editMode, nativeFiltersEnabled],
+    [
+      dashboardFiltersOpen,
+      editMode,
+      filterBarOrientation,
+      nativeFiltersEnabled,
+    ],
   );
 
   // If a new tab was added, update the directPathToChild to reflect it
@@ -505,6 +522,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
             dashboardFiltersOpen={dashboardFiltersOpen}
             editMode={editMode}
             nativeFiltersEnabled={nativeFiltersEnabled}
+            filterBarOrientation={filterBarOrientation}
           >
             {showDashboard ? (
               <DashboardContainer topLevelTabs={topLevelTabs} />