patch en locale messages for pluginManager

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

@@ -19,6 +19,10 @@
   "pluginManager.localForm.sidePanel": "Side Panel",
   "pluginManager.localForm.mainPanel": "Main Panel",
   "pluginManager.localForm.none": "None",
+  "pluginManager.localForm.methods": "Methods",
+  "pluginManager.localForm.pluginNames": "Plugin names",
+  "pluginManager.localForm.ok": "OK",
+  "pluginManager.localForm.cancel": "Cancel",
   "pluginManager.Permissions": "Permissions",
   "pluginManager.permissions": "permissions",
   "pluginManager.pluginManagerPermissions": "Plugin Manager Permissions",
@@ -27,5 +31,13 @@
   "pluginManager.allow": "Allow",
   "pluginManager.toCall": "to call",
   "pluginManager.ok": "OK",
-  "pluginManager.cancel": "Cancel"
+  "pluginManager.cancel": "Cancel",
+  "pluginManager.maintainedByRemix": "Maintained by Remix",
+  "pluginManager.linkToDoc": "Link to documentation",
+  "pluginManager.versionAlpha": "Version Alpha",
+  "pluginManager.versionBeta": "Version Beta",
+  "pluginManager.deactivatePlugin": "Deactivate {pluginName}",
+  "pluginManager.activatePlugin": "Activate {pluginName}",
+  "pluginManager.search": "Search",
+  "pluginManager.managePluginsPermissions": "Manage plugins Permissions"
 }

libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-use-before-define
 import React from 'react'
+import {FormattedMessage} from 'react-intl'
 import '../remix-ui-plugin-manager.css'
 import {CustomTooltip} from '@remix-ui/helper'
 interface PluginCardProps {
@@ -17,23 +18,43 @@ function ActivePluginCard({profile, buttonText, deactivatePlugin}: PluginCardPro
             <div>
               {profile.displayName || profile.name}
               {profile?.maintainedBy?.toLowerCase() == 'remix' && (
-                <CustomTooltip placement="right" tooltipId="pluginManagerActiveTitleByRemix" tooltipClasses="text-nowrap" tooltipText="Maintained by Remix">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerActiveTitleByRemix"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.maintainedByRemix" />}
+                >
                   <i aria-hidden="true" className="px-1 text-success fas fa-check"></i>
                 </CustomTooltip>
               )}
               {profile.documentation && (
-                <CustomTooltip placement="right" tooltipId="pluginManagerActiveLinkToDoc" tooltipClasses="text-nowrap" tooltipText="Link to documentation">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerActiveLinkToDoc"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.linkToDoc" />}
+                >
                   <a href={profile.documentation} className="px-1" target="_blank" rel="noreferrer">
                     <i aria-hidden="true" className="fas fa-book" />
                   </a>
                 </CustomTooltip>
               )}
               {profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g) ? (
-                <CustomTooltip placement="right" tooltipId="pluginManagerActiveVersionAlpha" tooltipClasses="text-nowrap" tooltipText="Version Alpha">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerActiveVersionAlpha"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.versionAlpha" />}
+                >
                   <small className="remixui_versionWarning plugin-version">alpha</small>
                 </CustomTooltip>
               ) : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g) ? (
-                <CustomTooltip placement="right" tooltipId="pluginManagerActiveVersionBeta" tooltipClasses="text-nowrap" tooltipText="Version Beta">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerActiveVersionBeta"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.versionBeta" />}
+                >
                   <small className="remixui_versionWarning plugin-version">beta</small>
                 </CustomTooltip>
               ) : null}
