diff --git a/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx b/frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx new file mode 100644 index 0000000000..dc1a9c81e5 --- /dev/null +++ b/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 ( + + + + + + ); +}; diff --git a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx b/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx index 6710e0f202..714ec76bd5 100644 --- a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx +++ b/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 }; + }) => , + width: 100, + disableSortBy: true, + }, ], [], );