feat: validate import permissions (#3097)

frontend/src/component/project/Project/Import/validate/ValidationStage.tsx

@@ -10,6 +10,8 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { ActionsContainer } from '../ActionsContainer';
 import { IMPORT_CONFIGURATION_BUTTON } from 'utils/testIds';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
+import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 
 const ImportInfoContainer = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.secondaryContainer,
@@ -92,7 +94,7 @@ export const ValidationStage: FC<{
     const { validateImport } = useValidateImportApi();
     const { setToastData } = useToast();
     const [validationResult, setValidationResult] = useState<IValidationSchema>(
-        { errors: [], warnings: [] }
+        { errors: [], warnings: [], permissions: [] }
     );
     const [validJSON, setValidJSON] = useState(true);
 
@@ -125,6 +127,30 @@ export const ValidationStage: FC<{
                     </span>
                 </Box>
             </ImportInfoContainer>
+            <ConditionallyRender
+                condition={validationResult.permissions.length > 0}
+                show={
+                    <ErrorContainer>
+                        <ErrorHeader>
+                            <strong>Missing permissions!</strong> There are some
+                            permissions that you need to be granted before
+                            importing this configuration
+                        </ErrorHeader>
+                        {validationResult.permissions.map(error => (
+                            <Box key={error.message} sx={{ p: 2 }}>
+                                <ErrorMessage>{error.message}</ErrorMessage>
+                                <StyledItems>
+                                    {error.affectedItems.map(item => (
+                                        <StyledItem key={item}>
+                                            {item}
+                                        </StyledItem>
+                                    ))}
+                                </StyledItems>
+                            </Box>
+                        ))}
+                    </ErrorContainer>
+                }
+            />
             <ConditionallyRender
                 condition={validationResult.errors.length > 0}
                 show={
@@ -187,16 +213,22 @@ export const ValidationStage: FC<{
                 >
                     Back
                 </Button>
-                <Button
+                <PermissionButton
+                    permission={CREATE_FEATURE}
+                    projectId={project}
                     sx={{ position: 'static' }}
                     variant="contained"
                     type="submit"
                     onClick={onSubmit}
                     data-testid={IMPORT_CONFIGURATION_BUTTON}
-                    disabled={validationResult.errors.length > 0 || !validJSON}
+                    disabled={
+                        validationResult.errors.length > 0 ||
+                        validationResult.permissions.length > 0 ||
+                        !validJSON
+                    }
                 >
                     Import configuration
-                </Button>
+                </PermissionButton>
                 <Button
                     sx={{ position: 'static', ml: 2 }}
                     variant="outlined"

frontend/src/component/project/Project/Project.tsx

@@ -28,6 +28,7 @@ import ProjectOverview from './ProjectOverview';
 import ProjectHealth from './ProjectHealth/ProjectHealth';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import {
+    CREATE_FEATURE,
     DELETE_PROJECT,
     UPDATE_PROJECT,
 } from 'component/providers/AccessProvider/permissions';
@@ -142,7 +143,7 @@ export const Project = () => {
                                 )}
                                 show={
                                     <PermissionIconButton
-                                        permission={UPDATE_PROJECT}
+                                        permission={CREATE_FEATURE}
                                         projectId={projectId}
                                         sx={{
                                             visibility: isOss()

frontend/src/hooks/api/actions/useValidateImportApi/useValidateImportApi.ts

@@ -8,6 +8,7 @@ export interface ImportQuerySchema {
 export interface IValidationSchema {
     errors: Array<{ message: string; affectedItems: Array<string> }>;
     warnings: Array<{ message: string; affectedItems: Array<string> }>;
+    permissions: Array<{ message: string; affectedItems: Array<string> }>;
 }
 
 export const useValidateImportApi = () => {