From 713f4c93d9ede4fde8e41aff5d52d6163b180c3c Mon Sep 17 00:00:00 2001
From: Chandra Kant Paliwal <paliwal.ck+ibm@gmail.com>
Date: Tue, 21 May 2024 23:10:44 +0530
Subject: [PATCH] update landing page issue and clipboard with localizaton fix

Signed-off-by: Chandra Kant Paliwal <paliwal.ck+ibm@gmail.com>
---
 packages/apollo/src/App.js                    |  2 +-
 .../apollo/src/components/CAModal/CAModal.js  | 71 +++++++++----------
 .../ChannelConsenterModal.js                  |  9 +--
 .../DeleteCAUser/DeleteCAUserModal.js         |  3 +-
 .../GenerateMSPModal/GenerateMSPModal.js      |  3 +-
 .../components/IdentityModal/IdentityModal.js |  3 +-
 .../MSPDefinitionModal/MSPDefinitionModal.js  |  3 +-
 packages/apollo/src/components/Main/Main.js   | 53 +++++++-------
 .../MspDeleteModal/MspDeleteModal.js          |  3 +-
 .../OrdererConsenterModal.js                  |  9 +--
 .../ChannelParticipationUnjoinModal.js        |  3 +-
 .../OrdererDetails/OrdererDetails.js          |  3 +-
 .../src/components/PeerModal/PeerModal.js     |  9 +--
 .../components/RenderHTML/RenderParamHTML.jsx | 30 ++++++++
 .../SignatureDetailModal.js                   | 26 ++++++-
 15 files changed, 143 insertions(+), 87 deletions(-)
 create mode 100644 packages/apollo/src/components/RenderHTML/RenderParamHTML.jsx

diff --git a/packages/apollo/src/App.js b/packages/apollo/src/App.js
index cd9c4bab..7bb9a2bf 100644
--- a/packages/apollo/src/App.js
+++ b/packages/apollo/src/App.js
@@ -38,7 +38,7 @@ import NodeStatus from './utils/status';
 
 const SCOPE = 'app';
 const Log = new Logger('App');
-Log.setLogLevel('warn');
+Log.setLogLevel('debug');
 
 class App extends Component {
 	cName = 'App';
diff --git a/packages/apollo/src/components/CAModal/CAModal.js b/packages/apollo/src/components/CAModal/CAModal.js
index a23a4aa4..25b3c579 100644
--- a/packages/apollo/src/components/CAModal/CAModal.js
+++ b/packages/apollo/src/components/CAModal/CAModal.js
@@ -36,6 +36,7 @@ import SidePanelWarning from '../SidePanelWarning/SidePanelWarning';
 import TranslateLink from '../TranslateLink/TranslateLink';
 import Wizard from '../Wizard/Wizard';
 import WizardStep from '../WizardStep/WizardStep';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'caModal';
 const Log = new Logger(SCOPE);
@@ -530,31 +531,25 @@ export class CAModal extends React.Component {
 			>
 				<div className="ibp-remove-ca-desc">
 					<p>
-						{this.props.ca.location === 'ibm_saas'
-							? translate('delete_ca_desc', {
-								name: (
-									<CodeSnippet
-										type="inline"
-										ariaLabel={translate('copy_text', { copyText: this.props.ca.display_name })}
-										light={false}
-										onClick={() => Clipboard.copyToClipboard(this.props.ca.display_name)}
-									>
-										{this.props.ca.display_name}
-									</CodeSnippet>
-								),
-							})
-							: translate('remove_ca_desc', {
-								name: (
-									<CodeSnippet
-										type="inline"
-										ariaLabel={translate('copy_text', { copyText: this.props.ca.display_name })}
-										light={false}
-										onClick={() => Clipboard.copyToClipboard(this.props.ca.display_name)}
-									>
-										{this.props.ca.display_name}
-									</CodeSnippet>
-								),
-							})}
+						{this.props.ca.location === 'ibm_saas' ? RenderParamHTML(translate, 'delete_ca_desc', {
+							name: <CodeSnippet
+								type="inline"
+								ariaLabel={translate('copy_text', { copyText: this.props.ca.display_name })}
+								light={false}
+								onClick={() => Clipboard.copyToClipboard(this.props.ca.display_name)}
+							>
+								{this.props.ca.display_name}
+							</CodeSnippet>
+						}) : RenderParamHTML(translate, 'remove_ca_desc', {
+							name: <CodeSnippet
+								type="inline"
+								ariaLabel={translate('copy_text', { copyText: this.props.ca.display_name })}
+								light={false}
+								onClick={() => Clipboard.copyToClipboard(this.props.ca.display_name)}
+							>
+								{this.props.ca.display_name}
+							</CodeSnippet>
+						})}
 					</p>
 				</div>
 				<div className="ibp-remove-ca-confirm">{translate('remove_ca_confirm')}</div>
@@ -568,7 +563,7 @@ export class CAModal extends React.Component {
 						},
 					]}
 				/>
