diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx index 55d811f68742..d61bde28b314 100644 --- a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx +++ b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx @@ -19,11 +19,9 @@ /* eslint-env browser */ import tinycolor from 'tinycolor2'; import Tabs from '@superset-ui/core/components/Tabs'; -import { t, css, SupersetTheme, useTheme } from '@superset-ui/core'; -import { useSelector } from 'react-redux'; +import { t, css, SupersetTheme } from '@superset-ui/core'; import SliceAdder from 'src/dashboard/containers/SliceAdder'; import dashboardComponents from 'src/visualizations/presets/dashboardComponents'; -import { useMemo } from 'react'; import NewColumn from '../gridComponents/new/NewColumn'; import NewDivider from '../gridComponents/new/NewDivider'; import NewHeader from '../gridComponents/new/NewHeader'; @@ -39,98 +37,83 @@ const TABS_KEYS = { LAYOUT_ELEMENTS: 'LAYOUT_ELEMENTS', }; -const BuilderComponentPane = ({ topOffset = 0 }) => { - const theme = useTheme(); - const nativeFiltersBarOpen = useSelector( - (state: any) => state.dashboardState.nativeFiltersBarOpen ?? false, - ); - - const tabBarStyle = useMemo( - () => ({ - paddingLeft: nativeFiltersBarOpen ? 0 : theme.sizeUnit * 4, - }), - [nativeFiltersBarOpen, theme.sizeUnit], - ); - - return ( +const BuilderComponentPane = ({ topOffset = 0 }) => ( +
css` + position: absolute; + height: 100%; width: ${BUILDER_PANE_WIDTH}px; + box-shadow: -${theme.sizeUnit}px 0 ${theme.sizeUnit}px 0 + ${tinycolor(theme.colorBorder).setAlpha(0.1).toRgbString()}; + background-color: ${theme.colorBgBase}; `} > -
css` - position: absolute; + line-height: inherit; + margin-top: ${theme.sizeUnit * 2}px; height: 100%; - width: ${BUILDER_PANE_WIDTH}px; - box-shadow: -4px 0 4px 0 - ${tinycolor(theme.colorBorder).setAlpha(0.1).toRgbString()}; - background-color: ${theme.colorBgBase}; - `} - > - css` - line-height: inherit; - margin-top: ${theme.sizeUnit * 2}px; - height: 100%; - & .ant-tabs-content-holder { + & .ant-tabs-content-holder { + height: 100%; + & .ant-tabs-content { height: 100%; - & .ant-tabs-content { - height: 100%; - } } - `} - items={[ - { - key: TABS_KEYS.CHARTS, - label: t('Charts'), - children: ( -
- -
- ), - }, - { - key: TABS_KEYS.LAYOUT_ELEMENTS, - label: t('Layout elements'), - children: ( - <> - - - - - - - {dashboardComponents - .getAll() - .map(({ key: componentKey, metadata }) => ( - - ))} - - ), - }, - ]} - /> -
+ } + `} + items={[ + { + key: TABS_KEYS.CHARTS, + label: t('Charts'), + children: ( +
+ +
+ ), + }, + { + key: TABS_KEYS.LAYOUT_ELEMENTS, + label: t('Layout elements'), + children: ( + <> + + + + + + + {dashboardComponents + .getAll() + .map(({ key: componentKey, metadata }) => ( + + ))} + + ), + }, + ]} + />
- ); -}; +
+); export default BuilderComponentPane;