[Console] Refactor Console settings toggles to follow best practices (#140902)

* Refactor settings modal labels * Fix checks * Update related test case * Migrate old settings to new ones * Refactor migrate fn to be more generic Co-authored-by: Muhammad Ibragimov <muhammad.ibragimov@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2022-10-04 18:04:28 +05:00 · 2022-10-04 18:04:28 +05:00 · f5f60b640b
commit f5f60b640b
parent 6875d18d0f
8 changed files with 63 additions and 47 deletions
--- a/src/plugins/console/public/application/components/settings_modal.tsx
+++ b/src/plugins/console/public/application/components/settings_modal.tsx
@ -77,9 +77,9 @@ export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
  const [polling, setPolling] = useState(props.settings.polling);
  const [pollInterval, setPollInterval] = useState(props.settings.pollInterval);
  const [tripleQuotes, setTripleQuotes] = useState(props.settings.tripleQuotes);
-  const [isHistoryDisabled, setIsHistoryDisabled] = useState(props.settings.isHistoryDisabled);
-  const [isKeyboardShortcutsDisabled, setIsKeyboardShortcutsDisabled] = useState(
-    props.settings.isKeyboardShortcutsDisabled
+  const [isHistoryEnabled, setIsHistoryEnabled] = useState(props.settings.isHistoryEnabled);
+  const [isKeyboardShortcutsEnabled, setIsKeyboardShortcutsEnabled] = useState(
+    props.settings.isKeyboardShortcutsEnabled
  );

  const autoCompleteCheckboxes = [
@ -140,8 +140,8 @@ export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
      polling,
      pollInterval,
      tripleQuotes,
-      isHistoryDisabled,
-      isKeyboardShortcutsDisabled,
+      isHistoryEnabled,
+      isKeyboardShortcutsEnabled,
    });
  }

@ -153,17 +153,17 @@ export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
  }, []);

  const toggleKeyboardShortcuts = useCallback(
-    (isDisabled: boolean) => {
+    (isEnabled: boolean) => {
      if (props.editorInstance) {
        unregisterCommands(props.editorInstance);
-        setIsKeyboardShortcutsDisabled(isDisabled);
+        setIsKeyboardShortcutsEnabled(isEnabled);
      }
    },
    [props.editorInstance]
  );

  const toggleSavingToHistory = useCallback(
-    (isDisabled: boolean) => setIsHistoryDisabled(isDisabled),
+    (isEnabled: boolean) => setIsHistoryEnabled(isEnabled),
    []
  );

@ -289,11 +289,11 @@ export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
          }
        >
          <EuiSwitch
-            checked={isHistoryDisabled}
+            checked={isHistoryEnabled}
            label={
              <FormattedMessage
-                defaultMessage="Disable saving requests to history"
-                id="console.settingsPage.savingRequestsToHistoryMessage"
+                defaultMessage="Save requests to history"
+                id="console.settingsPage.saveRequestsToHistoryLabel"
              />
            }
            onChange={(e) => toggleSavingToHistory(e.target.checked)}
@ -309,11 +309,11 @@ export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
          }
        >
          <EuiSwitch
