refactor: Move Badge to Antdesign (apache#11899)

* Move Badge to Antdesign * Export enhanced badge only * Center number in badge
bipinct · Dec 5, 2020 · 2c32342 · 2c32342
1 parent 64d6fb9
commit 2c32342
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 9 deletions.
diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge } from 'react-bootstrap';
+import Badge from 'src/common/components/Badge';
 import { t, styled } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
@@ -127,7 +127,7 @@ export default class TemplateParamsEditor extends React.Component {
         triggerNode={
           <Button tooltip={t('Edit template parameters')} buttonSize="small">
             {`${t('parameters')} `}
-            {paramCount > 0 && <Badge>{paramCount}</Badge>}
+            <Badge count={paramCount} />
             {!this.state.isValid && (
               <InfoTooltipWithTrigger
                 icon="exclamation-triangle"

diff --git a/superset-frontend/src/common/components/Badge.tsx b/superset-frontend/src/common/components/Badge.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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';
+// 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 {
+  textColor?: string;
+}
+
+const Badge = styled((
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  { textColor, ...props }: BadgeProps,
+) => <AntdBadge {...props} />)`
+  & > sup {
+    padding: 0 0.35px 0 0;
+    background: ${({ theme, color }) => color || theme.colors.primary.base};
+    color: ${({ theme, textColor }) =>
+      textColor || theme.colors.grayscale.light5};
+  }
+`;
+
+export default Badge;
diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
@@ -32,6 +32,7 @@ import {
   DatePicker as AntdDatePicker,
   RangePicker as AntdRangePicker,
 } from './DatePicker';
+import Badge from './Badge';
 import ProgressBar from './ProgressBar';
 
 export default {
@@ -251,3 +252,12 @@ export const Switch = () => (
     <AntdSwitch size="small" defaultChecked />
   </>
 );
+
+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" />;
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
@@ -21,7 +21,6 @@ import { styled } from '@superset-ui/core';
 // eslint-disable-next-line no-restricted-imports
 import { Menu as AntdMenu, Dropdown, Skeleton } from 'antd';
 import { DropDownProps } from 'antd/lib/dropdown';
-
 /*
   Antd is re-exported from here so we can override components with Emotion as needed.
 
@@ -48,6 +47,7 @@ export {
   Tooltip,
 } from 'antd';
 
+export { default as Badge } from 'src/common/components/Badge';
 export { default as Progress } from 'src/common/components/ProgressBar';
 
 export const MenuItem = styled(AntdMenu.Item)`

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 { Alert, Badge, Col, Radio, Well } from 'react-bootstrap';
+import { Alert, Col, Radio, Well } from 'react-bootstrap';
+import Badge from 'src/common/components/Badge';
 import shortid from 'shortid';
 import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core';
 
@@ -94,7 +95,7 @@ DATASOURCE_TYPES_ARR.forEach(o => {
 function CollectionTabTitle({ title, collection }) {
   return (
     <div data-test={`collection-tab-${title}`}>
-      {title} <Badge>{collection ? collection.length : 0}</Badge>
+      {title} <Badge count={collection ? collection.length : 0} showZero />
     </div>
   );
 }

diff --git a/superset-frontend/src/profile/components/Security.tsx b/superset-frontend/src/profile/components/Security.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { Badge } from 'react-bootstrap';
+import Badge from 'src/common/components/Badge';
 import { t } from '@superset-ui/core';
 
 import Label from 'src/components/Label';
@@ -32,7 +32,7 @@ export default function Security({ user }: SecurityProps) {
     <div>
       <div className="roles">
         <h4>
-          {t('Roles')} <Badge>{Object.keys(user.roles).length}</Badge>
+          {t('Roles')} <Badge count={Object.keys(user.roles).length} showZero />
         </h4>
         {Object.keys(user.roles).map(role => (
           <Label key={role}>{role}</Label>
@@ -44,7 +44,7 @@ export default function Security({ user }: SecurityProps) {
           <div>
             <h4>
               {t('Databases')}{' '}
-              <Badge>{user.permissions.database_access.length}</Badge>
+              <Badge count={user.permissions.database_access.length} showZero />
             </h4>
             {user.permissions.database_access.map(role => (
               <Label key={role}>{role}</Label>
@@ -58,7 +58,10 @@ export default function Security({ user }: SecurityProps) {
           <div>
             <h4>
               {t('Datasets')}{' '}
-              <Badge>{user.permissions.datasource_access.length}</Badge>
+              <Badge
+                count={user.permissions.datasource_access.length}
+                showZero
+              />
             </h4>
             {user.permissions.datasource_access.map(role => (
               <Label key={role}>{role}</Label>