Skip to content

Commit f680462

Browse files
anuruddhalanuruddhal
committed
Improve icp configuration instructions
1 parent ab8724d commit f680462

3 files changed

Lines changed: 98 additions & 62 deletions

File tree

‎frontend/src/components/CodeBoxWithCopy.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*
2+
* Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
*/
18+
19+
import React, { useState } from 'react';
20+
import { Box, IconButton } from '@wso2/oxygen-ui';
21+
import { Check, Copy } from '@wso2/oxygen-ui-icons-react';
22+
23+
interface CodeBoxWithCopyProps {
24+
code: string;
25+
}
26+
27+
const CodeBoxWithCopy: React.FC<CodeBoxWithCopyProps> = ({ code }) => {
28+
const [copied, setCopied] = useState(false);
29+
const handleCopy = async () => {
30+
await navigator.clipboard.writeText(code);
31+
setCopied(true);
32+
setTimeout(() => setCopied(false), 2000);
33+
};
34+
return (
35+
<Box sx={{ position: 'relative', my: 1 }}>
36+
<Box
37+
component="pre"
38+
sx={{
39+
p: 2,
40+
bgcolor: 'action.hover',
41+
borderRadius: 1,
42+
overflow: 'auto',
43+
fontSize: 13,
44+
fontFamily: 'monospace',
45+
whiteSpace: 'pre-wrap',
46+
wordBreak: 'break-all',
47+
}}>
48+
{code}
49+
</Box>
50+
<IconButton size="small" onClick={handleCopy} sx={{ position: 'absolute', top: 8, right: 8 }} aria-label="Copy">
51+
{copied ? <Check size={16} /> : <Copy size={16} />}
52+
</IconButton>
53+
</Box>
54+
);
55+
};
56+
57+
export default CodeBoxWithCopy;

‎frontend/src/pages/OrgRuntimes.tsx‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,12 @@ import {
4141
Tabs,
4242
Typography,
4343
} from '@wso2/oxygen-ui';
44-
import { Check, Copy, FileText, Key, Plus, RefreshCw, Server, Trash2, X } from '@wso2/oxygen-ui-icons-react';
45-
import { useCallback, useEffect, useState, type JSX } from 'react';
46-
import { useQueries } from '@tanstack/react-query';
44+
import { FileText, Key, Plus, RefreshCw, Server, Trash2, X } from '@wso2/oxygen-ui-icons-react';
45+
import CodeBoxWithCopy from '../components/CodeBoxWithCopy';
46+
import { useState, useEffect, useCallback } from 'react';
4747
import { useLocation, useNavigate } from 'react-router';
48+
import type { JSX } from 'react';
49+
import { useQueries } from '@tanstack/react-query';
4850
import { gql } from '../api/graphql';
4951
import { useAllEnvironments, useOrgSecrets, ORG_RUNTIMES_QUERY, type GqlEnvironment, type GqlRuntime } from '../api/queries';
5052
import { useCreateOrgSecret, useDeleteRuntime, useRevokeOrgSecret } from '../api/mutations';
@@ -153,7 +155,7 @@ project = "<project name>"
153155
integration = "<integration name>"
154156
runtime = "<unique id for the runtime>"
155157
secret = "${secret}"
156-
# icp_url = "https://<hostname>:9445"`;
158+
#icp_url = "https://<hostname>:9445"`;
157159
}
158160

159161
function biToml(envName: string, secret: string): string {
@@ -163,14 +165,13 @@ project = "<project name>"
163165
integration = "<integration name>"
164166
runtime = "<unique id for the runtime>"
165167
secret = "${secret}"
166-
# serverUrl="https://<hostname>:9445"`;
168+
#serverUrl="https://<hostname>:9445"`;
167169
}
168170

