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"
/>

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 { useNavigate } from 'react-router-dom';
-import useProjects from 'hooks/api/getters/useProjects/useProjects.js';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton.js';
-import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId.js';
+import type { ProjectSchema } from 'openapi/index.js';
-import AccessContext from 'contexts/AccessContext.js';
-import { useContext } from 'react';
 
 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 navigate = useNavigate();
-    const { hasAccess } = useContext(AccessContext);
 
-    let project =
+    if (!suggestedProject) return null;
-        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 (
         <StyledBox>
-            <PermissionIconButton
+            <PermissionButton
-                component={Link}
+                variant='text'
-                data-loading
+                size='small'
-                to={`/projects/${project?.id}?create=true&name=${unknownFlag.name}`}
                 permission={CREATE_FEATURE}
-                projectId={project?.id}
+                projectId={suggestedProject.id}
-                tooltipProps={{
+                onClick={() =>
-                    title: 'Create feature flag',
+                    navigate(
-                }}
+                        `/projects/${suggestedProject.id}?create=true&name=${unknownFlag.name}`,
+                    )
+                }
             >
-                <Add />
+                Create flag
-            </PermissionIconButton>
+            </PermissionButton>
         </StyledBox>
     );
 };

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({