feat(dataset): Resizable left column

apache · Jul 28, 2023 · 4f43aea · 4f43aea
1 parent e2d5046
commit 4f43aea
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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
@@ -25,22 +25,22 @@ export const StyledLayoutWrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.grayscale.light5};
 `;
 
-const Column = styled.div`
+const Column = styled.div<{ width?: number }>`
   width: 100%;
   height: 100%;
   flex-direction: column;
 `;
 
 export const LeftColumn = styled(Column)`
-  width: ${({ theme }) => theme.gridUnit * 80}px;
+  width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
   height: auto;
 `;
 
 export const RightColumn = styled(Column)`
+  width: auto;
   height: auto;
   display: flex;
-  flex: 1 0 auto;
-  width: calc(100% - ${({ theme }) => theme.gridUnit * 80}px);
+  flex: 1 1 auto;
 `;
 
 const Row = styled.div`
@@ -52,6 +52,7 @@ const Row = styled.div`
 
 export const OuterRow = styled(Row)`
   flex: 1 0 auto;
+  position: relative;
 `;
 
 export const PanelRow = styled(Row)`
@@ -87,7 +88,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};
   `}