Alerting: Use RadioButtonList component to select alert condition (#49422)

public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx

@@ -3,7 +3,7 @@ import React, { FC, useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { SelectableValue } from '@grafana/data';
-import { Field, InputControl, Select } from '@grafana/ui';
+import { Alert, Card, Field, InputControl, RadioButtonList } from '@grafana/ui';
 import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
 
 import { RuleFormValues } from '../../types/rule-form';
@@ -18,21 +18,21 @@ export const ConditionField: FC = () => {
   const queries = watch('queries');
   const condition = watch('condition');
 
-  const options = useMemo(
-    (): SelectableValue[] =>
-      queries
-        .filter((q) => !!q.refId)
-        .map((q) => ({
-          value: q.refId,
-          label: q.refId,
-        })),
-    [queries]
-  );
-
   const expressions = useMemo(() => {
     return queries.filter((query) => query.datasourceUid === ExpressionDatasourceUID);
   }, [queries]);
 
+  const options = useMemo(
+    () =>
+      queries
+        .filter((q) => !!q.refId)
+        .map<SelectableValue<string>>((q) => ({
+          value: q.refId,
+          label: `${q.refId} - ${expressions.includes(q) ? 'expression' : 'query'}`,
+        })),
+    [queries, expressions]
+  );
+
   // automatically use the last expression when new expressions have been added
   useEffect(() => {
     const lastExpression = last(expressions);
@@ -53,32 +53,30 @@ export const ConditionField: FC = () => {
     }
   }, [condition, expressions, options, setValue]);
 
-  return (
-    <Field
-      label="Condition"
-      description="The query or expression that will be alerted on"
-      error={errors.condition?.message}
-      invalid={!!errors.condition?.message}
-    >
-      <InputControl
-        name="condition"
-        render={({ field: { onChange, ref, ...field } }) => (
-          <Select
-            aria-label="Condition"
-            {...field}
-            width={42}
-            options={options}
-            onChange={(v: SelectableValue) => onChange(v?.value ?? null)}
-            noOptionsMessage="No queries defined"
+  return options.length ? (
+    <Card>
+      <Card.Heading>Set alert condition</Card.Heading>
+      <Card.Meta>Select one of your queries or expressions set above that contains your alert condition.</Card.Meta>
+      <Card.Actions>
+        <Field error={errors.condition?.message} invalid={!!errors.condition?.message}>
+          <InputControl
+            name="condition"
+            render={({ field: { onChange, ref, ...field } }) => (
+              <RadioButtonList options={options} onChange={onChange} {...field} />
+            )}
+            rules={{
+              required: {
+                value: true,
+                message: 'Please select the condition to alert on',
+              },
+            }}
           />
-        )}
-        rules={{
-          required: {
-            value: true,
-            message: 'Please select the condition to alert on',
-          },
-        }}
-      />
-    </Field>
+        </Field>
+      </Card.Actions>
+    </Card>
+  ) : (
+    <Alert title="No queries or expressions have been configured" severity="warning">
+      Create at least one query or expression to be alerted on
+    </Alert>
   );
 };