chore: well component to card component(Updating PR #12200) (#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>
2021-04-09 19:06:44 -03:00 · 2021-04-09 19:06:44 -03:00 · 95ed8735f1
parent bfa6140b15
commit 95ed8735f1
7 changed files with 59 additions and 14 deletions
--- 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 = (
--- 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;
--- 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;
--- 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,6 +51,7 @@ 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';
@ -58,6 +59,9 @@ 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 {
--- 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}>
--- 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 = {
--- 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),