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 #4720

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) => {

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

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}