mirror of https://github.com/apache/superset.git
fix(explore): Small changes in metadata bar copy and tooltip placement (#21952)
This commit is contained in:
parent
102909e004
commit
3c7a081281
|
@ -81,7 +81,9 @@ function verifyMetabar(text) {
|
|||
|
||||
function saveAndVerifyDashboard(number) {
|
||||
saveChartToDashboard(`${number} - Sample dashboard`);
|
||||
verifyMetabar(`Added to ${number} dashboard(s)`);
|
||||
verifyMetabar(
|
||||
number > 1 ? `Added to ${number} dashboards` : 'Added to 1 dashboard',
|
||||
);
|
||||
openDashboardsAddedTo();
|
||||
verifyDashboardsSubmenuItem(`${number} - Sample dashboard`);
|
||||
}
|
||||
|
|
|
@ -301,7 +301,9 @@ export default function DrillDetailPane({
|
|||
margin-bottom: ${theme.gridUnit * 4}px;
|
||||
`}
|
||||
>
|
||||
{status === 'complete' && <MetadataBar items={items} />}
|
||||
{status === 'complete' && (
|
||||
<MetadataBar items={items} tooltipPlacement="bottom" />
|
||||
)}
|
||||
{status === 'error' && (
|
||||
<Alert
|
||||
type="error"
|
||||
|
|
|
@ -20,7 +20,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import { uniqWith } from 'lodash';
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { Tooltip, TooltipPlacement } from 'src/components/Tooltip';
|
||||
import { ContentType } from './ContentType';
|
||||
import { config } from './ContentConfig';
|
||||
|
||||
|
@ -116,11 +116,13 @@ const Item = ({
|
|||
contentType,
|
||||
collapsed,
|
||||
last = false,
|
||||
tooltipPlacement,
|
||||
}: {
|
||||
barWidth: number | undefined;
|
||||
contentType: ContentType;
|
||||
collapsed: boolean;
|
||||
last?: boolean;
|
||||
tooltipPlacement: TooltipPlacement;
|
||||
}) => {
|
||||
const { icon, title, tooltip = title } = config(contentType);
|
||||
const [isTruncated, setIsTruncated] = useState(false);
|
||||
|
@ -149,7 +151,10 @@ const Item = ({
|
|||
</StyledItem>
|
||||
);
|
||||
return isTruncated || collapsed || (tooltip && tooltip !== title) ? (
|
||||
<Tooltip title={<TootipContent>{tooltip}</TootipContent>}>
|
||||
<Tooltip
|
||||
placement={tooltipPlacement}
|
||||
title={<TootipContent>{tooltip}</TootipContent>}
|
||||
>
|
||||
{content}
|
||||
</Tooltip>
|
||||
) : (
|
||||
|
@ -163,6 +168,11 @@ export interface MetadataBarProps {
|
|||
* for each content type, check {@link ContentType}
|
||||
*/
|
||||
items: ContentType[];
|
||||
/**
|
||||
* Antd tooltip placement. To see available values, check {@link TooltipPlacement}.
|
||||
* Defaults to "top".
|
||||
*/
|
||||
tooltipPlacement?: TooltipPlacement;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -173,7 +183,7 @@ export interface MetadataBarProps {
|
|||
* 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.
|
||||
*/
|
||||
const MetadataBar = ({ items }: MetadataBarProps) => {
|
||||
const MetadataBar = ({ items, tooltipPlacement = 'top' }: MetadataBarProps) => {
|
||||
const [width, setWidth] = useState<number>();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const uniqueItems = uniqWith(items, (a, b) => a.type === b.type);
|
||||
|
@ -211,6 +221,7 @@ const MetadataBar = ({ items }: MetadataBarProps) => {
|
|||
contentType={item}
|
||||
collapsed={collapsed}
|
||||
last={index === count - 1}
|
||||
tooltipPlacement={tooltipPlacement}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
|
|
|
@ -159,21 +159,35 @@ test('Cancelling changes to the properties should reset previous properties', as
|
|||
test('renders the metadata bar when saved', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true });
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
expect(
|
||||
await screen.findByText('Added to 1 dashboard(s)'),
|
||||
).toBeInTheDocument();
|
||||
expect(await screen.findByText('Added to 1 dashboard')).toBeInTheDocument();
|
||||
expect(await screen.findByText('Simple description')).toBeInTheDocument();
|
||||
expect(await screen.findByText('John Doe')).toBeInTheDocument();
|
||||
expect(await screen.findByText('2 days ago')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Changes "Added to X dashboards" to plural when more than 1 dashboard', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true });
|
||||
render(
|
||||
<ExploreHeader
|
||||
{...props}
|
||||
metadata={{
|
||||
...props.metadata,
|
||||
dashboards: [
|
||||
{ id: 1, dashboard_title: 'Test' },
|
||||
{ id: 2, dashboard_title: 'Test2' },
|
||||
],
|
||||
}}
|
||||
/>,
|
||||
{ useRedux: true },
|
||||
);
|
||||
expect(await screen.findByText('Added to 2 dashboards')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('does not render the metadata bar when not saved', async () => {
|
||||
const props = createProps({ showTitlePanelItems: true, slice: null });
|
||||
render(<ExploreHeader {...props} />, { useRedux: true });
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.queryByText('Added to 1 dashboard(s)'),
|
||||
).not.toBeInTheDocument(),
|
||||
expect(screen.queryByText('Added to 1 dashboard')).not.toBeInTheDocument(),
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
@ -26,6 +26,7 @@ import {
|
|||
logging,
|
||||
SupersetClient,
|
||||
t,
|
||||
tn,
|
||||
} from '@superset-ui/core';
|
||||
import { chartPropShape } from 'src/dashboard/util/propShapes';
|
||||
import AlteredSliceTag from 'src/components/AlteredSliceTag';
|
||||
|
@ -170,12 +171,17 @@ export const ExploreChartHeader = ({
|
|||
type: MetadataType.DASHBOARDS,
|
||||
title:
|
||||
metadata.dashboards.length > 0
|
||||
? t('Added to %s dashboard(s)', metadata.dashboards.length)
|
||||
? tn(
|
||||
'Added to 1 dashboard',
|
||||
'Added to %s dashboards',
|
||||
metadata.dashboards.length,
|
||||
metadata.dashboards.length,
|
||||
)
|
||||
: t('Not added to any dashboard'),
|
||||
description:
|
||||
metadata.dashboards.length > 0
|
||||
? t(
|
||||
'You can preview the list of dashboards on the chart settings dropdown.',
|
||||
'You can preview the list of dashboards in the chart settings dropdown.',
|
||||
)
|
||||
: undefined,
|
||||
});
|
||||
|
@ -196,7 +202,7 @@ export const ExploreChartHeader = ({
|
|||
value: slice?.description,
|
||||
});
|
||||
}
|
||||
return <MetadataBar items={items} />;
|
||||
return <MetadataBar items={items} tooltipPlacement="bottom" />;
|
||||
}, [metadata, slice?.description]);
|
||||
|
||||
const oldSliceName = slice?.slice_name;
|
||||
|
|
Loading…
Reference in New Issue