From ff2e283430c0171b07442fbde6c74777ce75fcc4 Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Tue, 5 Dec 2023 19:57:04 +1000
Subject: [PATCH] chore: move realtime inspector role impersonation popover
 (#19403)

---
 .../components/interfaces/Realtime/Inspector/Header.tsx     | 2 +-
 .../Realtime/Inspector/RealtimeTokensPopover/index.tsx      | 2 +-
 .../RoleImpersonationSelector/RoleImpersonationPopover.tsx  | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx b/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx
index bc4db794c1f..db806c9d303 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/Header.tsx
@@ -17,6 +17,7 @@ export const Header = ({ config, onChangeConfig }: HeaderProps) => {
     <div className="flex flex-row h-14 gap-2.5 items-center px-4">
       <div className="flex flex-row">
         <ChooseChannelPopover config={config} onChangeConfig={onChangeConfig} />
+        <RealtimeTokensPopover config={config} onChangeConfig={onChangeConfig} />
         <Button
           size="tiny"
           type={config.enabled ? 'warning' : 'primary'}
@@ -28,7 +29,6 @@ export const Header = ({ config, onChangeConfig }: HeaderProps) => {
           {config.enabled ? `Stop listening` : `Start listening`}
         </Button>
       </div>
-      <RealtimeTokensPopover config={config} onChangeConfig={onChangeConfig} />
       <RealtimeFilterPopover config={config} onChangeConfig={onChangeConfig} />
     </div>
   )
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
index 23ca0ce2f3e..2cb05a85f17 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
@@ -46,5 +46,5 @@ export const RealtimeTokensPopover = ({ config, onChangeConfig }: RealtimeTokens
     }
   }, [config.projectRef, jwtSecret, serviceRoleKey, snap.role])
 
-  return <RoleImpersonationPopover align="start" />
+  return <RoleImpersonationPopover align="start" variant="connected-on-both" />
 }
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx
index f44e57d001d..b86d8b24b83 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx
@@ -9,7 +9,7 @@ import RoleImpersonationSelector from './RoleImpersonationSelector'
 
 export interface RoleImpersonationPopoverProps {
   serviceRoleLabel?: string
-  variant?: 'regular' | 'connected-on-right'
+  variant?: 'regular' | 'connected-on-right' | 'connected-on-left' | 'connected-on-both'
   align?: 'center' | 'start' | 'end'
 }
 
@@ -32,7 +32,9 @@ const RoleImpersonationPopover = ({
           type="default"
           className={cn(
             'h-[26px] pr-3 gap-0',
-            variant === 'connected-on-right' && 'rounded-r-none border-r-0'
+            variant === 'connected-on-right' && 'rounded-r-none border-r-0',
+            variant === 'connected-on-left' && 'rounded-l-none border-l-0',
+            variant === 'connected-on-both' && 'rounded-none border-x-0'
           )}
         >
           <div className="flex items-center gap-1">