Dev mode (#3037)

jeanfbrito · web-flow · commit 3ee5083a0893 · 2025-05-29T13:13:56.000-03:00
diff --git a/src/app/PersistableValues.ts b/src/app/PersistableValues.ts
@@ -75,9 +75,13 @@ type PersistableValues_4_2_0 = PersistableValues_4_1_0 & {
   selectedBrowser: string | null;
 };
 
+type PersistableValues_4_4_0 = PersistableValues_4_2_0 & {
+  isDeveloperModeEnabled: boolean;
+};
+
 export type PersistableValues = Pick<
-  PersistableValues_4_2_0,
-  keyof PersistableValues_4_2_0
+  PersistableValues_4_4_0,
+  keyof PersistableValues_4_4_0
 >;
 
 export const migrations = {
@@ -139,4 +143,8 @@ export const migrations = {
     ...before,
     selectedBrowser: null,
   }),
+  '>=4.4.0': (before: PersistableValues_4_2_0): PersistableValues_4_4_0 => ({
+    ...before,
+    isDeveloperModeEnabled: false,
+  }),
 };
diff --git a/src/app/selectors.ts b/src/app/selectors.ts
@@ -42,6 +42,8 @@ export const selectPersistableValues = createStructuredSelector({
     isMinimizeOnCloseEnabled,
   isAddNewServersEnabled: ({ isAddNewServersEnabled }: RootState) =>
     isAddNewServersEnabled,
+  isDeveloperModeEnabled: ({ isDeveloperModeEnabled }: RootState) =>
+    isDeveloperModeEnabled,
   hasHideOnTrayNotificationShown: ({
     hasHideOnTrayNotificationShown,
   }: RootState) => hasHideOnTrayNotificationShown,
@@ -57,4 +59,7 @@ export const selectPersistableValues = createStructuredSelector({
   selectedBrowser: ({ selectedBrowser }: RootState) => selectedBrowser,
   videoCallWindowState: ({ videoCallWindowState }: RootState) =>
     videoCallWindowState,
+  isVideoCallWindowPersistenceEnabled: ({
+    isVideoCallWindowPersistenceEnabled,
+  }: RootState) => isVideoCallWindowPersistenceEnabled,
 });
diff --git a/src/i18n/de-DE.i18n.json b/src/i18n/de-DE.i18n.json
@@ -257,6 +257,7 @@
     "close": "Schließen",
     "copy": "&Kopieren",
     "cut": "&Ausschneiden",
+    "developerMode": "Entwicklermodus",
     "disableGpu": "GPU deaktivieren",
     "documentation": "Dokumentation",
     "downloads": "Downloads",
diff --git a/src/i18n/en.i18n.json b/src/i18n/en.i18n.json
@@ -289,6 +289,7 @@
     "close": "Close",
     "copy": "&Copy",
     "cut": "Cu&t",
+    "developerMode": "Developer Mode",
     "disableGpu": "Disable GPU",
     "documentation": "Documentation",
     "downloads": "Downloads",
@@ -354,7 +355,9 @@
       "clearCache": "Clear Cache",
       "clearStorageData": "Clear Storage Data",
       "copyCurrentUrl": "Copy current URL",
-      "reloadClearingCache": "Force reload"
+      "reloadClearingCache": "Force reload",
+      "serverInfo": "Server Info",
+      "supportedVersionsInfo": "Supported Versions Info"
     },
     "tooltips": {
       "unreadMessage": "{{- count}} unread message",
diff --git a/src/i18n/es.i18n.json b/src/i18n/es.i18n.json
@@ -1,6 +1,6 @@
 {
   "contextMenu": {
-    "cut": "Co&rtar",
+    "cut": "Cor&tar",
     "copy": "&Copiar",
     "paste": "&Pegar",
     "selectAll": "Seleccionar &todo",
@@ -279,8 +279,9 @@
     "clearTrustedCertificates": "Borrar certificados de confianza",
     "close": "Cerrar",
     "copy": "&Copiar",
-    "cut": "Cu&tar",
-    "disableGpu": "Desactivar GPU",
+    "cut": "Cor&tar",
+    "developerMode": "Modo desarrollador",
+    "disableGpu": "Deshabilitar GPU",
     "documentation": "Documentación",
     "downloads": "Descargas",
     "settings": "Configuración",
diff --git a/src/i18n/fr.i18n.json b/src/i18n/fr.i18n.json
@@ -255,6 +255,7 @@
     "close": "Fermer",
     "copy": "&Copier",
     "cut": "Cou&per",
+    "developerMode": "Mode développeur",
     "disableGpu": "Désactiver le GPU",
     "documentation": "Documentation",
     "downloads": "Téléchargements",
diff --git a/src/i18n/hu.i18n.json b/src/i18n/hu.i18n.json
@@ -280,6 +280,7 @@
     "close": "Bezárás",
     "copy": "&Másolás",
     "cut": "&Kivágás",
+    "developerMode": "Fejlesztői mód",
     "disableGpu": "GPU letiltása",
     "documentation": "Dokumentáció",
     "downloads": "Letöltések",
diff --git a/src/i18n/ja.i18n.json b/src/i18n/ja.i18n.json
@@ -112,6 +112,7 @@
     "close": "閉じる",
     "copy": "コピー (&C)",
     "cut": "切り取り (&T)",
+    "developerMode": "開発者モード",
     "documentation": "ドキュメント",
     "editMenu": "編集 (&E)",
     "fileMenu": "ファイル (&F)",
diff --git a/src/i18n/pl.i18n.json b/src/i18n/pl.i18n.json
@@ -135,6 +135,7 @@
     "close": "Zamknij",
     "copy": "&Kopiuj",
     "cut": "&Wytnij",
+    "developerMode": "Tryb programisty",
     "documentation": "Dokumentacja",
     "editMenu": "&Edycja",
     "fileMenu": "&Plik",
diff --git a/src/i18n/pt-BR.i18n.json b/src/i18n/pt-BR.i18n.json
@@ -1,6 +1,6 @@
 {
   "contextMenu": {
-    "cut": "Cor&tar",
+    "cut": "Recor&tar",
     "copy": "&Copiar",
     "paste": "Co&lar",
     "selectAll": "&Selecionar tudo",
@@ -274,7 +274,8 @@
     "clearTrustedCertificates": "Limpar certificados confiáveis",
     "close": "Fechar",
     "copy": "&Copiar",
-    "cut": "Cor&tar",
+    "cut": "Recor&tar",
+    "developerMode": "Modo desenvolvedor",
     "disableGpu": "Desabilitar GPU",
     "documentation": "Documentação",
     "downloads": "Downloads",
diff --git a/src/i18n/ru.i18n.json b/src/i18n/ru.i18n.json
@@ -258,6 +258,7 @@
     "close": "Закрыть",
     "copy": "&Копировать",
     "cut": "В&ырезать",
+    "developerMode": "Режим разработчика",
     "disableGpu": "Отключить GPU",
     "documentation": "Документация",
     "downloads": "Загрузки",
diff --git a/src/i18n/tr-TR.i18n.json b/src/i18n/tr-TR.i18n.json
@@ -129,6 +129,7 @@
     "close": "Kapat",
     "copy": "&Kopyala",
     "cut": "Kes",
+    "developerMode": "Geliştirici Modu",
     "documentation": "Dökümantasyon",
     "editMenu": "&Düzenle",
     "fileMenu": "&Dosya",
diff --git a/src/i18n/uk-UA.i18n.json b/src/i18n/uk-UA.i18n.json
@@ -122,6 +122,7 @@
     "close": "Закрити",
     "copy": "Ко&піювати",
     "cut": "В&ирізати",
+    "developerMode": "Режим розробника",
     "documentation": "Документація",
     "editMenu": "&Редагувати",
     "fileMenu": "&Файл",
diff --git a/src/i18n/zh-CN.i18n.json b/src/i18n/zh-CN.i18n.json
@@ -166,7 +166,8 @@
     "close": "关闭",
     "copy": "复制 (&C)",
     "cut": "剪切 (&T)",
-    "disableGpu": "禁用GPU",
+    "developerMode": "开发者模式",
+    "disableGpu": "禁用 GPU",
     "documentation": "文件",
     "downloads": "下载",
     "settings": "设置",
diff --git a/src/i18n/zh-TW.i18n.json b/src/i18n/zh-TW.i18n.json
@@ -120,6 +120,7 @@
     "close": "關閉",
     "copy": "複製 (&C)",
     "cut": "剪下 (&T)",
+    "developerMode": "開發者模式",
     "documentation": "文件",
     "editMenu": "編輯 (&E)",
     "fileMenu": "檔案 (&F)",
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
@@ -18,6 +18,7 @@ import { availableBrowsers } from '../ui/reducers/availableBrowsers';
 import { currentView } from '../ui/reducers/currentView';
 import { hasHideOnTrayNotificationShown } from '../ui/reducers/hasHideOnTrayNotificationShown';
 import { isAddNewServersEnabled } from '../ui/reducers/isAddNewServersEnabled';
+import { isDeveloperModeEnabled } from '../ui/reducers/isDeveloperModeEnabled';
 import { isFlashFrameEnabled } from '../ui/reducers/isFlashFrameEnabled';
 import { isHardwareAccelerationEnabled } from '../ui/reducers/isHardwareAccelerationEnabled';
 import { isInternalVideoChatWindowEnabled } from '../ui/reducers/isInternalVideoChatWindowEnabled';
@@ -90,6 +91,7 @@ export const rootReducer = combineReducers({
   isNTLMCredentialsEnabled,
   videoCallWindowState,
   isVideoCallWindowPersistenceEnabled,
+  isDeveloperModeEnabled,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;
diff --git a/src/ui/actions.ts b/src/ui/actions.ts
@@ -27,6 +27,8 @@ export const MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED =
   'menu-bar/toggle-is-side-bar-enabled-clicked';
 export const MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED =
   'menu-bar/toggle-is-tray-icon-enabled-clicked';
+export const MENU_BAR_TOGGLE_IS_DEVELOPER_MODE_ENABLED_CLICKED =
+  'menu-bar/toggle-is-developer-mode-enabled-clicked';
 export const ROOT_WINDOW_ICON_CHANGED = 'root-window/icon-changed';
 export const ROOT_WINDOW_STATE_CHANGED = 'root-window/state-changed';
 export const VIDEO_CALL_WINDOW_STATE_CHANGED =
@@ -98,6 +100,8 @@ export const SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED =
   'settings/set-is-menu-bar-enabled-changed';
 export const SETTINGS_SET_IS_VIDEO_CALL_WINDOW_PERSISTENCE_ENABLED_CHANGED =
   'settings/set-is-video-call-window-persistence-enabled-changed';
+export const SETTINGS_SET_IS_DEVELOPER_MODE_ENABLED_CHANGED =
+  'settings/set-is-developer-mode-enabled-changed';
 export const SETTINGS_CLEAR_PERMITTED_SCREEN_CAPTURE_PERMISSIONS =
   'settings/clear-permitted-screen-capture-permissions';
 export const SETTINGS_NTLM_CREDENTIALS_CHANGED =
@@ -143,6 +147,7 @@ export type UiActionTypeToPayloadMap = {
   [MENU_BAR_TOGGLE_IS_SHOW_WINDOW_ON_UNREAD_CHANGED_ENABLED_CLICKED]: boolean;
   [MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED]: boolean;
   [MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED]: boolean;
+  [MENU_BAR_TOGGLE_IS_DEVELOPER_MODE_ENABLED_CLICKED]: boolean;
   [ROOT_WINDOW_ICON_CHANGED]: RootWindowIcon | null;
   [ROOT_WINDOW_STATE_CHANGED]: WindowState;
   [VIDEO_CALL_WINDOW_STATE_CHANGED]: WindowState;
@@ -223,6 +228,7 @@ export type UiActionTypeToPayloadMap = {
   [SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_VIDEO_CALL_WINDOW_PERSISTENCE_ENABLED_CHANGED]: boolean;
+  [SETTINGS_SET_IS_DEVELOPER_MODE_ENABLED_CHANGED]: boolean;
   [SETTINGS_CLEAR_PERMITTED_SCREEN_CAPTURE_PERMISSIONS]: void;
   [SETTINGS_NTLM_CREDENTIALS_CHANGED]: boolean;
   [SETTINGS_AVAILABLE_BROWSERS_UPDATED]: string[];
diff --git a/src/ui/components/SideBar/ServerButton.tsx b/src/ui/components/SideBar/ServerButton.tsx
@@ -13,8 +13,11 @@ import {
 import type { DragEvent, MouseEvent } from 'react';
 import { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
+import type { SupportedVersions } from '../../../servers/supportedVersions/types';
 import { dispatch } from '../../../store';
+import type { RootState } from '../../../store/rootReducer';
 import {
   SIDE_BAR_SERVER_SELECTED,
   SIDE_BAR_SERVER_RELOAD,
@@ -23,6 +26,7 @@ import {
   SIDE_BAR_SERVER_FORCE_RELOAD,
   SIDE_BAR_SERVER_REMOVE,
 } from '../../actions';
+import ServerInfoDropdown from './ServerInfoDropdown';
 import { Initials, ServerButtonWrapper } from './styles';
 import { useDropdownVisibility } from './useDropdownVisibility';
 
@@ -38,6 +42,10 @@ type ServerButtonProps = {
   hasUnreadMessages: boolean;
   mentionCount?: number;
   isDragged: boolean;
+  version?: string;
+  isSupportedVersion?: boolean;
+  supportedVersionsSource?: 'server' | 'cloud' | 'builtin';
+  supportedVersions?: SupportedVersions;
   onDragStart: (event: DragEvent) => void;
   onDragEnd: (event: DragEvent) => void;
   onDragEnter: (event: DragEvent) => void;
@@ -62,6 +70,10 @@ const ServerButton = ({
   mentionCount,
   userLoggedIn,
   isDragged,
+  version,
+  isSupportedVersion,
+  supportedVersionsSource,
+  supportedVersions,
   onDragStart,
   onDragEnd,
   onDragEnter,
@@ -74,10 +86,21 @@ const ServerButton = ({
 
   const reference = useRef(null);
   const target = useRef(null);
+  const serverInfoReference = useRef(null);
+  const serverInfoTarget = useRef(null);
 
   const { t } = useTranslation();
 
+  const isDeveloperModeEnabled = useSelector(
+    ({ isDeveloperModeEnabled }: RootState) => isDeveloperModeEnabled
+  );
+
   const { isVisible, toggle } = useDropdownVisibility({ reference, target });
+  const { isVisible: isServerInfoVisible, toggle: toggleServerInfo } =
+    useDropdownVisibility({
+      reference: serverInfoReference,
+      target: serverInfoTarget,
+    });
 
   const initials = useMemo(
     () =>
@@ -100,7 +123,6 @@ const ServerButton = ({
 
   const handleServerContextMenu = (event: MouseEvent): void => {
     event.preventDefault();
-    // dispatch({ type: SIDE_BAR_CONTEXT_MENU_TRIGGERED, payload: url });
     toggle();
   };
 
@@ -142,7 +164,6 @@ const ServerButton = ({
           secondary
           position='relative'
           overflow='visible'
-          // className={[isSelected && 'is-focused'].filter(Boolean).join(' ')}
           icon={
             <Box>
               <Initials visible={!favicon}>{initials}</Initials>
@@ -201,6 +222,16 @@ const ServerButton = ({
             <OptionIcon name='code-block' />
             <OptionContent>{t('sidebar.item.openDevTools')}</OptionContent>
           </Option>
+          {isDeveloperModeEnabled && (
+            <Option
+              ref={serverInfoReference}
+              onMouseEnter={() => toggleServerInfo(true)}
+              onMouseLeave={() => toggleServerInfo(false)}
+            >
+              <OptionIcon name='info' />
+              <OptionContent>{t('sidebar.item.serverInfo')}</OptionContent>
+            </Option>
+          )}
           <Option
             onClick={() =>
               handleActionDropdownClick(SIDE_BAR_SERVER_FORCE_RELOAD, url)
@@ -224,6 +255,17 @@ const ServerButton = ({
           </Option>
         </Dropdown>
       )}
+      {isServerInfoVisible && isDeveloperModeEnabled && (
+        <ServerInfoDropdown
+          reference={serverInfoReference}
+          target={serverInfoTarget}
+          url={url}
+          version={version}
+          supportedVersions={supportedVersions}
+          isSupportedVersion={isSupportedVersion}
+          supportedVersionsSource={supportedVersionsSource}
+        />
+      )}
     </>
   );
 };
diff --git a/src/ui/components/SideBar/ServerInfoDropdown.tsx b/src/ui/components/SideBar/ServerInfoDropdown.tsx
diff --git a/src/ui/components/SideBar/index.tsx b/src/ui/components/SideBar/index.tsx
diff --git a/src/ui/main/menuBar.ts b/src/ui/main/menuBar.ts
diff --git a/src/ui/reducers/isDeveloperModeEnabled.ts b/src/ui/reducers/isDeveloperModeEnabled.ts
