This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 2c32342 refactor: Move Badge to Antdesign (#11899)
2c32342 is described below
commit 2c323426d1cc6a44249a38f989461e5b2b6a8c7b
Author: Geido <[email protected]>
AuthorDate: Sat Dec 5 03:06:54 2020 +0200
refactor: Move Badge to Antdesign (#11899)
* Move Badge to Antdesign
* Export enhanced badge only
* Center number in badge
---
.../src/SqlLab/components/TemplateParamsEditor.jsx | 4 +--
superset-frontend/src/common/components/Badge.tsx | 41 ++++++++++++++++++++++
.../src/common/components/common.stories.tsx | 10 ++++++
superset-frontend/src/common/components/index.tsx | 2 +-
.../src/datasource/DatasourceEditor.jsx | 5 +--
.../src/profile/components/Security.tsx | 11 +++---
6 files changed, 64 insertions(+), 9 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
index abfbf57..823999c 100644
--- 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
new file mode 100644
index 0000000..ea5247f
--- /dev/null
+++ 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
index 8bde74e..59d83cf 100644
--- 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
index 02328ec..1ae7dee 100644
--- 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
index 0a730bf..aebeaeb 100644
--- 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
index 35daa81..2c04bbb 100644
--- 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>
