From 0d0257bbdcfb135ff068bbb1d8713d41ffa6451f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 30 Jul 2025 16:19:52 +0100
Subject: [PATCH] chore: link to events for that flag name (#10442)

https://linear.app/unleash/issue/2-3737/link-to-events-for-that-flag-name

Adds a link to events for that flag name, in the unknown flags table.

This should help us understand if the flag ever existed in Unleash in
the first place.

<img width="1304" height="803" alt="image"
src="https://github.com/user-attachments/assets/b80c7912-f342-4fd1-b514-6fcafe9f5baf"
/>
---
 .../unknownFlags/UnknownFlagsActionsCell.tsx  | 33 +++++++++++++++++++
 .../unknownFlags/UnknownFlagsTable.tsx        | 15 ++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx

diff --git a/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx b/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx
new file mode 100644
index 0000000000..86ab729be0
--- /dev/null
+++ b/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx
@@ -0,0 +1,33 @@
+import { Box, styled } from '@mui/material';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import EventNoteIcon from '@mui/icons-material/EventNote';
+import type { UnknownFlag } from './hooks/useUnknownFlags.js';
+import { Link } from 'react-router-dom';
+
+const StyledBox = styled(Box)(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+}));
+
+interface IUnknownFlagsActionsCellProps {
+    unknownFlag: UnknownFlag;
+}
+
+export const UnknownFlagsActionsCell = ({
+    unknownFlag,
+}: IUnknownFlagsActionsCellProps) => (
+    <StyledBox>
+        <PermissionIconButton
+            component={Link}
+            data-loading
+            to={`/history?feature=${encodeURIComponent(`IS:${unknownFlag.name}`)}`}
+            permission={ADMIN}
+            tooltipProps={{
+                title: 'See events',
+            }}
+        >
+            <EventNoteIcon />
+        </PermissionIconButton>
+    </StyledBox>
+);
diff --git a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx b/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx
index 4cb7b93f24..b39e0a8f4d 100644
--- a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx
+++ b/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx
@@ -9,13 +9,14 @@ import { useFlexLayout, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { Search } from 'component/common/Search/Search';
 import { useSearch } from 'hooks/useSearch';
-import { useUnknownFlags } from './hooks/useUnknownFlags.js';
+import { type UnknownFlag, useUnknownFlags } from './hooks/useUnknownFlags.js';
 import theme from 'themes/theme.js';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell.js';
 import { formatDateYMDHMS } from 'utils/formatDate.js';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell.js';
 import { useUiFlag } from 'hooks/useUiFlag.js';
 import NotFound from 'component/common/NotFound/NotFound.js';
+import { UnknownFlagsActionsCell } from './UnknownFlagsActionsCell.js';
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
     marginBottom: theme.spacing(3),
@@ -59,6 +60,18 @@ export const UnknownFlagsTable = () => {
                     <TimeAgoCell value={value} dateFormat={formatDateYMDHMS} />
                 ),
             },
+            {
+                Header: 'Actions',
+                id: 'Actions',
+                align: 'center',
+                Cell: ({
+                    row: { original: unknownFlag },
+                }: { row: { original: UnknownFlag } }) => (
+                    <UnknownFlagsActionsCell unknownFlag={unknownFlag} />
+                ),
+                width: 100,
+                disableSortBy: true,
+            },
         ],
         [],
     );