-			</WizardStep>
+			</WizardStep >
 		);
 	}
 
@@ -582,17 +577,15 @@ export class CAModal extends React.Component {
 				<div>
 					<div className="ibp-remove-peer-desc">
 						<p>
-							{translate('upgrade_node_desc', {
-								name: (
-									<CodeSnippet
-										type="inline"
-										ariaLabel={translate('copy_text', { copyText: this.props.ca.display_name })}
-										light={false}
-										onClick={() => Clipboard.copyToClipboard(this.props.ca.display_name)}
-									>
-										{this.props.ca.display_name}
-									</CodeSnippet>
-								),
+							{RenderParamHTML(translate, 'upgrade_node_desc', {
+								name: <CodeSnippet
+									type="inline"
+									ariaLabel={translate('copy_text', { copyText: this.props.ca.display_name })}
+									light={false}
+									onClick={() => Clipboard.copyToClipboard(this.props.ca.display_name)}
+								>
+									{this.props.ca.display_name}
+								</CodeSnippet>
 							})}
 						</p>
 					</div>
@@ -653,7 +646,7 @@ export class CAModal extends React.Component {
 				<div>
 					<div className="ibp-remove-peer-desc">
 						<p>
-							{translate('confirm_patch_desc', {
+							{RenderParamHTML(translate, 'confirm_patch_desc', {
 								name: (
 									<CodeSnippet
 										type="inline"
@@ -673,7 +666,7 @@ export class CAModal extends React.Component {
 									>
 										{this.props.new_version}
 									</CodeSnippet>
-								),
+								)
 							})}
 						</p>
 					</div>
diff --git a/packages/apollo/src/components/ChannelConsenterModal/ChannelConsenterModal.js b/packages/apollo/src/components/ChannelConsenterModal/ChannelConsenterModal.js
index d31f1e61..4cad3848 100644
--- a/packages/apollo/src/components/ChannelConsenterModal/ChannelConsenterModal.js
+++ b/packages/apollo/src/components/ChannelConsenterModal/ChannelConsenterModal.js
@@ -26,6 +26,7 @@ import Form from '../Form/Form';
 import Logger from '../Log/Logger';
 import Wizard from '../Wizard/Wizard';
 import WizardStep from '../WizardStep/WizardStep';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'channelConsenterModal';
 const Log = new Logger(SCOPE);
@@ -40,7 +41,7 @@ class ChannelConsenterModal extends React.Component {
 		});
 	}
 
-	removeConsenter = async() => {
+	removeConsenter = async () => {
 		try {
 			let options = {
 				channel_id: this.props.channelId,
@@ -59,7 +60,7 @@ class ChannelConsenterModal extends React.Component {
 		}
 	};
 
-	updateConsenter = async() => {
+	updateConsenter = async () => {
 		try {
 			let options = {
 				channel_id: this.props.channelId,
@@ -101,7 +102,7 @@ class ChannelConsenterModal extends React.Component {
 			>
 				<div className="ibp-remove-consenter-desc">
 					<p>
-						{translate('remove_consenter_application_channel_desc', {
+						{RenderParamHTML(translate, 'remove_consenter_application_channel_desc', {
 							name: (
 								<CodeSnippet
 									type="inline"
@@ -154,7 +155,7 @@ class ChannelConsenterModal extends React.Component {
 			>
 				<div>
 					<p>
-						{translate('update_consenter_application_channel_desc', {
+						{RenderParamHTML(translate, 'update_consenter_application_channel_desc', {
 							name: (
 								<CodeSnippet
 									type="inline"
diff --git a/packages/apollo/src/components/DeleteCAUser/DeleteCAUserModal.js b/packages/apollo/src/components/DeleteCAUser/DeleteCAUserModal.js
index 4fc36585..6de789af 100644
--- a/packages/apollo/src/components/DeleteCAUser/DeleteCAUserModal.js
+++ b/packages/apollo/src/components/DeleteCAUser/DeleteCAUserModal.js
@@ -26,6 +26,7 @@ import Form from '../Form/Form';
 import Logger from '../Log/Logger';
 import Wizard from '../Wizard/Wizard';
 import WizardStep from '../WizardStep/WizardStep';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'deleteCAModal';
 const Log = new Logger(SCOPE);
@@ -62,7 +63,7 @@ class DeleteCAUserModal extends React.Component {
 			>
 				<div className="ibp-remove-ca-user-desc">
 					<p>
-						{translate('remove_ca_user_desc', {
+						{RenderParamHTML(translate, 'remove_ca_user_desc', {
 							enroll_id: (
 								<CodeSnippet
 									type="inline"
diff --git a/packages/apollo/src/components/GenerateMSPModal/GenerateMSPModal.js b/packages/apollo/src/components/GenerateMSPModal/GenerateMSPModal.js
index ecac7935..e92f6317 100644
--- a/packages/apollo/src/components/GenerateMSPModal/GenerateMSPModal.js
+++ b/packages/apollo/src/components/GenerateMSPModal/GenerateMSPModal.js
@@ -36,6 +36,7 @@ import Logger from '../Log/Logger';
 import SidePanel from '../SidePanel/SidePanel';
 import SidePanelWarning from '../SidePanelWarning/SidePanelWarning';
 import Timeline from '../Timeline/Timeline';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'generateMSP';
 const Log = new Logger(SCOPE);
@@ -1013,7 +1014,7 @@ class GenerateMSPModal extends Component {
 				) : (
 					<>
 						<p className="ibp-generate-msp-selected-ca-text">
-							{translate('identities_from_chosen_ca', {
+							{RenderParamHTML(translate, 'identities_from_chosen_ca', {
 								name: (
 									<CodeSnippet
 										type="inline"
diff --git a/packages/apollo/src/components/IdentityModal/IdentityModal.js b/packages/apollo/src/components/IdentityModal/IdentityModal.js
index f862d828..4d59763d 100644
--- a/packages/apollo/src/components/IdentityModal/IdentityModal.js
+++ b/packages/apollo/src/components/IdentityModal/IdentityModal.js
@@ -25,6 +25,7 @@ import Helper from '../../utils/helper';
 import Form from '../Form/Form';
 import Logger from '../Log/Logger';
 import SidePanel from '../SidePanel/SidePanel';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'identityModal';
 const Log = new Logger(SCOPE);
@@ -272,7 +273,7 @@ class IdentityModal extends React.Component {
 					<h1 className="ibm-light">{translate('remove_identity')}</h1>
 				</div>
 				<p className="ibp-remove-identity-desc">
-					{translate('remove_identity_desc', {
+					{RenderParamHTML(translate, 'remove_identity_desc', {
 						name: (
 							<CodeSnippet
 								type="inline"
diff --git a/packages/apollo/src/components/MSPDefinitionModal/MSPDefinitionModal.js b/packages/apollo/src/components/MSPDefinitionModal/MSPDefinitionModal.js
index e03d564f..921c9d6f 100644
--- a/packages/apollo/src/components/MSPDefinitionModal/MSPDefinitionModal.js
+++ b/packages/apollo/src/components/MSPDefinitionModal/MSPDefinitionModal.js
@@ -32,6 +32,7 @@ import JsonInput from '../JsonInput/JsonInput';
 import Logger from '../Log/Logger';
 import SidePanel from '../SidePanel/SidePanel';
 import SidePanelWarning from '../SidePanelWarning/SidePanelWarning';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'MSPDefinitionModal';
 const Log = new Logger(SCOPE);
@@ -397,7 +398,7 @@ export class MSPDefinitionModal extends Component {
 						<h1 className="ibm-light">{translate('remove_org')}</h1>
 					</div>
 					<p className="ibp-remove-msp-desc">
-						{translate('remove_msp_desc', {
+						{RenderParamHTML(translate, 'remove_msp_desc', {
 							name: (
 								<CodeSnippet
 									type="inline"
diff --git a/packages/apollo/src/components/Main/Main.js b/packages/apollo/src/components/Main/Main.js
index 2f06737e..fa408c5c 100644
--- a/packages/apollo/src/components/Main/Main.js
+++ b/packages/apollo/src/components/Main/Main.js
@@ -20,7 +20,7 @@ import React, { Component } from 'react';
 import { withIdleTimer } from 'react-idle-timer';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { showError, showSuccess, updateState } from '../../redux/commonActions';
 import LoginApi from '../../rest/LoginApi';
 import SettingsApi from '../../rest/SettingsApi';
@@ -142,7 +142,7 @@ class Main extends Component {
 	render() {
 		const translate = this.props.t;
 		return (
-			<Router>
+			<BrowserRouter>
 				<div className="ibm ibp-main">
 					<TitleBar userInfo={this.props.userInfo}
 						host_url={this.props.host_url}
@@ -156,8 +156,9 @@ class Main extends Component {
 							<ScrollToTop>
 								<Routes>
 									<Route
+										index
 										path="/"
-										render={() => <Navigate to="/nodes" replace={true} />}
+										element={<Navigate to="/nodes" replace={true} />}
 									/>
 									<Route path="/nodes"
 										element={<Nodes />}
@@ -168,92 +169,92 @@ class Main extends Component {
 									/>
 									<Route exact
 										path="/orderer/:clusterIdPath"
-										element={<OrdererDetails/>}
+										element={<OrdererDetails />}
 									/>
 									<Route exact
 										path="/orderer/:clusterIdPath/:nodeId"
-										element={<OrdererDetails/>}
+										element={<OrdererDetails />}
 									/>
 									{/* /debug is a debugging route that exposes a link in the left pane to download the config block of the channel */}
 									<Route exact
 										path="/debug/orderer/:clusterIdPath/:channelId?"
-										element={<OrdererDetails/>}
+										element={<OrdererDetails />}
 									/>
 									<Route path="/ca/:caId"
-										element={<CADetails/>}
+										element={<CADetails />}
 									/>
 									<Route path="/channels"
-										element={<Channels/>}
+										element={<Channels />}
 										exact
 									/>
 									{/* 2023/05/01 the /users route is now legacy, renamed to /access */}
 									<Route path="/users"
-										element={<Access/>}
+										element={<Access />}
 										exact
 									/>
 									<Route path="/access"
-										element={<Access/>}
+										element={<Access />}
 										exact
 									/>
 									<Route path="/peer/:peerId/channel/:channelId"
-										element={<ChannelDetails/>}
+										element={<ChannelDetails />}
 										exact
 									/>
 									{/* /debug is a debugging route that exposes a link in the left pane to download the config block of the channel */}
 									<Route path="/debug/peer/:peerId/channel/:channelId"
-										element={<ChannelDetails/>}
+										element={<ChannelDetails />}
 										exact
 									/>
 									<Route path="/peer/:peerId/channel/:channelId/block/:blockNumber"
-										element={<ChannelBlock/>}
+										element={<ChannelBlock />}
 										exact
 									/>
 									<Route path="/channel/:channelId"
-										element={<ChannelDetails/>}
+										element={<ChannelDetails />}
 										exact
 									/>
 									<Route path="/channel/:channelId/block/:blockNumber"
-										element={<ChannelBlock/>}
+										element={<ChannelBlock />}
 										exact
 									/>
 									<Route path="/smart-contracts"
-										element={<ChaincodesPage/>}
+										element={<ChaincodesPage />}
 										exact
 									/>
 									<Route path="/settings"
-										element={<Settings/>}
+										element={<Settings />}
 										exact
 									/>
 									<Route path="/wallet"
-										element={<Identities/>}
+										element={<Identities />}
 										exact
 									/>
 									<Route path="/organizations"
-										element={<Msps/>}
+										element={<Msps />}
 										exact
 									/>
 									<Route exact
 										path="/organization/:mspId"
-										element={<OrganizationDetails/>}
+										element={<OrganizationDetails />}
 									/>
 									<Route path="/support"
-										element={<Support/>}
+										element={<Support />}
 										exact
 									/>
 									<Route path="/export-identities"
-										element={<Settings/>}
+										element={<Settings />}
 										exact
 									/>
 									<Route path="/migration"
-										element={<MigrationPage/>}
+										element={<MigrationPage />}
 										exact
 									/>
 									<Route exact
 										path="/audit"
-										element={<AuditLogs/>}
+										element={<AuditLogs />}
 									/>
 									<Route path="*"
-										element={<NotFound/>}
+										element={<NotFound />}
 									/>
 								</Routes>
 							</ScrollToTop>
@@ -321,7 +322,7 @@ class Main extends Component {
 						</Modal>
 					)}
 				</div>
-			</Router>
+			</BrowserRouter>
 		);
 	}
 }
diff --git a/packages/apollo/src/components/MspDeleteModal/MspDeleteModal.js b/packages/apollo/src/components/MspDeleteModal/MspDeleteModal.js
index b6720c46..974821bf 100644
--- a/packages/apollo/src/components/MspDeleteModal/MspDeleteModal.js
+++ b/packages/apollo/src/components/MspDeleteModal/MspDeleteModal.js
@@ -25,6 +25,7 @@ import Helper from '../../utils/helper';
 import Form from '../Form/Form';
 import Logger from '../Log/Logger';
 import SidePanel from '../SidePanel/SidePanel';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'mspDeleteModal';
 const Log = new Logger(SCOPE);
@@ -91,7 +92,7 @@ export class MspDeleteModal extends React.Component {
 					<h1 className="ibm-light">{translate(this.props.ordererAdmin ? 'remove_adminmsp_from_orderer' : 'remove_msp_from_consortium')}</h1>
 				</div>
 				<p className="ibp-remove-msp-desc">
-					{translate(this.props.ordererAdmin ? 'remove_adminmsp_from_orderer_desc' : 'remove_msp_from_consortium_desc', {
+					{RenderParamHTML(translate, this.props.ordererAdmin ? 'remove_adminmsp_from_orderer_desc' : 'remove_msp_from_consortium_desc', {
 						name: (
 							<CodeSnippet
 								type="inline"
diff --git a/packages/apollo/src/components/OrdererConsenterModal/OrdererConsenterModal.js b/packages/apollo/src/components/OrdererConsenterModal/OrdererConsenterModal.js
index 1f6855d7..4714cd05 100644
--- a/packages/apollo/src/components/OrdererConsenterModal/OrdererConsenterModal.js
+++ b/packages/apollo/src/components/OrdererConsenterModal/OrdererConsenterModal.js
@@ -26,6 +26,7 @@ import Form from '../Form/Form';
 import Logger from '../Log/Logger';
 import Wizard from '../Wizard/Wizard';
 import WizardStep from '../WizardStep/WizardStep';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'ordererConsenterModal';
 const Log = new Logger(SCOPE);
@@ -40,7 +41,7 @@ class OrdererConsenterModal extends React.Component {
 		});
 	}
 
-	removeConsenter = async() => {
+	removeConsenter = async () => {
 		try {
 			await OrdererRestApi.removeOrdererNodeFromSystemChannel({
 				...this.props.orderer,
@@ -56,7 +57,7 @@ class OrdererConsenterModal extends React.Component {
 		}
 	};
 
-	updateOrdererCerts = async() => {
+	updateOrdererCerts = async () => {
 		try {
 			await this.retryUpdateCert(this.props.orderer.raft || [this.props.orderer]);
 			this.props.onComplete();
@@ -104,7 +105,7 @@ class OrdererConsenterModal extends React.Component {
 			>
 				<div className="ibp-remove-consenter-desc">
 					<p>
-						{translate('remove_consenter_system_channel_desc', {
+						{RenderParamHTML(translate, 'remove_consenter_system_channel_desc', {
 							name: (
 								<CodeSnippet
 									type="inline"
@@ -151,7 +152,7 @@ class OrdererConsenterModal extends React.Component {
 			>
 				<div>
 					<p>
-						{translate('update_consenter_system_channel_desc', {
+						{RenderParamHTML(translate, 'update_consenter_system_channel_desc', {
 							name: (
 								<CodeSnippet
 									type="inline"
diff --git a/packages/apollo/src/components/OrdererDetails/ChannelParticipationUnjoinModal.js b/packages/apollo/src/components/OrdererDetails/ChannelParticipationUnjoinModal.js
index ef86fea6..bfcd10b2 100644
--- a/packages/apollo/src/components/OrdererDetails/ChannelParticipationUnjoinModal.js
+++ b/packages/apollo/src/components/OrdererDetails/ChannelParticipationUnjoinModal.js
@@ -32,6 +32,7 @@ import { NodeRestApi } from '../../rest/NodeRestApi';
 import ImportantBox from '../ImportantBox/ImportantBox';
 import ConfigBlockApi from '../../rest/ConfigBlockApi';
 import { EventsRestApi } from '../../rest/EventsRestApi';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'ChannelParticipationUnjoinModal';
 
@@ -177,7 +178,7 @@ class ChannelParticipationUnjoinModal extends Component {
 						<div className="ibp-modal-title">
 							<h1 className="ibm-light">{this.props.channelInfo.name}</h1>
 							<div className="ibp-remove-orderer-confirm">
-								{translate('remove_orderer_channel_desc', {
+								{RenderParamHTML(translate, 'remove_orderer_channel_desc', {
 									name: (
 										<CodeSnippet
 											type="inline"
diff --git a/packages/apollo/src/components/OrdererDetails/OrdererDetails.js b/packages/apollo/src/components/OrdererDetails/OrdererDetails.js
index df5e15f3..3b304b11 100644
--- a/packages/apollo/src/components/OrdererDetails/OrdererDetails.js
+++ b/packages/apollo/src/components/OrdererDetails/OrdererDetails.js
@@ -57,6 +57,7 @@ import SVGs from '../Svgs/Svgs';
 import TranslateLink from '../TranslateLink/TranslateLink';
 import ChannelParticipationDetails from './ChannelParticipationDetails';
 import withRouter from '../../hoc/withRouter';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'ordererDetails';
 const Log = new Logger(SCOPE);
@@ -941,7 +942,7 @@ class OrdererDetails extends Component {
 			<div className="pending-node-notice">
 				<div>
 					<h3>{translate('node_requires_attention')}</h3>
-					<p>{translate('node_requires_attention_desc', data)}</p>
+					<p>{RenderParamHTML(translate, 'node_requires_attention_desc', data)}</p>
 					<div>
 						<Button
 							id="go-to-node-button"
diff --git a/packages/apollo/src/components/PeerModal/PeerModal.js b/packages/apollo/src/components/PeerModal/PeerModal.js
index 0a8690f5..b6c9abbf 100644
--- a/packages/apollo/src/components/PeerModal/PeerModal.js
+++ b/packages/apollo/src/components/PeerModal/PeerModal.js
@@ -42,6 +42,7 @@ import TranslateLink from '../TranslateLink/TranslateLink';
 import Wizard from '../Wizard/Wizard';
 import WizardStep from '../WizardStep/WizardStep';
 import { Checkbox } from 'carbon-components-react';
+import RenderParamHTML from '../RenderHTML/RenderParamHTML';
 
 const SCOPE = 'peerModal';
 const Log = new Logger(SCOPE);
@@ -645,7 +646,7 @@ class PeerModal extends React.Component {
 				<div className="ibp-remove-peer-desc">
 					<p>
 						{this.props.peer.location === 'ibm_saas'
-							? translate('delete_peer_desc', {
+							? RenderParamHTML(translate, 'delete_peer_desc', {
 								name: (
 									<CodeSnippet
 										type="inline"
@@ -657,7 +658,7 @@ class PeerModal extends React.Component {
 									</CodeSnippet>
 								),
 							})
-							: translate('remove_peer_desc', {
+							: RenderParamHTML(translate, 'remove_peer_desc', {
 								name: (
 									<CodeSnippet
 										type="inline"
@@ -717,7 +718,7 @@ class PeerModal extends React.Component {
 			>
 				<div className="ibp-remove-peer-desc">
 					<p>
-						{translate('upgrade_node_desc', {
+						{RenderParamHTML(translate, 'upgrade_node_desc', {
 							name: (
 								<CodeSnippet
 									type="inline"
@@ -837,7 +838,7 @@ class PeerModal extends React.Component {
 			>
 				<div className="ibp-remove-peer-desc">
 					<p>
-						{translate('confirm_patch_desc', {
+						{RenderParamHTML(translate, 'confirm_patch_desc', {
 							name: (
 								<CodeSnippet
 									type="inline"
diff --git a/packages/apollo/src/components/RenderHTML/RenderParamHTML.jsx b/packages/apollo/src/components/RenderHTML/RenderParamHTML.jsx
new file mode 100644
index 00000000..228665aa
--- /dev/null
+++ b/packages/apollo/src/components/RenderHTML/RenderParamHTML.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const RenderParamHTML = (translate, transKey, mapping) => {
+	let message = translate(transKey);
+	const doms = [];
+	for (const key in mapping) {
+		let parts = message.split(`{{${key}}}`);
+		if(doms.length) {
+			doms.pop();
+		}
+		message = message.replace(`${parts[0]}{{${key}}}`, '');
+
+		doms.push(parts[0]);
+		doms.push({component: mapping[key], type: 'component'});
+		doms.push(parts[1]);
+	}
+
+	return <span>{doms.map(elem => elem?.type === 'component' ? elem.component : <span dangerouslySetInnerHTML={{__html: elem}}></span>)}</span>
+};
+
+RenderParamHTML.propTypes = {
+	translate: PropTypes.func,
+	transKey: PropTypes.string,
+	mapping: PropTypes.object
+}
+
+
+
+export default RenderParamHTML
diff --git a/packages/apollo/src/components/SignatureDetailModal/SignatureDetailModal.js b/packages/apollo/src/components/SignatureDetailModal/SignatureDetailModal.js
index ceefa8c5..49c5988e 100644
--- a/packages/apollo/src/components/SignatureDetailModal/SignatureDetailModal.js
+++ b/packages/apollo/src/components/SignatureDetailModal/SignatureDetailModal.js
@@ -219,7 +219,18 @@ class SignatureDetailModal extends React.Component {
 				name: org.msp_id,
 				type: 'dropdown',
 				options: org.identities || this.props.identities,
-				label: 'signature_for_msp',
+				label: RenderParamHTML(translate, 'signature_for_msp', {
+					msp: (
+						<CodeSnippet
+							type="inline"
+							ariaLabel={translate('copy_text', { copyText: this.getMSPDisplayName(org.msp_id, org.root_certs) })}
+							light={false}
+							onClick={() => Clipboard.copyToClipboard(this.getMSPDisplayName(org.msp_id, org.root_certs))}
+						>
+							{this.getMSPDisplayName(org.msp_id, org.root_certs)}
+						</CodeSnippet>
+					)
+				}),
 				labelOptions: {
 					msp: (
 						<CodeSnippet
@@ -241,7 +252,18 @@ class SignatureDetailModal extends React.Component {
 				name: orderer.msp_id,
 				type: 'dropdown',
 				options: orderer.identities || this.props.identities,
-				label: 'signature_for_msp',
+				label: RenderParamHTML(translate, 'signature_for_msp',{
+					msp: (
+						<CodeSnippet
+							type="inline"
+							ariaLabel={translate('copy_text', { copyText: this.getMSPDisplayName(orderer.msp_id, orderer.root_certs) })}
+							light={false}
+							onClick={() => Clipboard.copyToClipboard(this.getMSPDisplayName(orderer.msp_id, orderer.root_certs))}
+						>
+							{this.getMSPDisplayName(orderer.msp_id, orderer.root_certs)}
+						</CodeSnippet>
+					),
+				}),
 				labelOptions: {
 					msp: (
 						<CodeSnippet