From 0e5080fac5a81aa3cd5f2579a0fa77becde92833 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 1 Jul 2025 12:50:49 +0300
Subject: [PATCH] feat: start showing CR id in UI and make it clickable
 (#10259)

![image](https://github.com/user-attachments/assets/72c631aa-0b60-42c1-b546-870962a3e885)
---
 .../component/events/EventCard/EventCard.tsx  | 22 +++++++++++++++++++
 frontend/src/interfaces/uiConfig.ts           |  1 +
 src/lib/types/experimental.ts                 |  7 +++++-
 src/server-dev.ts                             |  1 +
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/events/EventCard/EventCard.tsx b/frontend/src/component/events/EventCard/EventCard.tsx
index a8ef81caa1..99846faa65 100644
--- a/frontend/src/component/events/EventCard/EventCard.tsx
+++ b/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)}
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index a622aed5e2..5bcda3c8c5 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -93,6 +93,7 @@ export type UiFlags = {
     impactMetrics?: boolean;
     crDiffView?: boolean;
     changeRequestApproverEmails?: boolean;
+    eventGrouping?: boolean;
 };
 
 export interface IVersionInfo {
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index e155c81844..373c2bc8d9 100644
--- a/src/lib/types/experimental.ts
+++ b/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 = {
diff --git a/src/server-dev.ts b/src/server-dev.ts
index ad51d0a923..06ddfe230f 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -58,6 +58,7 @@ process.nextTick(async () => {
                         improvedJsonDiff: true,
                         impactMetrics: true,
                         crDiffView: true,
+                        eventGrouping: true,
                     },
                 },
                 authentication: {