patch en locale messages for search

apps/remix-ide/src/app/tabs/locales/en/search.json

@@ -10,5 +10,15 @@
   "search.useRegularExpression": "Use Regular Expression",
   "search.replaceWithoutConfirmation": "replace without confirmation",
   "search.filesToInclude": "Files to include",
-  "search.filesToExclude": "Files to exclude"
+  "search.filesToExclude": "Files to exclude",
+  "search.toggleReplace": "Toggle Replace",
+  "search.replaceInFiles": "replace in files",
+  "search.stop": "stop",
+  "search.undoChanges": "Undo changes to {path}",
+  "search.confirmreplaceMsg": "Are you sure you want to replace \"{find}\" by \"{replace}\" in {filename}?",
+  "search.yes": "Yes",
+  "search.no": "No",
+  "search.loading": "Loading",
+  "search.text1": "showing {count} results in {fileCount} files",
+  "search.text2": "Too many resuls to display...{br}Please narrow down your search."
 }

libs/remix-ui/search/src/lib/components/FindContainer.tsx

@@ -1,5 +1,6 @@
 import {CustomTooltip} from '@remix-ui/helper'
 import React, {useContext, useEffect, useState} from 'react'
+import {FormattedMessage} from 'react-intl'
 import {SearchContext} from '../context/context'
 import {Find} from './Find'
 import {OverWriteCheck} from './OverWriteCheck'
