From 628a9b2b7baf95d4a5e2bf6f612b7687b79b379f Mon Sep 17 00:00:00 2001
From: Moriah Kreeger <moar.riah@gmail.com>
Date: Wed, 13 Jan 2021 10:53:31 -0800
Subject: [PATCH] keep modal open on error, utilize useEffect (#12360)

---
 .../CRUD/csstemplates/CssTemplateModal.tsx    | 58 ++++++++++++-------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/csstemplates/CssTemplateModal.tsx b/superset-frontend/src/views/CRUD/csstemplates/CssTemplateModal.tsx
index 7614e15b1c..b2250da9df 100644
--- a/superset-frontend/src/views/CRUD/csstemplates/CssTemplateModal.tsx
+++ b/superset-frontend/src/views/CRUD/csstemplates/CssTemplateModal.tsx
@@ -110,7 +110,11 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
         const update_id = currentCssTemplate.id;
         delete currentCssTemplate.id;
         delete currentCssTemplate.created_by;
-        updateResource(update_id, currentCssTemplate).then(() => {
+        updateResource(update_id, currentCssTemplate).then(response => {
+          if (!response) {
+            return;
+          }
+
           if (onCssTemplateAdd) {
             onCssTemplateAdd();
           }
@@ -120,7 +124,11 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
       }
     } else if (currentCssTemplate) {
       // Create
-      createResource(currentCssTemplate).then(() => {
+      createResource(currentCssTemplate).then(response => {
+        if (!response) {
+          return;
+        }
+
         if (onCssTemplateAdd) {
           onCssTemplateAdd();
         }
@@ -166,29 +174,35 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
   };
 
   // Initialize
-  if (
-    isEditMode &&
-    (!currentCssTemplate ||
-      !currentCssTemplate.id ||
-      (cssTemplate && cssTemplate.id !== currentCssTemplate.id) ||
-      (isHidden && show))
-  ) {
-    if (cssTemplate && cssTemplate.id !== null && !loading) {
-      const id = cssTemplate.id || 0;
+  useEffect(() => {
+    if (
+      isEditMode &&
+      (!currentCssTemplate ||
+        !currentCssTemplate.id ||
+        (cssTemplate && cssTemplate.id !== currentCssTemplate.id) ||
+        (isHidden && show))
+    ) {
+      if (cssTemplate && cssTemplate.id !== null && !loading) {
+        const id = cssTemplate.id || 0;
 
-      fetchResource(id).then(() => {
-        setCurrentCssTemplate(resource);
+        fetchResource(id);
+      }
+    } else if (
+      !isEditMode &&
+      (!currentCssTemplate || currentCssTemplate.id || (isHidden && show))
+    ) {
+      setCurrentCssTemplate({
+        template_name: '',
+        css: '',
       });
     }
-  } else if (
-    !isEditMode &&
-    (!currentCssTemplate || currentCssTemplate.id || (isHidden && show))
-  ) {
-    setCurrentCssTemplate({
-      template_name: '',
-      css: '',
-    });
-  }
+  }, [cssTemplate]);
+
+  useEffect(() => {
+    if (resource) {
+      setCurrentCssTemplate(resource);
+    }
+  }, [resource]);
 
   // Validation
   useEffect(() => {