169171
function AddRuntimeModal({ env, onClose }: { env: GqlEnvironment; onClose: () => void }) {
170172
const createMutation = useCreateOrgSecret();
171173
const [secret, setSecret] = useState<string | null>(null);
172174
const [tab, setTab] = useState(0);
173-
const [copied, setCopied] = useState(false);
174175
const [error, setError] = useState<string | null>(null);
175176

176177
const handleGenerate = () => {
@@ -186,13 +187,6 @@ function AddRuntimeModal({ env, onClose }: { env: GqlEnvironment; onClose: () =>
186187

187188
const config = secret ? (tab === 0 ? biToml(env.handler, secret) : miToml(env.handler, secret)) : null;
188189

189-
const handleCopy = async () => {
190-
if (!config) return;
191-
await navigator.clipboard.writeText(config);
192-
setCopied(true);
193-
setTimeout(() => setCopied(false), 2000);
194-
};
195-
196190
return (
197191
<Dialog open onClose={onClose} maxWidth="sm" fullWidth>
198192
<DialogTitle>Add Runtime: {env.name} environment</DialogTitle>
@@ -224,27 +218,25 @@ function AddRuntimeModal({ env, onClose }: { env: GqlEnvironment; onClose: () =>
224218
<Tab label="MI" />
225219
</Tabs>
226220
<DialogContentText sx={{ mb: 1 }}>
227-
Add the following configuration to your runtime's <strong>{tab === 0 ? 'Config.toml' : 'deployment.toml'}</strong> file:
221+
Add the following configuration to your runtime's <strong>{tab === 0 ? 'Config.toml' : 'deployment.toml'}</strong> file. Change the <strong>project, integration and runtime</strong> values as needed. The runtime value must be unique for each
222+
runtime you register.
228223
</DialogContentText>
229-
<Box sx={{ position: 'relative' }}>
230-
<Box
231-
component="pre"
232-
sx={{
233-
p: 2,
234-
bgcolor: 'action.hover',
235-
borderRadius: 1,
236-
overflow: 'auto',
237-
fontSize: 13,
238-
fontFamily: 'monospace',
239-
whiteSpace: 'pre-wrap',
240-
wordBreak: 'break-all',
241-
}}>
242-
{config}
243-
</Box>
244-
<IconButton size="small" onClick={handleCopy} sx={{ position: 'absolute', top: 8, right: 8 }} aria-label="Copy">
245-
{copied ? <Check size={16} /> : <Copy size={16} />}
246-
</IconButton>
247-
</Box>
224+
{config && <CodeBoxWithCopy code={config} />}
225+
{tab === 0 && (
226+
<>
227+
<DialogContentText sx={{ mb: 1 }}>
228+
Add the following configuration to your runtime's <strong>Ballerina.toml</strong> file:
229+
</DialogContentText>
230+
<CodeBoxWithCopy code={`[build-options]\nremoteManagement = true`} />
231+
<DialogContentText sx={{ mb: 1 }}>
232+
Import wso2/icp.runtime.bridge to your runtime's <strong>main.bal</strong> file:
233+
</DialogContentText>
234+
<CodeBoxWithCopy code={`import wso2/icp.runtime.bridge as _;`} />
235+
<Alert severity="info" sx={{ mt: 2 }}>
236+
The above configuration is for runtimes using the <strong>BI</strong> integration. If you're using the <strong>MI</strong> integration, switch to the MI tab to see the correct configuration.
237+
</Alert>
238+
</>
239+
)}
248240
</>
249241
)}
250242
</DialogContent>

‎frontend/src/pages/Runtime.tsx‎

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ import {
4141
TablePagination,
4242
Typography,
4343
} from '@wso2/oxygen-ui';
44-
import { Check, Copy, FileText, Key, Plus, RefreshCw, Trash2, X } from '@wso2/oxygen-ui-icons-react';
44+
import { FileText, Key, Plus, RefreshCw, Trash2, X } from '@wso2/oxygen-ui-icons-react';
45+
import CodeBoxWithCopy from '../components/CodeBoxWithCopy';
4546
import SearchField from '../components/SearchField';
4647
import { LogFilesDrawer } from '../components/LogFilesDrawer';
4748
import { useCallback, useEffect, useState, type JSX } from 'react';
@@ -110,7 +111,6 @@ function AddRuntimeModal({
110111
const createMutation = useCreateOrgSecret();
111112
const queryClient = useQueryClient();
112113
const [secret, setSecret] = useState<string | null>(null);
113-
const [copied, setCopied] = useState(false);
114114
const [error, setError] = useState<string | null>(null);
115115
const isBI = componentType === 'BI';
116116

@@ -132,13 +132,6 @@ function AddRuntimeModal({
132132

133133
const config = secret ? (isBI ? biToml(environmentName, secret, projectHandle, integrationHandle) : miToml(environmentName, secret, projectHandle, integrationHandle)) : null;
134134

135-
const handleCopy = async () => {
136-
if (!config) return;
137-
await navigator.clipboard.writeText(config);
138-
setCopied(true);
139-
setTimeout(() => setCopied(false), 2000);
140-
};
141-
142135
const handleDialogClose = (_event: unknown, reason: string) => {
143136
if (createMutation.isPending && (reason === 'backdropClick' || reason === 'escapeKeyDown')) return;
144137
onClose();
@@ -171,27 +164,21 @@ function AddRuntimeModal({
171164
Copy this secret now. It will not be shown again.
172165
</Alert>
173166
<DialogContentText sx={{ mb: 1 }}>
174-
Add the following configuration to your runtime's <strong>{isBI ? 'Config.toml' : 'deployment.toml'}</strong> file:
167+
Add the following configuration to your runtime's <strong>{isBI ? 'Config.toml' : 'deployment.toml'}</strong> file. Change the <strong>runtime</strong> value; it must be unique for each registered runtime.
175168
</DialogContentText>
176-
<Box sx={{ position: 'relative' }}>
177-
<Box
178-
component="pre"
179-
sx={{
180-
p: 2,
181-
bgcolor: 'action.hover',
182-
borderRadius: 1,
183-
overflow: 'auto',
184-
fontSize: 13,
185-
fontFamily: 'monospace',
186-
whiteSpace: 'pre-wrap',
187-
wordBreak: 'break-all',
188-
}}>
189-
{config}
190-
</Box>
191-
<IconButton size="small" onClick={handleCopy} sx={{ position: 'absolute', top: 8, right: 8 }} aria-label="Copy">
192-
{copied ? <Check size={16} /> : <Copy size={16} />}
193-
</IconButton>
194-
</Box>
169+
{config && <CodeBoxWithCopy code={config} />}
170+
{isBI && (
171+
<>
172+
<DialogContentText sx={{ mb: 1 }}>
173+
Add the following configuration to your runtime's <strong>Ballerina.toml</strong> file:
174+
</DialogContentText>
175+
<CodeBoxWithCopy code={`[build-options]\nremoteManagement = true`} />
176+
<DialogContentText sx={{ mb: 1 }}>
177+
Import wso2/icp.runtime.bridge to your runtime's <strong>main.bal</strong> file:
178+
</DialogContentText>
179+
<CodeBoxWithCopy code={`import wso2/icp.runtime.bridge as _;`} />
180+
</>
181+
)}
195182
</>
196183
)}
197184
</DialogContent>

0 commit comments

Comments
 (0)