feat: start showing CR id in UI and make it clickable (#10259)

![image](https://github.com/user-attachments/assets/72c631aa-0b60-42c1-b546-870962a3e885)

frontend/src/component/events/EventCard/EventCard.tsx

@@ -5,6 +5,7 @@ import { formatDateYMDHMS } from 'utils/formatDate';
 import { Link } from 'react-router-dom';
 import { styled } from '@mui/material';
 import type { EventSchema } from 'openapi';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IEventCardProps {
     entry: EventSchema;
@@ -72,6 +73,7 @@ export const StyledCodeSection = styled('div')(({ theme }) => ({
 
 const EventCard = ({ entry }: IEventCardProps) => {
     const { locationSettings } = useLocationSettings();
+    const eventGroupingEnabled = useUiFlag('eventGrouping');
 
     const createdAtFormatted = formatDateYMDHMS(
         entry.createdAt,
@@ -138,6 +140,26 @@ const EventCard = ({ entry }: IEventCardProps) => {
                         </>
                     }
                 />
+                <ConditionallyRender
+                    condition={
+                        eventGroupingEnabled &&
+                        Boolean(entry.data?.changeRequestId)
+                    }
+                    show={
+                        <>
+                            <StyledDefinitionTerm>
+                                Change request id:
+                            </StyledDefinitionTerm>
+                            <dd>
+                                <Link
+                                    to={`/projects/${entry.project}/change-requests/${entry.data?.changeRequestId}`}
+                                >
+                                    {String(entry.data?.changeRequestId)}
+                                </Link>
+                            </dd>
+                        </>
+                    }
+                />
             </dl>
             <ConditionallyRender
                 condition={Boolean(entry.data || entry.preData)}

frontend/src/interfaces/uiConfig.ts

@@ -93,6 +93,7 @@ export type UiFlags = {
     impactMetrics?: boolean;
     crDiffView?: boolean;
     changeRequestApproverEmails?: boolean;
+    eventGrouping?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/types/experimental.ts

@@ -62,7 +62,8 @@ export type IFlagKey =
     | 'createFlagDialogCache'
     | 'improvedJsonDiff'
     | 'crDiffView'
-    | 'changeRequestApproverEmails';
+    | 'changeRequestApproverEmails'
+    | 'eventGrouping';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -291,6 +292,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_IMPACT_METRICS,
         false,
     ),
+    eventGrouping: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_EVENT_GROUPING,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -58,6 +58,7 @@ process.nextTick(async () => {
                         improvedJsonDiff: true,
                         impactMetrics: true,
                         crDiffView: true,
+                        eventGrouping: true,
                     },
                 },
                 authentication: {