From 7546f8bef4593935ae68605f9525deedf19224c6 Mon Sep 17 00:00:00 2001
From: bhavanas-ib <bhavana.s@ib-systems.org>
Date: Thu, 23 May 2024 11:46:30 +0530
Subject: [PATCH 1/2] onboard form correction

---
 .../dashboard/edit-onboard-form.tsx           | 29 +++++++++------
 .../src/components/dashboard/onboard-form.tsx | 35 +++++++++++--------
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/dashboard/edit-onboard-form.tsx b/frontend/src/components/dashboard/edit-onboard-form.tsx
index 931e4ea8..e516334f 100644
--- a/frontend/src/components/dashboard/edit-onboard-form.tsx
+++ b/frontend/src/components/dashboard/edit-onboard-form.tsx
@@ -55,8 +55,11 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                     },
                     withCredentials: true,
                 })
-            const podName = response.data.product_name === undefined && response.data.asset_communication_protocol === undefined
+                console.log("what's the response", response);
+                
+            const productName = response.data.product_name === undefined && response.data.asset_communication_protocol === undefined
                 ? "" : `${response.data.product_name}-${response.data.asset_communication_protocol}`;
+                const podName =productName.toLowerCase();
 
             const assetProtocol = response.data.asset_communication_protocol === undefined ? "" : response.data.asset_communication_protocol;
 
@@ -171,7 +174,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                     id="ip_address"
                                     value={onboard.ip_address}
                                     type="text"
-                                    placeholder="192.168.49.26"
+                                    placeholder="ex:192.168.49.26"
                                     onChange={(e) => handleInputChange(e.target.value, "ip_address")}
                                 />
                             </div>
@@ -182,7 +185,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                         id="main_topic"
                                         value={onboard.main_topic}
                                         type="text"
-                                        placeholder="airtracker-74145/relay1"
+                                        placeholder="ex:airtracker-74145/relay1"
                                         onChange={(e) => handleInputChange(e.target.value, "main_topic")}
                                     />
                                     :
@@ -190,7 +193,8 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                         id="main_topic"
                                         value={onboard.main_topic}
                                         type="text"
-                                        placeholder="airtracker-74145/relay1"
+                                        placeholder="ex:airtracker-74145/relay1"
+                                        disabled
                                     />
                                 }
                             </div>
@@ -200,6 +204,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                     id="protocol"
                                     value={onboard.protocol}
                                     type="text"
+                                    disabled
                                 />
                             </div>
                             <div className="field">
@@ -219,6 +224,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                     id="pod_name"
                                     value={onboard.pod_name}
                                     type="text"
+                                    disabled
                                 />
                             </div>
                             <div className="field">
@@ -227,7 +233,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                     id="pdt_mqtt_hostname"
                                     value={onboard.pdt_mqtt_hostname}
                                     type="text"
-                                    placeholder="devalerta.industry-fusion.com"
+                                    placeholder="ex:devalerta.industry-fusion.com"
                                     onChange={(e) => handleInputChange(e.target.value, "pdt_mqtt_hostname")}
                                 />
                             </div>
@@ -235,11 +241,10 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                 <label htmlFor="pdt_mqtt_port">Pdt Mqtt Port</label>
                                 <InputNumber
                                     id="pdt_mqtt_port"
-                                    // value={onboard.pdt_mqtt_port}
-                                    placeholder="8883"
+                                    value={onboard.pdt_mqtt_port}
+                                    placeholder="ex:8883"
                                     useGrouping={false}
                                     onChange={(e) => handleInputChange(e.value, "pdt_mqtt_port")}
-
                                 />
                             </div>
                             <div className="field my-4">
@@ -257,6 +262,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                 <InputText
                                     id="device_id"
                                     value={onboard.device_id}
+                                    disabled
                                 />
                             </div>
                             <div className="field">
@@ -264,6 +270,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                 <InputText
                                     id="gateway_id"
                                     value={onboard.gateway_id}
+                                    disabled
                                 />
                             </div>
                             <div className="field">
@@ -271,7 +278,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                 <InputText
                                     id="keycloak_url"
                                     value={onboard.keycloak_url}
-                                    placeholder="https://development.industry-fusion.com/auth/realms"
+                                    placeholder="ex:https://development.industry-fusion.com/auth/realms"
                                     onChange={e => handleInputChange(e.target.value, "keycloak_url")}
                                 />
                             </div>
