refactor: Update element IDs for better clarity and consistency across components

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" : ""
                 }`}

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`}

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>

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);

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)}
                           >

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}
       >

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"}`}

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

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

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,7 +238,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
   };
 
   return (
-    <>
     <div>
       {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
         <div key={side} className={`side-button-container ${side}`}>
@@ -298,12 +274,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 `}
             >
               {/* Hide Panel */}
-                <div
+              <button
                 className={`icon ${
                   hiddenPanels[selectedZone.zoneId]?.includes(side)
                     ? "active"
                     : ""
                 }`}
+                id="hide-panel-visulization"
                 title={
                   hiddenPanels[selectedZone.zoneId]?.includes(side)
                     ? "Show Panel"
@@ -318,12 +295,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
                       : "var(--text-color)"
                   }
                 />
-                </div>
+              </button>
 
               {/* Clean Panel */}
-                <div
+              <button
                 className="icon"
                 title="Clean Panel"
+                id="clean-panel-visulization"
                 onClick={() => cleanPanel(side)}
                 style={{
                   cursor:
@@ -334,13 +312,14 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 }}
               >
                 <CleanPannel />
-                </div>
+              </button>
 
               {/* Lock/Unlock Panel */}
-                <div
+              <button
                 className={`icon ${
                   selectedZone.lockedPanels.includes(side) ? "active" : ""
                 }`}
+                id="lock-panel-visulization"
                 title={
                   selectedZone.lockedPanels.includes(side)
                     ? "Unlock Panel"
@@ -355,13 +334,12 @@ const AddButtons: React.FC<ButtonsProps> = ({
                       : "var(--text-color)"
                   }
                 />
-                </div>
+              </button>
             </div>
           )}
         </div>
       ))}
     </div>
-    </>
   );
 };