WIP: Update rules UI components to support no group rules

https://github.com/grafana/alerting-squad/issues/1215

eslint-suppressions.json

@@ -4677,4 +4677,4 @@
       "count": 1
     }
   }
-}
+}

public/app/features/alerting/unified/components/rules/RulesGroup.tsx

@@ -33,6 +33,9 @@ interface Props {
   viewMode: ViewMode;
 }
 
+const NoGroupPrefix = 'no_group_for_rule_';
+const isNoGroup = (group: string) => group.startsWith(NoGroupPrefix);
+
 export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }: Props) => {
   const { rulesSource } = namespace;
   const rulesSourceName = getRulesSourceName(rulesSource);
@@ -164,11 +167,14 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }:
   }
 
   // ungrouped rules are rules that are in the "default" group name
-  const groupName = isListView ? (
-    <RuleLocation namespace={decodeGrafanaNamespace(namespace).name} />
-  ) : (
-    <RuleLocation namespace={decodeGrafanaNamespace(namespace).name} group={group.name} />
-  );
+  let groupName = <RuleLocation namespace={decodeGrafanaNamespace(namespace).name} group={group.name} />;
+  if (isListView) {
+    groupName = <RuleLocation namespace={decodeGrafanaNamespace(namespace).name} />;
+  } else if (isNoGroup(group.name)) {
+    groupName = (
+      <RuleLocation namespace={decodeGrafanaNamespace(namespace).name} group={`${group.rules[0].name} (Ungrouped)`} />
+    );
+  }
 
   return (
     <div className={styles.wrapper} data-testid="rule-group">

public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx

@@ -147,6 +147,9 @@ interface GrafanaRuleGroupListItemProps {
   namespaceName: string;
 }
 
+const NoGroupPrefix = 'no_group_for_rule_';
+const isNoGroup = (group: string) => group.startsWith(NoGroupPrefix);
+
 export function GrafanaRuleGroupListItem({ group, namespaceName }: GrafanaRuleGroupListItemProps) {
   const groupIdentifier: GrafanaRuleGroupIdentifier = useMemo(
     () => ({
@@ -161,10 +164,12 @@ export function GrafanaRuleGroupListItem({ group, namespaceName }: GrafanaRuleGr
 
   const detailsLink = groups.detailsPageLink(GRAFANA_RULES_SOURCE_NAME, group.folderUid, group.name);
 
+  const groupDisplayName = isNoGroup(group.name) ? `${group.rules[0].name} (Ungrouped)` : group.name;
+
   return (
     <ListGroup
       key={group.name}
-      name={group.name}
+      name={groupDisplayName}
       metaRight={<GroupIntervalIndicator seconds={group.interval} />}
       href={detailsLink}
       isOpen={false}

public/app/features/alerting/unified/rule-list/components/RuleLocation.tsx

@@ -12,9 +12,13 @@ interface RuleLocationProps {
   application?: RulesSourceApplication;
 }
 
+const NoGroupPrefix = 'no_group_for_rule_';
+const isNoGroup = (group: string) => group.startsWith(NoGroupPrefix);
+
 export function RuleLocation({ namespace, group, groupUrl, rulesSource, application }: RuleLocationProps) {
   const isGrafanaApp = application === 'grafana';
   const isDataSourceApp = !!rulesSource && !!application && !isGrafanaApp;
+  const groupText = isNoGroup(group) ? 'Ungrouped' : group;
 
   return (
     <Stack direction="row" alignItems="center" gap={0.5}>
@@ -32,10 +36,10 @@ export function RuleLocation({ namespace, group, groupUrl, rulesSource, applicat
         <Icon size="sm" name="angle-right" />
         {groupUrl ? (
           <TextLink href={groupUrl} color="secondary" variant="bodySmall" inline={false}>
-            {group}
+            {groupText}
           </TextLink>
         ) : (
-          group
+          groupText
         )}
       </Stack>
     </Stack>