Refactored out side effect in packages/cli/src/ui/components/EditorSettingsDialog.tsx

Author: kevinfjiang

packages/cli/src/ui/components/EditorSettingsDialog.tsx

@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
 import {
@@ -63,17 +63,26 @@ export function EditorSettingsDialog({
 
   const currentPreference =
     settings.forScope(selectedScope).settings.general?.preferredEditor;
+
+  useEffect(() => {
+    const isUnsupported =
+      currentPreference &&
+      editorItems.findIndex((item) => item.type === currentPreference) === -1;
+
+    if (isUnsupported) {
+      coreEvents.emitFeedback(
+        'error',
+        `Editor is not supported: ${currentPreference}`,
+      );
+      onSelect(undefined, selectedScope);
+    }
+  }, [currentPreference, editorItems, onSelect, selectedScope]);
+
   let editorIndex = currentPreference
-    ? editorItems.findIndex(
-        (item: EditorDisplay) => item.type === currentPreference,
-      )
+    ? editorItems.findIndex((item) => item.type === currentPreference)
     : 0;
+
   if (editorIndex === -1) {
-    coreEvents.emitFeedback(
-      'error',
-      `Editor is not supported: ${currentPreference}`,
-    );
-    onSelect(undefined, selectedScope);
     editorIndex = 0;
   }
 

packages/cli/src/ui/hooks/useEditorSettingsDialog.ts

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EDITOR_DISPLAY_NAMES,
+  type EditorType,
+  coreEvents,
+  isEditorAvailable,
+} from '@google/gemini-cli-core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  SettingScope,
+  type LoadableSettingScope,
+  type LoadedSettings,
+} from '../../config/settings.js';
+import {
+  editorSettingsManager,
+  type EditorDisplay,
+} from '../editors/editorSettingsManager.js';
+import { useKeypress } from './useKeypress.js';
+
+type FocusedSection = 'editor' | 'scope';
+
+const SCOPE_ITEMS: Array<{
+  label: string;
+  value: LoadableSettingScope;
+  key: string;
+}> = [
+  {
+    label: 'User Settings',
+    value: SettingScope.User,
+    key: SettingScope.User,
+  },
+  {
+    label: 'Workspace Settings',
+    value: SettingScope.Workspace,
+    key: SettingScope.Workspace,
+  },
+];
+
+export function useEditorSettingsDialog(
+  settings: LoadedSettings,
+  onSelect: (
+    editorType: EditorType | undefined,
+    scope: LoadableSettingScope,
+  ) => void,
+  onExit: () => void,
+) {
+  const [selectedScope, setSelectedScope] = useState<LoadableSettingScope>(
+    SettingScope.User,
+  );
+  const [focusedSection, setFocusedSection] =
+    useState<FocusedSection>('editor');
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'tab') {
+        setFocusedSection((prev) => (prev === 'editor' ? 'scope' : 'editor'));
+      }
+      if (key.name === 'escape') {
+        onExit();
+      }
+    },
+    { isActive: true },
+  );
+
+  const editorItems: EditorDisplay[] = useMemo(
+    () => editorSettingsManager.getAvailableEditorDisplays(),
+    [],
+  );
+
+  const currentPreference =
+    settings.forScope(selectedScope).settings.general?.preferredEditor;
+
+  useEffect(() => {
+    if (!currentPreference) {
+      return;
+    }
+
+    const isInvalid =
+      editorItems.findIndex(
+        (item: EditorDisplay) => item.type === currentPreference,
+      ) === -1;
+
+    if (isInvalid) {
+      coreEvents.emitFeedback(
+        'error',
+        `Editor is not supported: ${currentPreference}`,
+      );
+      onSelect(undefined, selectedScope);
+    }
+  }, [currentPreference, editorItems, onSelect, selectedScope]);
+
+  const editorIndex = useMemo(
+    () =>
+      Math.max(
+        0,
+        currentPreference
+          ? editorItems.findIndex(
+              (item: EditorDisplay) => item.type === currentPreference,
+            )
+          : 0,
+      ),
+    [currentPreference, editorItems],
+  );
+
+  const handleEditorSelect = useCallback(
+    (editorType: EditorType | 'not_set') => {
+      if (editorType === 'not_set') {
+        onSelect(undefined, selectedScope);
+        return;
+      }
+      onSelect(editorType, selectedScope);
+    },
+    [onSelect, selectedScope],
+  );
+
+  const handleScopeSelect = useCallback((scope: LoadableSettingScope) => {
+    setSelectedScope(scope);
+    setFocusedSection('editor');
+  }, []);
+
+  const otherScopeModifiedMessage = useMemo(() => {
+    const otherScope =
+      selectedScope === SettingScope.User
+        ? SettingScope.Workspace
+        : SettingScope.User;
+    if (
+      settings.forScope(otherScope).settings.general?.preferredEditor !==
+      undefined
+    ) {
+      return settings.forScope(selectedScope).settings.general
+        ?.preferredEditor !== undefined
+        ? `(Also modified in ${otherScope})`
+        : `(Modified in ${otherScope})`;
+    }
+    return '';
+  }, [selectedScope, settings]);
+
+  const mergedEditorName = useMemo(() => {
+    const { preferredEditor } = settings.merged.general ?? {};
+    if (preferredEditor && isEditorAvailable(preferredEditor)) {
+      return EDITOR_DISPLAY_NAMES[preferredEditor as EditorType];
+    }
+    return 'None';
+  }, [settings.merged.general]);
+
+  return {
+    selectedScope,
+    focusedSection,
+    editorItems,
+    editorIndex,
+    scopeItems: SCOPE_ITEMS,
+    handleEditorSelect,
+    handleScopeSelect,
+    otherScopeModifiedMessage,
+    mergedEditorName,
+  };
+}