Fix minor Console regressions introduced during EUIfication. (#41089) (#41943)

- Snakecase help_example.txt filename.
- Hide polling options when no autocomplete options are selected.
- Apply className to settings modal so its width doesn't change when the polling options are hidden.
- Only fetch changed autocomplete settings when modal is saved.

src/legacy/core_plugins/console/public/_app.scss

@@ -61,3 +61,7 @@
   z-index: $euiZLevel1 + 2;
   margin-top: 22px;
 }
+
+.conApp__settingsModal {
+  min-width: 460px;
+}

src/legacy/core_plugins/console/public/src/components/editor_example.tsx

@@ -19,7 +19,7 @@
 
 import React, { useEffect } from 'react';
 // @ts-ignore
-import exampleText from 'raw-loader!./helpExample.txt';
+import exampleText from 'raw-loader!./help_example.txt';
 import $ from 'jquery';
 // @ts-ignore
 import SenseEditor from '../sense_editor/editor';

src/legacy/core_plugins/console/public/src/components/settings_modal.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -42,7 +42,7 @@ export type AutocompleteOptions = 'fields' | 'indices' | 'templates';
 interface Props {
   onSaveSettings: (newSettings: DevToolsSettings) => Promise<void>;
   onClose: () => void;
-  refreshAutocompleteSettings: () => void;
+  refreshAutocompleteSettings: (selectedSettings: any) => void;
   settings: DevToolsSettings;
 }
 
@@ -106,9 +106,70 @@ export function DevToolsSettingsModal(props: Props) {
     });
   }
 
+  // It only makes sense to show polling options if the user needs to fetch any data.
+  const pollingFields =
+    fields || indices || templates ? (
+      <Fragment>
+        <EuiFormRow
+          label={
+            <FormattedMessage
+              id="console.settingsPage.refreshingDataLabel"
+              defaultMessage="Refreshing autocomplete suggestions"
+            />
+          }
+          helpText={
+            <FormattedMessage
+              id="console.settingsPage.refreshingDataDescription"
+              defaultMessage="Console refreshes autocomplete suggestions by querying Elasticsearch.
+              Automatic refreshes may be an issue if you have a large cluster or if you have network limitations."
+            />
+          }
+        >
+          <EuiSwitch
+            checked={polling}
+            data-test-subj="autocompletePolling"
+            id="autocompletePolling"
+            label={
+              <FormattedMessage
+                defaultMessage="Automatically refresh autocomplete suggestions"
+                id="console.settingsPage.pollingLabelText"
+              />
+            }
+            onChange={e => setPolling(e.target.checked)}
+          />
+        </EuiFormRow>
+
+        <EuiButton
+          data-test-subj="autocompletePolling"
+          id="autocompletePolling"
+          onClick={() => {
+            // Only refresh the currently selected settings.
+            props.refreshAutocompleteSettings({
+              autocomplete: {
+                fields,
+                indices,
+                templates,
+              },
+            });
+          }}
+        >
+          <FormattedMessage
+            defaultMessage="Refresh autocomplete suggestions"
+            id="console.settingsPage.refreshButtonLabel"
+          />
+        </EuiButton>
+      </Fragment>
+    ) : (
+      undefined
+    );
+
   return (
     <EuiOverlayMask>
-      <EuiModal data-test-subj="devToolsSettingsModal" onClose={props.onClose}>
+      <EuiModal
+        data-test-subj="devToolsSettingsModal"
+        className="conApp__settingsModal"
+        onClose={props.onClose}
+      >
         <EuiModalHeader>
           <EuiModalHeaderTitle>
             <FormattedMessage
@@ -140,6 +201,7 @@ export function DevToolsSettingsModal(props: Props) {
               }}
             />
           </EuiFormRow>
+
           <EuiFormRow>
             <EuiSwitch
               checked={wrapMode}
