Alerting: Fix alert rule page crashing when datasource contained URL unsafe characters (#51105)

Any Prometheus datasources that contained URL unsafe characters would crash the application since it fails to find the datasource from the Grafana bootData.

public/app/features/alerting/unified/RuleViewer.tsx

@@ -45,9 +45,10 @@ const pageTitle = 'Alerting / View rule';
 
 export function RuleViewer({ match }: RuleViewerProps) {
   const styles = useStyles2(getStyles);
-  const { id, sourceName } = match.params;
+  const { id } = match.params;
   const identifier = ruleId.tryParse(id, true);
-  const { loading, error, result: rule } = useCombinedRule(identifier, sourceName);
+
+  const { loading, error, result: rule } = useCombinedRule(identifier, identifier?.ruleSourceName);
   const runner = useMemo(() => new AlertingQueryRunner(), []);
   const data = useObservable(runner.get());
   const queries2 = useMemo(() => alertRuleToQueries(rule), [rule]);
@@ -86,7 +87,7 @@ export function RuleViewer({ match }: RuleViewerProps) {
     );
   }, []);
 
-  if (!sourceName) {
+  if (!identifier?.ruleSourceName) {
     return (
       <RuleViewerLayout title={pageTitle}>
         <Alert title={errorTitle}>
@@ -96,7 +97,7 @@ export function RuleViewer({ match }: RuleViewerProps) {
     );
   }
 
-  const rulesSource = getRulesSourceByName(sourceName);
+  const rulesSource = getRulesSourceByName(identifier.ruleSourceName);
 
   if (loading) {
     return (