From a5c816e2fa3e70ba30be5552cc639165cec1ebce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Fri, 8 Oct 2021 09:39:25 +0200
Subject: [PATCH] fix: should not be allowed to create more than 5 environments
 (#395)

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
---
 .../CreateEnvironment/CreateEnvironment.tsx      | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
index cdc3030ba6..1c9228824e 100644
--- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
+++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
@@ -12,6 +12,8 @@ import useLoading from '../../../hooks/useLoading';
 import useToast from '../../../hooks/useToast';
 import EnvironmentTypeSelector from '../form/EnvironmentTypeSelector/EnvironmentTypeSelector';
 import Input from '../../common/Input/Input';
+import useEnvironments from '../../../hooks/api/getters/useEnvironments/useEnvironments';
+import { Alert } from '@material-ui/lab';
 
 const NAME_EXISTS_ERROR = 'Error: Environment';
 
@@ -23,6 +25,7 @@ const CreateEnvironment = () => {
     const history = useHistory();
     const styles = useStyles();
     const { validateEnvName, createEnvironment, loading } = useEnvironmentApi();
+    const { environments } = useEnvironments();
     const ref = useLoading(loading);
     const { toast, setToastData } = useToast();
 
@@ -36,6 +39,8 @@ const CreateEnvironment = () => {
 
     const goBack = () => history.goBack();
 
+    const canCreateMoreEnvs = environments.length < 5;
+
     const validateEnvironmentName = async () => {
         if (envName.length === 0) {
             setNameError('Environment Id can not be empty.');
@@ -85,6 +90,7 @@ const CreateEnvironment = () => {
                     />
                 }
                 elseShow={
+                    <ConditionallyRender condition={canCreateMoreEnvs} show={
                     <div ref={ref}>
                         <p className={styles.helperText} data-loading>
                             Environments allow you to manage your product
@@ -152,6 +158,16 @@ const CreateEnvironment = () => {
                             </div>
                         </form>
                     </div>
+                    } elseShow={
+                        <>
+                        <Alert severity="error">
+                            <p>Currently Unleash does not support more than 5 environments. If you need more please reach out.</p>
+                        </Alert>
+                        <br />
+                        <Button onClick={goBack}  variant="contained" color="primary">Go back</Button>
+                        </>
+                    } />
+                    
                 }
             />
             {toast}