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

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;