@@ -176,6 +238,7 @@ export function DevToolsSettingsModal(props: Props) {
               onChange={e => setTripleQuotes(e.target.checked)}
             />
           </EuiFormRow>
+
           <EuiFormRow
             labelType="legend"
             label={
@@ -193,45 +256,8 @@ export function DevToolsSettingsModal(props: Props) {
               }}
             />
           </EuiFormRow>
-          <EuiFormRow
-            label={
-              <FormattedMessage
-                id="console.settingsPage.refreshingDataLabel"
-                defaultMessage="Refreshing autocomplete suggestions"
-              />
-            }
-            helpText={
-              <FormattedMessage
-                id="console.settingsPage.refreshingDataDescription"
-                defaultMessage="Console refreshes autocomplete suggestions by querying Elasticsearch.
-                  Automatic refreshes may be an issue if you have a large cluster or if you have network limitations."
-              />
-            }
-          >
-            <EuiSwitch
-              checked={polling}
-              data-test-subj="autocompletePolling"
-              id="autocompletePolling"
-              label={
-                <FormattedMessage
-                  defaultMessage="Automatically refresh autocomplete suggestions"
-                  id="console.settingsPage.pollingLabelText"
-                />
-              }
-              onChange={e => setPolling(e.target.checked)}
-            />
-          </EuiFormRow>
 
-          <EuiButton
-            data-test-subj="autocompletePolling"
-            id="autocompletePolling"
-            onClick={props.refreshAutocompleteSettings}
-          >
-            <FormattedMessage
-              defaultMessage="Refresh autocomplete suggestions"
-              id="console.settingsPage.refreshButtonLabel"
-            />
-          </EuiButton>
+          {pollingFields}
         </EuiModalBody>
 
         <EuiModalFooter>

src/legacy/core_plugins/console/public/src/helpers/settings_show_modal.tsx

@@ -20,7 +20,7 @@
 import { I18nContext } from 'ui/i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { DevToolsSettingsModal } from '../components/settings_modal';
+import { DevToolsSettingsModal, AutocompleteOptions } from '../components/settings_modal';
 import { DevToolsSettings } from '../components/dev_tools_settings';
 
 // @ts-ignore
@@ -32,8 +32,8 @@ export function showSettingsModal() {
   const container = document.getElementById('consoleSettingsModal');
   const curSettings = getCurrentSettings();
 
-  const refreshAutocompleteSettings = () => {
-    mappings.retrieveAutoCompleteInfo();
+  const refreshAutocompleteSettings = (selectedSettings: any) => {
+    mappings.retrieveAutoCompleteInfo(selectedSettings);
   };
 
   const closeModal = () => {
@@ -53,13 +53,30 @@ export function showSettingsModal() {
     newSettings: DevToolsSettings,
     prevSettings: DevToolsSettings
   ) => {
-    // We'll only retrieve settings if polling is on.
-    const isPollingChanged = prevSettings.polling !== newSettings.polling;
+    // We'll only retrieve settings if polling is on. The expectation here is that if the user
+    // disables polling it's because they want manual control over the fetch request (possibly
+    // because it's a very expensive request given their cluster and bandwidth). In that case,
+    // they would be unhappy with any request that's sent automatically.
     if (newSettings.polling) {
       const autocompleteDiff = getAutocompleteDiff(newSettings, prevSettings);
-      if (autocompleteDiff.length > 0) {
-        mappings.retrieveAutoCompleteInfo(newSettings.autocomplete);
+
+      const isSettingsChanged = autocompleteDiff.length > 0;
+      const isPollingChanged = prevSettings.polling !== newSettings.polling;
+
+      if (isSettingsChanged) {
+        // If the user has changed one of the autocomplete settings, then we'll fetch just the
+        // ones which have changed.
+        const changedSettings: any = autocompleteDiff.reduce(
+          (changedSettingsAccum: any, setting: string): any => {
+            changedSettingsAccum[setting] =
+              newSettings.autocomplete[setting as AutocompleteOptions];
+            return changedSettingsAccum;
+          },
+          {}
+        );
+        mappings.retrieveAutoCompleteInfo(changedSettings);
       } else if (isPollingChanged) {
+        // If the user has turned polling on, then we'll fetch all selected autocomplete settings.
         mappings.retrieveAutoCompleteInfo();
       }
     }

src/legacy/core_plugins/console/public/src/mappings.js

@@ -287,6 +287,16 @@ function retrieveSettings(settingsKey, settingsToRetrieve) {
 }
 
 // Retrieve all selected settings by default.
+// TODO: We should refactor this to be easier to consume. Ideally this function should retrieve
+// whatever settings are specified, otherwise just use the saved settings. This requires changing
+// the behavior to not *clear* whatever settings have been unselected, but it's hard to tell if
+// this is possible without altering the autocomplete behavior. These are the scenarios we need to
+// support:
+//   1. Manual refresh. Specify what we want. Fetch specified, leave unspecified alone.
+//   2. Changed selection and saved: Specify what we want. Fetch changed and selected, leave
+//      unchanged alone (both selected and unselected).
+//   3. Poll: Use saved. Fetch selected. Ignore unselected.
+
 function retrieveAutoCompleteInfo(settingsToRetrieve = settings.getAutocomplete()) {
   if (pollTimeoutId) {
     clearTimeout(pollTimeoutId);