@@ -14,7 +15,7 @@ export const FindContainer = (props) => {
   }, [expanded])
   return (
     <div className="search_plugin_find_container">
-      <CustomTooltip tooltipText="Toggle Replace" tooltipClasses="text-nowrap" tooltipId="toggleReplaceTooltip" placement="left-start">
+      <CustomTooltip tooltipText={<FormattedMessage id="search.toggleReplace" />} tooltipClasses="text-nowrap" tooltipId="toggleReplaceTooltip" placement="left-start">
         <div
           data-id="toggle_replace"
           className={`codicon codicon-find-${expanded ? 'expanded' : 'collapsed'} search_plugin_find_container_arrow`}

libs/remix-ui/search/src/lib/components/Replace.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useRef} from 'react'
-import {useIntl} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {SearchContext} from '../context/context'
 
 export const Replace = (props) => {
@@ -15,7 +15,9 @@ export const Replace = (props) => {
   return (
     <>
       <div className="search_plugin_find-part ">
-        <label className="d-none">replace in files</label>
+        <label className="d-none">
+          <FormattedMessage id="search.replaceInFiles" />
+        </label>
         <input id="search_replace" placeholder={intl.formatMessage({id: 'search.replace'})} className="form-control" onChange={change}></input>
       </div>
     </>

libs/remix-ui/search/src/lib/components/StopSearch.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {useContext} from 'react'
+import {FormattedMessage} from 'react-intl'
 import {SearchContext} from '../context/context'
 
 export const StopSearch = () => {
@@ -9,7 +10,7 @@ export const StopSearch = () => {
   }
   return (
     <a className="badge badge-danger search_plugin_stop" onClick={async () => await cancel()}>
-      stop
+      <FormattedMessage id="search.stop" />
     </a>
   )
 }

libs/remix-ui/search/src/lib/components/Undo.tsx

@@ -1,6 +1,7 @@
 import {useDialogDispatchers} from '@remix-ui/app'
 import React from 'react'
 import {useContext} from 'react'
+import {FormattedMessage} from 'react-intl'
 import {SearchContext} from '../context/context'
 import * as path from 'path'
 
@@ -30,7 +31,7 @@ export const Undo = () => {
           className="undo-button btn btn-secondary btn-block my-3"
         >
           <div className="fas fa-undo mr-2"></div>
-          Undo changes to {path.basename(state.undoBuffer[`${state.workspace}/${state.currentFile}`].path)}
+          <FormattedMessage id="search.undoChanges" values={{path: path.basename(state.undoBuffer[`${state.workspace}/${state.currentFile}`].path)}} />
         </button>
       ) : null}
     </>

libs/remix-ui/search/src/lib/components/results/ResultItem.tsx

@@ -1,6 +1,6 @@
 import {useDialogDispatchers} from '@remix-ui/app'
 import React, {useContext, useEffect, useRef, useState} from 'react'
-import {FormattedMessage} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {SearchContext} from '../../context/context'
 import {SearchResult, SearchResultLine} from '../../types'
 import {ResultFileName} from './ResultFileName'
@@ -12,6 +12,7 @@ interface ResultItemProps {
 }
 
 export const ResultItem = (props: ResultItemProps) => {
+  const intl = useIntl()
   const {state, findText, disableForceReload, updateCount, replaceAllInFile} = useContext(SearchContext)
   const [loading, setLoading] = useState<boolean>(false)
   const [lines, setLines] = useState<SearchResultLine[]>([])
@@ -72,11 +73,18 @@ export const ResultItem = (props: ResultItemProps) => {
     } else {
       modal({
         id: 'confirmreplace',
-        title: 'Replace',
+        title: intl.formatMessage({id: 'search.replace'}),
-        message: `Are you sure you want to replace '${state.find}' by '${state.replace}' in ${props.file.filename}?`,
+        message: intl.formatMessage(
-        okLabel: 'Yes',
+          {id: 'search.confirmreplaceMsg'},
+          {
+            find: state.find,
+            replace: state.replace,
+            filename: props.file.filename
+          }
+        ),
+        okLabel: intl.formatMessage({id: 'search.yes'}),
         okFn: confirmReplace,
-        cancelLabel: 'No',
+        cancelLabel: intl.formatMessage({id: 'search.no'}),
         cancelFn: () => {},
         data: null
       })
@@ -122,7 +130,12 @@ export const ResultItem = (props: ResultItemProps) => {
               <div className="search_plugin_result_count_number badge badge-pill badge-secondary">{props.file.count}</div>
             </div>
           </div>
-          {loading ? <div className="loading">Loading...</div> : null}
+          {loading ? (
+            <div className="loading">
+              <FormattedMessage id="search.loading" />
+              ...
+            </div>
+          ) : null}
           {!toggleExpander && !loading ? (
             <div className="search_plugin_wrap_summary">
               {state.replaceEnabled ? (

libs/remix-ui/search/src/lib/components/results/ResultSummary.tsx

@@ -1,6 +1,7 @@
 import {useDialogDispatchers} from '@remix-ui/app'
 import {CustomTooltip} from '@remix-ui/helper'
 import React, {useContext} from 'react'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {SearchContext} from '../../context/context'
 import {SearchResult, SearchResultLine, SearchResultLineLine} from '../../types'
 
@@ -11,6 +12,7 @@ interface ResultSummaryProps {
 }
 
 export const ResultSummary = (props: ResultSummaryProps) => {
+  const intl = useIntl()
   const {hightLightInPath, replaceText, state} = useContext(SearchContext)
   const {modal} = useDialogDispatchers()
   const selectLine = async (line: SearchResultLineLine) => {
@@ -32,11 +34,18 @@ export const ResultSummary = (props: ResultSummaryProps) => {
     } else {
       modal({
         id: 'confirmreplace',
-        title: 'Replace',
+        title: intl.formatMessage({id: 'search.replace'}),
-        message: `Are you sure you want to replace '${line.center}' by '${state.replace}' in ${props.searchResult.filename}?`,
+        message: intl.formatMessage(
-        okLabel: 'Yes',
+          {id: 'search.confirmreplaceMsg'},
+          {
+            find: line.center,
+            replace: state.replace,
+            filename: props.searchResult.filename
+          }
+        ),
+        okLabel: intl.formatMessage({id: 'search.yes'}),
         okFn: confirmReplace,
-        cancelLabel: 'No',
+        cancelLabel: intl.formatMessage({id: 'search.no'}),
         cancelFn: () => {},
         data: line
       })
@@ -62,7 +71,7 @@ export const ResultSummary = (props: ResultSummaryProps) => {
           </div>
           {state.replaceEnabled ? (
             <div className="search_plugin_search_control">
-              <CustomTooltip tooltipText="Replace" tooltipClasses="text-nowrap" tooltipId="replaceTooltip" placement="top-start">
+              <CustomTooltip tooltipText={<FormattedMessage id="search.replace" />} tooltipClasses="text-nowrap" tooltipId="replaceTooltip" placement="top-start">
                 <div
                   data-id={`replace-${props.searchResult.filename}-${lineItem.position.start.line}-${lineItem.position.start.column}`}
                   onClick={async () => {

libs/remix-ui/search/src/lib/components/results/Results.tsx

@@ -1,4 +1,5 @@
 import React, {useContext, useEffect} from 'react'
+import {FormattedMessage} from 'react-intl'
 import {SearchContext} from '../../context/context'
 import {StopSearch} from '../StopSearch'
 import {ResultItem} from './ResultItem'
@@ -14,12 +15,12 @@ export const Results = () => {
 
       {state.find && !state.clipped ? (
         <div className="search_plugin_result_count_number badge badge-pill badge-secondary">
-          showing {state.count} results {state.fileCount} in files
+          <FormattedMessage id="search.text1" values={{count: state.count, fileCount: state.fileCount}} />
         </div>
       ) : null}
       {state.find && state.clipped ? (
         <div className="alert alert-warning mt-1">
-          Too many resuls to display...<br></br>Please narrow down your search.
+          <FormattedMessage id="search.text2" values={{br: <br />}} />
         </div>
       ) : null}
       {state.searchResults &&