test: Tests, dedicated directory and Storybook for the Badge component (

#13513)

* Move to dir and add storybook

* Add tests

* Remove no-restricted-imports

superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx

@@ -18,7 +18,7 @@
  */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Badge from 'src/common/components/Badge';
+import Badge from 'src/components/Badge';
 import { t, styled } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { debounce } from 'lodash';

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

@@ -32,7 +32,6 @@ import {
   DatePicker as AntdDatePicker,
   RangePicker as AntdRangePicker,
 } from './DatePicker';
-import Badge from './Badge';
 import ProgressBar from './ProgressBar';
 import { CronPicker, CronError } from './CronPicker';
 
@@ -254,15 +253,6 @@ export const Switch = () => (
   </>
 );
 
-export const BadgeDefault = () => <Badge count={100} />;
-export const BadgeColored = () => <Badge color="blue" text="Blue" />;
-export const BadgeTextColored = () => (
-  <Badge textColor="yellow" color="red" text="yellow" />
-);
-export const BadgeSuccess = () => <Badge status="success" text="Success" />;
-export const BadgeError = () => <Badge status="error" text="Error" />;
-export const BadgeSmall = () => <Badge count={100} size="small" />;
-
 export function StyledCronPicker() {
   // @ts-ignore
   const inputRef = useRef<Input>(null);

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

@@ -57,7 +57,6 @@ export { TreeProps } from 'antd/lib/tree';
 export { FormInstance } from 'antd/lib/form';
 export { RadioChangeEvent } from 'antd/lib/radio';
 
-export { default as Badge } from './Badge';
 export { default as Collapse } from './Collapse';
 export { default as Progress } from './ProgressBar';
 

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

@@ -0,0 +1,172 @@
+/**
+ * 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 Badge, { BadgeProps } from '.';
+
+export default {
+  title: 'Badge',
+  component: Badge,
+};
+
+type BadgeColor = Pick<BadgeProps, 'color'>;
+type BadgeColorValue = BadgeColor[keyof BadgeColor];
+type BadgeSize = Pick<BadgeProps, 'size'>;
+type BadgeSizeValue = BadgeSize[keyof BadgeSize];
+
+const badgeColors: BadgeColorValue[] = [
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime',
+];
+const badgeSizes: BadgeSizeValue[] = ['default', 'small'];
+const STATUSES = ['default', 'error', 'warning', 'success', 'processing'];
+
+const COLORS = {
+  label: 'colors',
+  options: badgeColors,
+  defaultValue: undefined,
+};
+
+const SIZES = {
+  label: 'sizes',
+  options: badgeSizes,
+  defaultValue: undefined,
+};
+
+export const InteractiveBadge = (args: BadgeProps) => <Badge {...args} />;
+
+InteractiveBadge.args = {
+  count: null,
+  color: null,
+  text: 'Text',
+  textColor: null,
+  status: 'success',
+  size: 'default',
+};
+
+InteractiveBadge.argTypes = {
+  status: {
+    control: {
+      type: 'select',
+      options: [undefined, ...STATUSES],
+    },
+  },
+  size: {
+    control: {
+      type: 'select',
+      options: SIZES.options,
+    },
+  },
+  color: {
+    control: {
+      type: 'select',
+      options: [undefined, ...COLORS.options],
+    },
+  },
+  textColor: {
+    control: {
+      type: 'select',
+      options: [undefined, ...COLORS.options],
+    },
+  },
+  count: {
+    control: {
+      type: 'select',
+      options: [undefined, ...Array(100).keys()],
+    },
+  },
+};
+
+InteractiveBadge.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
+
+export const BadgeGallery = () => (
+  <>
+    {SIZES.options.map(size => (
+      <div key={size} style={{ marginBottom: 40 }}>
+        <h4>{size}</h4>
+        {COLORS.options.map(color => (
+          <Badge
+            count={9}
+            textColor={color}
+            size={size}
+            key={`${color}_${size}`}
+            style={{ marginRight: '15px' }}
+          />
+        ))}
+      </div>
+    ))}
+  </>
+);
+
+export const BadgeTextGallery = () => (
+  <>
+    {COLORS.options.map(color => (
+      <Badge
+        text="Hello"
+        color={color}
+        key={color}
+        style={{ marginRight: '15px' }}
+      />
+    ))}
+  </>
+);
+
+BadgeGallery.story = {
+  parameters: {
+    actions: {
+      disable: true,
+    },
+    controls: {
+      disable: true,
+    },
+    knobs: {
+      disable: true,
+    },
+  },
+};
+
+BadgeTextGallery.story = {
+  parameters: {
+    actions: {
+      disable: true,
+    },
+    controls: {
+      disable: true,
+    },
+    knobs: {
+      disable: true,
+    },
+  },
+};

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

@@ -0,0 +1,50 @@
+/**
+ * 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 { render, screen } from 'spec/helpers/testing-library';
+import Badge from '.';
+
+const mockedProps = {
+  count: 9,
+  text: 'Text',
+  textColor: 'orange',
+};
+
+test('should render', () => {
+  const { container } = render(<Badge {...mockedProps} />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the count', () => {
+  render(<Badge {...mockedProps} />);
+  expect(screen.getAllByText('9')[0]).toBeInTheDocument();
+});
+
+test('should render the text', () => {
+  render(<Badge {...mockedProps} />);
+  expect(screen.getByText('Text')).toBeInTheDocument();
+});
+
+test('should render with the chosen textColor', () => {
+  render(<Badge {...mockedProps} />);
+  const badge = screen.getAllByText('9')[0];
+  expect(badge).toHaveStyle(`
+    color: 'orange';
+  `);
+});

superset-frontend/src/common/components/Badge.tsx → superset-frontend/src/components/Badge/index.tsx

@@ -18,11 +18,10 @@
  */
 import React from 'react';
 import { styled } from '@superset-ui/core';
-// eslint-disable-next-line no-restricted-imports
 import { Badge as AntdBadge } from 'antd';
 import { BadgeProps as AntdBadgeProps } from 'antd/lib/badge';
 
-interface BadgeProps extends AntdBadgeProps {
+export interface BadgeProps extends AntdBadgeProps {
   textColor?: string;
 }
 

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { Col, Well } from 'react-bootstrap';
 import { Radio } from 'src/common/components/Radio';
 import Alert from 'src/components/Alert';
-import Badge from 'src/common/components/Badge';
+import Badge from 'src/components/Badge';
 import shortid from 'shortid';
 import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core';
 import Button from 'src/components/Button';

superset-frontend/src/profile/components/Security.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import Badge from 'src/common/components/Badge';
+import Badge from 'src/components/Badge';
 import { t } from '@superset-ui/core';
 
 import Label from 'src/components/Label';