From fd4bd1edbc306d930d186f1650e809b7f15981d0 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Fri, 25 Feb 2022 10:17:32 -0300 Subject: [PATCH] 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.test.tsx | 3 +- .../components/SaveDatasetModal/index.tsx | 3 +- .../src/SqlLab/components/SaveQuery/index.tsx | 3 +- .../components/ScheduleQueryButton/index.tsx | 3 +- .../src/SqlLab/components/SqlEditor/index.jsx | 21 +- .../components/TabbedSqlEditors/index.jsx | 2 +- .../src/common/components/index.tsx | 195 ------------------ .../CronPicker/CronPicker.stories.tsx | 3 +- .../Datasource/ChangeDatasourceModal.tsx | 3 +- .../src/components/DeleteModal/index.tsx | 2 +- .../components/Dropdown/Dropdown.stories.tsx | 2 +- .../src/components/Dropdown/index.tsx | 17 +- .../DropdownButton/DropdownButton.stories.tsx | 2 +- .../src/components/Input/index.tsx | 35 ++++ .../ListViewCard/ListViewCard.stories.tsx | 3 +- .../src/components/ListViewCard/index.tsx | 12 +- .../src/components/Menu/index.tsx | 168 +++++++++++++++ .../src/components/PopoverDropdown/index.tsx | 3 +- .../HeaderReportActionsDropdown/index.tsx | 3 +- .../dashboard/components/CssEditor/index.jsx | 3 +- .../Header/HeaderActionsDropdown/index.jsx | 3 +- .../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 +- .../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 +- .../NativeFiltersModal.test.tsx | 3 +- .../components/DataTableControl/index.tsx | 3 +- .../components/DatasourcePanel/index.tsx | 2 +- .../ExploreAdditionalActionsMenu.test.jsx | 3 +- .../ExploreAdditionalActionsMenu/index.jsx | 3 +- .../components/ExportToCSVDropdown/index.tsx | 3 +- .../components/PropertiesModal/index.tsx | 3 +- .../src/explore/components/SaveModal.tsx | 2 +- .../components/controls/BoundsControl.tsx | 2 +- .../FormattingPopoverContent.tsx | 3 +- .../DatasourceControl.test.jsx | 2 +- .../controls/DatasourceControl/index.jsx | 3 +- .../components/AdvancedFrame.tsx | 2 +- .../components/CustomFrame.tsx | 3 +- .../DndColumnSelectPopoverTitle.jsx | 2 +- .../index.tsx | 2 +- .../components/controls/HiddenControl.tsx | 2 +- .../AdhocMetricEditPopoverTitle.jsx | 2 +- .../components/controls/TextAreaControl.jsx | 2 +- .../controls/TextAreaControl.test.jsx | 2 +- .../components/controls/TextControl/index.tsx | 2 +- .../TimeSeriesColumnControl/index.jsx | 3 +- .../VizTypeControl/VizTypeGallery.tsx | 3 +- .../AlertReportCronScheduler.test.tsx | 3 +- .../components/AlertReportCronScheduler.tsx | 3 +- .../src/views/CRUD/chart/ChartCard.tsx | 3 +- .../views/CRUD/dashboard/DashboardCard.tsx | 3 +- .../src/views/CRUD/welcome/SavedQueries.tsx | 3 +- .../views/components/LanguagePicker.test.tsx | 2 +- .../src/views/components/LanguagePicker.tsx | 2 +- .../src/views/components/Menu.tsx | 9 +- .../src/views/components/MenuRight.tsx | 2 +- .../src/views/components/SubMenu.tsx | 3 +- 66 files changed, 331 insertions(+), 279 deletions(-) create mode 100644 superset-frontend/src/components/Input/index.tsx create mode 100644 superset-frontend/src/components/Menu/index.tsx diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx index 076904386..398ec3011 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 9fbb757bb..2bd376e12 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 f1e92a73a..76d272a65 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 99cda810b..cc00fc5ae 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 6f9bf9b7d..6ad168030 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 22711fb88..cbfbb4196 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 ( - + {[...new Set(LIMIT_DROPDOWN)].map(limit => ( - this.setQueryLimit(limit)} - > + this.setQueryLimit(limit)}> {/* // eslint-disable-line no-use-before-define */} {this.convertToNumWithSpaces(limit)} {' '} - + ))} - + ); } diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx index 252051b69..cf2867eb8 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 e03194c40..7e5e4fdef 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; -} - -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 }, -) => ( - -); - -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 7f8993684..d7abdf958 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 1a655c71e..5aec5cc3a 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 97f6b4693..b8b577d30 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 b5ff1aafd..0d15b17ce 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 110b2c6a9..d59d4e630 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) => ( ); + +interface ExtendedDropDownProps extends DropDownProps { + ref?: RefObject; +} + +// @z-index-below-dashboard-header (100) - 1 = 99 +export const NoAnimationDropdown = ( + props: ExtendedDropDownProps & { children?: React.ReactNode }, +) => ( + +); diff --git a/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx b/superset-frontend/src/components/DropdownButton/DropdownButton.stories.tsx index 5dc8727bd..eefe5b781 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/components/Input/index.tsx b/superset-frontend/src/components/Input/index.tsx new file mode 100644 index 000000000..c1855f97a --- /dev/null +++ b/superset-frontend/src/components/Input/index.tsx @@ -0,0 +1,35 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { styled } from '@superset-ui/core'; +import { Input as AntdInput, InputNumber as AntdInputNumber } from 'antd'; + +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; +`; diff --git a/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx b/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx index b088bd6a4..3e8a63879 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 6f0e82206..0402a4849 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/components/Menu/index.tsx b/superset-frontend/src/components/Menu/index.tsx new file mode 100644 index 000000000..988f9160c --- /dev/null +++ b/superset-frontend/src/components/Menu/index.tsx @@ -0,0 +1,168 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { styled } from '@superset-ui/core'; +import { Menu as AntdMenu } from 'antd'; + +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; + } +`; + +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; + } +`; + +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, +}); diff --git a/superset-frontend/src/components/PopoverDropdown/index.tsx b/superset-frontend/src/components/PopoverDropdown/index.tsx index 1f3f1747b..d035da88c 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 6fc392836..53de9e4d8 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 995dc081f..b18130cb8 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 ef7fd17d2..b86af3da8 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 41d085003..335693c11 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 bf3e932e2..ad30962ac 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 d1caf980f..8c2fc920e 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 3f78c0143..c5a19de74 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 f39eda242..099ec1013 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 bdf22009e..da7d196bd 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 9013369d7..cb31503ac 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 00b3c9a9f..e9aed5d0d 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 afef49684..6db4db853 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 756a3e0e9..d9981cbe6 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 97e1d6853..d698c9214 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 51c119653..ebe202e08 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 68e83bc1a..b9e11eda9 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 caf8c1ff5..7e974d50d 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 b40a8a8e8..b2c03ac03 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 1a0c2c0a6..7e2401abc 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 ec5106711..05404b0a6 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 8f6b69a82..9ad64704f 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 0fe9b2f44..292378290 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 1565ce7d3..97fd26e28 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 ee862b2b6..76c738aa7 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 aed44f7fc..4248e8634 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 c0dc8bb01..4b11fe299 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 607cf9920..a727a3f26 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 a26d7ca76..513017e2a 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 e06235758..eecce0b33 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 ceddf7cbd..e86ed587c 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 867f0fe2a..10cfa6134 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 4e9e7c011..cef62505e 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 d0f6503fc..e9c02f076 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 fbbe88c85..d9aeccf7f 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 d5dc8e242..38877575d 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 6f4585bda..7a72bd93c 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 c817c50c4..bf8b3c8f7 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 a58f36a19..822b129c5 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 d7e6af521..41beefa42 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 40eb10997..dc44edef9 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 3bd28667f..7c6feb6db 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 f9bce955d..e4d76afe7 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 6fa5fe26e..230c89d18 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 faba09a87..a9a1b5614 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 313c4b5ca..3c51beef6 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 fe55e832b..342c9257e 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 917adfab7..957a2dc4c 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`