Merge remote-tracking branch 'upstream/master'

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

@@ -120,7 +120,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
         className="kicker"
         style={{
           fontSize,
-          height: maxHeight,
+          height: 'auto',
         }}
       >
         {text}
@@ -156,7 +156,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     document.body.append(container);
     const fontSize = computeMaxFontSize({
       text,
-      maxWidth: width - 8, // Decrease 8px for more precise font size
+      maxWidth: width * 0.9, // reduced it's max width
       maxHeight,
       className: 'header-line',
       container,
@@ -174,8 +174,10 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
       <div
         className="header-line"
         style={{
+          display: 'flex',
+          alignItems: 'center',
           fontSize,
-          height: maxHeight,
+          height: 'auto',
           color: numberColor,
         }}
         onContextMenu={onContextMenu}
@@ -204,7 +206,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
       document.body.append(container);
       fontSize = computeMaxFontSize({
         text,
-        maxWidth: width,
+        maxWidth: width * 0.9, // max width reduced
         maxHeight,
         className: 'subheader-line',
         container,
@@ -356,6 +358,7 @@ export default styled(BigNumberVis)`
       position: relative;
       line-height: 1em;
       white-space: nowrap;
+      margin-bottom:${theme.gridUnit * 2}px;
       span {
         position: absolute;
         bottom: 0;

superset-frontend/src/SqlLab/components/QueryHistory/index.tsx

@@ -42,7 +42,7 @@ interface QueryHistoryProps {
 
 const StyledEmptyStateWrapper = styled.div`
   height: 100%;
-  .ant-empty-image img {
+  .antd5-empty-image img {
     margin-right: 28px;
   }
 

superset-frontend/src/SqlLab/components/SouthPane/Results.tsx

@@ -37,7 +37,7 @@ type Props = {
 
 const StyledEmptyStateWrapper = styled.div`
   height: 100%;
-  .ant-empty-image img {
+  .antd5-empty-image img {
     margin-right: 28px;
   }
 

superset-frontend/src/components/CronPicker/CronPicker.stories.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useState, useRef, useCallback } from 'react';
-import { Divider } from 'src/components';
+import { Divider } from 'src/components/Divider';
 import { Input } from 'src/components/Input';
 import { CronPicker, CronError, CronProps } from '.';
 

superset-frontend/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 { Divider, DividerProps } from 'src/components/Divider';
+
+export default {
+  title: 'Divider',
+  component: Divider,
+};
+
+export const InteractiveDivider = (args: DividerProps) => <Divider {...args} />;
+
+InteractiveDivider.args = {
+  dashed: false,
+  variant: 'solid',
+  orientation: 'center',
+  plain: true,
+  type: 'horizontal',
+};
+
+InteractiveDivider.argTypes = {
+  variant: {
+    control: { type: 'select' },
+    options: ['dashed', 'dotted', 'solid'],
+  },
+  orientation: {
+    control: { type: 'select' },
+    options: ['left', 'right', 'center'],
+  },
+  orientationMargin: {
+    control: { type: 'text' },
+  },
+  type: {
+    control: { type: 'select' },
+    options: ['horizontal', 'vertical'],
+  },
+};

superset-frontend/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 { render } from 'spec/helpers/testing-library';
+import { Divider } from '.';
+
+test('should render', () => {
+  const { container } = render(<Divider />);
+  expect(container).toBeInTheDocument();
+});

superset-frontend/src/components/Divider/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 { Divider as AntdDivider } from 'antd-v5';
+import type { DividerProps } from 'antd-v5/es/divider';
+
+export function Divider(props: DividerProps) {
+  return <AntdDivider {...props} />;
+}
+
+export { DividerProps };

superset-frontend/src/components/EmptyState/Empty.test.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { render } from 'spec/helpers/testing-library';
+import { Empty } from './Empty';
+
+test('should render', () => {
+  const { container } = render(<Empty />);
+  expect(container).toBeInTheDocument();
+});

superset-frontend/src/components/EmptyState/Empty.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 { Empty as AntdEmpty } from 'antd-v5';
+import { EmptyProps } from 'antd-v5/es/empty';
+
+export const Empty = Object.assign(
+  (props: EmptyProps) => <AntdEmpty {...props} />,
+  {
+    PRESENTED_IMAGE_SIMPLE: AntdEmpty.PRESENTED_IMAGE_SIMPLE,
+    PRESENTED_IMAGE_DEFAULT: AntdEmpty.PRESENTED_IMAGE_DEFAULT,
+  },
+);

superset-frontend/src/components/EmptyState/index.tsx

@@ -23,8 +23,8 @@ import {
   MouseEventHandler as ReactMouseEventHandler,
 } from 'react';
 import { styled, css, SupersetTheme, t } from '@superset-ui/core';
-import { Empty } from 'src/components';
 import Button from 'src/components/Button';
+import { Empty } from './Empty';
 
 export enum EmptyStateSize {
   Small,
@@ -60,7 +60,7 @@ const EmptyStateContainer = styled.div`
     padding: ${theme.gridUnit * 4}px;
     text-align: center;
 
-    & .ant-empty-image svg {
+    & .antd5-empty-image svg {
       width: auto;
     }
 

superset-frontend/src/components/ListView/ListView.test.jsx

@@ -22,7 +22,7 @@ import { QueryParamProvider } from 'use-query-params';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
-import { Empty } from 'src/components';
+import { Empty } from 'src/components/EmptyState/Empty';
 import CardCollection from 'src/components/ListView/CardCollection';
 import { CardSortSelect } from 'src/components/ListView/CardSortSelect';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';

superset-frontend/src/components/ListView/ListView.tsx

@@ -67,8 +67,8 @@ const ListViewStyles = styled.div`
       overflow-x: auto;
     }
 
-    .ant-empty {
+    .antd5-empty {
-      .ant-empty-image {
+      .antd5-empty-image {
         height: auto;
       }
     }

superset-frontend/src/components/TableView/TableView.tsx

@@ -20,7 +20,7 @@ import { memo, useEffect, useRef } from 'react';
 import { isEqual } from 'lodash';
 import { styled, t } from '@superset-ui/core';
 import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
-import { Empty } from 'src/components';
+import { Empty } from 'src/components/EmptyState/Empty';
 import Pagination from 'src/components/Pagination';
 import TableCollection from 'src/components/TableCollection';
 import { SortByType, ServerPagination } from './types';

superset-frontend/src/components/index.ts

@@ -34,8 +34,6 @@ export { default as Card } from './Card';
 export {
   AutoComplete,
   Col,
-  Divider,
-  Empty,
   Grid,
   Row,
   Skeleton,

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

@@ -30,7 +30,7 @@ import {
 import Button from 'src/components/Button';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import Modal from 'src/components/Modal';
-import { Divider } from 'src/components';
+import { Divider } from 'src/components/Divider';
 import Icons from 'src/components/Icons';
 import Select from 'src/components/Select/Select';
 import { Tooltip } from 'src/components/Tooltip';
@@ -75,7 +75,7 @@ const ContentStyleWrapper = styled.div`
       width: 100%;
     }
 
-    .ant-divider-horizontal {
+    .antd5-divider-horizontal {
       margin: 16px 0;
     }
 

superset-frontend/src/features/home/EmptyState.tsx

@@ -18,7 +18,7 @@
  */
 import { Link } from 'react-router-dom';
 import Button from 'src/components/Button';
-import { Empty } from 'src/components';
+import { Empty } from 'src/components/EmptyState/Empty';
 import { TableTab } from 'src/views/CRUD/types';
 import { styled, t } from '@superset-ui/core';
 import { WelcomeTable } from './types';

superset-frontend/src/features/tags/TagModal.tsx

@@ -24,7 +24,7 @@ import AsyncSelect from 'src/components/Select/AsyncSelect';
 import { FormLabel } from 'src/components/Form';
 import { t, styled, SupersetClient } from '@superset-ui/core';
 import { Input } from 'antd';
-import { Divider } from 'src/components';
+import { Divider } from 'src/components/Divider';
 import Button from 'src/components/Button';
 import { Tag } from 'src/views/CRUD/types';
 import { fetchObjectsByTagIds } from 'src/features/tags/tags';

superset-frontend/src/theme/index.ts

@@ -77,6 +77,9 @@ const baseConfig: ThemeConfig = {
       fontWeightStrong: supersetTheme.typography.weights.medium,
       colorBgContainer: supersetTheme.colors.grayscale.light4,
     },
+    Divider: {
+      colorSplit: supersetTheme.colors.grayscale.light3,
+    },
     Input: {
       colorBorder: supersetTheme.colors.secondary.light3,
       colorBgContainer: supersetTheme.colors.grayscale.light5,