fix: Environment creating state (#4060)

Flagsmith · Jun 5, 2024 · 652af8f · 652af8f
1 parent 1600ed7
commit 652af8f
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 35 deletions.
diff --git a/frontend/common/providers/ProjectProvider.js b/frontend/common/providers/ProjectProvider.js
@@ -24,6 +24,7 @@ const ProjectProvider = class extends React.Component {
       this.setState(
         Object.assign(
           {
+            error: ProjectStore.error,
             isLoading: ProjectStore.isLoading,
             isSaving: ProjectStore.isSaving,
           },

diff --git a/frontend/common/stores/project-store.js b/frontend/common/stores/project-store.js
@@ -15,6 +15,7 @@ const data = require('../data/base/_data')
 const controller = {
   createEnv: (name, projectId, cloneId, description) => {
     API.trackEvent(Constants.events.CREATE_ENVIRONMENT)
+    store.saving()
     const req = cloneId
       ? data.post(`${Project.api}environments/${cloneId}/clone/`, {
           description,
@@ -26,39 +27,43 @@ const controller = {
           project: projectId,
         })
 
-    req.then((res) =>
-      data
-        .put(`${Project.api}environments/${res.api_key}/`, {
-          description,
-          name,
-          project: projectId,
-        })
-        .then((res) =>
-          data
-            .post(
-              `${Project.api}environments/${
-                res.api_key
-              }/${Utils.getIdentitiesEndpoint()}/`,
-              {
-                environment: res.api_key,
-                identifier: `${name.toLowerCase()}_user_123456`,
-              },
-            )
-            .then(() => {
-              store.savedEnv = res
-              if (store.model && store.model.environments) {
-                store.model.environments = store.model.environments.concat([
-                  res,
-                ])
-              }
-              store.saved()
-              getStore().dispatch(
-                environmentService.util.invalidateTags(['Environment']),
+    req
+      .then((res) =>
+        data
+          .put(`${Project.api}environments/${res.api_key}/`, {
+            description,
+            name,
+            project: projectId,
+          })
+          .then((res) =>
+            data
+              .post(
+                `${Project.api}environments/${
+                  res.api_key
+                }/${Utils.getIdentitiesEndpoint()}/`,
+                {
+                  environment: res.api_key,
+                  identifier: `${name.toLowerCase()}_user_123456`,
+                },
               )
-              AppActions.refreshOrganisation()
-            }),
-        ),
-    )
+              .then(() => {
+                store.savedEnv = res
+                if (store.model && store.model.environments) {
+                  store.model.environments = store.model.environments.concat([
+                    res,
+                  ])
+                }
+                store.saved()
+                getStore().dispatch(
+                  environmentService.util.invalidateTags(['Environment']),
+                )
+                AppActions.refreshOrganisation()
+              }),
+          ),
+      )
+      .catch((e) => {
+        API.ajaxHandler(store, e)
+      })
   },
 
   deleteEnv: (env) => {

diff --git a/frontend/web/components/ErrorMessage.js b/frontend/web/components/ErrorMessage.js
@@ -12,7 +12,7 @@ export default class ErrorMessage extends PureComponent {
     const errorMessageClassName = `alert alert-danger ${
       this.props.errorMessageClass || 'flex-1 align-items-center'
     }`
-    const error = this.props.error?.data || this.props.error
+    const error = this.props.error?.data || this.props.error?.message || this.props.error
     return this.props.error ? (
       <div
         className={errorMessageClassName}

diff --git a/frontend/web/components/pages/CreateEnvironmentPage.js b/frontend/web/components/pages/CreateEnvironmentPage.js
@@ -170,9 +170,13 @@ const CreateEnvironmentPage = class extends Component {
                                     />
                                   )}
                               </CondensedRow>
+                              {error && (
+                                <CondensedRow>
+                                  <ErrorMessage error={error} />
+                                </CondensedRow>
+                              )}
                             </div>
 
-                            {error && <ErrorMessage error={error} />}
                             <CondensedRow>
                               <div className='text-right'>
                                 {permission ? (

diff --git a/frontend/web/project/api.js b/frontend/web/project/api.js
@@ -17,7 +17,13 @@ global.API = {
 
     // Catch coding errors that end up here
     if (res instanceof Error) {
-      console.log(res)
+      console.error(res)
+      store.error = res
+      store.goneABitWest()
+      return
+    } else if (res.data) {
+      store.error = res.data
+      store.goneABitWest()
       return
     }