chore: allows you to add a flag from the unknown flags list (#10569)

https://linear.app/unleash/issue/2-3826/allow-you-to-create-the-flag-from-the-unknown-flags-list

Allows you to add a flag from the unknown flags list.

<img width="1515" height="896" alt="image"
src="https://github.com/user-attachments/assets/4dc20639-9bdb-457d-aef3-9df74fb9566c"
/>

<img width="1391" height="662" alt="image"
src="https://github.com/user-attachments/assets/c6531b62-3379-4bf9-b6a8-4da3a3cc8340"
/>

frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx

@@ -0,0 +1,54 @@
+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';
+
+const StyledBox = styled(Box)(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+}));
+
+interface IUnknownFlagsActionsCellProps {
+    unknownFlag: UnknownFlag;
+}
+
+export const UnknownFlagsActionsCell = ({
+    unknownFlag,
+}: IUnknownFlagsActionsCellProps) => {
+    const { projects } = useProjects();
+    const { hasAccess } = useContext(AccessContext);
+
+    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 (
+        <StyledBox>
+            <PermissionIconButton
+                component={Link}
+                data-loading
+                to={`/projects/${project?.id}?create=true&name=${unknownFlag.name}`}
+                permission={CREATE_FEATURE}
+                projectId={project?.id}
+                tooltipProps={{
+                    title: 'Create feature flag',
+                }}
+            >
+                <Add />
+            </PermissionIconButton>
+        </StyledBox>
+    );
+};

frontend/src/component/unknownFlags/UnknownFlagsTable.tsx

@@ -18,6 +18,7 @@ import { useUiFlag } from 'hooks/useUiFlag.js';
 import NotFound from 'component/common/NotFound/NotFound.js';
 import { UnknownFlagsSeenInUnleashCell } from './UnknownFlagsSeenInUnleashCell.js';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.js';
+import { UnknownFlagsActionsCell } from './UnknownFlagsActionsCell.js';
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
     marginBottom: theme.spacing(3),
@@ -104,6 +105,17 @@ export const UnknownFlagsTable = () => {
                 ),
                 width: 150,
             },
+            {
+                Header: 'Actions',
+                align: 'center',
+                Cell: ({
+                    row: { original: unknownFlag },
+                }: {
+                    row: { original: UnknownFlag };
+                }) => <UnknownFlagsActionsCell unknownFlag={unknownFlag} />,
+                width: 100,
+                disableSortBy: true,
+            },
         ],
         [],
     );