fix(dashboard): Remove bar at bottom of dashboard edit sidebar (#21807)

apache · Oct 27, 2022 · 95b4323 · 95b4323
1 parent 2d5ee4f
commit 95b4323
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 308 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -185,7 +185,6 @@
     "react-select": "^3.1.0",
     "react-sortable-hoc": "^1.11.0",
     "react-split": "^2.0.9",
-    "react-sticky": "^6.0.3",
     "react-syntax-highlighter": "^15.4.5",
     "react-table": "^7.6.3",
     "react-transition-group": "^2.5.3",
@@ -258,7 +257,6 @@
     "@types/react-redux": "^7.1.10",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-select": "^3.0.19",
-    "@types/react-sticky": "^6.0.3",
     "@types/react-table": "^7.0.19",
     "@types/react-ultimate-pagination": "^1.2.0",
     "@types/react-virtualized": "^9.21.10",

diff --git a/...rset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx b/...rset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx
@@ -24,7 +24,7 @@ import BuilderComponentPane from '.';
 jest.mock('src/dashboard/containers/SliceAdder');
 
 test('BuilderComponentPane has correct tabs in correct order', () => {
-  render(<BuilderComponentPane isStandalone={false} topOffset={115} />);
+  render(<BuilderComponentPane topOffset={115} />);
   const tabs = screen.getAllByRole('tab');
   expect(tabs).toHaveLength(2);
   expect(tabs[0]).toHaveTextContent('Charts');

diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx
@@ -18,12 +18,9 @@
  */
 /* eslint-env browser */
 import React from 'react';
+import { rgba } from 'emotion-rgba';
 import Tabs from 'src/components/Tabs';
-import { StickyContainer, Sticky } from 'react-sticky';
-import { ParentSize } from '@vx/responsive';
-
-import { t, styled } from '@superset-ui/core';
-
+import { t, css, SupersetTheme } from '@superset-ui/core';
 import SliceAdder from 'src/dashboard/containers/SliceAdder';
 import dashboardComponents from 'src/visualizations/presets/dashboardComponents';
 import NewColumn from '../gridComponents/new/NewColumn';
@@ -34,99 +31,72 @@ import NewTabs from '../gridComponents/new/NewTabs';
 import NewMarkdown from '../gridComponents/new/NewMarkdown';
 import NewDynamicComponent from '../gridComponents/new/NewDynamicComponent';
 
-export interface BCPProps {
-  isStandalone: boolean;
-  topOffset: number;
-}
-
-const SUPERSET_HEADER_HEIGHT = 59;
-const SIDEPANE_ADJUST_OFFSET = 4;
-const TOP_PANEL_OFFSET = 210;
-
-const BuilderComponentPaneTabs = styled(Tabs)`
-  line-height: inherit;
-  margin-top: ${({ theme }) => theme.gridUnit * 2}px;
-`;
-
-const DashboardBuilderSidepane = styled.div<{
-  topOffset: number;
-}>`
-  height: calc(100% - ${TOP_PANEL_OFFSET}px);
-  position: fixed;
-  right: 0;
-  top: 0;
-`;
+const BUILDER_PANE_WIDTH = 374;
 
-const BuilderComponentPane: React.FC<BCPProps> = ({
-  isStandalone,
-  topOffset = 0,
-}) => (
-  <DashboardBuilderSidepane
-    topOffset={topOffset}
-    className="dashboard-builder-sidepane"
+const BuilderComponentPane = ({ topOffset = 0 }) => (
+  <div
     data-test="dashboard-builder-sidepane"
+    css={css`
+      position: sticky;
+      right: 0;
+      top: ${topOffset}px;
+      height: calc(100vh - ${topOffset}px);
+      width: ${BUILDER_PANE_WIDTH}px;
+    `}
   >
-    <ParentSize>
-      {({ height }) => (
-        <StickyContainer>
-          <Sticky topOffset={-topOffset} bottomOffset={Infinity}>
-            {({ style, isSticky }: { style: any; isSticky: boolean }) => {
-              const { pageYOffset } = window;
-              const hasHeader =
-                pageYOffset < SUPERSET_HEADER_HEIGHT && !isStandalone;
-              const withHeaderTopOffset =
-                topOffset +
-                (SUPERSET_HEADER_HEIGHT - pageYOffset - SIDEPANE_ADJUST_OFFSET);
+    <div
+      css={(theme: SupersetTheme) => css`
+        position: absolute;
+        height: 100%;
+        width: ${BUILDER_PANE_WIDTH}px;
+        box-shadow: -4px 0 4px 0 ${rgba(theme.colors.grayscale.dark2, 0.1)};
+        background-color: ${theme.colors.grayscale.light5};
+      `}
+    >
+      <Tabs
+        data-test="dashboard-builder-component-pane-tabs-navigation"
+        id="tabs"
+        css={(theme: SupersetTheme) => css`
+          line-height: inherit;
+          margin-top: ${theme.gridUnit * 2}px;
+          height: 100%;
 
-              return (
-                <div
-                  className="viewport"
-                  style={{
-                    ...style,
-                    top: hasHeader ? withHeaderTopOffset : topOffset,
-                  }}
-                >
-                  <BuilderComponentPaneTabs
-                    id="tabs"
-                    className="tabs-components"
-                    data-test="dashboard-builder-component-pane-tabs-navigation"
-                  >
-                    <Tabs.TabPane
-                      key={1}
-                      tab={t('Charts')}
-                      className="tab-charts"
-                    >
-                      <SliceAdder
-                        height={
-                          height + (isSticky ? SUPERSET_HEADER_HEIGHT : 0)
-                        }
-                      />
-                    </Tabs.TabPane>
-                    <Tabs.TabPane key={2} tab={t('Layout elements')}>
-                      <NewTabs />
-                      <NewRow />
-                      <NewColumn />
-                      <NewHeader />
-                      <NewMarkdown />
-                      <NewDivider />
-                      {dashboardComponents
-                        .getAll()
-                        .map(({ key: componentKey, metadata }) => (
-                          <NewDynamicComponent
-                            metadata={metadata}
-                            componentKey={componentKey}
-                          />
-                        ))}
-                    </Tabs.TabPane>
-                  </BuilderComponentPaneTabs>
-                </div>
-              );
-            }}
-          </Sticky>
-        </StickyContainer>
-      )}
-    </ParentSize>
-  </DashboardBuilderSidepane>
+          & .ant-tabs-content-holder {
+            height: 100%;
+            & .ant-tabs-content {
+              height: 100%;
+            }
+          }
+        `}
+      >
+        <Tabs.TabPane
+          key={1}
+          tab={t('Charts')}
+          css={css`
+            height: 100%;
+          `}
+        >
+          <SliceAdder />
+        </Tabs.TabPane>
+        <Tabs.TabPane key={2} tab={t('Layout elements')}>
+          <NewTabs />
+          <NewRow />
+          <NewColumn />
+          <NewHeader />
+          <NewMarkdown />
+          <NewDivider />
+          {dashboardComponents
+            .getAll()
+            .map(({ key: componentKey, metadata }) => (
+              <NewDynamicComponent
+                metadata={metadata}
+                componentKey={componentKey}
+              />
+            ))}
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+  </div>
 );
 
 export default BuilderComponentPane;
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -487,12 +487,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
             ) : (
               <Loading />
             )}
-            {editMode && (
-              <BuilderComponentPane
-                isStandalone={!!standaloneMode}
-                topOffset={barTopOffset}
-              />
-            )}
+            {editMode && <BuilderComponentPane topOffset={barTopOffset} />}
           </StyledDashboardContent>
         </div>
       </StyledContent>