Fix dashboard header popovers that get stuck open. Resolves #7761 (#8811)

frontend/src/metabase/dashboard/components/DashboardActions.jsx

@@ -21,9 +21,9 @@ export const getDashboardActions = ({
   if (!isEditing && !isEmpty) {
     buttons.push(
       <RefreshWidget
+        key="refresh"
         data-metabase-event="Dashboard;Refresh Menu Open"
         className="text-brand-hover"
-        key="refresh"
         period={refreshPeriod}
         elapsed={refreshElapsed}
         onChangePeriod={onRefreshPeriodChange}
@@ -33,11 +33,13 @@ export const getDashboardActions = ({
 
   if (!isEditing && isFullscreen) {
     buttons.push(
-      <Tooltip tooltip={isNightMode ? t`Daytime mode` : t`Nighttime mode`}>
+      <Tooltip
+        key="night"
+        tooltip={isNightMode ? t`Daytime mode` : t`Nighttime mode`}
+      >
         <span data-metabase-event={"Dashboard;Night Mode;" + !isNightMode}>
           <NightModeIcon
             className="text-brand-hover cursor-pointer"
-            key="night"
             isNightMode={isNightMode}
             onClick={() => onNightModeChange(!isNightMode)}
           />
@@ -50,6 +52,7 @@ export const getDashboardActions = ({
     // option click to enter fullscreen without making the browser go fullscreen
     buttons.push(
       <Tooltip
+        key="fullscreen"
         tooltip={isFullscreen ? t`Exit fullscreen` : t`Enter fullscreen`}
       >
         <span
@@ -57,7 +60,6 @@ export const getDashboardActions = ({
         >
           <FullscreenIcon
             className="text-brand-hover cursor-pointer"
-            key="fullscreen"
             isFullscreen={isFullscreen}
             onClick={e => onFullscreenChange(!isFullscreen, !e.altKey)}
           />

frontend/src/metabase/dashboard/components/DashboardHeader.jsx

@@ -210,7 +210,7 @@ export default class DashboardHeader extends Component {
     if (!isFullscreen && canEdit) {
       buttons.push(
         <ModalWithTrigger
-          key="add"
+          key="add-a-question"
           ref="addQuestionModal"
           triggerElement={
             <Tooltip tooltip={t`Add a question`}>
@@ -244,7 +244,7 @@ export default class DashboardHeader extends Component {
     if (isEditing) {
       // Parameters
       buttons.push(
-        <span>
+        <span key="add-a-filter">
           <Tooltip tooltip={t`Add a filter`}>
             <a
               key="parameters"
@@ -272,7 +272,7 @@ export default class DashboardHeader extends Component {
 
       // Add text card button
       buttons.push(
-        <Tooltip tooltip={t`Add a text box`}>
+        <Tooltip key="add-a-text-box" tooltip={t`Add a text box`}>
           <a
             data-metabase-event="Dashboard;Add Text Box"
             key="add-text"
@@ -286,7 +286,7 @@ export default class DashboardHeader extends Component {
       );
 
       buttons.push(
-        <Tooltip tooltip={t`Revision history`}>
+        <Tooltip key="revision-history" tooltip={t`Revision history`}>
           <Link
             to={location.pathname + "/history"}
             data-metabase-event={"Dashboard;Revisions"}
@@ -299,7 +299,7 @@ export default class DashboardHeader extends Component {
 
     if (!isFullscreen) {
       buttons.push(
-        <Tooltip tooltip={t`Move dashboard`}>
+        <Tooltip key="new-dashboard" tooltip={t`Move dashboard`}>
           <Link
             to={location.pathname + "/move"}
             data-metabase-event={"Dashboard;Move"}
@@ -312,7 +312,7 @@ export default class DashboardHeader extends Component {
 
     if (!isFullscreen && !isEditing && canEdit) {
       buttons.push(
-        <Tooltip tooltip={t`Edit dashboard`}>
+        <Tooltip key="edit-dashboard" tooltip={t`Edit dashboard`}>
           <a
             data-metabase-event="Dashboard;Edit"
             key="edit"
@@ -331,7 +331,9 @@ export default class DashboardHeader extends Component {
       ((isPublicLinksEnabled && (isAdmin || dashboard.public_uuid)) ||
         (isEmbeddingEnabled && isAdmin))
     ) {
-      buttons.push(<DashboardEmbedWidget dashboard={dashboard} />);
+      buttons.push(
+        <DashboardEmbedWidget key="dashboard-embed" dashboard={dashboard} />,
+      );
     }
 
     buttons.push(...getDashboardActions(this.props));