From 597456d4b5e1fae1d3450b946abdd62357cd76b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 2 Sep 2025 11:52:43 +0100
Subject: [PATCH] chore: make create feature flag button in unknown flags a
 text button (#10592)

https://linear.app/unleash/issue/2-3835/make-create-feature-flag-a-variant=text-button-instead-of-an-icon

Makes "create feature flag" button in unknown flags a text button.

<img width="1130" height="480" alt="image"
src="https://github.com/user-attachments/assets/2a5cb8f9-d0d1-486e-aaf9-cc02f39a2b6f"
/>
---
 .../unknownFlags/UnknownFlagsActionsCell.tsx  | 47 +++++++------------
 .../unknownFlags/UnknownFlagsTable.tsx        | 34 ++++++++++++--
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx b/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx
index dc1a9c81e5..71e6420423 100644
--- a/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx
+++ b/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx
@@ -1,13 +1,9 @@
-import Add from '@mui/icons-material/Add';
 import { Box, styled } from '@mui/material';
-import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import type { UnknownFlag } from './hooks/useUnknownFlags.js';
-import { Link } from 'react-router-dom';
-import useProjects from 'hooks/api/getters/useProjects/useProjects.js';
-import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId.js';
-import AccessContext from 'contexts/AccessContext.js';
-import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton.js';
+import type { ProjectSchema } from 'openapi/index.js';
 
 const StyledBox = styled(Box)(() => ({
     display: 'flex',
@@ -16,39 +12,32 @@ const StyledBox = styled(Box)(() => ({
 
 interface IUnknownFlagsActionsCellProps {
     unknownFlag: UnknownFlag;
+    suggestedProject?: ProjectSchema;
 }
 
 export const UnknownFlagsActionsCell = ({
     unknownFlag,
+    suggestedProject,
 }: IUnknownFlagsActionsCellProps) => {
-    const { projects } = useProjects();
-    const { hasAccess } = useContext(AccessContext);
+    const navigate = useNavigate();
 
-    let project =
-        projects.find(({ id }) => id === DEFAULT_PROJECT_ID) || projects[0];
-    if (!hasAccess(CREATE_FEATURE, project?.id)) {
-        for (const proj of projects) {
-            if (hasAccess(CREATE_FEATURE, proj.id)) {
-                project = proj;
-                break;
-            }
-        }
-    }
+    if (!suggestedProject) return null;
 
     return (
         <StyledBox>
-            <PermissionIconButton
-                component={Link}
-                data-loading
-                to={`/projects/${project?.id}?create=true&name=${unknownFlag.name}`}
+            <PermissionButton
+                variant='text'
+                size='small'
                 permission={CREATE_FEATURE}
-                projectId={project?.id}
-                tooltipProps={{
-                    title: 'Create feature flag',
-                }}
+                projectId={suggestedProject.id}
+                onClick={() =>
+                    navigate(
+                        `/projects/${suggestedProject.id}?create=true&name=${unknownFlag.name}`,
+                    )
+                }
             >
-                <Add />
-            </PermissionIconButton>
+                Create flag
+            </PermissionButton>
         </StyledBox>
     );
 };
diff --git a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx b/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx
index 7f575fc3ca..5f83f05ee5 100644
--- a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx
+++ b/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -19,6 +19,10 @@ import { UnknownFlagsLastEventCell } from './UnknownFlagsLastEventCell.js';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.js';
 import { UnknownFlagsActionsCell } from './UnknownFlagsActionsCell.js';
 import { UnknownFlagsLastReportedCell } from './UnknownFlagsLastReportedCell.js';
+import useProjects from 'hooks/api/getters/useProjects/useProjects.js';
+import AccessContext from 'contexts/AccessContext.js';
+import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId.js';
+import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions.js';
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
     marginBottom: theme.spacing(3),
@@ -43,6 +47,23 @@ export const UnknownFlagsTable = () => {
 
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
+    const { projects } = useProjects();
+    const { hasAccess } = useContext(AccessContext);
+
+    const suggestedProject = useMemo(() => {
+        let project =
+            projects.find(({ id }) => id === DEFAULT_PROJECT_ID) || projects[0];
+        if (!hasAccess(CREATE_FEATURE, project?.id)) {
+            for (const proj of projects) {
+                if (hasAccess(CREATE_FEATURE, proj.id)) {
+                    project = proj;
+                    break;
+                }
+            }
+        }
+        return project;
+    }, [projects, hasAccess]);
+
     const columns = useMemo(
         () => [
             {
@@ -95,8 +116,13 @@ export const UnknownFlagsTable = () => {
                     row: { original: unknownFlag },
                 }: {
                     row: { original: UnknownFlag };
-                }) => <UnknownFlagsActionsCell unknownFlag={unknownFlag} />,
-                width: 100,
+                }) => (
+                    <UnknownFlagsActionsCell
+                        unknownFlag={unknownFlag}
+                        suggestedProject={suggestedProject}
+                    />
+                ),
+                width: 120,
                 disableSortBy: true,
             },
             // Always hidden -- for search
@@ -121,7 +147,7 @@ export const UnknownFlagsTable = () => {
                 searchable: true,
             },
         ],
-        [],
+        [suggestedProject],
     );
 
     const [initialState] = useState({