Fix template loading in application edit

jenkins-is-staging · Jan 12, 2021 · e5ad429 · e5ad429
1 parent e7f67ab
commit e5ad429
Showing 1 changed file with 35 additions and 8 deletions.
diff --git a/apps/console/src/features/applications/pages/application-edit.tsx b/apps/console/src/features/applications/pages/application-edit.tsx
@@ -59,7 +59,7 @@ import {
     SupportedAuthProtocolTypes,
     emptyApplication
 } from "../models";
-import { ApplicationManagementUtils } from "../utils";
+import { ApplicationManagementUtils, ApplicationTemplateManagementUtils } from "../utils";
 
 /**
  * Proptypes for the applications edit page component.
@@ -141,6 +141,40 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
         getApplication(id);
     }, []);
 
+    /**
+     * Load the template that the application is built on.
+     */
+    useEffect(() => {
+
+        if (!application
+            || !(applicationTemplates
+            && applicationTemplates instanceof Array
+            && applicationTemplates.length > 0)) {
+
+            return;
+        }
+
+        const template = applicationTemplates.find((template) => template.id === application.templateId);
+
+        setApplicationTemplate(template);
+    }, [ applicationTemplates, application ]);
+
+    /**
+     * Fetch the application templates if list is not available in redux.
+     */
+    useEffect(() => {
+        if (applicationTemplates !== undefined) {
+            return;
+        }
+
+        setApplicationTemplateRequestLoadingStatus(true);
+
+        ApplicationTemplateManagementUtils.getApplicationTemplates()
+            .finally(() => {
+                setApplicationTemplateRequestLoadingStatus(false);
+            });
+    }, [ applicationTemplates ]);
+
     /**
      * Push to 404 if application edit feature is disabled.
      */
@@ -406,13 +440,6 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
 
         getApplicationDetails(id)
             .then((response: ApplicationInterface) => {
-
-                const template = applicationTemplates
-                    && applicationTemplates instanceof Array
-                    && applicationTemplates.length > 0
-                    && applicationTemplates.find((template) => template.id === response.templateId);
-
-                setApplicationTemplate(template);
                 setApplication(response);
             })
             .catch((error) => {