feat: create table component based on ant design Table (#21520)

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/.storybook/main.js

@@ -24,7 +24,8 @@ module.exports = {
     builder: 'webpack5',
   },
   stories: [
-    '../src/@(components|common|filters|explore)/**/*.stories.@(tsx|jsx|mdx)',
+    '../src/@(components|common|filters|explore)/**/*.stories.@(tsx|jsx)',
+    '../src/@(components|common|filters|explore)/**/*.*.@(mdx)',
   ],
   addons: [
     '@storybook/addon-essentials',

superset-frontend/.storybook/preview.jsx

@@ -68,7 +68,15 @@ addParameters({
         ['Controls', 'Display', 'Feedback', 'Input', '*'],
         ['Overview', 'Examples', '*'],
         'Design System',
-        ['Foundations', 'Components', 'Patterns', '*'],
+        [
+          'Introduction',
+          'Foundations',
+          'Components',
+          ['Overview', 'Examples', '*'],
+          'Patterns',
+          '*',
+        ],
+        ['Overview', 'Examples', '*'],
         '*',
       ],
     },

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

@@ -39,11 +39,13 @@ export type ButtonStyle =
   | 'link'
   | 'dashed';
 
+export type ButtonSize = 'default' | 'small' | 'xsmall';
+
 export type ButtonProps = Omit<AntdButtonProps, 'css'> &
   Pick<TooltipProps, 'placement'> & {
     tooltip?: string;
     className?: string;
-    buttonSize?: 'default' | 'small' | 'xsmall';
+    buttonSize?: ButtonSize;
     buttonStyle?: ButtonStyle;
     cta?: boolean;
     showMarginRight?: boolean;

superset-frontend/src/components/DesignSystem.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta, Source } from '@storybook/addon-docs';
+import AtomicDesign from './atomic-design.png';
+
+<Meta title="Design System/Introduction" />
+
+# Superset Design System
+
+A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
+
+You can get an overview of Atomic Design concepts and a link to the full book on the topic here:
+
+<a href="https://bradfrost.com/blog/post/atomic-web-design/" target="_blank">
+  Intro to Atomic Design
+</a>
+
+While the Superset Design System will use Atomic Design principles, we choose a different language to describe the elements.
+
+| Atomic Design   |    Atoms    | Molecules  | Organisms | Templates | Pages / Screens |
+| :-------------- | :---------: | :--------: | :-------: | :-------: | :-------------: |
+| Superset Design | Foundations | Components | Patterns  | Templates |    Features     |
+
+<img
+  src={AtomicDesign}
+  alt="Atoms = Foundations, Molecules = Components, Organisms = Patterns, Templates = Templates, Pages / Screens = Features"
+/>

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

@@ -20,6 +20,7 @@ import React, { RefObject } from 'react';
 import { AntdDropdown } from 'src/components';
 import { DropDownProps } from 'antd/lib/dropdown';
 import { styled } from '@superset-ui/core';
+import Icons from 'src/components/Icons';
 
 const MenuDots = styled.div`
   width: ${({ theme }) => theme.gridUnit * 0.75}px;
@@ -66,14 +67,35 @@ const MenuDotsWrapper = styled.div`
   padding-left: ${({ theme }) => theme.gridUnit}px;
 `;
 
+export enum IconOrientation {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+}
 export interface DropdownProps extends DropDownProps {
   overlay: React.ReactElement;
+  iconOrientation?: IconOrientation;
 }
 
-export const Dropdown = ({ overlay, ...rest }: DropdownProps) => (
+const RenderIcon = (
+  iconOrientation: IconOrientation = IconOrientation.VERTICAL,
+) => {
+  const component =
+    iconOrientation === IconOrientation.HORIZONTAL ? (
+      <Icons.MoreHoriz iconSize="xl" />
+    ) : (
+      <MenuDots />
+    );
+  return component;
+};
+
+export const Dropdown = ({
+  overlay,
+  iconOrientation = IconOrientation.VERTICAL,
+  ...rest
+}: DropdownProps) => (
   <AntdDropdown overlay={overlay} {...rest}>
     <MenuDotsWrapper data-test="dropdown-trigger">
-      <MenuDots />
+      {RenderIcon(iconOrientation)}
     </MenuDotsWrapper>
   </AntdDropdown>
 );

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

@@ -40,7 +40,7 @@ export const LoadingGallery = () => (
         }}
       >
         <h4>{position}</h4>
-        <Loading position={position} image="/src/assets/images/loading.gif" />
+        <Loading position={position} />
       </div>
     ))}
   </>
@@ -71,7 +71,7 @@ InteractiveLoading.story = {
 };
 
 InteractiveLoading.args = {
-  image: '/src/assets/images/loading.gif',
+  image: '',
   className: '',
 };
 

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

@@ -26,11 +26,9 @@ test('Rerendering correctly with default props', () => {
   render(<Loading />);
   const loading = screen.getByRole('status');
   const classNames = loading.getAttribute('class')?.split(' ');
-  const imagePath = loading.getAttribute('src');
   const ariaLive = loading.getAttribute('aria-live');
   const ariaLabel = loading.getAttribute('aria-label');
   expect(loading).toBeInTheDocument();
-  expect(imagePath).toBe('/static/assets/images/loading.gif');
   expect(classNames).toContain('floating');
   expect(classNames).toContain('loading');
   expect(ariaLive).toContain('polite');
@@ -56,7 +54,7 @@ test('support for extra classes', () => {
   expect(classNames).toContain('extra-class');
 });
 
-test('Diferent image path', () => {
+test('Different image path', () => {
   render(<Loading image="/src/assets/images/loading.gif" />);
   const loading = screen.getByRole('status');
   const imagePath = loading.getAttribute('src');

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

@@ -20,6 +20,7 @@
 import React from 'react';
 import { styled } from '@superset-ui/core';
 import cls from 'classnames';
+import Loader from 'src/assets/images/loading.gif';
 
 export type PositionOption =
   | 'floating'
@@ -35,6 +36,7 @@ export interface Props {
 const LoaderImg = styled.img`
   z-index: 99;
   width: 50px;
+  height: unset;
   position: relative;
   margin: 10px;
   &.inline {
@@ -57,14 +59,14 @@ const LoaderImg = styled.img`
 `;
 export default function Loading({
   position = 'floating',
-  image = '/static/assets/images/loading.gif',
+  image,
   className,
 }: Props) {
   return (
     <LoaderImg
       className={cls('loading', position, className)}
       alt="Loading..."
-      src={image}
+      src={image || Loader}
       role="status"
       aria-live="polite"
       aria-label="Loading"

superset-frontend/src/components/MetadataBar/Overview.stories.mdx → superset-frontend/src/components/MetadataBar/MetadataBar.stories.mdx

@@ -1,17 +1,25 @@
-import { Meta, Source } from '@storybook/addon-docs';
+import { Meta, Source, Story } from '@storybook/addon-docs';
 
-<Meta title="MetadataBar/Overview" />
+<Meta title="Design System/Components/MetadataBar/Overview" />
 
-# Usage
+# Metadata bar
 
-The metadata bar component is used to display additional information about an entity. Some of the common applications in Superset are:
+The metadata bar component is used to display additional information about an entity.
+
+## Usage
+
+Some of the common applications in Superset are:
 
 - Display the chart's metadata in Explore to help the user understand what dashboards this chart is added to and get
   to know the details of the chart
 - Display the database's metadata in a drill to detail modal to help the user understand what data they are looking
   at while accessing the feature in the dashboard
 
-# Variations
+## Basic example
+
+<Story id="design-system-components-metadatabar-examples--basic" />
+
+## Variations
 
 The metadata bar is by default a static component (besides the links in text).
 The variations in this component are related to content and entity type as all of the details are predefined
@@ -25,7 +33,7 @@ have the same icon and when hovered it will present who created the entity, its
 To extend the list of content types, a developer needs to request the inclusion of the new type in the design system.
 This process is important to make sure the new type is reviewed by the design team, improving Superset consistency.
 
-To check each content type in detail and its interactions, check the [MetadataBar](/story/metadatabar--component) page.
+To check each content type in detail and its interactions, check the [MetadataBar](/story/design-system-components-metadatabar-examples--basic) page.
 Below you can find the configurations for each content type:
 
 <Source

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

@@ -22,13 +22,13 @@ import { useResizeDetector } from 'react-resize-detector';
 import MetadataBar, { MetadataBarProps, MetadataType } from '.';
 
 export default {
-  title: 'MetadataBar',
+  title: 'Design System/Components/MetadataBar/Examples',
   component: MetadataBar,
 };
 
 const A_WEEK_AGO = 'a week ago';
 
-export const Component = ({
+export const Basic = ({
   items,
   onClick,
 }: MetadataBarProps & {
@@ -61,15 +61,15 @@ export const Component = ({
   );
 };
 
-Component.story = {
+Basic.story = {
   parameters: {
     knobs: {
       disable: true,
     },
   },
 };
 
-Component.args = {
+Basic.args = {
   items: [
     {
       type: MetadataType.SQL,
@@ -99,7 +99,7 @@ Component.args = {
   ],
 };
 
-Component.argTypes = {
+Basic.argTypes = {
   onClick: {
     action: 'onClick',
     table: {