From 39c727b374f0c67d971a6db8459d984e6c09d7c2 Mon Sep 17 00:00:00 2001
From: Sergei Garin <sergei.garin@enso.org>
Date: Tue, 28 Jan 2025 12:49:37 +0300
Subject: [PATCH] Hide Enso devtools in Prod for users outside of enso team
 (#12140)

---
 .../components/Devtools/EnsoDevtools.tsx       | 18 +++++++++++++++++-
 .../Devtools/EnsoDevtoolsProvider.tsx          |  8 ++------
 app/gui/src/dashboard/layouts/UserMenu.tsx     |  3 ++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
index 894cdb06e3e0..a9ac0b4079c3 100644
--- 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
index a6ccbbbfbbed..8c2ba8f2dce9 100644
--- 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
index a5391baea47c..cf74d7fac61e 100644
--- 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={() => {