mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	fix: envrionments should give understandable error if not possible to… (#433)
This commit is contained in:
		
							parent
							
								
									bbf06725a3
								
							
						
					
					
						commit
						1058b4049c
					
				| @ -21,7 +21,7 @@ export const useStyles = makeStyles(theme => ({ | ||||
|         paddingLeft: '10px', | ||||
|     }, | ||||
|     tableCellEnv: { | ||||
|         width: '20px', | ||||
|         width: '90px', | ||||
|         [theme.breakpoints.down('sm')]: { | ||||
|             display: 'none', | ||||
|         }, | ||||
| @ -33,4 +33,11 @@ export const useStyles = makeStyles(theme => ({ | ||||
|             display: 'none', | ||||
|         }, | ||||
|     }, | ||||
|     envName: { | ||||
|         display: 'inline-block', | ||||
|         width: '90px', | ||||
|         textOverflow: 'ellipsis', | ||||
|         overflow: 'hidden', | ||||
|         whiteSpace: 'nowrap', | ||||
|     } | ||||
| })); | ||||
|  | ||||
| @ -120,10 +120,8 @@ const FeatureToggleListNew = ({ | ||||
|                                     )} | ||||
|                                     align="center" | ||||
|                                 > | ||||
|                                     <span data-loading> | ||||
|                                         {env.name === ':global:' | ||||
|                                             ? 'Status' | ||||
|                                             : env.name} | ||||
|                                     <span data-loading className={styles.envName} > | ||||
|                                        {env.name} | ||||
|                                     </span> | ||||
|                                 </TableCell> | ||||
|                             ); | ||||
|  | ||||
| @ -63,7 +63,7 @@ const FeatureToggleListNewItem = ({ | ||||
|                 setToastData({ | ||||
|                     show: true, | ||||
|                     type: 'error', | ||||
|                     text: e.toString(), | ||||
|                     text: e.message, | ||||
|                 }); | ||||
|             }); | ||||
|     }; | ||||
|  | ||||
| @ -2,7 +2,6 @@ import { useHistory, useParams } from 'react-router'; | ||||
| import { useCommonStyles } from '../../../common.styles'; | ||||
| import useProject from '../../../hooks/api/getters/useProject/useProject'; | ||||
| import useLoading from '../../../hooks/useLoading'; | ||||
| import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig'; | ||||
| import ApiError from '../../common/ApiError/ApiError'; | ||||
| import ConditionallyRender from '../../common/ConditionallyRender'; | ||||
| import { useStyles } from './Project.styles'; | ||||
| @ -23,7 +22,6 @@ const Project = () => { | ||||
|     const { id, activeTab } = useParams<{ id: string, activeTab: string }>(); | ||||
|     const params = useQueryParams(); | ||||
|     const { project, error, loading, refetch } = useProject(id); | ||||
|     const { uiConfig } = useUiConfig(); | ||||
|     const ref = useLoading(loading); | ||||
|     const { toast, setToastData } = useToast(); | ||||
|     const commonStyles = useCommonStyles(); | ||||
| @ -57,7 +55,6 @@ const Project = () => { | ||||
|             component: <ProjectEnvironment projectId={id}  />, | ||||
|             path: `${basePath}/environments`, | ||||
|             name: 'environments', | ||||
|             disabled: !uiConfig.flags.E | ||||
|         }, | ||||
|         { | ||||
|             title: 'Settings', | ||||
|  | ||||
| @ -138,10 +138,6 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => { | ||||
|     ); | ||||
| 
 | ||||
|     const renderEnvironments = () => { | ||||
|         if (!uiConfig.flags.E) { | ||||
|             return <p>Feature not enabled.</p>; | ||||
|         } | ||||
| 
 | ||||
|         return ( | ||||
|             <FormGroup> | ||||
|                 {envs.map(env => ( | ||||
| @ -167,35 +163,35 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => { | ||||
|             <PageContent | ||||
|                 headerContent={ | ||||
|                     <HeaderTitle | ||||
|                         title={`Configure environments for "${project?.name}"`} | ||||
|                         title={`Configure environments for "${project?.name}" project`} | ||||
|                     />} | ||||
|             > | ||||
|                         <Alert severity="info"> | ||||
|                         <b>Important!</b> In order for your application to retrieve feature toggle activation strategies for a specific environment, the application<br/> must use an environment-specific API key. You can look up the environment-specific API keys {' '} | ||||
|                         <Link | ||||
|                             to='/admin/api' | ||||
|                         > | ||||
|                             here. | ||||
|                         </Link>{' '} | ||||
|                         <br/> | ||||
|                         <br/> | ||||
|                         Your administrator can configure an environment-specific API key and add it to your SDK if you can't find it on the list. | ||||
|                         If you are an administrator you can create a new API key {' '} | ||||
|                         <Link | ||||
|                             to='/admin/api' | ||||
|                         > | ||||
|                             here. | ||||
|                         </Link>{' '} | ||||
|                     </Alert> | ||||
|                     <br/> | ||||
|                 <ConditionallyRender condition={error} show={renderError()} /> | ||||
|                 <ConditionallyRender condition={uiConfig.flags.E} show={ | ||||
|                     <div className={styles.container}> | ||||
|                         <ConditionallyRender condition={error} show={renderError()} /> | ||||
|                         <Alert severity="info" style={{marginBottom: '20px'}}> | ||||
|                             <b>Important!</b> In order for your application to retrieve configured activation strategies for a specific environment,  | ||||
|                             the application<br/> must use an environment specific API key. You can look up the environment-specific API keys {' '} | ||||
|                             <Link | ||||
|                                 to='/admin/api' | ||||
|                             > | ||||
|                                 here. | ||||
|                             </Link> | ||||
|                             <br/> | ||||
|                             <br/> | ||||
|                             Your administrator can configure an environment-specific API key to be used in the SDK. | ||||
|                             If you are an administrator you can {' '} | ||||
|                             <Link | ||||
|                                 to='/admin/api' | ||||
|                             > | ||||
|                                 create a new API key. | ||||
|                             </Link> | ||||
|                         </Alert> | ||||
|                         <ConditionallyRender | ||||
|                             condition={environments.length < 1 && !loading} | ||||
|                             show={<div>No environments available.</div>} | ||||
|                             elseShow={renderEnvironments()} | ||||
|                         /> | ||||
|                 </div> | ||||
|                         <EnvironmentDisableConfirm | ||||
|                             env={selectedEnv} | ||||
|                             open={!!selectedEnv} | ||||
| @ -206,6 +202,14 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => { | ||||
|                             confirmName={confirmName} | ||||
|                             setConfirmName={setConfirmName} | ||||
|                         /> | ||||
|                     </div> | ||||
|                      | ||||
|                 } elseShow={ | ||||
|                     <Alert security="success"> | ||||
|                         This feature has not been Unleashed for you yet.  | ||||
|                     </Alert> | ||||
|                 } /> | ||||
|                  | ||||
|                 {toast} | ||||
|             </PageContent> | ||||
|         </div> | ||||
|  | ||||
| @ -107,16 +107,16 @@ const ProjectFormComponent = (props: ProjectFormComponentProps) => { | ||||
|             <PageContent | ||||
|                 headerContent={ | ||||
|                     <HeaderTitle | ||||
|                         title={`${submitText} Project`} | ||||
|                         title={`${submitText} ${project?.name} project`} | ||||
|                     /> | ||||
|                 } | ||||
|             > | ||||
|                  | ||||
|                 <ConditionallyRender condition={isOss()} show={ | ||||
|                     <Alert data-loading severity="error"> | ||||
|                         Creating and updating projects requires a paid version of Unleash.  | ||||
|                         Check out <a href="https://www.getunleash.io" target="_blank" rel="noreferrer">getunleash.io</a>  | ||||
|                         to find out more. | ||||
|                         {submitText} project requires a paid version of Unleash.  | ||||
|                         Check out <a href="https://www.getunleash.io" target="_blank" rel="noreferrer">getunleash.io</a>{' '} | ||||
|                         to learn more. | ||||
|                     </Alert> | ||||
|                 } elseShow={ | ||||
|                     <> | ||||
|  | ||||
| @ -66,9 +66,11 @@ export const handleForbidden = async ( | ||||
|     if (res) { | ||||
|         const data = await res.json(); | ||||
| 
 | ||||
|         const message = data.isJoi ? data.details[0].message : data[0].msg; | ||||
| 
 | ||||
|         setErrors(prev => ({ | ||||
|             ...prev, | ||||
|             [requestId]: data[0].msg, | ||||
|             [requestId]: message, | ||||
|         })); | ||||
|     } | ||||
| 
 | ||||
|  | ||||
| @ -153,12 +153,14 @@ const useAPI = ({ | ||||
|             } | ||||
| 
 | ||||
|             if (propagateErrors) { | ||||
|                 throw new ForbiddenError(res.status); | ||||
|                 const response = await res.json(); | ||||
|                 throw new ForbiddenError(res.status, response); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         if (res.status > 399) { | ||||
|             const response = await res.json(); | ||||
|              | ||||
|             if (response?.details?.length > 0) { | ||||
|                 const error = response.details[0]; | ||||
|                 if (propagateErrors) { | ||||
|  | ||||
| @ -27,8 +27,8 @@ export class AuthenticationError extends Error { | ||||
| } | ||||
| 
 | ||||
| export class ForbiddenError extends Error { | ||||
|     constructor(statusCode, body) { | ||||
|         super('You cannot perform this action'); | ||||
|     constructor(statusCode, body = {}) { | ||||
|         super(body.details?.length > 0 ? body.details[0].message : 'You cannot perform this action'); | ||||
|         this.name = 'ForbiddenError'; | ||||
|         this.statusCode = statusCode; | ||||
|         this.body = body; | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user