From 7df8d6e8cbaf0b4ead12b4babbbd477a2ddb157d Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Fri, 22 Mar 2024 09:31:27 -0600
Subject: [PATCH] Canvas: Fix crash when trying to add wind turbine element
 (#84962)

---
 public/app/plugins/panel/canvas/utils.ts | 54 +++++++++++++-----------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/public/app/plugins/panel/canvas/utils.ts b/public/app/plugins/panel/canvas/utils.ts
index cc445b3013f..585802d3583 100644
--- a/public/app/plugins/panel/canvas/utils.ts
+++ b/public/app/plugins/panel/canvas/utils.ts
@@ -148,11 +148,11 @@ export function getDataLinks(
 
     // Text config
     const isTextTiedToFieldData =
-      elementConfig.text?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.text?.field);
+      elementConfig?.text?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.text?.field);
     const isTextColorTiedToFieldData =
-      elementConfig.color?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.color?.field);
+      elementConfig?.color?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.color?.field);
 
     // General element config
     const isElementBackgroundColorTiedToFieldData =
@@ -167,36 +167,38 @@ export function getDataLinks(
 
     // Icon config
     const isIconSVGTiedToFieldData =
-      elementConfig.path?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.path?.field);
+      elementConfig?.path?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.path?.field);
     const isIconColorTiedToFieldData =
-      elementConfig.fill?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.fill?.field);
+      elementConfig?.fill?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.fill?.field);
 
     // Wind turbine config (maybe remove / not support this?)
     const isWindTurbineRPMTiedToFieldData =
-      elementConfig.rpm?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.rpm?.field);
+      elementConfig?.rpm?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.rpm?.field);
 
     // Server config
     const isServerBlinkRateTiedToFieldData =
-      elementConfig.blinkRate?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.blinkRate?.field);
+      elementConfig?.blinkRate?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.blinkRate?.field);
     const isServerStatusColorTiedToFieldData =
-      elementConfig.statusColor?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.statusColor?.field);
+      elementConfig?.statusColor?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.statusColor?.field);
     const isServerBulbColorTiedToFieldData =
-      elementConfig.bulbColor?.field &&
-      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig.bulbColor?.field);
+      elementConfig?.bulbColor?.field &&
+      visibleFields.some((field) => getFieldDisplayName(field, frame) === elementConfig?.bulbColor?.field);
 
     if (isTextTiedToFieldData) {
-      const field = visibleFields.filter((field) => getFieldDisplayName(field, frame) === elementConfig.text?.field)[0];
+      const field = visibleFields.filter(
+        (field) => getFieldDisplayName(field, frame) === elementConfig?.text?.field
+      )[0];
       addDataLinkForField(field, data, linkLookup, links);
     }
 
     if (isTextColorTiedToFieldData) {
       const field = visibleFields.filter(
-        (field) => getFieldDisplayName(field, frame) === elementConfig.color?.field
+        (field) => getFieldDisplayName(field, frame) === elementConfig?.color?.field
       )[0];
       addDataLinkForField(field, data, linkLookup, links);
     }
@@ -223,37 +225,41 @@ export function getDataLinks(
     }
 
     if (isIconSVGTiedToFieldData) {
-      const field = visibleFields.filter((field) => getFieldDisplayName(field, frame) === elementConfig.path?.field)[0];
+      const field = visibleFields.filter(
+        (field) => getFieldDisplayName(field, frame) === elementConfig?.path?.field
+      )[0];
       addDataLinkForField(field, data, linkLookup, links);
     }
 
     if (isIconColorTiedToFieldData) {
-      const field = visibleFields.filter((field) => getFieldDisplayName(field, frame) === elementConfig.fill?.field)[0];
+      const field = visibleFields.filter(
+        (field) => getFieldDisplayName(field, frame) === elementConfig?.fill?.field
+      )[0];
       addDataLinkForField(field, data, linkLookup, links);
     }
 
     if (isWindTurbineRPMTiedToFieldData) {
-      const field = visibleFields.filter((field) => getFieldDisplayName(field, frame) === elementConfig.rpm?.field)[0];
+      const field = visibleFields.filter((field) => getFieldDisplayName(field, frame) === elementConfig?.rpm?.field)[0];
       addDataLinkForField(field, data, linkLookup, links);
     }
 
     if (isServerBlinkRateTiedToFieldData) {
       const field = visibleFields.filter(
-        (field) => getFieldDisplayName(field, frame) === elementConfig.blinkRate?.field
+        (field) => getFieldDisplayName(field, frame) === elementConfig?.blinkRate?.field
       )[0];
       addDataLinkForField(field, data, linkLookup, links);
     }
 
     if (isServerStatusColorTiedToFieldData) {
       const field = visibleFields.filter(
-        (field) => getFieldDisplayName(field, frame) === elementConfig.statusColor?.field
+        (field) => getFieldDisplayName(field, frame) === elementConfig?.statusColor?.field
       )[0];
       addDataLinkForField(field, data, linkLookup, links);
     }
 
     if (isServerBulbColorTiedToFieldData) {
       const field = visibleFields.filter(
-        (field) => getFieldDisplayName(field, frame) === elementConfig.bulbColor?.field
+        (field) => getFieldDisplayName(field, frame) === elementConfig?.bulbColor?.field
       )[0];
       addDataLinkForField(field, data, linkLookup, links);
     }