@@ -305,7 +312,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                     id="dataservice_image_config"
                                     value={onboard.dataservice_image_config}
                                     onChange={e => handleInputChange(e.target.value, "dataservice_image_config")}
-                                    placeholder="fusionmqttdataservice:latest"
+                                    placeholder="ex:fusionmqttdataservice:latest"
                                 />
                             </div>
                             <div className="field">
@@ -314,7 +321,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                                     id="agentservice_image_config"
                                     value={onboard.agentservice_image_config}
                                     onChange={e => handleInputChange(e.target.value, "agentservice_image_config")}
-                                    placeholder="iff-iot-agent:v0.0.2"
+                                    placeholder="ex:iff-iot-agent:v0.0.2"
                                 />
                             </div>
 
diff --git a/frontend/src/components/dashboard/onboard-form.tsx b/frontend/src/components/dashboard/onboard-form.tsx
index c6ed4dcb..9eb114e3 100644
--- a/frontend/src/components/dashboard/onboard-form.tsx
+++ b/frontend/src/components/dashboard/onboard-form.tsx
@@ -43,7 +43,8 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
     setOnboardAssetProp
 }) => {
     const { t } = useTranslation('button');
-    const podName = asset?.product_name === undefined && asset?.asset_communication_protocol === undefined ? "" : `${asset?.product_name}-${asset?.asset_communication_protocol}`;
+    const productName = asset?.product_name === undefined && asset?.asset_communication_protocol === undefined ? "" : `${asset?.product_name}-${asset?.asset_communication_protocol}`;
+    const podName = productName.toLowerCase().replace(/ /g, '');
     const assetProtocol = asset?.asset_communication_protocol === undefined ? "" : asset?.asset_communication_protocol;
     const [onboardForm, setOnboardForm] = useState(
         {
@@ -92,6 +93,9 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
 
         const payload = JSON.stringify(modifiedOnboardForm);
 
+        console.log("on submit payload", payload);
+        
+
         try {
             const response = await axios.post(API_URL + "/onboarding-asset", payload, {
                 headers: {
@@ -162,7 +166,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                     id="ip_address"
                                     value={onboardForm.ip_address}
                                     type="text"
-                                    placeholder="192.168.49.26"
+                                    placeholder="ex:192.168.49.26"
                                     onChange={(e) => handleInputChange(e.target.value, "ip_address")}
                                 />
                             </div>
@@ -173,7 +177,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                         id="main_topic"
                                         value={onboardForm.main_topic}
                                         type="text"
-                                        placeholder="airtracker-74145/relay1"
+                                        placeholder="ex:airtracker-74145/relay1"
                                         onChange={(e) => handleInputChange(e.target.value, "main_topic")}
                                     />
                                     :
@@ -181,7 +185,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                         id="main_topic"
                                         value={onboardForm.main_topic}
                                         type="text"
-                                        placeholder="airtracker-74145/relay1"
+                                       disabled
                                     />
                                 }
                             </div>
@@ -191,6 +195,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                     id="protocol"
                                     value={onboardForm.protocol}
                                     type="text"
+                                    disabled
                                 />
                             </div>
                             <div className="field">
@@ -201,7 +206,6 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                     rows={10}
                                     cols={30}
                                     onChange={(e) => handleInputTextAreaChange(e, "app_config")}
-
                                 />
                             </div>
                             <div className="field">
@@ -210,6 +214,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                     id="pod_name"
                                     value={onboardForm.pod_name}
                                     type="text"
+                                    disabled
                                 />
                             </div>
                             <div className="field">
@@ -218,7 +223,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                     id="pdt_mqtt_hostname"
                                     value={onboardForm.pdt_mqtt_hostname}
                                     type="text"
-                                    placeholder="devalerta.industry-fusion.com"
+                                    placeholder="ex:devalerta.industry-fusion.com"
                                     onChange={(e) => handleInputChange(e.target.value, "pdt_mqtt_hostname")}
                                 />
                             </div>
@@ -226,11 +231,10 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                 <label htmlFor="pdt_mqtt_port">Pdt Mqtt Port</label>
                                 <InputNumber
                                     id="pdt_mqtt_port"
-                                    // value={onboardForm.pdt_mqtt_port}
-                                    placeholder="8883"
+                                    value={onboardForm.pdt_mqtt_port}
+                                    placeholder="ex:8883"
                                     useGrouping={false}
                                     onChange={(e) => handleInputChange(e.value, "pdt_mqtt_port")}
-
                                 />
                             </div>
                             <div className="field my-4">
@@ -248,6 +252,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                 <InputText
                                     id="device_id"
                                     value={onboardForm.device_id}
+                                    disabled
                                 />
                             </div>
                             <div className="field">
@@ -255,14 +260,16 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                 <InputText
                                     id="gateway_id"
                                     value={onboardForm.gateway_id}
+                                    disabled
                                 />
                             </div>
                             <div className="field">
                                 <label htmlFor="keycloak_url">KeyCloak Url</label>
                                 <InputText
                                     id="keycloak_url"
+                                    autoComplete="KeyCloak Url"
                                     value={onboardForm.keycloak_url}
-                                    placeholder="https://development.industry-fusion.com/auth/realms"
+                                    placeholder="ex:https://development.industry-fusion.com/auth/realms"
                                     onChange={e => handleInputChange(e.target.value, "keycloak_url")}
                                 />
                             </div>
@@ -271,6 +278,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                 <Password
                                     value={onboardForm.realm_password}
                                     toggleMask
+                                    autoComplete=""
                                     onChange={(e) => handleInputChange(e.target.value, "realm_password")}
                                 />
                             </div>
@@ -296,7 +304,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                     id="dataservice_image_config"
                                     value={onboardForm.dataservice_image_config}
                                     onChange={e => handleInputChange(e.target.value, "dataservice_image_config")}
-                                    placeholder="fusionmqttdataservice:latest"
+                                    placeholder="ex:fusionmqttdataservice:latest"
                                 />
                             </div>
                             <div className="field">
@@ -305,10 +313,9 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                     id="agentservice_image_config"
                                     value={onboardForm.agentservice_image_config}
                                     onChange={e => handleInputChange(e.target.value, "agentservice_image_config")}
-                                    placeholder="iff-iot-agent:v0.0.2"
+                                    placeholder="ex:iff-iot-agent:v0.0.2"
                                 />
-                            </div>
-
+                           </div>
                         </div>
                     </form>
                 </div>

From dda493c69b452b9c7f308706e4c35ad6b79f6030 Mon Sep 17 00:00:00 2001
From: bhavanas-ib <bhavana.s@ib-systems.org>
Date: Fri, 24 May 2024 13:15:57 +0530
Subject: [PATCH 2/2] style changes

---
 .../dashboard/edit-onboard-form.tsx           | 30 ++++++++++++-------
 .../src/components/dashboard/onboard-form.tsx | 15 ++++++----
 frontend/src/styles/dashboard.css             | 14 +++++++++
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/dashboard/edit-onboard-form.tsx b/frontend/src/components/dashboard/edit-onboard-form.tsx
index e516334f..055eb9cb 100644
--- a/frontend/src/components/dashboard/edit-onboard-form.tsx
+++ b/frontend/src/components/dashboard/edit-onboard-form.tsx
@@ -25,6 +25,8 @@ import { Password } from "primereact/password";
 import { Toast, ToastMessage } from "primereact/toast";
 import { ChangeEvent, Dispatch, SetStateAction, useEffect, useRef, useState } from "react"
 import { useTranslation } from "next-i18next";
+import "../../styles/dashboard.css"
+
 interface EditOnboardAssetProp {
     editOnboardAssetProp: {
         showEditOnboard: boolean,
@@ -55,12 +57,11 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                     },
                     withCredentials: true,
                 })
-                console.log("what's the response", response);
-                
+              
+                              
             const productName = response.data.product_name === undefined && response.data.asset_communication_protocol === undefined
                 ? "" : `${response.data.product_name}-${response.data.asset_communication_protocol}`;
                 const podName =productName.toLowerCase();
-
             const assetProtocol = response.data.asset_communication_protocol === undefined ? "" : response.data.asset_communication_protocol;
 
         
@@ -69,7 +70,8 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                 ...prevState,
                 ...response.data,
                 pod_name: podName,
-                protocol: assetProtocol
+                protocol: assetProtocol,
+                app_config: JSON.stringify(response.data.app_config)
             }));
 
         } catch (error: any) {
@@ -101,20 +103,25 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
     const handleInputTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>, key: any) => {
         setOnboard({ ...onboard, [key]: e.target.value })
     }
+
     const handleSubmit = async (e: any) => {
-        e.preventDefault();
+        e.preventDefault();   
         const modifiedOnboard = {
             ...onboard,
-            app_config: "|" + onboard.app_config
-        };
+            app_config: JSON.parse(onboard.app_config)
+        }
+        const payload = JSON.stringify(modifiedOnboard);
+
         try {
-            const response = await axios.patch(API_URL + `/onboarding-asset/${editOnboardAssetProp.onboardAssetId}`, modifiedOnboard, {
+            const response = await axios.patch(API_URL + `/onboarding-asset/${editOnboardAssetProp.onboardAssetId}`, payload, {
                 headers: {
                     "Content-Type": "application/json",
                     Accept: "application/json",
                 },
                 withCredentials: true,
             })
+            console.log("onboard edit",response.data);
+            
             const { success, status, message } = response.data;
             if (status === 204 && success === true) {
                 setEditOnboardAssetProp(
@@ -122,9 +129,9 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                         ...editOnboardAssetProp,
                         showEditOnboard: false,
                         successToast:true
-
                     }
                 )
+                showToast('success', 'Success', 'onboard form updated successfully');
             }
 
         }catch (error: any) {
@@ -137,6 +144,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
             }
         }
     }
