From 9ef81be488263beb574be4962a0e8cbc241b20bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 1 Sep 2025 18:18:07 +0100
Subject: [PATCH] chore: add unknown flags link in flags overview (#10591)

https://linear.app/unleash/issue/2-3834/add-link-to-unknown-flags-in-flags-overview

Adds an "Unknown flags" link on the top right corner of the flags
overview page.

Even though we're planning to remove the flag soon, this is still
controlled by the flag, just in case.

<img width="1370" height="311" alt="image"
src="https://github.com/user-attachments/assets/073725c3-35af-47fb-b7d4-5bc70c0c68cf"
/>
---
 .../FeatureToggleList/FeatureToggleListTable.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index c1be863c8e..5a012752db 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -34,6 +34,7 @@ import { ExportFlags } from './ExportFlags.tsx';
 import { createFeatureOverviewCell } from 'component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell';
 import { AvatarCell } from 'component/project/Project/PaginatedProjectFeatureToggles/AvatarCell';
 import { StatusCell } from './StatusCell/StatusCell.tsx';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 export const featuresPlaceholder = Array(15).fill({
     name: 'Name of the feature',
@@ -69,6 +70,7 @@ export const FeatureToggleListTable: FC = () => {
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
     const [showExportDialog, setShowExportDialog] = useState(false);
+    const reportUnknownFlagsEnabled = useUiFlag('reportUnknownFlags');
 
     const { setToastApiError } = useToast();
 
@@ -259,6 +261,16 @@ export const FeatureToggleListTable: FC = () => {
                     title='Flags overview'
                     actions={
                         <>
+                            {reportUnknownFlagsEnabled && (
+                                <Link
+                                    component={RouterLink}
+                                    to='/unknown-flags'
+                                    underline='always'
+                                    sx={{ marginRight: 2, ...focusable(theme) }}
+                                >
+                                    Unknown flags
+                                </Link>
+                            )}
                             <Link
                                 component={RouterLink}
                                 to='/archive'
@@ -272,7 +284,7 @@ export const FeatureToggleListTable: FC = () => {
                                     });
                                 }}
                             >
-                                View archive
+                                Archived flags
                             </Link>
                             <ExportFlags
                                 onClick={() => setShowExportDialog(true)}