fix(explore): Small changes in metadata bar copy and tooltip placement (

#21952)

superset-frontend/cypress-base/cypress/integration/explore/chart.test.js

@@ -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`);
 }

superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx

@@ -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"

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

@@ -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>

superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx

@@ -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(),
   );
 });
 

superset-frontend/src/explore/components/ExploreChartHeader/index.jsx

@@ -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;