-            checked={isKeyboardShortcutsDisabled}
+            checked={isKeyboardShortcutsEnabled}
            label={
              <FormattedMessage
-                defaultMessage="Disable keyboard shortcuts"
-                id="console.settingsPage.disableKeyboardShortcutsMessage"
+                defaultMessage="Enable keyboard shortcuts"
+                id="console.settingsPage.enableKeyboardShortcutsLabel"
              />
            }
            onChange={(e) => toggleKeyboardShortcuts(e.target.checked)}
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx
+++ b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx
@ -259,8 +259,8 @@ function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) {
  }, [settings]);

  useEffect(() => {
-    const { isKeyboardShortcutsDisabled } = settings;
-    if (!isKeyboardShortcutsDisabled) {
+    const { isKeyboardShortcutsEnabled } = settings;
+    if (isKeyboardShortcutsEnabled) {
      registerCommands({
        senseEditor: editorInstanceRef.current!,
        sendCurrentRequest,
--- a/src/plugins/console/public/application/hooks/use_send_current_request/use_send_current_request.test.tsx
+++ b/src/plugins/console/public/application/hooks/use_send_current_request/use_send_current_request.test.tsx
@ -106,7 +106,9 @@ describe('useSendCurrentRequest', () => {
    (sendRequest as jest.Mock).mockReturnValue(
      [{ request: {} }, { request: {} }] /* two responses to save history */
    );
-    (mockContextValue.services.settings.toJSON as jest.Mock).mockReturnValue({});
+    (mockContextValue.services.settings.toJSON as jest.Mock).mockReturnValue({
+      isHistoryEnabled: true,
+    });
    (mockContextValue.services.history.addToHistory as jest.Mock).mockImplementation(() => {
      // Mock throwing
      throw new Error('cannot save!');
--- a/src/plugins/console/public/application/hooks/use_send_current_request/use_send_current_request.ts
+++ b/src/plugins/console/public/application/hooks/use_send_current_request/use_send_current_request.ts
@ -52,9 +52,9 @@ export const useSendCurrentRequest = () => {
      const results = await sendRequest({ http, requests });

      let saveToHistoryError: undefined | Error;
-      const { isHistoryDisabled } = settings.toJSON();
+      const { isHistoryEnabled } = settings.toJSON();

-      if (!isHistoryDisabled) {
+      if (isHistoryEnabled) {
        results.forEach(({ request: { path, method, data } }) => {
          try {
            history.addToHistory(path, method, data);
@ -84,7 +84,7 @@ export const useSendCurrentRequest = () => {
                  notifications.toasts.remove(toast);
                },
                onDisableSavingToHistory: () => {
-                  settings.setIsHistoryDisabled(true);
+                  settings.setIsHistoryEnabled(false);
                  notifications.toasts.remove(toast);
                },
              }),
--- a/src/plugins/console/public/services/settings.ts
+++ b/src/plugins/console/public/services/settings.ts
@ -15,8 +15,8 @@ export const DEFAULT_SETTINGS = Object.freeze({
  tripleQuotes: true,
  wrapMode: true,
  autocomplete: Object.freeze({ fields: true, indices: true, templates: true, dataStreams: true }),
-  isHistoryDisabled: false,
-  isKeyboardShortcutsDisabled: false,
+  isHistoryEnabled: true,
+  isKeyboardShortcutsEnabled: true,
 });

 export interface DevToolsSettings {
@ -31,8 +31,8 @@ export interface DevToolsSettings {
  polling: boolean;
  pollInterval: number;
  tripleQuotes: boolean;
-  isHistoryDisabled: boolean;
-  isKeyboardShortcutsDisabled: boolean;
+  isHistoryEnabled: boolean;
+  isKeyboardShortcutsEnabled: boolean;
 }

 enum SettingKeys {
@ -42,12 +42,32 @@ enum SettingKeys {
  AUTOCOMPLETE_SETTINGS = 'autocomplete_settings',
  CONSOLE_POLLING = 'console_polling',
  POLL_INTERVAL = 'poll_interval',
-  IS_HISTORY_DISABLED = 'is_history_disabled',
-  IS_KEYBOARD_SHORTCUTS_DISABLED = 'is_keyboard_shortcuts_disabled',
+  IS_HISTORY_ENABLED = 'is_history_enabled',
+  IS_KEYBOARD_SHORTCUTS_ENABLED = 'is_keyboard_shortcuts_enabled',
 }

 export class Settings {
-  constructor(private readonly storage: Storage) {}
+  constructor(private readonly storage: Storage) {
+    // Migration from old settings to new ones
+    this.addMigrationRule('is_history_disabled', SettingKeys.IS_HISTORY_ENABLED, (value: any) => {
+      return !value;
+    });
+    this.addMigrationRule(
+      'is_keyboard_shortcuts_disabled',
+      SettingKeys.IS_KEYBOARD_SHORTCUTS_ENABLED,
+      (value: any) => {
+        return !value;
+      }
+    );
+  }
+
+  private addMigrationRule(previousKey: string, newKey: string, migration: (value: any) => any) {
+    const value = this.storage.get(previousKey);
+    if (value !== undefined) {
+      this.storage.set(newKey, migration(value));
+      this.storage.delete(previousKey);
+    }
+  }

  getFontSize() {
    return this.storage.get(SettingKeys.FONT_SIZE, DEFAULT_SETTINGS.fontSize);
@ -94,13 +114,13 @@ export class Settings {
    return true;
  }

-  setIsHistoryDisabled(isDisabled: boolean) {
-    this.storage.set(SettingKeys.IS_HISTORY_DISABLED, isDisabled);
+  setIsHistoryEnabled(isEnabled: boolean) {
+    this.storage.set(SettingKeys.IS_HISTORY_ENABLED, isEnabled);
    return true;
  }

-  getIsHistoryDisabled() {
-    return this.storage.get(SettingKeys.IS_HISTORY_DISABLED, DEFAULT_SETTINGS.isHistoryDisabled);
+  getIsHistoryEnabled() {
+    return this.storage.get(SettingKeys.IS_HISTORY_ENABLED, DEFAULT_SETTINGS.isHistoryEnabled);
  }

  setPollInterval(interval: number) {
@ -111,15 +131,15 @@ export class Settings {
    return this.storage.get(SettingKeys.POLL_INTERVAL, DEFAULT_SETTINGS.pollInterval);
  }

-  setIsKeyboardShortcutsDisabled(disable: boolean) {
-    this.storage.set(SettingKeys.IS_KEYBOARD_SHORTCUTS_DISABLED, disable);
+  setIsKeyboardShortcutsEnabled(isEnabled: boolean) {
+    this.storage.set(SettingKeys.IS_KEYBOARD_SHORTCUTS_ENABLED, isEnabled);
    return true;
  }

  getIsKeyboardShortcutsDisabled() {
    return this.storage.get(
-      SettingKeys.IS_KEYBOARD_SHORTCUTS_DISABLED,
-      DEFAULT_SETTINGS.isKeyboardShortcutsDisabled
+      SettingKeys.IS_KEYBOARD_SHORTCUTS_ENABLED,
+      DEFAULT_SETTINGS.isKeyboardShortcutsEnabled
    );
  }

@ -131,8 +151,8 @@ export class Settings {
      fontSize: parseFloat(this.getFontSize()),
      polling: Boolean(this.getPolling()),
      pollInterval: this.getPollInterval(),
-      isHistoryDisabled: Boolean(this.getIsHistoryDisabled()),
-      isKeyboardShortcutsDisabled: Boolean(this.getIsKeyboardShortcutsDisabled()),
+      isHistoryEnabled: Boolean(this.getIsHistoryEnabled()),
+      isKeyboardShortcutsEnabled: Boolean(this.getIsKeyboardShortcutsDisabled()),
    };
  }

@ -143,8 +163,8 @@ export class Settings {
    autocomplete,
    polling,
    pollInterval,
-    isHistoryDisabled,
-    isKeyboardShortcutsDisabled,
+    isHistoryEnabled,
+    isKeyboardShortcutsEnabled,
  }: DevToolsSettings) {
    this.setFontSize(fontSize);
    this.setWrapMode(wrapMode);
@ -152,8 +172,8 @@ export class Settings {
    this.setAutocomplete(autocomplete);
    this.setPolling(polling);
    this.setPollInterval(pollInterval);
-    this.setIsHistoryDisabled(isHistoryDisabled);
-    this.setIsKeyboardShortcutsDisabled(isKeyboardShortcutsDisabled);
+    this.setIsHistoryEnabled(isHistoryEnabled);
+    this.setIsKeyboardShortcutsEnabled(isKeyboardShortcutsEnabled);
  }
 }

--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@ -260,7 +260,6 @@
    "console.settingsPage.autocompleteLabel": "Saisie semi-automatique",
    "console.settingsPage.cancelButtonLabel": "Annuler",
    "console.settingsPage.dataStreamsLabelText": "Flux de données",
-    "console.settingsPage.disableKeyboardShortcutsMessage": "Désactiver les raccourcis clavier",
    "console.settingsPage.fieldsLabelText": "Champs",
    "console.settingsPage.fontSizeLabel": "Taille de la police",
    "console.settingsPage.historyLabel": "Historique",
@ -274,7 +273,6 @@
    "console.settingsPage.refreshInterval.everyHourTimeInterval": "Toutes les heures",
    "console.settingsPage.refreshInterval.onceTimeInterval": "Une fois, au chargement de la console",
    "console.settingsPage.saveButtonLabel": "Enregistrer",
-    "console.settingsPage.savingRequestsToHistoryMessage": "Désactiver l'enregistrement des requêtes dans l'historique",
    "console.settingsPage.templatesLabelText": "Modèles",
    "console.settingsPage.tripleQuotesMessage": "Utiliser des guillemets triples dans le volet de sortie",
    "console.settingsPage.wrapLongLinesLabelText": "Formater les longues lignes",
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -260,7 +260,6 @@
    "console.settingsPage.autocompleteLabel": "自動入力",
    "console.settingsPage.cancelButtonLabel": "キャンセル",
    "console.settingsPage.dataStreamsLabelText": "データストリーム",
-    "console.settingsPage.disableKeyboardShortcutsMessage": "キーボードショートカットを無効にする",
    "console.settingsPage.fieldsLabelText": "フィールド",
    "console.settingsPage.fontSizeLabel": "フォントサイズ",
    "console.settingsPage.historyLabel": "履歴",
@ -274,7 +273,6 @@
    "console.settingsPage.refreshInterval.everyHourTimeInterval": "毎時",
    "console.settingsPage.refreshInterval.onceTimeInterval": "コンソールの読み込み時に1回",
    "console.settingsPage.saveButtonLabel": "保存",
-    "console.settingsPage.savingRequestsToHistoryMessage": "履歴へのリクエストの保存を無効にしてください",
    "console.settingsPage.templatesLabelText": "テンプレート",
    "console.settingsPage.tripleQuotesMessage": "出力ウィンドウでは三重引用符を使用してください",
    "console.settingsPage.wrapLongLinesLabelText": "長い行を改行",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -260,7 +260,6 @@
    "console.settingsPage.autocompleteLabel": "自动完成",
    "console.settingsPage.cancelButtonLabel": "取消",
    "console.settingsPage.dataStreamsLabelText": "数据流",
-    "console.settingsPage.disableKeyboardShortcutsMessage": "禁用键盘快捷键",
    "console.settingsPage.fieldsLabelText": "字段",
    "console.settingsPage.fontSizeLabel": "字体大小",
    "console.settingsPage.historyLabel": "历史记录",
@ -274,7 +273,6 @@
    "console.settingsPage.refreshInterval.everyHourTimeInterval": "每小时",
    "console.settingsPage.refreshInterval.onceTimeInterval": "一次，控制台加载时",
    "console.settingsPage.saveButtonLabel": "保存",
-    "console.settingsPage.savingRequestsToHistoryMessage": "禁止将请求保存到历史记录",
    "console.settingsPage.templatesLabelText": "模板",
    "console.settingsPage.tripleQuotesMessage": "在输出窗格中使用三重引号",
    "console.settingsPage.wrapLongLinesLabelText": "长行换行",