mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	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" />
This commit is contained in:
		
							parent
							
								
									718a731d2f
								
							
						
					
					
						commit
						0035f18370
					
				@ -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>
 | 
			
		||||
    );
 | 
			
		||||
};
 | 
			
		||||
@ -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,
 | 
			
		||||
            },
 | 
			
		||||
        ],
 | 
			
		||||
        [],
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user