(null);
- const { handleSubmit, register, setValue } = useForm<{ searchQuery: string }>({ defaultValues: { searchQuery } });
+ const { handleSubmit, register, setValue } = useForm<{ searchQuery: string }>({
+ defaultValues: { searchQuery },
+ });
const { ref, ...rest } = register('searchQuery');
useEffect(() => {
@@ -139,7 +146,14 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
trackRulesListViewChange({ view });
};
+ const handleContactPointChange = (contactPoint: string) => {
+ updateFilters({ ...filterState, contactPoint });
+ trackRulesSearchComponentInteraction('contactPoint');
+ };
+
+ const canRenderContactPointSelector = config.featureToggles.alertingSimplifiedRouting ?? false;
const searchIcon = ;
+
return (
@@ -222,6 +236,31 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
onChange={handleRuleHealthChange}
/>
+ {canRenderContactPointSelector && (
+
+
+
+ Contact point
+
+ }
+ >
+ {
+ handleContactPointChange(selectValue?.value?.name!);
+ },
+ isClearable: true,
+ }}
+ />
+
+
+
+ )}
{pluginsFilterEnabled && (
@@ -236,6 +275,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
)}