From bf07deb9923c56a63d13184285f78c7aeb9b7f61 Mon Sep 17 00:00:00 2001
From: aimuz <mr.imuz@gmail.com>
Date: Thu, 29 Sep 2022 15:00:49 +0800
Subject: [PATCH] Fix showWhen failure (#55337)

When a contact point configuration field has `showWhen` set on it, the contact point form was not correctly displaying. This change fixes that so that forms display correctly.
---
 .betterer.results                                         | 8 +++-----
 .../unified/components/receivers/form/ChannelOptions.tsx  | 7 +++++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 5dd551c925b..04f8011111b 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -3337,11 +3337,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx
index 9ca8b98f086..9cdfc9747ea 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx
@@ -29,14 +29,17 @@ export function ChannelOptions<R extends ChannelValues>({
   readOnly = false,
 }: Props<R>): JSX.Element {
   const { watch } = useFormContext<ReceiverFormValues<R>>();
-  const currentFormValues = watch() as Record<string, any>; // react hook form types ARE LYING!
+  const currentFormValues = watch(); // react hook form types ARE LYING!
   return (
     <>
       {selectedChannelOptions.map((option: NotificationChannelOption, index: number) => {
         const key = `${option.label}-${index}`;
         // Some options can be dependent on other options, this determines what is selected in the dependency options
         // I think this needs more thought.
-        const selectedOptionValue = currentFormValues[`${pathPrefix}settings.${option.showWhen.field}`];
+        // pathPrefix = items.index.
+        const paths = pathPrefix.split('.');
+        const selectedOptionValue =
+          paths.length >= 2 ? currentFormValues.items[Number(paths[1])].settings[option.showWhen.field] : undefined;
 
         if (option.showWhen.field && selectedOptionValue !== option.showWhen.is) {
           return null;