Show Debug Tools for embedded users

Author: ppsreejith

web/src/components/devtools/UserDebugTools.tsx

@@ -4,6 +4,9 @@ import { SettingsBlock } from "../common/SettingsBlock";
 import { getApp } from "../../helpers/app";
 import { getDashboardState } from "apps";
 import { get, set } from "lodash";
+import { getParsedIframeInfo } from "../../helpers/origin";
+import { useSelector } from "react-redux";
+import { RootState } from "../../state/store";
 
 
 const useAppStore = getApp().useStore()
@@ -61,6 +64,21 @@ const downloadState = async (pageType: string) => {
 
 export const UserDebugTools: React.FC = () => {
     const pageType = useAppStore((state) => state.toolContext.pageType)
+    const isEmbedded = getParsedIframeInfo().isEmbedded as unknown === 'true'
+    const activeThread = useSelector((state: RootState) => state.chat.threads[state.chat.activeThread])
+    const conversationID = activeThread.id
+    // In embedded mode, just display converstaion ID
+    if (isEmbedded) {
+        return <>
+            <VStack mb={4} alignItems={"stretch"} spacing={2} width="100%">
+                <Text fontSize="2xl" fontWeight="bold">User Debug Tools</Text>
+                <Text > Tools for users to debug and look into Metabase internal workings</Text>
+                <SettingsBlock title="Conversation ID">
+                    <Text>{conversationID}</Text>
+                </SettingsBlock>
+            </VStack>
+        </>
+    }
     return <>
         <VStack mb={4} alignItems={"stretch"} spacing={2} width="100%">
             <Text fontSize="2xl" fontWeight="bold">User Debug Tools</Text>

web/src/components/devtools/index.tsx

@@ -27,6 +27,7 @@ import { RootState } from '../../state/store';
 import { UserDebugTools } from './UserDebugTools';
 import { History } from './History';
 import { getParsedIframeInfo } from '../../helpers/origin'
+import { useGetUserStateQuery } from '../../app/api/userStateApi';
 
 const Monitors: MonitorDef[] = [
   {
@@ -89,6 +90,8 @@ const Monitors: MonitorDef[] = [
 ]
 
 export const DevToolsBox: React.FC = () => {
+  const { data: userState, isLoading } = useGetUserStateQuery({})
+  const isInfoPageEnabled = userState?.flags?.isInfoPageEnabled || false
   const enableStyleCustomization = useSelector((state: RootState) => state.settings.enableStyleCustomization)
   const enableUserDebugTools = useSelector((state: RootState) => state.settings.enableUserDebugTools)
   const isEmbedded = getParsedIframeInfo().isEmbedded as unknown === 'true'
@@ -101,6 +104,9 @@ export const DevToolsBox: React.FC = () => {
         if (Monitor.title === 'History' || Monitor.title === 'Memory') {
             return true
         }
+        if (isInfoPageEnabled && Monitor.title == 'Debug Tools') {
+          return true
+        }
         return false    
     }