From 4877b9d9273b8bc3ca2ffa24f1228e75460ba0d4 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 24 Jul 2024 10:48:39 +0300
Subject: [PATCH] Set unique key on each rendered route (#4721)

# What this PR does

- Set the unique key on `Expanded` and `Collapsed` containers, otherwise
React has problems figuring out state for each of them when you append a
new route
- Fixed NPE found by Faro
- Tweaked warnings display of `Routing template not set` and `Routing
labels not set`

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall/issues/4720
---
 .../IntegrationContainers/RouteHeading.tsx    | 34 ++++++++++++-------
 .../RouteLabelsDisplay/RouteLabelsDisplay.tsx |  2 +-
 .../src/pages/integration/Integration.tsx     |  2 ++
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/grafana-plugin/src/containers/IntegrationContainers/RouteHeading.tsx b/grafana-plugin/src/containers/IntegrationContainers/RouteHeading.tsx
index f55317ce..38fd9d06 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/RouteHeading.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/RouteHeading.tsx
@@ -55,32 +55,42 @@ const RouteHeadingDisplay: React.FC<{ channelFilter: ChannelFilter }> = ({ chann
   const styles = useStyles2(getStyles);
   const hasLabels = store.hasFeature(AppFeature.Labels);
 
+  const renderWarning = (text: string) => (
+    <>
+      <div className={styles.iconExclamation}>
+        <Icon name="exclamation-triangle" />
+      </div>
+      <Text type="primary">{text}</Text>
+    </>
+  );
+
   if (channelFilter?.filtering_term || channelFilter?.filtering_labels) {
     return (
       <>
         <RenderConditionally
           shouldRender={channelFilter.filtering_term_type === FilteringTermType.jinja2 || !hasLabels}
         >
-          <Text type="primary" className={styles.routeHeading}>
-            {channelFilter.filtering_term}
-          </Text>
+          {channelFilter.filtering_term && (
+            <Text type="primary" className={styles.routeHeading}>
+              {channelFilter.filtering_term}
+            </Text>
+          )}
+
+          {/* Show missing template warning */}
+          {!channelFilter.filtering_term && renderWarning('Routing template not set')}
         </RenderConditionally>
 
         <RenderConditionally shouldRender={channelFilter.filtering_term_type === FilteringTermType.labels && hasLabels}>
-          <LabelBadges labels={channelFilter.filtering_labels} />
+          {channelFilter.filtering_labels?.length > 0 && <LabelBadges labels={channelFilter.filtering_labels} />}
+
+          {/* Show missing labels warning */}
+          {!channelFilter.filtering_labels?.length && renderWarning('Routing labels not set')}
         </RenderConditionally>
       </>
     );
   }
 
-  return (
-    <>
-      <div className={styles.iconExclamation}>
-        <Icon name="exclamation-triangle" />
-      </div>
-      <Text type="primary">Routing template not set</Text>
-    </>
-  );
+  return renderWarning('Routing template not set');
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
diff --git a/grafana-plugin/src/containers/RouteLabelsDisplay/RouteLabelsDisplay.tsx b/grafana-plugin/src/containers/RouteLabelsDisplay/RouteLabelsDisplay.tsx
index cd3c64fc..18692e91 100644
--- a/grafana-plugin/src/containers/RouteLabelsDisplay/RouteLabelsDisplay.tsx
+++ b/grafana-plugin/src/containers/RouteLabelsDisplay/RouteLabelsDisplay.tsx
@@ -82,6 +82,6 @@ export const RouteLabelsDisplay: React.FC<RouteLabelsDisplayProps> = ({ labels,
 };
 
 const getIsAddBtnDisabled = (labels: Array<components['schemas']['LabelPair']> = []) => {
-  const lastItem = labels.at(-1);
+  const lastItem = labels?.at(-1);
   return lastItem && (lastItem.key?.id === undefined || lastItem.value?.id === undefined);
 };
diff --git a/grafana-plugin/src/pages/integration/Integration.tsx b/grafana-plugin/src/pages/integration/Integration.tsx
index 6f2ec9b6..8d78a98b 100644
--- a/grafana-plugin/src/pages/integration/Integration.tsx
+++ b/grafana-plugin/src/pages/integration/Integration.tsx
@@ -654,6 +654,7 @@ class _IntegrationPage extends React.Component<IntegrationProps, IntegrationStat
           },
           collapsedView: (toggle) => (
             <CollapsedIntegrationRouteDisplay
+              key={`${channelFilterId}_${routeIndex}`} // Key is required
               alertReceiveChannelId={id}
               channelFilterId={channelFilterId}
               routeIndex={routeIndex}
@@ -666,6 +667,7 @@ class _IntegrationPage extends React.Component<IntegrationProps, IntegrationStat
           ),
           expandedView: () => (
             <ExpandedIntegrationRouteDisplay
+              key={`${channelFilterId}_${routeIndex}`} // Key is required
               alertReceiveChannelId={id}
               channelFilterId={channelFilterId}
               routeIndex={routeIndex}