Update missing i18n and fix use ace ui keyboard hook

x-pack/legacy/plugins/searchprofiler/public/np_ready/application/components/profile_tree/unsafe_utils.ts

@@ -5,6 +5,7 @@
  */
 
 import { produce } from 'immer';
+import { i18n } from '@kbn/i18n';
 import tinycolor from 'tinycolor2';
 import _ from 'lodash';
 
@@ -21,17 +22,32 @@ export const comparator = (v1: number, v2: number) => {
 function getToolTip(key: string) {
   switch (key) {
     case 'build_scorer':
-      return 'The time taken to create the Scoring object, which is later used to execute the actual scoring of each doc.';
+      return i18n.translate('xpack.searchProfiler.buildScorerTimeDescription', {
+        defaultMessage:
+          'The time taken to create the Scoring object, which is later used to execute the actual scoring of each doc.',
+      });
     case 'create_weight':
-      return 'The time taken to create the Weight object, which holds temporary information during scoring.';
+      return i18n.translate('xpack.searchProfiler.createWeightTimeDescription', {
+        defaultMessage:
+          'The time taken to create the Weight object, which holds temporary information during scoring.',
+      });
     case 'next_doc':
-      return 'The time taken to advance the iterator to the next matching document.';
+      return i18n.translate('xpack.searchProfiler.nextDocTimeDescription', {
+        defaultMessage: 'The time taken to advance the iterator to the next matching document.',
+      });
     case 'score':
-      return 'The time taken in actually scoring the document against the query.';
+      return i18n.translate('xpack.searchProfiler.scoreTimeDescription', {
+        defaultMessage: 'The time taken in actually scoring the document against the query.',
+      });
     case 'match':
-      return 'The time taken to execute a secondary, more precise scoring phase (used by phrase queries).';
+      return i18n.translate('xpack.searchProfiler.matchTimeDescription', {
+        defaultMessage:
+          'The time taken to execute a secondary, more precise scoring phase (used by phrase queries).',
+      });
     case 'advance':
-      return 'The time taken to advance the iterator to the next document.';
+      return i18n.translate('xpack.searchProfiler.advanceTimeDescription', {
+        defaultMessage: 'The time taken to advance the iterator to the next document.',
+      });
     default:
       return '';
   }

x-pack/legacy/plugins/searchprofiler/public/np_ready/application/containers/main/components/empty_tree_placeholder.tsx

@@ -6,15 +6,24 @@
 
 import React from 'react';
 import { EuiText } from '@elastic/eui';
-// import { i18n } from '@kbn/i18n';
+import { i18n } from '@kbn/i18n';
 
 export const EmptyTreePlaceHolder = () => {
   return (
     <div className="prfDevTool__main__emptyTreePlaceholder">
       <EuiText color="subdued">
         {/* TODO: translations */}
-        <h1>Nothing to see here yet.</h1>
-        <p>Enter a query and press the "Profile" button or provide profile data in the editor.</p>
+        <h1>
+          {i18n.translate('xpack.searchProfiler.emptyProfileTreeTitle', {
+            defaultMessage: 'Nothing to see here yet.',
+          })}
+        </h1>
+        <p>
+          {i18n.translate('xpack.searchProfiler.emptyProfileTreeDescription', {
+            defaultMessage:
+              'Enter a query and press the "Profile" button or provide profile data in the editor.',
+          })}
+        </p>
       </EuiText>
     </div>
   );

x-pack/legacy/plugins/searchprofiler/public/np_ready/application/containers/main/components/profile_loading_placeholder.tsx

@@ -6,12 +6,16 @@
 
 import React from 'react';
 import { EuiText } from '@elastic/eui';
-
+import { i18n } from '@kbn/i18n';
 export const ProfileLoadingPlaceholder = () => {
   return (
     <div className="prfDevTool__main__emptyTreePlaceholder">
       <EuiText color="subdued">
-        <h1>Profiling...</h1>
+        <h1>
+          {i18n.translate('xpack.searchProfiler.profilingLoaderText', {
+            defaultMessage: 'Profiling...',
+          })}
+        </h1>
       </EuiText>
     </div>
   );

x-pack/legacy/plugins/searchprofiler/public/np_ready/application/editor/use_ui_ace_keyboard_mode.tsx

@@ -11,57 +11,66 @@
 import React, { useEffect, useRef } from 'react';
 import * as ReactDOM from 'react-dom';
 import { keyCodes, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 const OverlayText = () => (
   // The point of this element is for accessibility purposes, so ignore eslint error
   // in this case
   //
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   <>
-    <EuiText size="s">Press Enter to start editing.</EuiText>
-    <EuiText size="s">When you&rsquo;re done, press Escape to stop editing.</EuiText>
+    <EuiText size="s">
+      {i18n.translate('xpack.searchProfiler.aceAccessibilityOverlayInstructionEnter', {
+        defaultMessage: 'Press Enter to start editing.',
+      })}
+    </EuiText>
+    <EuiText size="s">
+      {i18n.translate('xpack.searchProfiler.aceAccessibilityOverlayInstructionExit', {
+        defaultMessage: `When you are done, press Escape to stop editing.`,
+      })}
+    </EuiText>
   </>
 );
 
 export function useUIAceKeyboardMode(aceTextAreaElement: HTMLTextAreaElement | null) {
   const overlayMountNode = useRef<HTMLDivElement | null>(null);
   const autoCompleteVisibleRef = useRef<boolean>(false);
 
-  function onDismissOverlay(event: KeyboardEvent) {
-    if (event.keyCode === keyCodes.ENTER) {
-      event.preventDefault();
-      aceTextAreaElement!.focus();
+  useEffect(() => {
+    function onDismissOverlay(event: KeyboardEvent) {
+      if (event.keyCode === keyCodes.ENTER) {
+        event.preventDefault();
+        aceTextAreaElement!.focus();
+      }
     }
-  }
 
-  function enableOverlay() {
-    if (overlayMountNode.current) {
-      overlayMountNode.current.focus();
+    function enableOverlay() {
+      if (overlayMountNode.current) {
+        overlayMountNode.current.focus();
+      }
     }
-  }
 
-  const isAutoCompleteVisible = () => {
-    const autoCompleter = document.querySelector<HTMLDivElement>('.ace_autocomplete');
-    if (!autoCompleter) {
-      return false;
-    }
-    // The autoComplete is just hidden when it's closed, not removed from the DOM.
-    return autoCompleter.style.display !== 'none';
-  };
+    const isAutoCompleteVisible = () => {
+      const autoCompleter = document.querySelector<HTMLDivElement>('.ace_autocomplete');
+      if (!autoCompleter) {
+        return false;
+      }
+      // The autoComplete is just hidden when it's closed, not removed from the DOM.
+      return autoCompleter.style.display !== 'none';
+    };
 
-  const documentKeyDownListener = () => {
-    autoCompleteVisibleRef.current = isAutoCompleteVisible();
-  };
+    const documentKeyDownListener = () => {
+      autoCompleteVisibleRef.current = isAutoCompleteVisible();
+    };
 
-  const aceKeydownListener = (event: KeyboardEvent) => {
-    if (event.keyCode === keyCodes.ESCAPE && !autoCompleteVisibleRef.current) {
-      event.preventDefault();
-      event.stopPropagation();
-      enableOverlay();
-    }
-  };
+    const aceKeydownListener = (event: KeyboardEvent) => {
+      if (event.keyCode === keyCodes.ESCAPE && !autoCompleteVisibleRef.current) {
+        event.preventDefault();
+        event.stopPropagation();
+        enableOverlay();
+      }
+    };
 
-  useEffect(() => {
     if (aceTextAreaElement) {
       // We don't control HTML elements inside of ace so we imperatively create an element
       // that acts as a container and insert it just before ace's textarea element