@@ -43,7 +64,7 @@ function ActivePluginCard({profile, buttonText, deactivatePlugin}: PluginCardPro
                 placement="right"
                 tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
                 tooltipClasses="text-nowrap"
-                tooltipText={`Deactivate ${profile.displayName || profile.name}`}
+                tooltipText={<FormattedMessage id="pluginManager.deactivatePlugin" values={{pluginName: profile.displayName || profile.name}} />}
               >
                 <button
                   onClick={() => {

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx

@@ -1,6 +1,7 @@
 import {Profile} from '@remixproject/plugin-utils'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-use-before-define
 import React from 'react'
+import {FormattedMessage} from 'react-intl'
 import '../remix-ui-plugin-manager.css'
 import {CustomTooltip} from '@remix-ui/helper'
 interface PluginCardProps {
@@ -20,23 +21,43 @@ function InactivePluginCard({profile, buttonText, activatePlugin}: PluginCardPro
             <div>
               {profile.displayName || profile.name}
               {profile?.maintainedBy?.toLowerCase() == 'remix' && (
-                <CustomTooltip placement="right" tooltipId="pluginManagerInactiveTitleByRemix" tooltipClasses="text-nowrap" tooltipText="Maintained by Remix">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerInactiveTitleByRemix"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.maintainedByRemix" />}
+                >
                   <i aria-hidden="true" className="px-1 text-success fas fa-check"></i>
                 </CustomTooltip>
               )}
               {profile.documentation && (
-                <CustomTooltip placement="right" tooltipId="pluginManagerInactiveTitleLinkToDoc" tooltipClasses="text-nowrap" tooltipText="Link to documentation">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerInactiveTitleLinkToDoc"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.linkToDoc" />}
+                >
                   <a href={profile.documentation} className="px-1" target="_blank" rel="noreferrer">
                     <i aria-hidden="true" className="fas fa-book" />
                   </a>
                 </CustomTooltip>
               )}
               {profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g) ? (
-                <CustomTooltip placement="right" tooltipId="pluginManagerActiveVersionAlpha" tooltipClasses="text-nowrap" tooltipText="Version Alpha">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerActiveVersionAlpha"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.versionAlpha" />}
+                >
                   <small className="remixui_versionWarning plugin-version">alpha</small>
                 </CustomTooltip>
               ) : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g) ? (
-                <CustomTooltip placement="right" tooltipId="pluginManagerActiveVersionBeta" tooltipClasses="text-nowrap" tooltipText="Version Beta">
+                <CustomTooltip
+                  placement="right"
+                  tooltipId="pluginManagerActiveVersionBeta"
+                  tooltipClasses="text-nowrap"
+                  tooltipText={<FormattedMessage id="pluginManager.versionBeta" />}
+                >
                   <small className="remixui_versionWarning plugin-version">beta</small>
                 </CustomTooltip>
               ) : null}
@@ -46,7 +67,7 @@ function InactivePluginCard({profile, buttonText, activatePlugin}: PluginCardPro
                 placement="right"
                 tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
                 tooltipClasses="text-nowrap"
-                tooltipText={`Activate ${profile.displayName || profile.name}`}
+                tooltipText={<FormattedMessage id="pluginManager.activatePlugin" values={{pluginName: profile.displayName || profile.name}} />}
               >
                 <button
                   onClick={() => {

libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx

@@ -121,9 +121,9 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
         id="pluginManagerLocalPluginModalDialog"
         hide={visible}
         title={intl.formatMessage({id: 'pluginManager.localForm.title'})}
-        okLabel="OK"
+        okLabel={intl.formatMessage({id: 'pluginManager.localForm.ok'})}
         okFn={handleModalOkClick}
-        cancelLabel="Cancel"
+        cancelLabel={intl.formatMessage({id: 'pluginManager.localForm.cancel'})}
         cancelFn={closeModal}
       >
         <form id="local-plugin-form">
@@ -172,7 +172,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
               value={methods || ''}
               id="plugin-methods"
               data-id="localPluginMethods"
-              placeholder="Methods"
+              placeholder={intl.formatMessage({id: 'pluginManager.localForm.methods'})}
             />
           </div>
           <div className="form-group">
@@ -187,7 +187,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
               value={canactivate || ''}
               id="plugin-canactivate"
               data-id="localPluginCanActivate"
-              placeholder="Plugin names"
+              placeholder={intl.formatMessage({id: 'pluginManager.localForm.pluginNames'})}
             />
           </div>
 

libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx

@@ -144,7 +144,13 @@ function PermisssionsSettings() {
         </form>
       </ModalDialog>
       <footer className="bg-light remixui_permissions remix-bg-opacity">
-        <CustomTooltip placement={'top'} tooltipId="pmPermissions" tooltipClasses="text-nowrap" tooltipText={'Manage plugins Permissions'} key={'keypmPermissions'}>
+        <CustomTooltip
+          placement={'top'}
+          tooltipId="pmPermissions"
+          tooltipClasses="text-nowrap"
+          tooltipText={<FormattedMessage id="pluginManager.managePluginsPermissions" />}
+          key={'keypmPermissions'}
+        >
           <button onClick={openModal} className="btn btn-primary settings-button" data-id="pluginManagerPermissionsButton">
             <FormattedMessage id="pluginManager.Permissions" />
           </button>

libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, {Fragment, ReactNode, useEffect, useState} from 'react' // eslint-disable-line no-use-before-define
-import {FormattedMessage} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 import {PluginManagerComponent, PluginManagerSettings} from '../../types'
 import PermisssionsSettings from './permissionsSettings'
 import {Profile} from '@remixproject/plugin-utils'
@@ -22,6 +22,7 @@ export interface pluginActivated {
 }
 
 function RootView({pluginComponent, children}: RootViewProps) {
+  const intl = useIntl()
   const [visible, setVisible] = useState<boolean>(true)
   const [filterPlugins, setFilterPlugin] = useState<string>('')
 
@@ -44,7 +45,7 @@ function RootView({pluginComponent, children}: RootViewProps) {
             }}
             value={filterPlugins}
             className="mb-2 form-control"
-            placeholder="Search"
+            placeholder={intl.formatMessage({id: 'pluginManager.search'})}
             data-id="pluginManagerComponentSearchInput"
           />
           <button onClick={openModal} className="py-1 btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">