This is an automated email from the ASF dual-hosted git repository.
michaelsmolina 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 fd4bd1e chore: Moves components out of the commons folder (#18931)
fd4bd1e is described below
commit fd4bd1edbc306d930d186f1650e809b7f15981d0
Author: Michael S. Molina <[email protected]>
AuthorDate: Fri Feb 25 10:17:32 2022 -0300
chore: Moves components out of the commons folder (#18931)
* refactor: Moves components out of the commons folder
* Fixes tests
---
.../components/RunQueryActionButton/index.tsx | 2 +-
.../SaveDatasetModal/SaveDatasetModal.test.tsx | 3 +-
.../SqlLab/components/SaveDatasetModal/index.tsx | 3 +-
.../src/SqlLab/components/SaveQuery/index.tsx | 3 +-
.../components/ScheduleQueryButton/index.tsx | 3 +-
.../src/SqlLab/components/SqlEditor/index.jsx | 21 +--
.../SqlLab/components/TabbedSqlEditors/index.jsx | 2 +-
superset-frontend/src/common/components/index.tsx | 195 ---------------------
.../components/CronPicker/CronPicker.stories.tsx | 3 +-
.../Datasource/ChangeDatasourceModal.tsx | 3 +-
.../src/components/DeleteModal/index.tsx | 2 +-
.../src/components/Dropdown/Dropdown.stories.tsx | 2 +-
.../src/components/Dropdown/index.tsx | 17 +-
.../DropdownButton/DropdownButton.stories.tsx | 2 +-
.../Input/index.tsx} | 25 +--
.../ListViewCard/ListViewCard.stories.tsx | 3 +-
.../src/components/ListViewCard/index.tsx | 12 +-
.../components => components/Menu}/index.tsx | 104 +----------
.../src/components/PopoverDropdown/index.tsx | 3 +-
.../HeaderReportActionsDropdown/index.tsx | 3 +-
.../src/dashboard/components/CssEditor/index.jsx | 3 +-
.../Header/HeaderActionsDropdown/index.jsx | 3 +-
.../dashboard/components/PropertiesModal/index.tsx | 3 +-
.../src/dashboard/components/SaveModal.tsx | 3 +-
.../src/dashboard/components/SliceAdder.jsx | 2 +-
.../SliceHeaderControls.test.tsx | 4 +-
.../components/SliceHeaderControls/index.tsx | 3 +-
.../menu/ShareMenuItems/ShareMenuItems.test.tsx | 2 +-
.../components/menu/ShareMenuItems/index.tsx | 2 +-
.../FilterBar/FilterSets/FilterSetUnit.tsx | 3 +-
.../FiltersConfigModal/DividerConfigForm.tsx | 2 +-
.../FiltersConfigModal/FilterTitlePane.tsx | 3 +-
.../FiltersConfigForm/FiltersConfigForm.tsx | 2 +-
.../FiltersConfigModal/NativeFiltersModal.test.tsx | 3 +-
.../explore/components/DataTableControl/index.tsx | 3 +-
.../explore/components/DatasourcePanel/index.tsx | 2 +-
.../ExploreAdditionalActionsMenu.test.jsx | 3 +-
.../ExploreAdditionalActionsMenu/index.jsx | 3 +-
.../components/ExportToCSVDropdown/index.tsx | 3 +-
.../explore/components/PropertiesModal/index.tsx | 3 +-
.../src/explore/components/SaveModal.tsx | 2 +-
.../explore/components/controls/BoundsControl.tsx | 2 +-
.../FormattingPopoverContent.tsx | 3 +-
.../DatasourceControl/DatasourceControl.test.jsx | 2 +-
.../controls/DatasourceControl/index.jsx | 3 +-
.../DateFilterControl/components/AdvancedFrame.tsx | 2 +-
.../DateFilterControl/components/CustomFrame.tsx | 3 +-
.../DndColumnSelectPopoverTitle.jsx | 2 +-
.../index.tsx | 2 +-
.../explore/components/controls/HiddenControl.tsx | 2 +-
.../MetricControl/AdhocMetricEditPopoverTitle.jsx | 2 +-
.../components/controls/TextAreaControl.jsx | 2 +-
.../components/controls/TextAreaControl.test.jsx | 2 +-
.../components/controls/TextControl/index.tsx | 2 +-
.../controls/TimeSeriesColumnControl/index.jsx | 3 +-
.../controls/VizTypeControl/VizTypeGallery.tsx | 3 +-
.../components/AlertReportCronScheduler.test.tsx | 3 +-
.../alert/components/AlertReportCronScheduler.tsx | 3 +-
.../src/views/CRUD/chart/ChartCard.tsx | 3 +-
.../src/views/CRUD/dashboard/DashboardCard.tsx | 3 +-
.../src/views/CRUD/welcome/SavedQueries.tsx | 3 +-
.../src/views/components/LanguagePicker.test.tsx | 2 +-
.../src/views/components/LanguagePicker.tsx | 2 +-
superset-frontend/src/views/components/Menu.tsx | 9 +-
.../src/views/components/MenuRight.tsx | 2 +-
superset-frontend/src/views/components/SubMenu.tsx | 3 +-
66 files changed, 148 insertions(+), 388 deletions(-)
diff --git
a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
index 0769043..398ec30 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -19,7 +19,7 @@
import React from 'react';
import { t, styled, supersetTheme } from '@superset-ui/core';
-import { Menu } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import Button, { ButtonProps } from 'src/components/Button';
import Icons from 'src/components/Icons';
import {
diff --git
a/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
b/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
index 9fbb757..2bd376e 100644
---
a/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
+++
b/superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx
@@ -19,7 +19,8 @@
import React from 'react';
import { shallow } from 'enzyme';
import { Radio } from 'src/components/Radio';
-import { AutoComplete, Input } from 'src/common/components';
+import { AutoComplete } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
describe('SaveDatasetModal', () => {
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
index f1e92a7..76d272a 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
@@ -20,7 +20,8 @@
import React, { FunctionComponent } from 'react';
import { AutoCompleteProps } from 'antd/lib/auto-complete';
import { Radio } from 'src/components/Radio';
-import { AutoComplete, Input } from 'src/common/components';
+import { AutoComplete } from 'src/common/components';
+import { Input } from 'src/components/Input';
import StyledModal from 'src/components/Modal';
import Button from 'src/components/Button';
import { styled, t } from '@superset-ui/core';
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
index 99cda81..cc00fc5 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
@@ -17,7 +17,8 @@
* under the License.
*/
import React, { useState, useEffect } from 'react';
-import { Row, Col, Input, TextArea } from 'src/common/components';
+import { Row, Col } from 'src/common/components';
+import { Input, TextArea } from 'src/components/Input';
import { t, styled } from '@superset-ui/core';
import Button from 'src/components/Button';
import { Form, FormItem } from 'src/components/Form';
diff --git
a/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
b/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
index 6f9bf9b..6ad1680 100644
--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
@@ -18,7 +18,8 @@
*/
import React, { FunctionComponent, useState } from 'react';
import SchemaForm, { FormProps, FormValidation } from 'react-jsonschema-form';
-import { Row, Col, Input, TextArea } from 'src/common/components';
+import { Row, Col } from 'src/common/components';
+import { Input, TextArea } from 'src/components/Input';
import { t, styled } from '@superset-ui/core';
import * as chrono from 'chrono-node';
import ModalTrigger from 'src/components/ModalTrigger';
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 22711fb..cbfbb41 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -31,13 +31,9 @@ import StyledModal from 'src/components/Modal';
import Mousetrap from 'mousetrap';
import Button from 'src/components/Button';
import Timer from 'src/components/Timer';
-import {
- Dropdown,
- Menu as AntdMenu,
- Menu,
- Switch,
- Input,
-} from 'src/common/components';
+import { Dropdown, Switch } from 'src/common/components';
+import { Input } from 'src/components/Input';
+import { Menu } from 'src/components/Menu';
import Icons from 'src/components/Icons';
import { detectOS } from 'src/utils/common';
import {
@@ -578,19 +574,16 @@ class SqlEditor extends React.PureComponent {
LIMIT_DROPDOWN.push(maxRow);
return (
- <AntdMenu>
+ <Menu>
{[...new Set(LIMIT_DROPDOWN)].map(limit => (
- <AntdMenu.Item
- key={`${limit}`}
- onClick={() => this.setQueryLimit(limit)}
- >
+ <Menu.Item key={`${limit}`} onClick={() =>
this.setQueryLimit(limit)}>
{/* // eslint-disable-line no-use-before-define */}
<a role="button" styling="link">
{this.convertToNumWithSpaces(limit)}
</a>{' '}
- </AntdMenu.Item>
+ </Menu.Item>
))}
- </AntdMenu>
+ </Menu>
);
}
diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
index 252051b..cf2867e 100644
--- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
+++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
@@ -20,7 +20,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Dropdown } from 'src/components/Dropdown';
import { EditableTabs } from 'src/components/Tabs';
-import { Menu } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import URI from 'urijs';
diff --git a/superset-frontend/src/common/components/index.tsx
b/superset-frontend/src/common/components/index.tsx
index e03194c..7e5e4fd 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/common/components/index.tsx
@@ -16,16 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { RefObject } from 'react';
-import { styled } from '@superset-ui/core';
-import {
- Dropdown,
- Menu as AntdMenu,
- Input as AntdInput,
- InputNumber as AntdInputNumber,
- Skeleton,
-} from 'antd';
-import { DropDownProps } from 'antd/lib/dropdown';
/*
Antd is re-exported from here so we can override components with Emotion as
needed.
@@ -70,193 +60,8 @@ export { default as List } from 'antd/lib/list';
export type { AlertProps } from 'antd/lib/alert';
export type { SelectProps } from 'antd/lib/select';
export type { ListItemProps } from 'antd/lib/list';
-
export { default as Collapse } from 'src/components/Collapse';
export { default as Badge } from 'src/components/Badge';
export { default as Card } from 'src/components/Card';
export { default as Progress } from 'src/components/ProgressBar';
-
-export const MenuItem = styled(AntdMenu.Item)`
- > a {
- text-decoration: none;
- }
-
- &.ant-menu-item {
- height: ${({ theme }) => theme.gridUnit * 7}px;
- line-height: ${({ theme }) => theme.gridUnit * 7}px;
- a {
- border-bottom: none;
- transition: background-color ${({ theme }) => theme.transitionTiming}s;
- &:after {
- content: '';
- position: absolute;
- bottom: -3px;
- left: 50%;
- width: 0;
- height: 3px;
- opacity: 0;
- transform: translateX(-50%);
- transition: all ${({ theme }) => theme.transitionTiming}s;
- background-color: ${({ theme }) => theme.colors.primary.base};
- }
- &:focus {
- border-bottom: none;
- background-color: transparent;
- @media (max-width: 767px) {
- background-color: ${({ theme }) => theme.colors.primary.light5};
- }
- }
- }
- }
-
- &.ant-menu-item,
- &.ant-dropdown-menu-item {
- span[role='button'] {
- display: inline-block;
- width: 100%;
- }
- transition-duration: 0s;
- }
-`;
-
-export const StyledNav = styled(AntdMenu)`
- line-height: 51px;
- border: none;
-
- & > .ant-menu-item,
- & > .ant-menu-submenu {
- vertical-align: inherit;
- &:hover {
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- }
- }
-
- &:not(.ant-menu-dark) > .ant-menu-submenu,
- &:not(.ant-menu-dark) > .ant-menu-item {
- &:hover {
- border-bottom: none;
- }
- }
-
- &:not(.ant-menu-dark) > .ant-menu-submenu,
- &:not(.ant-menu-dark) > .ant-menu-item {
- margin: 0px;
- }
-
- & > .ant-menu-item > a {
- padding: ${({ theme }) => theme.gridUnit * 4}px;
- }
-`;
-
-export const StyledSubMenu = styled(AntdMenu.SubMenu)`
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- border-bottom: none;
- .ant-menu-submenu-open,
- .ant-menu-submenu-active {
- background-color: ${({ theme }) => theme.colors.primary.light5};
- .ant-menu-submenu-title {
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- background-color: ${({ theme }) => theme.colors.primary.light5};
- border-bottom: none;
- margin: 0;
- &:after {
- opacity: 1;
- width: calc(100% - 1);
- }
- }
- }
- .ant-menu-submenu-title {
- position: relative;
- top: ${({ theme }) => -theme.gridUnit - 3}px;
- &:after {
- content: '';
- position: absolute;
- bottom: -3px;
- left: 50%;
- width: 0;
- height: 3px;
- opacity: 0;
- transform: translateX(-50%);
- transition: all ${({ theme }) => theme.transitionTiming}s;
- background-color: ${({ theme }) => theme.colors.primary.base};
- }
- }
- .ant-menu-submenu-arrow {
- top: 67%;
- }
- & > .ant-menu-submenu-title {
- padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
- ${({ theme }) => theme.gridUnit * 3}px !important;
- span[role='img'] {
- position: absolute;
- right: ${({ theme }) => -theme.gridUnit + -2}px;
- top: ${({ theme }) => theme.gridUnit * 5.25}px;
- svg {
- font-size: ${({ theme }) => theme.gridUnit * 6}px;
- color: ${({ theme }) => theme.colors.grayscale.base};
- }
- }
- & > span {
- position: relative;
- top: 7px;
- }
- &:hover {
- color: ${({ theme }) => theme.colors.primary.base};
- }
- }
-`;
-
-export declare type MenuMode =
- | 'vertical'
- | 'vertical-left'
- | 'vertical-right'
- | 'horizontal'
- | 'inline';
-export const Menu = Object.assign(AntdMenu, {
- Item: MenuItem,
-});
-
-export const MainNav = Object.assign(StyledNav, {
- Item: MenuItem,
- SubMenu: StyledSubMenu,
- Divider: AntdMenu.Divider,
- ItemGroup: AntdMenu.ItemGroup,
-});
-
-interface ExtendedDropDownProps extends DropDownProps {
- ref?: RefObject<HTMLDivElement>;
-}
-
-export const Input = styled(AntdInput)`
- border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
- border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
-
-export const InputNumber = styled(AntdInputNumber)`
- border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
- border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
-
-export const TextArea = styled(AntdInput.TextArea)`
- border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
- border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
-
-// @z-index-below-dashboard-header (100) - 1 = 99
-export const NoAnimationDropdown = (
- props: ExtendedDropDownProps & { children?: React.ReactNode },
-) => (
- <Dropdown overlayStyle={{ zIndex: 99, animationDuration: '0s' }} {...props}
/>
-);
-
-export const ThinSkeleton = styled(Skeleton)`
- h3 {
- margin: ${({ theme }) => theme.gridUnit}px 0;
- }
-
- ul {
- margin-bottom: 0;
- }
-`;
-
export { default as Icon } from '@ant-design/icons';
diff --git a/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
index 7f89936..d7abdf9 100644
--- a/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
+++ b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
@@ -17,7 +17,8 @@
* under the License.
*/
import React, { useState, useRef, useCallback } from 'react';
-import { Input, Divider } from 'src/common/components';
+import { Divider } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { CronPicker, CronError, CronProps } from '.';
export default {
diff --git
a/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx
b/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx
index 1a655c7..5aec5cc 100644
--- a/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx
@@ -35,7 +35,8 @@ import { useDebouncedEffect } from 'src/explore/exploreUtils';
import { SLOW_DEBOUNCE } from 'src/constants';
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
import Loading from 'src/components/Loading';
-import { Input, AntdInput } from 'src/common/components';
+import { AntdInput } from 'src/common/components';
+import { Input } from 'src/components/Input';
import {
PAGE_SIZE as DATASET_PAGE_SIZE,
SORT_BY as DATASET_SORT_BY,
diff --git a/superset-frontend/src/components/DeleteModal/index.tsx
b/superset-frontend/src/components/DeleteModal/index.tsx
index 97f6b46..b8b577d 100644
--- a/superset-frontend/src/components/DeleteModal/index.tsx
+++ b/superset-frontend/src/components/DeleteModal/index.tsx
@@ -18,7 +18,7 @@
*/
import { t, styled } from '@superset-ui/core';
import React, { useState } from 'react';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import Modal from 'src/components/Modal';
import { FormLabel } from 'src/components/Form';
diff --git a/superset-frontend/src/components/Dropdown/Dropdown.stories.tsx
b/superset-frontend/src/components/Dropdown/Dropdown.stories.tsx
index b5ff1aa..0d15b17 100644
--- a/superset-frontend/src/components/Dropdown/Dropdown.stories.tsx
+++ b/superset-frontend/src/components/Dropdown/Dropdown.stories.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-import { Menu } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import { Dropdown, DropdownProps } from '.';
export default {
diff --git a/superset-frontend/src/components/Dropdown/index.tsx
b/superset-frontend/src/components/Dropdown/index.tsx
index 110b2c6..d59d4e6 100644
--- a/superset-frontend/src/components/Dropdown/index.tsx
+++ b/superset-frontend/src/components/Dropdown/index.tsx
@@ -16,8 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React from 'react';
+import React, { RefObject } from 'react';
import { Dropdown as AntdDropdown } from 'antd';
+import { DropDownProps } from 'antd/lib/dropdown';
import { styled } from '@superset-ui/core';
const MenuDots = styled.div`
@@ -76,3 +77,17 @@ export const Dropdown = ({ overlay, ...rest }:
DropdownProps) => (
</MenuDotsWrapper>
</AntdDropdown>
);
+
+interface ExtendedDropDownProps extends DropDownProps {
+ ref?: RefObject<HTMLDivElement>;
+}
+
+// @z-index-below-dashboard-header (100) - 1 = 99
+export const NoAnimationDropdown = (
+ props: ExtendedDropDownProps & { children?: React.ReactNode },
+) => (
+ <AntdDropdown
+ overlayStyle={{ zIndex: 99, animationDuration: '0s' }}
+ {...props}
+ />
+);
diff --git
a/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx
b/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx
index 5dc8727..eefe5b7 100644
--- a/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx
+++ b/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-import { Menu } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import { DropdownButton, DropdownButtonProps } from '.';
export default {
diff --git
a/superset-frontend/src/explore/components/controls/HiddenControl.tsx
b/superset-frontend/src/components/Input/index.tsx
similarity index 55%
copy from superset-frontend/src/explore/components/controls/HiddenControl.tsx
copy to superset-frontend/src/components/Input/index.tsx
index 867f0fe..c1855f9 100644
--- a/superset-frontend/src/explore/components/controls/HiddenControl.tsx
+++ b/superset-frontend/src/components/Input/index.tsx
@@ -16,15 +16,20 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React from 'react';
-import { Input } from 'src/common/components';
+import { styled } from '@superset-ui/core';
+import { Input as AntdInput, InputNumber as AntdInputNumber } from 'antd';
-interface HiddenControlsProps {
- onChange: () => void;
- value: string | number | readonly string[] | undefined;
-}
+export const Input = styled(AntdInput)`
+ border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+ border-radius: ${({ theme }) => theme.borderRadius}px;
+`;
-export default function HiddenControl(props: HiddenControlsProps) {
- // This wouldn't be necessary but might as well
- return <Input type="hidden" value={props.value} />;
-}
+export const InputNumber = styled(AntdInputNumber)`
+ border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+ border-radius: ${({ theme }) => theme.borderRadius}px;
+`;
+
+export const TextArea = styled(AntdInput.TextArea)`
+ border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+ border-radius: ${({ theme }) => theme.borderRadius}px;
+`;
diff --git
a/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx
b/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx
index b088bd6..3e8a638 100644
--- a/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx
+++ b/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx
@@ -21,7 +21,8 @@ import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import DashboardImg from 'src/assets/images/dashboard-card-fallback.svg';
import ChartImg from 'src/assets/images/chart-card-fallback.svg';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import Icons from 'src/components/Icons';
import FaveStar from 'src/components/FaveStar';
import ListViewCard from '.';
diff --git a/superset-frontend/src/components/ListViewCard/index.tsx
b/superset-frontend/src/components/ListViewCard/index.tsx
index 6f0e822..0402a48 100644
--- a/superset-frontend/src/components/ListViewCard/index.tsx
+++ b/superset-frontend/src/components/ListViewCard/index.tsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
import { styled, useTheme } from '@superset-ui/core';
-import { AntdCard, Skeleton, ThinSkeleton } from 'src/common/components';
+import { AntdCard, Skeleton } from 'src/common/components';
import { Tooltip } from 'src/components/Tooltip';
import ImageLoader, { BackgroundPosition } from './ImageLoader';
import CertifiedBadge from '../CertifiedBadge';
@@ -136,6 +136,16 @@ const CoverFooterRight = styled.div`
text-overflow: ellipsis;
`;
+const ThinSkeleton = styled(Skeleton)`
+ h3 {
+ margin: ${({ theme }) => theme.gridUnit}px 0;
+ }
+
+ ul {
+ margin-bottom: 0;
+ }
+`;
+
const paragraphConfig = { rows: 1, width: 150 };
interface LinkProps {
diff --git a/superset-frontend/src/common/components/index.tsx
b/superset-frontend/src/components/Menu/index.tsx
similarity index 61%
copy from superset-frontend/src/common/components/index.tsx
copy to superset-frontend/src/components/Menu/index.tsx
index e03194c..988f916 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/components/Menu/index.tsx
@@ -16,67 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { RefObject } from 'react';
import { styled } from '@superset-ui/core';
-import {
- Dropdown,
- Menu as AntdMenu,
- Input as AntdInput,
- InputNumber as AntdInputNumber,
- Skeleton,
-} from 'antd';
-import { DropDownProps } from 'antd/lib/dropdown';
-/*
- Antd is re-exported from here so we can override components with Emotion as
needed.
+import { Menu as AntdMenu } from 'antd';
- For documentation, see https://ant.design/components/overview/
- */
-export {
- AutoComplete,
- Avatar,
- Button,
- Checkbox,
- Col,
- DatePicker,
- Divider,
- Dropdown,
- Form,
- Grid,
- Empty,
- Typography,
- Tree,
- Popover,
- Slider,
- Row,
- Space,
- Skeleton,
- Steps,
- Switch,
- Tag,
- Tabs,
- Tooltip,
- Upload,
- Input as AntdInput,
-} from 'antd';
-export { Card as AntdCard } from 'antd';
-export { default as Modal } from 'antd/lib/modal';
-export type { ModalProps } from 'antd/lib/modal';
-export type { FormInstance } from 'antd/lib/form';
-export type { RadioChangeEvent } from 'antd/lib/radio';
-export type { TreeProps } from 'antd/lib/tree';
-export { default as Alert } from 'antd/lib/alert';
-export { default as Select } from 'antd/lib/select';
-export { default as List } from 'antd/lib/list';
-export type { AlertProps } from 'antd/lib/alert';
-export type { SelectProps } from 'antd/lib/select';
-export type { ListItemProps } from 'antd/lib/list';
-
-export { default as Collapse } from 'src/components/Collapse';
-export { default as Badge } from 'src/components/Badge';
-export { default as Card } from 'src/components/Card';
-export { default as Progress } from 'src/components/ProgressBar';
-
-export const MenuItem = styled(AntdMenu.Item)`
+const MenuItem = styled(AntdMenu.Item)`
> a {
text-decoration: none;
}
@@ -119,7 +62,7 @@ export const MenuItem = styled(AntdMenu.Item)`
}
`;
-export const StyledNav = styled(AntdMenu)`
+const StyledNav = styled(AntdMenu)`
line-height: 51px;
border: none;
@@ -148,7 +91,7 @@ export const StyledNav = styled(AntdMenu)`
}
`;
-export const StyledSubMenu = styled(AntdMenu.SubMenu)`
+const StyledSubMenu = styled(AntdMenu.SubMenu)`
color: ${({ theme }) => theme.colors.grayscale.dark1};
border-bottom: none;
.ant-menu-submenu-open,
@@ -212,6 +155,7 @@ export declare type MenuMode =
| 'vertical-right'
| 'horizontal'
| 'inline';
+
export const Menu = Object.assign(AntdMenu, {
Item: MenuItem,
});
@@ -222,41 +166,3 @@ export const MainNav = Object.assign(StyledNav, {
Divider: AntdMenu.Divider,
ItemGroup: AntdMenu.ItemGroup,
});
-
-interface ExtendedDropDownProps extends DropDownProps {
- ref?: RefObject<HTMLDivElement>;
-}
-
-export const Input = styled(AntdInput)`
- border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
- border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
-
-export const InputNumber = styled(AntdInputNumber)`
- border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
- border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
-
-export const TextArea = styled(AntdInput.TextArea)`
- border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
- border-radius: ${({ theme }) => theme.borderRadius}px;
-`;
-
-// @z-index-below-dashboard-header (100) - 1 = 99
-export const NoAnimationDropdown = (
- props: ExtendedDropDownProps & { children?: React.ReactNode },
-) => (
- <Dropdown overlayStyle={{ zIndex: 99, animationDuration: '0s' }} {...props}
/>
-);
-
-export const ThinSkeleton = styled(Skeleton)`
- h3 {
- margin: ${({ theme }) => theme.gridUnit}px 0;
- }
-
- ul {
- margin-bottom: 0;
- }
-`;
-
-export { default as Icon } from '@ant-design/icons';
diff --git a/superset-frontend/src/components/PopoverDropdown/index.tsx
b/superset-frontend/src/components/PopoverDropdown/index.tsx
index 1f3f174..d035da8 100644
--- a/superset-frontend/src/components/PopoverDropdown/index.tsx
+++ b/superset-frontend/src/components/PopoverDropdown/index.tsx
@@ -19,7 +19,8 @@
import React from 'react';
import cx from 'classnames';
import { styled, useTheme } from '@superset-ui/core';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import Icons from 'src/components/Icons';
export interface OptionProps {
diff --git
a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
index 6fc3928..53de9e4 100644
---
a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
+++
b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
@@ -22,7 +22,8 @@ import { t, SupersetTheme, css, useTheme } from
'@superset-ui/core';
import Icons from 'src/components/Icons';
import { Switch } from 'src/components/Switch';
import { AlertObject } from 'src/views/CRUD/alert/types';
-import { Menu, NoAnimationDropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
+import { NoAnimationDropdown } from 'src/components/Dropdown';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
import DeleteModal from 'src/components/DeleteModal';
diff --git a/superset-frontend/src/dashboard/components/CssEditor/index.jsx
b/superset-frontend/src/dashboard/components/CssEditor/index.jsx
index 995dc08..b18130c 100644
--- a/superset-frontend/src/dashboard/components/CssEditor/index.jsx
+++ b/superset-frontend/src/dashboard/components/CssEditor/index.jsx
@@ -18,7 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { Menu, Dropdown } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import Button from 'src/components/Button';
import { t, styled } from '@superset-ui/core';
import ModalTrigger from 'src/components/ModalTrigger';
diff --git
a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
index ef7fd17..b86af3d 100644
---
a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
+++
b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
@@ -21,7 +21,8 @@ import PropTypes from 'prop-types';
import { styled, SupersetClient, t } from '@superset-ui/core';
-import { Menu, NoAnimationDropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
+import { NoAnimationDropdown } from 'src/components/Dropdown';
import Icons from 'src/components/Icons';
import { URL_PARAMS } from 'src/constants';
import ShareMenuItems from 'src/dashboard/components/menu/ShareMenuItems';
diff --git
a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 41d0850..335693c 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -17,7 +17,8 @@
* under the License.
*/
import React, { useCallback, useEffect, useState } from 'react';
-import { Form, Row, Col, Input } from 'src/common/components';
+import { Form, Row, Col } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { FormItem } from 'src/components/Form';
import jsonStringify from 'json-stringify-pretty-compact';
import Button from 'src/components/Button';
diff --git a/superset-frontend/src/dashboard/components/SaveModal.tsx
b/superset-frontend/src/dashboard/components/SaveModal.tsx
index bf3e932..ad30962 100644
--- a/superset-frontend/src/dashboard/components/SaveModal.tsx
+++ b/superset-frontend/src/dashboard/components/SaveModal.tsx
@@ -19,7 +19,8 @@
/* eslint-env browser */
import React from 'react';
import { Radio } from 'src/components/Radio';
-import { RadioChangeEvent, Input } from 'src/common/components';
+import { RadioChangeEvent } from 'src/common/components';
+import { Input } from 'src/components/Input';
import Button from 'src/components/Button';
import { t, JsonResponse } from '@superset-ui/core';
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.jsx
b/superset-frontend/src/dashboard/components/SliceAdder.jsx
index d1caf98..8c2fc92 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.jsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.jsx
@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
import { List } from 'react-virtualized';
import { createFilter } from 'react-search-input';
import { t, styled, isFeatureEnabled, FeatureFlag } from '@superset-ui/core';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { Select } from 'src/components';
import Loading from 'src/components/Loading';
import {
diff --git
a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
b/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
index 3f78c01..c5a19de 100644
---
a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
+++
b/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
@@ -23,8 +23,8 @@ import { render, screen } from 'spec/helpers/testing-library';
import { FeatureFlag } from 'src/featureFlags';
import SliceHeaderControls from '.';
-jest.mock('src/common/components', () => {
- const original = jest.requireActual('src/common/components');
+jest.mock('src/components/Dropdown', () => {
+ const original = jest.requireActual('src/components/Dropdown');
return {
...original,
NoAnimationDropdown: (props: any) => (
diff --git
a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index f39eda2..099ec10 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -24,7 +24,8 @@ import {
styled,
t,
} from '@superset-ui/core';
-import { Menu, NoAnimationDropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
+import { NoAnimationDropdown } from 'src/components/Dropdown';
import ShareMenuItems from 'src/dashboard/components/menu/ShareMenuItems';
import downloadAsImage from 'src/utils/downloadAsImage';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
diff --git
a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx
b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx
index bdf2200..da7d196 100644
---
a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx
+++
b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
-import { Menu } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import * as copyTextToClipboard from 'src/utils/copy';
diff --git
a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
index 9013369..cb31503 100644
--- a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
+++ b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
@@ -20,7 +20,7 @@ import React from 'react';
import { useUrlShortener } from 'src/hooks/useUrlShortener';
import copyTextToClipboard from 'src/utils/copy';
import { t, logging } from '@superset-ui/core';
-import { Menu } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import { getUrlParam } from 'src/utils/urlUtils';
import { postFormData } from 'src/explore/exploreUtils/formData';
import { useTabId } from 'src/hooks/useTabId';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx
index 00b3c9a..e9aed5d 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx
@@ -16,7 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Typography, Dropdown, Menu } from 'src/common/components';
+import { Typography, Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import React, { FC } from 'react';
import {
DataMaskState,
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
index afef496..6db4db8 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
import { FormItem } from 'src/components/Form';
-import { Input, TextArea } from 'src/common/components';
+import { Input, TextArea } from 'src/components/Input';
import { NativeFilterType, styled, t } from '@superset-ui/core';
interface Props {
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index 756a3e0..d9981cb 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -18,7 +18,8 @@
*/
import { NativeFilterType, styled, t, useTheme } from '@superset-ui/core';
import React from 'react';
-import { Dropdown, MainNav as Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { MainNav as Menu } from 'src/components/Menu';
import FilterTitleContainer from './FilterTitleContainer';
import { FilterRemoval } from './types';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index 97e1d68..d698c92 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -50,7 +50,7 @@ import React, {
import { PluginFilterSelectCustomizeProps } from
'src/filters/components/Select/types';
import { useSelector } from 'react-redux';
import { getChartDataRequest } from 'src/chart/chartAction';
-import { Input, TextArea } from 'src/common/components';
+import { Input, TextArea } from 'src/components/Input';
import { Select } from 'src/components';
import Collapse from 'src/components/Collapse';
import BasicErrorAlert from 'src/components/ErrorMessage/BasicErrorAlert';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/NativeFiltersModal.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/NativeFiltersModal.test.tsx
index 51c1196..ebe202e 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/NativeFiltersModal.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/NativeFiltersModal.test.tsx
@@ -25,7 +25,8 @@ import { Provider } from 'react-redux';
import { mockStore } from 'spec/fixtures/mockStore';
import { styledMount as mount } from 'spec/helpers/theming';
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import Alert from 'src/components/Alert';
import { FiltersConfigModal } from
'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal';
diff --git
a/superset-frontend/src/explore/components/DataTableControl/index.tsx
b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index 68e83bc..b9e11ed 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -30,7 +30,8 @@ import { Global } from '@emotion/react';
import { Column } from 'react-table';
import debounce from 'lodash/debounce';
import { useDispatch } from 'react-redux';
-import { Input, Space } from 'src/common/components';
+import { Space } from 'src/common/components';
+import { Input } from 'src/components/Input';
import {
BOOL_FALSE_DISPLAY,
BOOL_TRUE_DISPLAY,
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
index caf8c1f..7e974d5 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx
@@ -26,7 +26,7 @@ import { debounce } from 'lodash';
import { matchSorter, rankings } from 'match-sorter';
import { css, styled, t } from '@superset-ui/core';
import Collapse from 'src/components/Collapse';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { FAST_DEBOUNCE } from 'src/constants';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import { ExploreActions } from 'src/explore/actions/exploreActions';
diff --git
a/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreAdditionalActionsMenu.test.jsx
b/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreAdditionalActionsMenu.test.jsx
index b40a8a8..b2c03ac 100644
---
a/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreAdditionalActionsMenu.test.jsx
+++
b/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreAdditionalActionsMenu.test.jsx
@@ -21,7 +21,8 @@ import { shallow } from 'enzyme';
import { styledMount as mount } from 'spec/helpers/theming';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import ExploreAdditionalActionsMenu from
'src/explore/components/ExploreAdditionalActionsMenu';
const mockStore = configureStore([thunk]);
diff --git
a/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/index.jsx
b/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/index.jsx
index 1a0c2c0..7e2401a 100644
---
a/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/index.jsx
+++
b/superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/index.jsx
@@ -21,7 +21,8 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { t } from '@superset-ui/core';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import downloadAsImage from 'src/utils/downloadAsImage';
import ModalTrigger from 'src/components/ModalTrigger';
import { sliceUpdated } from 'src/explore/actions/exploreActions';
diff --git
a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
index ec51067..05404b0 100644
--- a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
+++ b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
@@ -19,7 +19,8 @@
import React, { ReactChild, useCallback } from 'react';
import { t, styled } from '@superset-ui/core';
import Icons from 'src/components/Icons';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
enum MENU_KEYS {
EXPORT_ORIGINAL = 'export_original',
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index 8f6b69a..9ad6470 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -18,7 +18,8 @@
*/
import React, { useMemo, useState, useCallback, useEffect } from 'react';
import Modal from 'src/components/Modal';
-import { Form, Row, Col, Input, TextArea } from 'src/common/components';
+import { Form, Row, Col } from 'src/common/components';
+import { Input, TextArea } from 'src/components/Input';
import Button from 'src/components/Button';
import { Select } from 'src/components';
import { SelectValue } from 'antd/lib/select';
diff --git a/superset-frontend/src/explore/components/SaveModal.tsx
b/superset-frontend/src/explore/components/SaveModal.tsx
index 0fe9b2f..2923782 100644
--- a/superset-frontend/src/explore/components/SaveModal.tsx
+++ b/superset-frontend/src/explore/components/SaveModal.tsx
@@ -18,7 +18,7 @@
*/
/* eslint camelcase: 0 */
import React from 'react';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { Form, FormItem } from 'src/components/Form';
import Alert from 'src/components/Alert';
import { JsonObject, t, styled } from '@superset-ui/core';
diff --git
a/superset-frontend/src/explore/components/controls/BoundsControl.tsx
b/superset-frontend/src/explore/components/controls/BoundsControl.tsx
index 1565ce7..97fd26e 100644
--- a/superset-frontend/src/explore/components/controls/BoundsControl.tsx
+++ b/superset-frontend/src/explore/components/controls/BoundsControl.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React, { useEffect, useRef, useState } from 'react';
-import { InputNumber } from 'src/common/components';
+import { InputNumber } from 'src/components/Input';
import { t, styled } from '@superset-ui/core';
import { debounce } from 'lodash';
import ControlHeader from 'src/explore/components/ControlHeader';
diff --git
a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
index ee862b2..76c738a 100644
---
a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
+++
b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
@@ -20,7 +20,8 @@ import React from 'react';
import { styled, t } from '@superset-ui/core';
import { Form, FormItem, FormProps } from 'src/components/Form';
import Select, { propertyComparator } from 'src/components/Select/Select';
-import { Col, InputNumber, Row } from 'src/common/components';
+import { Col, Row } from 'src/common/components';
+import { InputNumber } from 'src/components/Input';
import Button from 'src/components/Button';
import {
COMPARATOR,
diff --git
a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
index aed44f7..4248e86 100644
---
a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
+++
b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
@@ -20,7 +20,7 @@ import React from 'react';
import sinon from 'sinon';
import configureStore from 'redux-mock-store';
import { shallow } from 'enzyme';
-import { Menu } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import {
DatasourceModal,
ChangeDatasourceModal,
diff --git
a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
index c0dc8bb..4b11fe2 100644
---
a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
+++
b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
@@ -22,7 +22,8 @@ import PropTypes from 'prop-types';
import { t, styled, supersetTheme } from '@superset-ui/core';
import { getUrlParam } from 'src/utils/urlUtils';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
import {
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/AdvancedFrame.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/AdvancedFrame.tsx
index 607cf99..a727a3f 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/AdvancedFrame.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/AdvancedFrame.tsx
@@ -19,7 +19,7 @@
import React from 'react';
import { t } from '@superset-ui/core';
import { SEPARATOR } from
'src/explore/components/controls/DateFilterControl/utils';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import { FrameComponentProps } from
'src/explore/components/controls/DateFilterControl/types';
import DateFunctionTooltip from './DateFunctionTooltip';
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index a26d7ca..513017e 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -20,7 +20,8 @@ import React from 'react';
import { t } from '@superset-ui/core';
import { Moment } from 'moment';
import { isInteger } from 'lodash';
-import { Col, InputNumber, Row } from 'src/common/components';
+import { Col, Row } from 'src/common/components';
+import { InputNumber } from 'src/components/Input';
import { DatePicker } from 'src/components/DatePicker';
import { Radio } from 'src/components/Radio';
import Select, { propertyComparator } from 'src/components/Select/Select';
diff --git
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
index e062357..eecce0b 100644
---
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
+++
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
@@ -18,7 +18,7 @@
*/
import React, { useCallback, useState } from 'react';
import { t } from '@superset-ui/core';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { Tooltip } from 'src/components/Tooltip';
export const DndColumnSelectPopoverTitle = ({
diff --git
a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
index ceddf7c..e86ed58 100644
---
a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
+++
b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
@@ -36,7 +36,7 @@ import AdhocFilter, {
EXPRESSION_TYPES,
CLAUSES,
} from 'src/explore/components/controls/FilterControl/AdhocFilter';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { propertyComparator } from 'src/components/Select/Select';
import { optionLabel } from 'src/utils/common';
diff --git
a/superset-frontend/src/explore/components/controls/HiddenControl.tsx
b/superset-frontend/src/explore/components/controls/HiddenControl.tsx
index 867f0fe..10cfa61 100644
--- a/superset-frontend/src/explore/components/controls/HiddenControl.tsx
+++ b/superset-frontend/src/explore/components/controls/HiddenControl.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
interface HiddenControlsProps {
onChange: () => void;
diff --git
a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.jsx
b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.jsx
index 4e9e7c0..cef6250 100644
---
a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.jsx
+++
b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.jsx
@@ -19,7 +19,7 @@
import React from 'react';
import { t } from '@superset-ui/core';
import PropTypes from 'prop-types';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { Tooltip } from 'src/components/Tooltip';
const propTypes = {
diff --git
a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
index d0f6503..e9c02f0 100644
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { TextArea } from 'src/common/components';
+import { TextArea } from 'src/components/Input';
import { t } from '@superset-ui/core';
import Button from 'src/components/Button';
diff --git
a/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
b/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
index fbbe88c..d9aeccf 100644
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
@@ -21,7 +21,7 @@ import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { TextAreaEditor } from 'src/components/AsyncAceEditor';
-import { TextArea } from 'src/common/components';
+import { TextArea } from 'src/components/Input';
import TextAreaControl from 'src/explore/components/controls/TextAreaControl';
diff --git
a/superset-frontend/src/explore/components/controls/TextControl/index.tsx
b/superset-frontend/src/explore/components/controls/TextControl/index.tsx
index d5dc8e2..3887757 100644
--- a/superset-frontend/src/explore/components/controls/TextControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/TextControl/index.tsx
@@ -21,7 +21,7 @@ import { legacyValidateNumber, legacyValidateInteger } from
'@superset-ui/core';
import debounce from 'lodash/debounce';
import { FAST_DEBOUNCE } from 'src/constants';
import ControlHeader from 'src/explore/components/ControlHeader';
-import { Input } from 'src/common/components';
+import { Input } from 'src/components/Input';
type InputValueType = string | number;
diff --git
a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index 6f4585b..7a72bd9 100644
---
a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
+++
b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
@@ -18,7 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { Row, Col, Input } from 'src/common/components';
+import { Row, Col } from 'src/common/components';
+import { Input } from 'src/components/Input';
import Button from 'src/components/Button';
import Popover from 'src/components/Popover';
import { Select } from 'src/components';
diff --git
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index c817c50..bf8b3c8 100644
---
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -34,7 +34,8 @@ import {
SupersetTheme,
useTheme,
} from '@superset-ui/core';
-import { Collapse, Input } from 'src/common/components';
+import { Collapse } from 'src/common/components';
+import { Input } from 'src/components/Input';
import Label from 'src/components/Label';
import { usePluginContext } from 'src/components/DynamicPlugins';
import Icons from 'src/components/Icons';
diff --git
a/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.test.tsx
b/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.test.tsx
index a58f36a..822b129 100644
---
a/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.test.tsx
+++
b/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.test.tsx
@@ -21,8 +21,7 @@ import React from 'react';
import { ReactWrapper } from 'enzyme';
import { styledMount as mount } from 'spec/helpers/theming';
import { CronPicker } from 'src/components/CronPicker';
-import { Input } from 'src/common/components';
-
+import { Input } from 'src/components/Input';
import { AlertReportCronScheduler } from './AlertReportCronScheduler';
describe('AlertReportCronScheduler', () => {
diff --git
a/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.tsx
b/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.tsx
index d7e6af5..41beefa 100644
---
a/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.tsx
+++
b/superset-frontend/src/views/CRUD/alert/components/AlertReportCronScheduler.tsx
@@ -19,7 +19,8 @@
import React, { useState, useCallback, useRef, FunctionComponent } from
'react';
import { t, useTheme } from '@superset-ui/core';
-import { Input, AntdInput } from 'src/common/components';
+import { AntdInput } from 'src/common/components';
+import { Input } from 'src/components/Input';
import { Radio } from 'src/components/Radio';
import { CronPicker, CronError } from 'src/components/CronPicker';
import { StyledInputContainer } from 'src/views/CRUD/alert/AlertReportModal';
diff --git a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
index 40eb109..dc44ede 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
@@ -25,7 +25,8 @@ import Chart from 'src/types/Chart';
import ListViewCard from 'src/components/ListViewCard';
import Label from 'src/components/Label';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import FaveStar from 'src/components/FaveStar';
import FacePile from 'src/components/FacePile';
import { handleChartDelete, CardStyles } from '../utils';
diff --git a/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx
b/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx
index 3bd2866..7c6feb6 100644
--- a/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx
+++ b/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx
@@ -21,7 +21,8 @@ import { Link, useHistory } from 'react-router-dom';
import { t, useTheme } from '@superset-ui/core';
import { handleDashboardDelete, CardStyles } from 'src/views/CRUD/utils';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import ListViewCard from 'src/components/ListViewCard';
import Icons from 'src/components/Icons';
diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
index f9bce95..e4d76af 100644
--- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@@ -23,7 +23,8 @@ import sql from
'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
import { LoadingCards } from 'src/views/CRUD/welcome/Welcome';
import withToasts from 'src/components/MessageToasts/withToasts';
-import { Dropdown, Menu } from 'src/common/components';
+import { Dropdown } from 'src/common/components';
+import { Menu } from 'src/components/Menu';
import { copyQueryLink, useListViewResource } from 'src/views/CRUD/hooks';
import ListViewCard from 'src/components/ListViewCard';
import DeleteModal from 'src/components/DeleteModal';
diff --git a/superset-frontend/src/views/components/LanguagePicker.test.tsx
b/superset-frontend/src/views/components/LanguagePicker.test.tsx
index 6fa5fe2..230c89d 100644
--- a/superset-frontend/src/views/components/LanguagePicker.test.tsx
+++ b/superset-frontend/src/views/components/LanguagePicker.test.tsx
@@ -19,7 +19,7 @@
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
-import { MainNav as Menu } from 'src/common/components';
+import { MainNav as Menu } from 'src/components/Menu';
import LanguagePicker from './LanguagePicker';
const mockedProps = {
diff --git a/superset-frontend/src/views/components/LanguagePicker.tsx
b/superset-frontend/src/views/components/LanguagePicker.tsx
index faba09a..a9a1b56 100644
--- a/superset-frontend/src/views/components/LanguagePicker.tsx
+++ b/superset-frontend/src/views/components/LanguagePicker.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-import { MainNav as Menu } from 'src/common/components';
+import { MainNav as Menu } from 'src/components/Menu';
import { styled } from '@superset-ui/core';
import Icons from 'src/components/Icons';
diff --git a/superset-frontend/src/views/components/Menu.tsx
b/superset-frontend/src/views/components/Menu.tsx
index 313c4b5..3c51bee 100644
--- a/superset-frontend/src/views/components/Menu.tsx
+++ b/superset-frontend/src/views/components/Menu.tsx
@@ -21,13 +21,8 @@ import { styled, css, useTheme, SupersetTheme } from
'@superset-ui/core';
import { debounce } from 'lodash';
import { Global } from '@emotion/react';
import { getUrlParam } from 'src/utils/urlUtils';
-import {
- MainNav as DropdownMenu,
- MenuMode,
- Row,
- Col,
- Grid,
-} from 'src/common/components';
+import { Row, Col, Grid } from 'src/common/components';
+import { MainNav as DropdownMenu, MenuMode } from 'src/components/Menu';
import { Tooltip } from 'src/components/Tooltip';
import { Link } from 'react-router-dom';
import Icons from 'src/components/Icons';
diff --git a/superset-frontend/src/views/components/MenuRight.tsx
b/superset-frontend/src/views/components/MenuRight.tsx
index fe55e83..342c925 100644
--- a/superset-frontend/src/views/components/MenuRight.tsx
+++ b/superset-frontend/src/views/components/MenuRight.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React, { useState } from 'react';
-import { MainNav as Menu } from 'src/common/components';
+import { MainNav as Menu } from 'src/components/Menu';
import { t, styled, css, SupersetTheme } from '@superset-ui/core';
import { Link } from 'react-router-dom';
import Icons from 'src/components/Icons';
diff --git a/superset-frontend/src/views/components/SubMenu.tsx
b/superset-frontend/src/views/components/SubMenu.tsx
index 917adfa..957a2dc 100644
--- a/superset-frontend/src/views/components/SubMenu.tsx
+++ b/superset-frontend/src/views/components/SubMenu.tsx
@@ -21,7 +21,8 @@ import { Link, useHistory } from 'react-router-dom';
import { styled } from '@superset-ui/core';
import cx from 'classnames';
import { debounce } from 'lodash';
-import { Menu, MenuMode, Row } from 'src/common/components';
+import { Row } from 'src/common/components';
+import { Menu, MenuMode } from 'src/components/Menu';
import Button, { OnClickHandler } from 'src/components/Button';
const StyledHeader = styled.div`
