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 (
-
+ navigate(
+ `/projects/${suggestedProject.id}?create=true&name=${unknownFlag.name}`,
+ )
+ }
>
-
-
+ Create flag
+
);
};
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 };
- }) => ,
- width: 100,
+ }) => (
+
+ ),
+ width: 120,
disableSortBy: true,
},
// Always hidden -- for search
@@ -121,7 +147,7 @@ export const UnknownFlagsTable = () => {
searchable: true,
},
],
- [],
+ [suggestedProject],
);
const [initialState] = useState({