Improve icp configuration instructions

frontend/src/components/CodeBoxWithCopy.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Box, IconButton } from '@wso2/oxygen-ui';
+import { Check, Copy } from '@wso2/oxygen-ui-icons-react';
+
+interface CodeBoxWithCopyProps {
+  code: string;
+}
+
+const CodeBoxWithCopy: React.FC<CodeBoxWithCopyProps> = ({ code }) => {
+  const [copied, setCopied] = useState(false);
+  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = async () => {
+    if (copyTimeoutRef.current) {
+      clearTimeout(copyTimeoutRef.current);
+    }
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Optionally, show a fallback UI or error message
+      // For now, just log the error
+      console.error('Failed to copy to clipboard:', err);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+  return (
+    <Box sx={{ position: 'relative', my: 1 }}>
+      <Box
+        component="pre"
+        sx={{
+          p: 2,
+          bgcolor: 'action.hover',
+          borderRadius: 1,
+          overflow: 'auto',
+          fontSize: 13,
+          fontFamily: 'monospace',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-all',
+        }}>
+        {code}
+      </Box>
+      <IconButton size="small" onClick={handleCopy} sx={{ position: 'absolute', top: 8, right: 8 }} aria-label="Copy">
+        {copied ? <Check size={16} /> : <Copy size={16} />}
+      </IconButton>
+    </Box>
+  );
+};
+
+export default CodeBoxWithCopy;

frontend/src/pages/OrgRuntimes.tsx

@@ -41,10 +41,12 @@ import {
   Tabs,
   Typography,
 } from '@wso2/oxygen-ui';
-import { Check, Copy, FileText, Key, Plus, RefreshCw, Server, Trash2, X } from '@wso2/oxygen-ui-icons-react';
-import { useCallback, useEffect, useState, type JSX } from 'react';
-import { useQueries } from '@tanstack/react-query';
+import { FileText, Key, Plus, RefreshCw, Server, Trash2, X } from '@wso2/oxygen-ui-icons-react';
+import CodeBoxWithCopy from '../components/CodeBoxWithCopy';
+import { useState, useEffect, useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router';
+import type { JSX } from 'react';
+import { useQueries } from '@tanstack/react-query';
 import { gql } from '../api/graphql';
 import { useAllEnvironments, useOrgSecrets, ORG_RUNTIMES_QUERY, type GqlEnvironment, type GqlRuntime } from '../api/queries';
 import { useCreateOrgSecret, useDeleteRuntime, useRevokeOrgSecret } from '../api/mutations';
@@ -153,7 +155,7 @@ project = "<project name>"
 integration = "<integration name>"
 runtime = "<unique id for the runtime>"
 secret = "${secret}"
-# icp_url = "https://<hostname>:9445"`;
+#icp_url = "https://<hostname>:9445"`;
 }
 
 function biToml(envName: string, secret: string): string {
@@ -163,14 +165,13 @@ project = "<project name>"
 integration = "<integration name>"
 runtime = "<unique id for the runtime>"
 secret = "${secret}"
-# serverUrl="https://<hostname>:9445"`;
+#serverUrl="https://<hostname>:9445"`;
 }
 
 function AddRuntimeModal({ env, onClose }: { env: GqlEnvironment; onClose: () => void }) {
   const createMutation = useCreateOrgSecret();
   const [secret, setSecret] = useState<string | null>(null);
   const [tab, setTab] = useState(0);
-  const [copied, setCopied] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const handleGenerate = () => {
@@ -186,13 +187,6 @@ function AddRuntimeModal({ env, onClose }: { env: GqlEnvironment; onClose: () =>
 
   const config = secret ? (tab === 0 ? biToml(env.handler, secret) : miToml(env.handler, secret)) : null;
 
-  const handleCopy = async () => {
-    if (!config) return;
-    await navigator.clipboard.writeText(config);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
   return (
     <Dialog open onClose={onClose} maxWidth="sm" fullWidth>
       <DialogTitle>Add Runtime: {env.name} environment</DialogTitle>
@@ -224,27 +218,25 @@ function AddRuntimeModal({ env, onClose }: { env: GqlEnvironment; onClose: () =>
               <Tab label="MI" />
             </Tabs>
             <DialogContentText sx={{ mb: 1 }}>
-              Add the following configuration to your runtime's <strong>{tab === 0 ? 'Config.toml' : 'deployment.toml'}</strong> file:
+              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
+              runtime you register.
             </DialogContentText>
-            <Box sx={{ position: 'relative' }}>
-              <Box
-                component="pre"
-                sx={{
-                  p: 2,
-                  bgcolor: 'action.hover',
-                  borderRadius: 1,
-                  overflow: 'auto',
-                  fontSize: 13,
-                  fontFamily: 'monospace',
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-all',
-                }}>
-                {config}
-              </Box>
-              <IconButton size="small" onClick={handleCopy} sx={{ position: 'absolute', top: 8, right: 8 }} aria-label="Copy">
-                {copied ? <Check size={16} /> : <Copy size={16} />}
-              </IconButton>
-            </Box>
+            {config && <CodeBoxWithCopy code={config} />}
+            {tab === 0 && (
+              <>
+                <DialogContentText sx={{ mb: 1 }}>
+                  Add the following configuration to your runtime's <strong>Ballerina.toml</strong> file:
+                </DialogContentText>
+                <CodeBoxWithCopy code={`[build-options]\nremoteManagement = true`} />
+                <DialogContentText sx={{ mb: 1 }}>
+                  Import wso2/icp.runtime.bridge to your runtime's <strong>main.bal</strong> file:
+                </DialogContentText>
+                <CodeBoxWithCopy code={`import wso2/icp.runtime.bridge as _;`} />
+                <Alert severity="info" sx={{ mt: 2 }}>
+                  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.
+                </Alert>
+              </>
+            )}
           </>
         )}
       </DialogContent>

frontend/src/pages/Runtime.tsx

@@ -41,7 +41,8 @@ import {
   TablePagination,
   Typography,
 } from '@wso2/oxygen-ui';
-import { Check, Copy, FileText, Key, Plus, RefreshCw, Trash2, X } from '@wso2/oxygen-ui-icons-react';
+import { FileText, Key, Plus, RefreshCw, Trash2, X } from '@wso2/oxygen-ui-icons-react';
+import CodeBoxWithCopy from '../components/CodeBoxWithCopy';
 import SearchField from '../components/SearchField';
 import { LogFilesDrawer } from '../components/LogFilesDrawer';
 import { useCallback, useEffect, useState, type JSX } from 'react';
@@ -110,7 +111,6 @@ function AddRuntimeModal({
   const createMutation = useCreateOrgSecret();
   const queryClient = useQueryClient();
   const [secret, setSecret] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const isBI = componentType === 'BI';
 
@@ -132,13 +132,6 @@ function AddRuntimeModal({
 
   const config = secret ? (isBI ? biToml(environmentName, secret, projectHandle, integrationHandle) : miToml(environmentName, secret, projectHandle, integrationHandle)) : null;
 
-  const handleCopy = async () => {
-    if (!config) return;
-    await navigator.clipboard.writeText(config);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
   const handleDialogClose = (_event: unknown, reason: string) => {
     if (createMutation.isPending && (reason === 'backdropClick' || reason === 'escapeKeyDown')) return;
     onClose();
@@ -171,27 +164,21 @@ function AddRuntimeModal({
               Copy this secret now. It will not be shown again.
             </Alert>
             <DialogContentText sx={{ mb: 1 }}>
-              Add the following configuration to your runtime's <strong>{isBI ? 'Config.toml' : 'deployment.toml'}</strong> file:
+              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.
             </DialogContentText>
-            <Box sx={{ position: 'relative' }}>
-              <Box
-                component="pre"
-                sx={{
-                  p: 2,
-                  bgcolor: 'action.hover',
-                  borderRadius: 1,
-                  overflow: 'auto',
-                  fontSize: 13,
-                  fontFamily: 'monospace',
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-all',
-                }}>
-                {config}
-              </Box>
-              <IconButton size="small" onClick={handleCopy} sx={{ position: 'absolute', top: 8, right: 8 }} aria-label="Copy">
-                {copied ? <Check size={16} /> : <Copy size={16} />}
-              </IconButton>
-            </Box>
+            {config && <CodeBoxWithCopy code={config} />}
+            {isBI && (
+              <>
+                <DialogContentText sx={{ mb: 1 }}>
+                  Add the following configuration to your runtime's <strong>Ballerina.toml</strong> file:
+                </DialogContentText>
+                <CodeBoxWithCopy code={`[build-options]\nremoteManagement = true`} />
+                <DialogContentText sx={{ mb: 1 }}>
+                  Import wso2/icp.runtime.bridge to your runtime's <strong>main.bal</strong> file:
+                </DialogContentText>
+                <CodeBoxWithCopy code={`import wso2/icp.runtime.bridge as _;`} />
+              </>
+            )}
           </>
         )}
       </DialogContent>