+
     const footerContent = (
         <div>
             <div className="finish-btn">
@@ -146,10 +154,12 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
             </div>
         </div>
     )
+
     const headerElement = (
         <p className="m-0 ml-5"> Update Onboard Form</p>
     )
 
+
     return (
         <>
           <Toast ref={toast} />
@@ -165,7 +175,7 @@ const EditOnboardForm: React.FC<EditOnboardAssetProp> = ({ editOnboardAssetProp,
                 )}
                 draggable={false} resizable={false}
             >
-                <div className="card ">
+                <div className="card onboard-form">
                     <form >
                         <div className="p-fluid p-formgrid p-grid px-3">
                             <div className="field">
diff --git a/frontend/src/components/dashboard/onboard-form.tsx b/frontend/src/components/dashboard/onboard-form.tsx
index 9eb114e3..00ed2216 100644
--- a/frontend/src/components/dashboard/onboard-form.tsx
+++ b/frontend/src/components/dashboard/onboard-form.tsx
@@ -81,9 +81,11 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
             setOnboardForm({ ...onboardForm, [key]: value })
         }
     }
+
     const handleInputTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>, key: any) => {
         setOnboardForm({ ...onboardForm, [key]: e.target.value })
     }
+
     const handleSubmit = async (e: any) => {
         e.preventDefault();
         const modifiedOnboardForm = {
@@ -127,7 +129,8 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
     }
 
     const headerElement = (
-        <div>
+        <div className="onboardform-header">
+            <h3>Onboard Form</h3>
             <p className="m-0"> Please onboard the asset gateway before moving to dashboard.  </p>
             <p className="m-0">Submit the form to start the Asset onboard</p>
         </div>
@@ -150,14 +153,16 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
             <Dialog visible={showBlockerProp} modal
                 header={headerElement}
                 footer={footerContent}
-                style={{ width: '50rem' }} onHide={() => {
+                style={{ width: '50rem' }} 
+                onHide={() => {
                     setShowBlockerProp(false)
                     setOnboardAssetProp(false)
                 }
                 }
-                draggable={false} resizable={false}
+                draggable={false} 
+                resizable={false}
             >
-                <div className="card ">
+                <div className="card onboard-form">
                     <form >
                         <div className="p-fluid p-formgrid p-grid px-3">
                             <div className="field">
@@ -231,7 +236,7 @@ const OnboardForm: React.FC<OnboardFormProps> = ({
                                 <label htmlFor="pdt_mqtt_port">Pdt Mqtt Port</label>
                                 <InputNumber
                                     id="pdt_mqtt_port"
-                                    value={onboardForm.pdt_mqtt_port}
+                                    //value={onboardForm.pdt_mqtt_port}
                                     placeholder="ex:8883"
                                     useGrouping={false}
                                     onChange={(e) => handleInputChange(e.value, "pdt_mqtt_port")}
diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css
index 43661f62..cbc47605 100644
--- a/frontend/src/styles/dashboard.css
+++ b/frontend/src/styles/dashboard.css
@@ -15,6 +15,20 @@
     background: #ecfeff !important;
     color: #0e7490 !important;
 }
+.onboard-form input::placeholder {
+    color: #ccc;
+    font-style: italic;
+    font-size: 13px;
+  }
+.onboardform-header h3{
+    margin-bottom: 7px;
+    letter-spacing: 0.2px;
+}
+.onboardform-header p{
+    font-size: 13.5px;
+}
+ 
+  
 
 .dashboard-container {
     padding-bottom: 2.5rem;