chore: well component to card component(Updating PR apache#12200) (ap…

…ache#14033) * replace Well componenet with Card component * Fix lint errors * Fix lint * Addressing comments * Addressing comments * Fix lint errors * Exporting Card from index.tsx and adding storybook variants * Fix some refactoring * Fix errors * solving conflicts and lint errors * Update superset-frontend/src/common/components/Card.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/common/components/Card.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/common/components/common.stories.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/common/components/common.stories.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/common/components/common.stories.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/common/components/common.stories.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/common/components/common.stories.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> Co-authored-by: Nikola Gigic <nik.gigic@gmail.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
QAlexBall · Apr 9, 2021 · 7b003da · 7b003da
1 parent efbbc0e
commit 7b003da
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 14 deletions.
diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable.jsx
@@ -19,7 +19,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { Well } from 'react-bootstrap';
+import Card from 'src/common/components/Card';
 import ProgressBar from 'src/components/ProgressBar';
 import Label from 'src/components/Label';
 import { t } from '@superset-ui/core';
@@ -129,14 +129,14 @@ const QueryTable = props => {
           </Button>
         );
         q.sql = (
-          <Well>
+          <Card>
             <HighlightedSql
               sql={q.sql}
               rawSql={q.executedSql}
               shrink
               maxWidth={60}
             />
-          </Well>
+          </Card>
         );
         if (q.resultsKey) {
           q.output = (

diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Well } from 'react-bootstrap';
+import Card from 'src/common/components/Card';
 import Collapse from 'src/common/components/Collapse';
 import ButtonGroup from 'src/components/ButtonGroup';
 import shortid from 'shortid';
@@ -115,14 +115,14 @@ class TableElement extends React.PureComponent {
       );
       latest = latest.join('/');
       header = (
-        <Well bsSize="small">
+        <Card size="small">
           <div>
             <small>
               {t('latest partition:')} {latest}
             </small>{' '}
             {partitionClipBoard}
           </div>
-        </Well>
+        </Card>
       );
     }
     return header;

diff --git a/superset-frontend/src/common/components/Card.tsx b/superset-frontend/src/common/components/Card.tsx
@@ -0,0 +1,39 @@
+/**
+ * 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 React from 'react';
+import { styled } from '@superset-ui/core';
+import AntdCard, { CardProps as AntdCardProps } from 'antd/lib/card';
+
+interface CardProps extends AntdCardProps {
+  padded?: boolean;
+}
+
+const Card = styled(({ padded, ...props }: CardProps) => (
+  <AntdCard {...props} />
+))`
+  background-color: ${({ theme }) => theme.colors.grayscale.light4};
+  border-radius: ${({ theme }) => theme.borderRadius}px;
+
+  .ant-card-body {
+    padding: ${({ padded, theme }) =>
+      padded ? theme.gridUnit * 4 : theme.gridUnit}px;
+  }
+`;
+
+export default Card;
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
@@ -28,7 +28,7 @@ import { DropDownProps } from 'antd/lib/dropdown';
 export {
   AutoComplete,
   Avatar,
-  Card,
+  Button,
   Checkbox,
   Col,
   DatePicker,
@@ -51,13 +51,17 @@ export {
   Tooltip,
   Input as AntdInput,
 } from 'antd';
+export { Card as AntdCard } from 'antd';
 export { FormInstance } from 'antd/lib/form';
 export { RadioChangeEvent } from 'antd/lib/radio';
 export { TreeProps } from 'antd/lib/tree';
 export { default as Alert, AlertProps } from 'antd/lib/alert';
 export { default as Select, SelectProps } from 'antd/lib/select';
 
 export { default as Collapse } from './Collapse';
+export { default as Badge } from 'src/components/Badge';
+export { default as Card } from './Card';
+export { default as Progress } from 'src/components/ProgressBar';
 
 export const MenuItem = styled(AntdMenu.Item)`
   > a {

diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { styled } from '@superset-ui/core';
 import Icon from 'src/components/Icon';
-import { Card, Skeleton, ThinSkeleton } from 'src/common/components';
+import { AntdCard, Skeleton, ThinSkeleton } from 'src/common/components';
 import { Tooltip } from 'src/common/components/Tooltip';
 import ImageLoader, { BackgroundPosition } from './ImageLoader';
 
@@ -29,7 +29,7 @@ const ActionsWrapper = styled.div`
   justify-content: space-between;
 `;
 
-const StyledCard = styled(Card)`
+const StyledCard = styled(AntdCard)`
   border: 1px solid #d9dbe4;
   border-radius: ${({ theme }) => theme.gridUnit}px;
   overflow: hidden;
@@ -198,7 +198,7 @@ function ListViewCard({
       }
     >
       {loading && (
-        <Card.Meta
+        <AntdCard.Meta
           title={
             <>
               <TitleContainer>
@@ -221,7 +221,7 @@ function ListViewCard({
         />
       )}
       {!loading && (
-        <Card.Meta
+        <AntdCard.Meta
           title={
             <TitleContainer>
               <Tooltip title={title}>

diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Col, Well } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import Card from 'src/common/components/Card';
 import { Radio } from 'src/common/components/Radio';
 import Alert from 'src/components/Alert';
 import Badge from 'src/components/Badge';
@@ -284,7 +285,7 @@ StackedField.propTypes = {
 };
 
 function FormContainer({ children }) {
-  return <Well style={{ marginTop: 20 }}>{children}</Well>;
+  return <Card padded>{children}</Card>;
 }
 
 FormContainer.propTypes = {

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -141,7 +141,8 @@ export class ControlPanelsContainer extends React.Component<ControlPanelsContain
       // state, too. Since it's may be expensive to run mapStateToProps for every
       // re-render, we only run this when the chart plugin explicitly ask for this.
       ...(config.mapStateToProps?.length === 3
-        ? config.mapStateToProps(exploreState, controls[name], chart)
+        ? // @ts-ignore /* The typing accuses of having an extra parameter. I didn't remove it because I believe it could be an error in the types and not in the code */
+          config.mapStateToProps(exploreState, controls[name], chart)
         : // for other controls, `mapStateToProps` is already run in
           // controlUtils/getControlState.ts
           undefined),