From f9d2199b125c84a1b2485fcda57bd4c0b06d3754 Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Wed, 23 Apr 2025 12:00:40 +0100
Subject: [PATCH] Alerting: Enable `no-nested-ternary` ESLint rule (#104085)

---
 eslint.config.js                              |  1 +
 .../alerting/unified/AlertsFolderView.tsx     | 17 +++--
 .../mute-timings/MuteTimingsTable.tsx         |  5 +-
 .../notification-policies/Policy.tsx          | 25 +++----
 .../components/receivers/TemplateDataDocs.tsx | 30 ++++----
 .../receivers/form/ReceiverForm.tsx           |  8 +--
 .../rule-editor/NotificationsStep.tsx         | 33 ++++-----
 .../alert-rule-form/AlertRuleForm.tsx         | 16 +++--
 .../version-history/VersionHistoryTable.tsx   |  7 +-
 .../hooks/useCombinedRuleNamespaces.ts        | 70 +++++++++----------
 .../unified/rule-editor/formDefaults.ts       | 11 ++-
 11 files changed, 117 insertions(+), 106 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index e4bd3d8e406..2fd159f0fcf 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -268,6 +268,7 @@ module.exports = [
       'react/self-closing-comp': 'error',
       'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
       'unicorn/no-unused-properties': 'error',
+      'no-nested-ternary': 'error',
     },
   },
   {
diff --git a/public/app/features/alerting/unified/AlertsFolderView.tsx b/public/app/features/alerting/unified/AlertsFolderView.tsx
index 0de3924d42a..3308e9b952e 100644
--- a/public/app/features/alerting/unified/AlertsFolderView.tsx
+++ b/public/app/features/alerting/unified/AlertsFolderView.tsx
@@ -149,13 +149,16 @@ function useAlertsFolderViewParams() {
   const [labelFilter, setLabelFilter] = useState(searchParams.get(AlertFolderViewParams.labelFilter) ?? '');
 
   const sortParam = searchParams.get(AlertFolderViewParams.sortOrder);
-  const [sortOrder, setSortOrder] = useState<SortOrder | undefined>(
-    sortParam === SortOrder.Ascending
-      ? SortOrder.Ascending
-      : sortParam === SortOrder.Descending
-        ? SortOrder.Descending
-        : undefined
-  );
+  const defaultSortOrder = (() => {
+    if (sortParam === SortOrder.Ascending) {
+      return SortOrder.Ascending;
+    }
+    if (sortParam === SortOrder.Descending) {
+      return SortOrder.Descending;
+    }
+    return undefined;
+  })();
+  const [sortOrder, setSortOrder] = useState<SortOrder | undefined>(defaultSortOrder);
 
   useDebounce(
     () =>
diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
index 2b013554b38..e9fad0243e8 100644
--- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
+++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
@@ -107,9 +107,8 @@ export const MuteTimingsTable = () => {
           </>
         )}
       </Stack>
-      {items.length > 0 ? (
-        <DynamicTable items={items} cols={columns} pagination={{ itemsPerPage: 25 }} />
-      ) : !hideActions ? (
+      {items.length > 0 ? <DynamicTable items={items} cols={columns} pagination={{ itemsPerPage: 25 }} /> : null}
+      {items.length === 0 && !hideActions ? (
         <EmptyAreaWithCTA
           text={t(
             'alerting.mute-timings-table.text-havent-created-timings',
diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
index a97ee498a27..68d9cfce27d 100644
--- a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx
@@ -237,18 +237,19 @@ const Policy = (props: PolicyComponentProps) => {
                     }
                   />
                 ) : null}
-                {isImmutablePolicy ? (
-                  isAutogeneratedPolicyRoot ? (
-                    <AutogeneratedRootIndicator />
-                  ) : (
-                    <DefaultPolicyIndicator />
-                  )
-                ) : hasMatchers ? (
-                  <Matchers matchers={matchers ?? []} formatter={getAmMatcherFormatter(alertManagerSourceName)} />
-                ) : (
-                  <span className={styles.metadata}>
-                    <Trans i18nKey="alerting.policies.no-matchers">No matchers</Trans>
-                  </span>
+                {isImmutablePolicy && (
+                  <>{isAutogeneratedPolicyRoot ? <AutogeneratedRootIndicator /> : <DefaultPolicyIndicator />}</>
+                )}
+                {!isImmutablePolicy && (
+                  <>
+                    {hasMatchers ? (
+                      <Matchers matchers={matchers ?? []} formatter={getAmMatcherFormatter(alertManagerSourceName)} />
+                    ) : (
+                      <span className={styles.metadata}>
+                        <Trans i18nKey="alerting.policies.no-matchers">No matchers</Trans>
+                      </span>
+                    )}
+                  </>
                 )}
                 <Spacer />
                 {/* TODO maybe we should move errors to the gutter instead? */}
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
index 311b609c8c8..efe1fec2cbd 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
@@ -54,19 +54,23 @@ export function TemplateDataDocs() {
           </>
         }
         dataItems={GlobalTemplateData}
-        typeRenderer={(type) =>
-          type === '[]Alert' ? (
-            <PopupCard content={AlertTemplateDataTable}>
-              <div className={styles.interactiveType}>{type}</div>
-            </PopupCard>
-          ) : type === 'KeyValue' ? (
-            <PopupCard content={<KeyValueTemplateDataTable />}>
-              <div className={styles.interactiveType}>{type}</div>
-            </PopupCard>
-          ) : (
-            type
-          )
-        }
+        typeRenderer={(type) => {
+          if (type === '[]Alert') {
+            return (
+              <PopupCard content={AlertTemplateDataTable}>
+                <div className={styles.interactiveType}>{type}</div>
+              </PopupCard>
+            );
+          }
+          if (type === 'KeyValue') {
+            return (
+              <PopupCard content={<KeyValueTemplateDataTable />}>
+                <div className={styles.interactiveType}>{type}</div>
+              </PopupCard>
+            );
+          }
+          return type;
+        }}
       />
     </Stack>
   );
diff --git a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
index c8415ee6488..a9c16f37c44 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
@@ -138,11 +138,9 @@ export function ReceiverForm<R extends ChannelValues>({
       <form onSubmit={handleSubmit(submitCallback, onInvalid)} className={styles.wrapper}>
         <Stack justifyContent="space-between" alignItems="center">
           <h2 className={styles.heading}>
-            {!isEditable
-              ? t('alerting.receiver-form.contact-point', 'Contact point')
-              : initialValues
-                ? t('alerting.receiver-form.contact-point-update', 'Update contact point')
-                : t('alerting.receiver-form.contact-point-create', 'Create contact point')}
+            {!isEditable && t('alerting.receiver-form.contact-point', 'Contact point')}
+            {isEditable && initialValues && t('alerting.receiver-form.contact-point-update', 'Update contact point')}
+            {isEditable && !initialValues && t('alerting.receiver-form.contact-point-create', 'Create contact point')}
           </h2>
           {canManagePermissions && contactPointId && (
             <ManagePermissions
diff --git a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
index f7144ad525e..c39dc32bfc4 100644
--- a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
@@ -78,11 +78,16 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
           },
         }
       : undefined;
-  const title = isRecordingRuleByType(type)
-    ? 'Add labels'
-    : isGrafanaManaged
-      ? 'Configure notifications'
-      : 'Configure labels and notifications';
+
+  const title = (() => {
+    if (isRecordingRuleByType(type)) {
+      return 'Add labels';
+    }
+    if (isGrafanaManaged) {
+      return 'Configure notifications';
+    }
+    return 'Configure labels and notifications';
+  })();
 
   return (
     <RuleEditorSection
@@ -128,17 +133,13 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
           </Text>
         </div>
       )}
-      {shouldAllowSimplifiedRouting ? ( // when simplified routing is enabled and is grafana rule
-        simplifiedModeInNotificationsStepEnabled ? ( // simplified mode is enabled
-          <ManualAndAutomaticRoutingSimplified alertUid={alertUid} />
-        ) : (
-          // simplified mode is disabled
-          <ManualAndAutomaticRouting alertUid={alertUid} />
-        )
-      ) : // when simplified routing is not enabled, render the notification preview as we did before
-      shouldRenderpreview ? (
-        <AutomaticRooting alertUid={alertUid} />
-      ) : null}
+      {shouldAllowSimplifiedRouting && simplifiedModeInNotificationsStepEnabled && (
+        <ManualAndAutomaticRoutingSimplified alertUid={alertUid} />
+      )}
+      {shouldAllowSimplifiedRouting && !simplifiedModeInNotificationsStepEnabled && (
+        <ManualAndAutomaticRouting alertUid={alertUid} />
+      )}
+      {!shouldAllowSimplifiedRouting && shouldRenderpreview && <AutomaticRooting alertUid={alertUid} />}
     </RuleEditorSection>
   );
 };
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
index 5a76be0933f..88549aa16f1 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
@@ -362,13 +362,15 @@ export const AlertRuleForm = ({ existing, prefill, isManualRestore }: Props) =>
           onDismiss={() => setShowDeleteModal(false)}
         />
       ) : null}
-      {showEditYaml ? (
-        isGrafanaManagedRuleByType(type) ? (
-          <GrafanaRuleExporter alertUid={uidFromParams} onClose={() => setShowEditYaml(false)} />
-        ) : (
-          <RuleInspector onClose={() => setShowEditYaml(false)} />
-        )
-      ) : null}
+      {showEditYaml && (
+        <>
+          {isGrafanaManagedRuleByType(type) && (
+            <GrafanaRuleExporter alertUid={uidFromParams} onClose={() => setShowEditYaml(false)} />
+          )}
+
+          {!isGrafanaManagedRuleByType(type) && <RuleInspector onClose={() => setShowEditYaml(false)} />}
+        </>
+      )}
     </FormProvider>
   );
 };
diff --git a/public/app/features/alerting/unified/components/rule-viewer/tabs/version-history/VersionHistoryTable.tsx b/public/app/features/alerting/unified/components/rule-viewer/tabs/version-history/VersionHistoryTable.tsx
index e3f9e518e18..c3169462e96 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/tabs/version-history/VersionHistoryTable.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/tabs/version-history/VersionHistoryTable.tsx
@@ -127,9 +127,8 @@ export function VersionHistoryTable({
 
         return (
           <Stack direction="row" alignItems="center" justifyContent="flex-end">
-            {isFirstItem ? (
-              <Badge text={t('alerting.alertVersionHistory.latest', 'Latest')} color="blue" />
-            ) : canRestore ? (
+            {isFirstItem && <Badge text={t('alerting.alertVersionHistory.latest', 'Latest')} color="blue" />}
+            {!isFirstItem && canRestore && (
               <>
                 <Button
                   variant="secondary"
@@ -153,7 +152,7 @@ export function VersionHistoryTable({
                   <Trans i18nKey="alerting.alertVersionHistory.restore">Restore</Trans>
                 </Button>
               </>
-            ) : null}
+            )}
           </Stack>
         );
       },
diff --git a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
index a5ee387bca0..469b4c69adb 100644
--- a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
+++ b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
@@ -400,44 +400,38 @@ function rulerRuleToCombinedRule(
   namespace: CombinedRuleNamespace,
   group: CombinedRuleGroup
 ): CombinedRule {
-  return rulerRuleType.dataSource.alertingRule(rule)
-    ? {
-        name: rule.alert,
-        query: rule.expr,
-        labels: rule.labels || {},
-        annotations: rule.annotations || {},
-        rulerRule: rule,
-        namespace,
-        group,
-        instanceTotals: {},
-        filteredInstanceTotals: {},
-        uid: rulerRuleType.grafana.rule(rule) ? rule.grafana_alert.uid : undefined,
-      }
-    : rulerRuleType.dataSource.recordingRule(rule)
-      ? {
-          name: rule.record,
-          query: rule.expr,
-          labels: rule.labels || {},
-          annotations: {},
-          rulerRule: rule,
-          namespace,
-          group,
-          instanceTotals: {},
-          filteredInstanceTotals: {},
-          uid: rulerRuleType.grafana.rule(rule) ? rule.grafana_alert.uid : undefined,
-        }
-      : {
-          name: rule.grafana_alert.title,
-          query: '',
-          labels: rule.labels || {},
-          annotations: rule.annotations || {},
-          rulerRule: rule,
-          namespace,
-          group,
-          instanceTotals: {},
-          filteredInstanceTotals: {},
-          uid: rulerRuleType.grafana.rule(rule) ? rule.grafana_alert.uid : undefined,
-        };
+  const commonProps = {
+    labels: rule.labels || {},
+    rulerRule: rule,
+    namespace,
+    group,
+    instanceTotals: {},
+    filteredInstanceTotals: {},
+    uid: rulerRuleType.grafana.rule(rule) ? rule.grafana_alert.uid : undefined,
+  };
+
+  if (rulerRuleType.dataSource.alertingRule(rule)) {
+    return {
+      ...commonProps,
+      name: rule.alert,
+      query: rule.expr,
+      annotations: rule.annotations || {},
+    };
+  }
+  if (rulerRuleType.dataSource.recordingRule(rule)) {
+    return {
+      ...commonProps,
+      name: rule.record,
+      query: rule.expr,
+      annotations: {},
+    };
+  }
+  return {
+    ...commonProps,
+    name: rule.grafana_alert.title,
+    query: '',
+    annotations: rule.annotations || {},
+  };
 }
 
 // find existing rule in group that matches the given prom rule
diff --git a/public/app/features/alerting/unified/rule-editor/formDefaults.ts b/public/app/features/alerting/unified/rule-editor/formDefaults.ts
index 0dbe86bca2a..459d1408b99 100644
--- a/public/app/features/alerting/unified/rule-editor/formDefaults.ts
+++ b/public/app/features/alerting/unified/rule-editor/formDefaults.ts
@@ -36,6 +36,15 @@ export const DEFAULT_GROUP_EVALUATION_INTERVAL = formatPrometheusDuration(
 );
 export const getDefaultFormValues = (): RuleFormValues => {
   const { canCreateGrafanaRules, canCreateCloudRules } = getRulesAccess();
+  const type = (() => {
+    if (canCreateGrafanaRules) {
+      return RuleFormType.grafana;
+    }
+    if (canCreateCloudRules) {
+      return RuleFormType.cloudAlerting;
+    }
+    return undefined;
+  })();
 
   return Object.freeze({
     name: '',
@@ -43,7 +52,7 @@ export const getDefaultFormValues = (): RuleFormValues => {
     labels: [{ key: '', value: '' }],
     annotations: defaultAnnotations,
     dataSourceName: GRAFANA_RULES_SOURCE_NAME, // let's use Grafana-managed alert rule by default
-    type: canCreateGrafanaRules ? RuleFormType.grafana : canCreateCloudRules ? RuleFormType.cloudAlerting : undefined, // viewers can't create prom alerts
+    type, // viewers can't create prom alerts
     group: '',
 
     // grafana