[superset] branch master updated: fix(dataset): resizable dataset layout left column (#24829)

[ju...@apache.org]

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

justinpark 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 6ff7fae0b0 fix(dataset): resizable dataset layout left column (#24829)
6ff7fae0b0 is described below

commit 6ff7fae0b006f7ec7d8a04011b0d46506ea139c6
Author: JUST.in DO IT <ju...@airbnb.com>
AuthorDate: Thu Aug 3 09:34:33 2023 -0700

    fix(dataset): resizable dataset layout left column (#24829)
---
 .../datasets/AddDataset/LeftPanel/index.tsx         |  1 -
 .../src/features/datasets/DatasetLayout/index.tsx   | 20 +++++++++++++++++---
 superset-frontend/src/features/datasets/styles.ts   | 21 ++++++++-------------
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
index 715bf2deee..1be10f4a05 100644
--- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
@@ -37,7 +37,6 @@ interface LeftPanelProps {
 
 const LeftPanelStyle = styled.div`
   ${({ theme }) => `
-    max-width: ${theme.gridUnit * 87.5}px;
     padding: ${theme.gridUnit * 4}px;
     height: 100%;
     background-color: ${theme.colors.grayscale.light5};
diff --git a/superset-frontend/src/features/datasets/DatasetLayout/index.tsx b/superset-frontend/src/features/datasets/DatasetLayout/index.tsx
index d264fab061..ccf05aede8 100644
--- a/superset-frontend/src/features/datasets/DatasetLayout/index.tsx
+++ b/superset-frontend/src/features/datasets/DatasetLayout/index.tsx
@@ -17,6 +17,9 @@
  * under the License.
  */
 import React, { ReactElement, JSXElementConstructor } from 'react';
+import { useTheme } from '@superset-ui/core';
+import ResizableSidebar from 'src/components/ResizableSidebar';
+
 import {
   StyledLayoutWrapper,
   LeftColumn,
@@ -46,14 +49,25 @@ export default function DatasetLayout({
   rightPanel,
   footer,
 }: DatasetLayoutProps) {
+  const theme = useTheme();
+
   return (
     <StyledLayoutWrapper data-test="dataset-layout-wrapper">
       {header && <StyledLayoutHeader>{header}</StyledLayoutHeader>}
       <OuterRow>
         {leftPanel && (
-          <LeftColumn>
-            <StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
-          </LeftColumn>
+          <ResizableSidebar
+            id="dataset"
+            initialWidth={theme.gridUnit * 80}
+            minWidth={theme.gridUnit * 80}
+            enable
+          >
+            {adjustedWidth => (
+              <LeftColumn width={adjustedWidth}>
+                <StyledLayoutLeftPanel>{leftPanel}</StyledLayoutLeftPanel>
+              </LeftColumn>
+            )}
+          </ResizableSidebar>
         )}
         <RightColumn>
           <PanelRow>
diff --git a/superset-frontend/src/features/datasets/styles.ts b/superset-frontend/src/features/datasets/styles.ts
index 268b9e273e..728aa12ae4 100644
--- a/superset-frontend/src/features/datasets/styles.ts
+++ b/superset-frontend/src/features/datasets/styles.ts
@@ -25,22 +25,17 @@ export const StyledLayoutWrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.grayscale.light5};
 `;
 
-const Column = styled.div`
-  width: 100%;
-  height: 100%;
+export const LeftColumn = styled.div<{ width?: number }>`
+  width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
+  max-width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
   flex-direction: column;
+  flex: 1 0 auto;
 `;
 
-export const LeftColumn = styled(Column)`
-  width: ${({ theme }) => theme.gridUnit * 80}px;
-  height: auto;
-`;
-
-export const RightColumn = styled(Column)`
-  height: auto;
+export const RightColumn = styled.div`
   display: flex;
-  flex: 1 0 auto;
-  width: calc(100% - ${({ theme }) => theme.gridUnit * 80}px);
+  flex-direction: column;
+  flex-grow: 1;
 `;
 
 const Row = styled.div`
@@ -52,6 +47,7 @@ const Row = styled.div`
 
 export const OuterRow = styled(Row)`
   flex: 1 0 auto;
+  position: relative;
 `;
 
 export const PanelRow = styled(Row)`
@@ -87,7 +83,6 @@ export const StyledCreateDatasetTitle = styled.div`
 
 export const StyledLayoutLeftPanel = styled.div`
   ${({ theme }) => `
-  width: ${theme.gridUnit * 80}px;
   height: 100%;
   border-right: 1px solid ${theme.colors.grayscale.light2};
   `}