Hide Enso devtools in Prod for users outside of enso team (#12140)

enso-org · Jan 28, 2025 · 39c727b · 39c727b
1 parent f25164d
commit 39c727b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
@@ -6,7 +6,8 @@
 import * as React from 'react'
 
 import * as authProvider from '#/providers/AuthProvider'
-import { useShowEnsoDevtools } from './EnsoDevtoolsProvider'
+import { useEffect } from 'react'
+import { ensoDevtoolsStore, useShowEnsoDevtools } from './EnsoDevtoolsProvider'
 
 const EnsoDevtoolsImpl = React.lazy(() =>
   import('./EnsoDevtoolsImpl').then((mod) => ({ default: mod.EnsoDevtools })),
@@ -18,6 +19,12 @@ export function EnsoDevtools() {
 
   const showEnsoDevtools = useShowEnsoDevtools()
 
+  useEffect(() => {
+    if (isEnsoTeamMember) {
+      addToggleDevtoolsToWindow()
+    }
+  }, [isEnsoTeamMember])
+
   const shouldDisplayDevtools = (() => {
     if (showEnsoDevtools == null) {
       return isEnsoTeamMember
@@ -32,3 +39,12 @@ export function EnsoDevtools() {
 
   return <EnsoDevtoolsImpl />
 }
+
+/**
+ * Adds the `toggleDevtools` function to the window object.
+ */
+function addToggleDevtoolsToWindow() {
+  if (typeof window !== 'undefined') {
+    window.toggleDevtools = ensoDevtoolsStore.getState().toggleDevtools
+  }
+}
diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
@@ -88,9 +88,9 @@ export const ensoDevtoolsStore = zustand.createStore<EnsoDevtoolsStore>()(
     }),
     {
       name: 'ensoDevtools',
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      version: 1.1,
       partialize: (state) => ({
-        showDevtools: state.showDevtools,
-        showEnsoDevtools: state.showEnsoDevtools,
         animationsDisabled: state.animationsDisabled,
       }),
     },
@@ -169,7 +169,3 @@ export function useSetShowDevtools() {
     unsafeEnableTransition: true,
   })
 }
-
-if (typeof window !== 'undefined') {
-  window.toggleDevtools = ensoDevtoolsStore.getState().toggleDevtools
-}
diff --git a/app/gui/src/dashboard/layouts/UserMenu.tsx b/app/gui/src/dashboard/layouts/UserMenu.tsx
@@ -12,6 +12,7 @@ import { useText } from '#/providers/TextProvider'
 import { Plan } from '#/services/Backend'
 import { download } from '#/utilities/download'
 import { getDownloadUrl } from '#/utilities/github'
+import { IS_DEV_MODE } from 'enso-common/src/detect'
 import { useNavigate } from 'react-router-dom'
 import { LOGIN_PATH } from '../appUtils'
 import { useToggleEnsoDevtools } from '../components/Devtools'
@@ -62,7 +63,7 @@ export default function UserMenu(props: UserMenuProps) {
         }}
       />
 
-      {user.isEnsoTeamMember && (
+      {user.isEnsoTeamMember && IS_DEV_MODE && (
         <MenuEntry
           action="ensoDevtools"
           doAction={() => {