fix(#46893) - Sharing popover in query builder view should be next to button (#47065)

e2e/test/scenarios/sharing/public-sharing-embed-button-behavior.cy.spec.js

@@ -279,6 +279,54 @@ describe("#39152 sharing an unsaved question", () => {
   });
 });
 
+describe("metabase#46893 - popover should appear next to button, not at the top left of the page", () => {
+  it("should show the public link popover next to the dashboard sharing button", () => {
+    restore();
+    cy.signInAsAdmin();
+    cy.request("PUT", "/api/setting/enable-public-sharing", { value: true });
+
+    createResource("dashboard").then(({ body: { id } }) => {
+      createPublicDashboardLink(id);
+      visitDashboard(id);
+    });
+
+    cy.findByTestId("resource-embed-button").click();
+
+    cy.findByTestId("embed-header-menu").then($menu => {
+      cy.findByTestId("resource-embed-button").then($button => {
+        const menuRect = $menu[0].getBoundingClientRect();
+        const buttonRect = $button[0].getBoundingClientRect();
+
+        expect(menuRect.left).to.be.closeTo(buttonRect.left, 20);
+        expect(menuRect.top).to.be.closeTo(buttonRect.bottom, 20);
+      });
+    });
+  });
+
+  it("should show the public link popover next to the question sharing button", () => {
+    restore();
+    cy.signInAsAdmin();
+    cy.request("PUT", "/api/setting/enable-public-sharing", { value: true });
+
+    createResource("question").then(({ body: { id } }) => {
+      createPublicQuestionLink(id);
+      visitQuestion(id);
+    });
+
+    cy.findByTestId("resource-embed-button").click();
+
+    cy.findByTestId("embed-header-menu").then($menu => {
+      cy.findByTestId("resource-embed-button").then($button => {
+        const menuRect = $menu[0].getBoundingClientRect();
+        const buttonRect = $button[0].getBoundingClientRect();
+
+        expect(menuRect.right).to.be.closeTo(buttonRect.right, 20);
+        expect(menuRect.bottom).to.be.closeTo(buttonRect.top, 20);
+      });
+    });
+  });
+});
+
 ["dashboard", "question"].forEach(resource => {
   describeWithSnowplow(`public ${resource} sharing snowplow events`, () => {
     beforeEach(() => {

frontend/src/metabase/components/ViewFooterButton/ViewFooterButton.tsx

@@ -17,12 +17,12 @@ export type ViewFooterButtonProps = {
 
 export const ViewFooterButton = forwardRef(function _ViewFooterButton(
   { icon, tooltipLabel, ...actionIconProps }: ViewFooterButtonProps,
-  ref: Ref<HTMLButtonElement>,
+  ref: Ref<HTMLDivElement>,
 ) {
   return (
     <Tooltip label={tooltipLabel}>
-      <Center>
-        <ActionIcon ref={ref} variant="viewFooter" {...actionIconProps}>
+      <Center ref={ref}>
+        <ActionIcon variant="viewFooter" {...actionIconProps}>
           <Icon size={18} name={icon} />
         </ActionIcon>
       </Center>

frontend/src/metabase/dashboard/components/EmbedMenu/AdminEmbedMenu.styled.tsx

-import styled from "@emotion/styled";
-
-import { Menu } from "metabase/ui";
-
-export const AdminEmbedMenuContainer = styled(Menu.Dropdown)`
-  overflow: auto;
-`;

frontend/src/metabase/dashboard/components/EmbedMenu/AdminEmbedMenu.tsx

 import { useState } from "react";
 import { t } from "ttag";
 
+import CS from "metabase/css/core/index.css";
 import type {
   EmbedMenuModes,
   EmbedMenuProps,
@@ -15,8 +16,6 @@ import { ViewFooterSharingButton } from "metabase/query_builder/components/view/
 import { getSetting } from "metabase/selectors/settings";
 import { Center, Icon, Menu, Stack, Text, Title } from "metabase/ui";
 
-import { AdminEmbedMenuContainer } from "./AdminEmbedMenu.styled";
-
 export const AdminEmbedMenu = ({
   resource,
   resourceType,
@@ -59,9 +58,15 @@ export const AdminEmbedMenu = ({
 
   return (
     <Menu withinPortal position="bottom-start">
-      <Menu.Target>{target}</Menu.Target>
+      <Menu.Target>
+        <Center>{target}</Center>
+      </Menu.Target>
 
-      <AdminEmbedMenuContainer w="13.75rem" data-testid="embed-header-menu">
+      <Menu.Dropdown
+        className={CS.overflowAuto}
+        w="13.75rem"
+        data-testid="embed-header-menu"
+      >
         <Menu.Item
           data-testid="embed-menu-public-link-item"
           py={isPublicSharingEnabled ? "md" : "sm"}
@@ -105,7 +110,7 @@ export const AdminEmbedMenu = ({
             </Stack>
           )}
         </Menu.Item>
-      </AdminEmbedMenuContainer>
+      </Menu.Dropdown>
     </Menu>
   );
 };