Alerting: Fix alert rule loading states v2 (#100747)

.betterer.results

@@ -1575,9 +1575,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
     ],
-    "public/app/features/alerting/unified/RuleViewer.tsx:5381": [
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"]
-    ],
     "public/app/features/alerting/unified/Settings.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],

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

@@ -0,0 +1,16 @@
+import { render, screen } from 'test/test-utils';
+
+import RuleViewer from './RuleViewer';
+import { stringifyErrorLike } from './utils/misc';
+
+describe('Rule Viewer page', () => {
+  it('should throw an error if rule ID cannot be decoded', () => {
+    // check console errors
+    jest.spyOn(console, 'error').mockImplementation((error) => {
+      expect(stringifyErrorLike(error)).toContain('Error: Rule ID is required');
+    });
+
+    render(<RuleViewer />);
+    expect(screen.getByText(/Error: Rule ID is required/i)).toBeInTheDocument();
+  });
+});

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

@@ -5,6 +5,7 @@ import { NavModelItem } from '@grafana/data';
 import { isFetchError } from '@grafana/runtime';
 import { Alert } from '@grafana/ui';
 import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
+import { t } from 'app/core/internationalization';
 
 import { AlertingPageWrapper } from './components/AlertingPageWrapper';
 import { AlertRuleProvider } from './components/rule-viewer/RuleContext';
@@ -63,11 +64,16 @@ const RuleViewer = (): JSX.Element => {
   }
 
   // if we get here assume we can't find the rule
+  if (!rule && !loading) {
     return (
       <AlertingPageWrapper pageNav={defaultPageNav} navId="alert-list">
         <EntityNotFound entity="Rule" />
       </AlertingPageWrapper>
     );
+  }
+
+  // we should never get to this state
+  return <></>;
 };
 
 export const defaultPageNav: NavModelItem = {
@@ -84,7 +90,11 @@ function ErrorMessage({ error }: ErrorMessageProps) {
     return <EntityNotFound entity="Rule" />;
   }
 
-  return <Alert title={'Something went wrong loading the rule'}>{stringifyErrorLike(error)}</Alert>;
+  return (
+    <Alert title={t('alerting.rule-viewer.error-loading', 'Something went wrong loading the rule')}>
+      {stringifyErrorLike(error)}
+    </Alert>
+  );
 }
 
 export default withPageErrorBoundary(RuleViewer);

public/app/features/alerting/unified/hooks/useCombinedRule.ts

@@ -158,7 +158,7 @@ export function useCombinedRule({ ruleIdentifier, limitAlerts }: Props): Request
   }, [ruleIdentifier, ruleSourceName, promRuleNs, rulerRuleGroup, ruleSource, ruleLocation, namespaceName]);
 
   return {
-    loading: isLoadingDsFeatures || isLoadingPromRules || isLoadingRulerGroup,
+    loading: isLoadingRuleLocation || isLoadingDsFeatures || isLoadingPromRules || isLoadingRulerGroup,
     error: ruleLocationError ?? promRuleNsError ?? rulerRuleGroupError,
     result: rule,
   };

public/app/features/alerting/unified/rule-editor/ExistingRuleEditor.tsx

@@ -37,7 +37,7 @@ export function ExistingRuleEditor({ identifier }: ExistingRuleEditorProps) {
     );
   }
 
-  if (!ruleWithLocation) {
+  if (!ruleWithLocation && !loading) {
     return <AlertWarning title="Rule not found">Sorry! This rule does not exist.</AlertWarning>;
   }
 

public/locales/en-US/grafana.json

@@ -609,6 +609,7 @@
       }
     },
     "rule-viewer": {
+      "error-loading": "Something went wrong loading the rule",
       "prometheus-consistency-check": {
         "alert-message": "Alert rule has been updated. Changes may take up to a minute to appear on the Alert rules list view.",
         "alert-title": "Update in progress"

public/locales/pseudo-LOCALE/grafana.json

@@ -609,6 +609,7 @@
       }
     },
     "rule-viewer": {
+      "error-loading": "Ŝőmęŧĥįʼnģ ŵęʼnŧ ŵřőʼnģ ľőäđįʼnģ ŧĥę řūľę",
       "prometheus-consistency-check": {
         "alert-message": "Åľęřŧ řūľę ĥäş þęęʼn ūpđäŧęđ. Cĥäʼnģęş mäy ŧäĸę ūp ŧő ä mįʼnūŧę ŧő äppęäř őʼn ŧĥę Åľęřŧ řūľęş ľįşŧ vįęŵ.",
         "alert-title": "Ůpđäŧę įʼn přőģřęşş"