update landing page issue and clipboard with localizaton fix

Signed-off-by: Chandra Kant Paliwal <paliwal.ck+ibm@gmail.com>
hyperledger-labs · May 21, 2024 · 713f4c9 · 713f4c9
1 parent 17ff6b1
commit 713f4c9
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 87 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 		);
 	}
 }