chore: Moves components out of the commons folder (#18931)

* refactor: Moves components out of the commons folder * Fixes tests
apache · Feb 25, 2022 · fd4bd1e · fd4bd1e
1 parent 2cb3635
commit fd4bd1e
Show file tree

Hide file tree

Showing 66 changed files with 331 additions and 279 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {