From c77b62db19c90fc22732a76a289adc88ba3c16ec Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 15 May 2025 10:30:37 +0530
Subject: [PATCH] refactor: Update element IDs for better clarity and
 consistency across components

---
 .../layout/sidebarRight/SideBarRight.tsx      |   6 +-
 .../components/ActionsList.tsx                |   7 +-
 .../versionHisory/VersionHistory.tsx          |   1 +
 app/src/components/ui/Tools.tsx               |   2 +-
 app/src/components/ui/list/List.tsx           |   2 +-
 app/src/modules/market/Card.tsx               |   2 +-
 app/src/modules/market/FilterSearch.tsx       |   2 +-
 .../modules/simulation/compare/compare.tsx    |   1 +
 .../visualization/template/Templates.tsx      |   8 +-
 .../widgets/panel/AddButtons.tsx              | 208 ++++++++----------
 10 files changed, 108 insertions(+), 131 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx
index c027bdb..8b926d7 100644
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -83,7 +83,7 @@ const SideBarRight: React.FC = () => {
           {activeModule === "simulation" && (
             <>
               <button
-                id="sidebar-action-list-properties"
+                id="sidebar-action-list-simulation"
                 className={`sidebar-action-list ${
                   subModule === "simulations" ? "active" : ""
                 }`}
@@ -96,7 +96,7 @@ const SideBarRight: React.FC = () => {
                 <SimulationIcon isActive={subModule === "simulations"} />
               </button>
               <button
-                id="sidebar-action-list-properties"
+                id="sidebar-action-list-mechanics"
                 className={`sidebar-action-list ${
                   subModule === "mechanics" ? "active" : ""
                 }`}
@@ -109,7 +109,7 @@ const SideBarRight: React.FC = () => {
                 <MechanicsIcon isActive={subModule === "mechanics"} />
               </button>
               <button
-                id="sidebar-action-list-properties"
+                id="sidebar-action-list-analysis"
                 className={`sidebar-action-list ${
                   subModule === "analysis" ? "active" : ""
                 }`}
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
index 0e1a2f6..3ea9d46 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
@@ -84,8 +84,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
         >
           <div className="list-container">
             {multipleAction &&
-              selectedPointData &&
-              selectedPointData.actions.map((action: any) => (
+              selectedPointData?.actions?.map((action: any) => (
                 <div
                   key={action.actionUuid}
                   className={`list-item ${
@@ -106,7 +105,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
                       onRename={(value) => handleRenameAction(value)}
                     />
                   </button>
-                  {selectedPointData.actions.length > 1 && (
+                  {selectedPointData?.actions?.length > 1 && (
                     <button
                       id="remove-action-button"
                       className="remove-button"
@@ -121,7 +120,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
                   )}
                 </div>
               ))}
-            {!multipleAction && selectedPointData && (
+            {!multipleAction && selectedPointData?.action && (
               <div
                 key={selectedPointData.action.actionUuid}
                 className={`list-item active`}
diff --git a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
index a782f78..282c371 100644
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
@@ -102,6 +102,7 @@ const VersionHistory = () => {
           <button
             key={version.versionName}
             className="saved-version"
+            id={`${version.versionName}-${index}`}
             onClick={() => handleSelectVersion(version)}
           >
             <div className="version-name">{version.versionName}</div>
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index 50f878a..5256494 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -345,7 +345,7 @@ const Tools: React.FC = () => {
                 {["cursor", "free-hand", "delete"].map((option) => (
                   <button
                     key={option}
-                    id={option}
+                    id={`${option}-tool`}
                     className="option-list"
                     onClick={() => {
                       setActiveTool(option);
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index 90e5c84..8ec9dcc 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -215,7 +215,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                       >
                         <div className="list-item">
                           <button
-                            id="asset-name"
+                            id={`${asset.name}-${asset.id}`}
                             className="value"
                             onClick={() => handleAssetClick(asset)}
                           >
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx
index d70d2b4..2b878bb 100644
--- a/app/src/modules/market/Card.tsx
+++ b/app/src/modules/market/Card.tsx
@@ -103,7 +103,7 @@ const Card: React.FC<CardProps> = ({
         </div>
       </div>
       <button
-        id="asset-buy"
+        id={`${AssetID}-asset-buy`}
         className="buy-now-button"
         onClick={handleCardSelect}
       >
diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx
index c7038eb..ebc6d3a 100644
--- a/app/src/modules/market/FilterSearch.tsx
+++ b/app/src/modules/market/FilterSearch.tsx
@@ -79,7 +79,7 @@ const FilterSearch: React.FC<ModelsProps> = ({
         <div className="stars">
           {[0, 1, 2, 3, 4].map((i) => (
             <button
-              id="star-button"
+              id={`${i + 1}-star-button`}
               key={i}
               onClick={() => handleStarClick(i)}
               className={`star-wrapper ${i < rating ? "filled" : "empty"}`}
diff --git a/app/src/modules/simulation/compare/compare.tsx b/app/src/modules/simulation/compare/compare.tsx
index 4582b30..346290e 100644
--- a/app/src/modules/simulation/compare/compare.tsx
+++ b/app/src/modules/simulation/compare/compare.tsx
@@ -52,6 +52,7 @@ const ComparePopUp = () => {
             </div>
             <button
               className="cancel btn"
+              id="compare-cancel-btn"
               onClick={() => setComparePopUp(false)}
             >
               Cancel
diff --git a/app/src/modules/visualization/template/Templates.tsx b/app/src/modules/visualization/template/Templates.tsx
index b256a31..6a94d19 100644
--- a/app/src/modules/visualization/template/Templates.tsx
+++ b/app/src/modules/visualization/template/Templates.tsx
@@ -14,7 +14,7 @@ const Templates = () => {
   useEffect(() => {
     async function templateData() {
       try {
-        const email = localStorage.getItem("email") || "";
+        const email = localStorage.getItem("email") ?? "";
         const organization = email?.split("@")[1]?.split(".")[0];
         let response = await getTemplateData(organization);
         setTemplates(response);
@@ -33,8 +33,7 @@ const Templates = () => {
   ) => {
     try {
       e.stopPropagation();
-      const email = localStorage.getItem("email") || "";
-
+      const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
       let deleteTemplate = {
         organization: organization,
@@ -56,7 +55,7 @@ const Templates = () => {
   const handleLoadTemplate = async (template: any) => {
     try {
       if (selectedZone.zoneName === "") return;
-      const email = localStorage.getItem("email") || "";
+      const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
 
       let loadingTemplate = {
@@ -110,7 +109,6 @@ const Templates = () => {
           )}
           <div className="template-details">
             <div className="template-name">
-              {/* {`Template ${index + 1}`} */}
               <RenameInput value={`Template ${index + 1}`} />
             </div>
             <button
diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
index 6746368..973154f 100644
--- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx
+++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   CleanPannel,
   EyeIcon,
@@ -95,8 +95,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
   // Function to toggle lock/unlock a panel
   const toggleLockPanel = async (side: Side) => {
-    // console.log('side: ', side);
-    const email = localStorage.getItem("email") || "";
+    const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
     //add api
     const newLockedPanels = selectedZone.lockedPanels.includes(side)
@@ -118,12 +117,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
     }
 
     setSelectedZone(updatedZone);
-    // let response = await lockPanel(selectedZone.zoneId, organization, newLockedPanels)
-    // console.log('response: ', response);
-    // if (response.message === 'locked panel updated successfully') {
-    //   // Update the selectedZone state
-    //   setSelectedZone(updatedZone);
-    // }
   };
 
   // Function to clean all widgets from a panel
@@ -136,7 +129,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
     )
       return;
 
-    const email = localStorage.getItem("email") || "";
+    const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
 
     let clearPanel = {
@@ -155,23 +148,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       widgets: cleanedWidgets,
     };
     // Update the selectedZone state
-    // console.log('updatedZone: ', updatedZone);
     setSelectedZone(updatedZone);
-
-    // let response = await clearPanel(selectedZone.zoneId, organization, side)
-    // console.log('response: ', response);
-    // if (response.message === 'PanelWidgets cleared successfully') {
-
-    //   const cleanedWidgets = selectedZone.widgets.filter(
-    //     (widget) => widget.panel !== side
-    //   );
-    //   const updatedZone = {
-    //     ...selectedZone,
-    //     widgets: cleanedWidgets,
-    //   };
-    //   // Update the selectedZone state
-    //   setSelectedZone(updatedZone);
-    // }
   };
 
   // Function to handle "+" button click
@@ -186,8 +163,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
       setTimeout(() => {
         console.log("Removing after wait...");
 
-        const email = localStorage.getItem("email") || "";
-        const organization = email?.split("@")[1]?.split(".")[0] || "";
+        const email = localStorage.getItem("email") ?? "";
+        const organization = email?.split("@")[1]?.split(".")[0] ?? "";
 
         // Remove widgets for that side
         const cleanedWidgets = selectedZone.widgets.filter(
@@ -229,8 +206,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
     } else {
       // Panel does not exist: Add it
       try {
-        const email = localStorage.getItem("email") || "";
-        const organization = email?.split("@")[1]?.split(".")[0] || "";
+        const email = localStorage.getItem("email") ?? "";
+        const organization = email?.split("@")[1]?.split(".")[0] ?? "";
 
         const newActiveSides = selectedZone.activeSides.includes(side)
           ? [...selectedZone.activeSides]
@@ -261,33 +238,32 @@ const AddButtons: React.FC<ButtonsProps> = ({
   };
 
   return (
-    <>
-      <div>
-        {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
-          <div key={side} className={`side-button-container ${side}`}>
-            {/* "+" Button */}
+    <div>
+      {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
+        <div key={side} className={`side-button-container ${side}`}>
+          {/* "+" Button */}
 
-            <button
-              id="panel-add-button"
-              className={`side-button ${side}${
-                selectedZone.activeSides.includes(side) ? " active" : ""
-              }`}
-              onClick={() => handlePlusButtonClick(side)}
-              title={
-                selectedZone.activeSides.includes(side)
-                  ? `Remove all items and close ${side} panel`
-                  : `Activate ${side} panel`
-              }
-            >
-              <div className="add-icon">
-                <AddIcon />
-              </div>
-            </button>
+          <button
+            id="panel-add-button"
+            className={`side-button ${side}${
+              selectedZone.activeSides.includes(side) ? " active" : ""
+            }`}
+            onClick={() => handlePlusButtonClick(side)}
+            title={
+              selectedZone.activeSides.includes(side)
+                ? `Remove all items and close ${side} panel`
+                : `Activate ${side} panel`
+            }
+          >
+            <div className="add-icon">
+              <AddIcon />
+            </div>
+          </button>
 
-            {/* Extra Buttons */}
-            {selectedZone.activeSides.includes(side) && (
-              <div
-                className={`extra-Bs
+          {/* Extra Buttons */}
+          {selectedZone.activeSides.includes(side) && (
+            <div
+              className={`extra-Bs
                   ${waitingPanels === side ? "extra-Bs-addclosing" : ""}
                   ${
                     !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
@@ -296,72 +272,74 @@ const AddButtons: React.FC<ButtonsProps> = ({
                       : ""
                   }
                 `}
+            >
+              {/* Hide Panel */}
+              <button
+                className={`icon ${
+                  hiddenPanels[selectedZone.zoneId]?.includes(side)
+                    ? "active"
+                    : ""
+                }`}
+                id="hide-panel-visulization"
+                title={
+                  hiddenPanels[selectedZone.zoneId]?.includes(side)
+                    ? "Show Panel"
+                    : "Hide Panel"
+                }
+                onClick={() => toggleVisibility(side)}
               >
-                {/* Hide Panel */}
-                <div
-                  className={`icon ${
+                <EyeIcon
+                  fill={
                     hiddenPanels[selectedZone.zoneId]?.includes(side)
-                      ? "active"
-                      : ""
-                  }`}
-                  title={
-                    hiddenPanels[selectedZone.zoneId]?.includes(side)
-                      ? "Show Panel"
-                      : "Hide Panel"
+                      ? "var(--icon-default-color-active)"
+                      : "var(--text-color)"
                   }
-                  onClick={() => toggleVisibility(side)}
-                >
-                  <EyeIcon
-                    fill={
-                      hiddenPanels[selectedZone.zoneId]?.includes(side)
-                        ? "var(--icon-default-color-active)"
-                        : "var(--text-color)"
-                    }
-                  />
-                </div>
+                />
+              </button>
 
-                {/* Clean Panel */}
-                <div
-                  className="icon"
-                  title="Clean Panel"
-                  onClick={() => cleanPanel(side)}
-                  style={{
-                    cursor:
-                      hiddenPanels[selectedZone.zoneId]?.includes(side) ||
-                      selectedZone.lockedPanels.includes(side)
-                        ? "not-allowed"
-                        : "pointer",
-                  }}
-                >
-                  <CleanPannel />
-                </div>
-
-                {/* Lock/Unlock Panel */}
-                <div
-                  className={`icon ${
-                    selectedZone.lockedPanels.includes(side) ? "active" : ""
-                  }`}
-                  title={
+              {/* Clean Panel */}
+              <button
+                className="icon"
+                title="Clean Panel"
+                id="clean-panel-visulization"
+                onClick={() => cleanPanel(side)}
+                style={{
+                  cursor:
+                    hiddenPanels[selectedZone.zoneId]?.includes(side) ||
                     selectedZone.lockedPanels.includes(side)
-                      ? "Unlock Panel"
-                      : "Lock Panel"
+                      ? "not-allowed"
+                      : "pointer",
+                }}
+              >
+                <CleanPannel />
+              </button>
+
+              {/* Lock/Unlock Panel */}
+              <button
+                className={`icon ${
+                  selectedZone.lockedPanels.includes(side) ? "active" : ""
+                }`}
+                id="lock-panel-visulization"
+                title={
+                  selectedZone.lockedPanels.includes(side)
+                    ? "Unlock Panel"
+                    : "Lock Panel"
+                }
+                onClick={() => toggleLockPanel(side)}
+              >
+                <LockIcon
+                  fill={
+                    selectedZone.lockedPanels.includes(side)
+                      ? "var(--icon-default-color-active)"
+                      : "var(--text-color)"
                   }
-                  onClick={() => toggleLockPanel(side)}
-                >
-                  <LockIcon
-                    fill={
-                      selectedZone.lockedPanels.includes(side)
-                        ? "var(--icon-default-color-active)"
-                        : "var(--text-color)"
-                    }
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </>
+                />
+              </button>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
   );
 };