From ff4c407a0531cc86c8c1aa431bdedbe3c7ba15ef Mon Sep 17 00:00:00 2001
From: Eric P Green <ericpgreen2@gmail.com>
Date: Wed, 13 Sep 2023 11:05:51 -0400
Subject: [PATCH] Factor out a `ViewAsUserMenuItem` component

---
 .../authentication/UserButton.svelte          | 36 ++++-----------
 .../view-as-user/ViewAsUserMenuItem.svelte    | 45 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/web-admin/src/components/authentication/UserButton.svelte b/web-admin/src/components/authentication/UserButton.svelte
index bc86f9ecb2b..47a80335459 100644
--- a/web-admin/src/components/authentication/UserButton.svelte
+++ b/web-admin/src/components/authentication/UserButton.svelte
@@ -5,13 +5,12 @@
     PopoverButton,
     PopoverPanel,
   } from "@rgossiaux/svelte-headlessui";
-  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import { MenuItem } from "@rilldata/web-common/components/menu";
   import Menu from "@rilldata/web-common/components/menu/core/Menu.svelte";
   import { createPopperActions } from "svelte-popperjs";
   import { createAdminServiceGetCurrentUser } from "../../client";
   import { ADMIN_URL } from "../../client/http-client";
-  import ViewAsUserPopover from "../../features/view-as-user/ViewAsUserPopover.svelte";
+  import ViewAsUserMenuItem from "../../features/view-as-user/ViewAsUserMenuItem.svelte";
   import ProjectAccessControls from "../projects/ProjectAccessControls.svelte";
 
   const user = createAdminServiceGetCurrentUser();
@@ -27,7 +26,7 @@
 
   const isDev = process.env.NODE_ENV === "development";
 
-  // Position the first popover
+  // Position the Menu popover
   const [popperRef1, popperContent1] = createPopperActions();
   const popperOptions1 = {
     placement: "bottom-end",
@@ -35,13 +34,8 @@
     modifiers: [{ name: "offset", options: { offset: [0, 4] } }],
   };
 
-  // Position the nested popover
+  // Position the View As User popover
   const [popperRef2, popperContent2] = createPopperActions();
-  const popperOptions = {
-    placement: "left-start",
-    strategy: "fixed",
-    modifiers: [{ name: "offset", options: { offset: [0, 4] } }],
-  };
 </script>
 
 <Popover class="relative" let:close={close1}>
@@ -64,28 +58,14 @@
           project={$page.params.project}
         >
           <svelte:fragment slot="manage-project">
-            <Popover>
-              <PopoverButton class="w-full text-left">
-                <MenuItem animateSelect={false}>
-                  View as
-                  <CaretDownIcon
-                    className="transform -rotate-90"
-                    slot="right"
-                    size="14px"
-                  />
-                </MenuItem>
-              </PopoverButton>
-              <PopoverPanel use={[[popperContent2, popperOptions]]}>
-                <ViewAsUserPopover
-                  organization={$page.params.organization}
-                  project={$page.params.project}
-                  on:select={() => close1(undefined)}
-                />
-              </PopoverPanel>
-            </Popover>
+            <ViewAsUserMenuItem
+              popperContent={popperContent2}
+              on:select-user={() => close1(undefined)}
+            />
           </svelte:fragment>
         </ProjectAccessControls>
       {/if}
+
       <MenuItem
         on:select={() => {
           // handleClose();
diff --git a/web-admin/src/features/view-as-user/ViewAsUserMenuItem.svelte b/web-admin/src/features/view-as-user/ViewAsUserMenuItem.svelte
index 2e2e8969d4e..1633762bf38 100644
--- a/web-admin/src/features/view-as-user/ViewAsUserMenuItem.svelte
+++ b/web-admin/src/features/view-as-user/ViewAsUserMenuItem.svelte
@@ -1 +1,44 @@
-<!-- TODO: move code from `UserButton.svelte` -->
+<script lang="ts">
+  import { page } from "$app/stores";
+  import type { Modifier } from "@popperjs/core";
+  import {
+    Popover,
+    PopoverButton,
+    PopoverPanel,
+  } from "@rgossiaux/svelte-headlessui";
+  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
+  import { MenuItem } from "@rilldata/web-common/components/menu";
+  import { createEventDispatcher } from "svelte";
+  import type { ContentAction } from "svelte-popperjs";
+  import ViewAsUserPopover from "../../features/view-as-user/ViewAsUserPopover.svelte";
+
+  export let popperContent: ContentAction<Partial<Modifier<any, any>>>;
+
+  const popperOptions = {
+    placement: "left-start",
+    strategy: "fixed",
+    modifiers: [{ name: "offset", options: { offset: [0, 4] } }],
+  };
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<Popover>
+  <PopoverButton class="w-full text-left">
+    <MenuItem animateSelect={false}>
+      View as
+      <CaretDownIcon
+        className="transform -rotate-90"
+        slot="right"
+        size="14px"
+      />
+    </MenuItem>
+  </PopoverButton>
+  <PopoverPanel use={[[popperContent, popperOptions]]}>
+    <ViewAsUserPopover
+      organization={$page.params.organization}
+      project={$page.params.project}
+      on:select={() => dispatch("select-user")}
+    />
+  </PopoverPanel>
+</Popover>