From d0b9e3a732d2a6330fc51c46c62a8e82a09ec3f9 Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com>
Date: Thu, 11 Jan 2024 10:14:23 +1300
Subject: [PATCH] fix(UI): app summary on forvalues update [EE-6515] (#10932)

* app summary on forvalues update

* comment added
---
 .../create/createApplication.html             | 54 ++++++++++++++-----
 .../create/createApplicationController.js     | 19 +++++++
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 6fdd2cf9d..48668b06b 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -103,13 +103,26 @@
                 ></kube-services-form>
               </div>
               <!-- kubernetes services options -->
+
               <!-- kubernetes summary for external application -->
-              <application-summary-section
-                application-kind="ctrl.formValues.ApplicationType"
-                form-values="ctrl.formValues"
-                old-form-values="ctrl.savedFormValues"
-                ng-if="ctrl.isExternalApplication()"
-              ></application-summary-section>
+              <!--  below workaround is needed because we wanted react to render it again 
+                by hiding/showing it, but the page was fluctuating. so we added two blocks for both the conditions -->
+              <div ng-if="!ctrl.isTemporaryRefresh">
+                <application-summary-section
+                  application-kind="ctrl.formValues.ApplicationType"
+                  form-values="ctrl.formValues"
+                  old-form-values="ctrl.savedFormValues"
+                  ng-if="kubernetesApplicationCreationForm.$valid && ctrl.isExternalApplication()"
+                ></application-summary-section>
+              </div>
+              <div ng-if="ctrl.isTemporaryRefresh">
+                <application-summary-section
+                  application-kind="ctrl.formValues.ApplicationType"
+                  form-values="ctrl.formValues"
+                  old-form-values="ctrl.savedFormValues"
+                  ng-if="kubernetesApplicationCreationForm.$valid && ctrl.isExternalApplication()"
+                ></application-summary-section>
+              </div>
               <!-- kubernetes summary for external application -->
               <div class="col-sm-12 form-section-title !mt-6" ng-if="ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.GIT" ng-hide="ctrl.stack.IsComposeFormat"> Actions </div>
               <!-- #region ACTIONS -->
@@ -504,12 +517,29 @@
                   ></kube-services-form>
                 </div>
                 <!-- kubernetes services options -->
-                <application-summary-section
-                  application-kind="ctrl.formValues.ApplicationType"
-                  ng-if="!(!kubernetesApplicationCreationForm.$valid || ctrl.isDeployUpdateButtonDisabled() || !ctrl.state.pullImageValidity)"
-                  form-values="ctrl.formValues"
-                  old-form-values="ctrl.savedFormValues"
-                ></application-summary-section>
+
+                <!-- application summary start -->
+                <!--  below workaround is needed because we wanted react to render it again 
+                  by hiding/showing it, but the page was fluctuating. so we added two blocks for both the conditions -->
+                <div ng-if="!ctrl.isTemporaryRefresh">
+                  <!-- summary -->
+                  <application-summary-section
+                    application-kind="ctrl.formValues.ApplicationType"
+                    ng-if="!(!kubernetesApplicationCreationForm.$valid || ctrl.isDeployUpdateButtonDisabled() || !ctrl.state.pullImageValidity)"
+                    form-values="ctrl.formValues"
+                    old-form-values="ctrl.savedFormValues"
+                  ></application-summary-section>
+                </div>
+                <div ng-if="ctrl.isTemporaryRefresh">
+                  <!-- summary -->
+                  <application-summary-section
+                    application-kind="ctrl.formValues.ApplicationType"
+                    ng-if="!(!kubernetesApplicationCreationForm.$valid || ctrl.isDeployUpdateButtonDisabled() || !ctrl.state.pullImageValidity)"
+                    form-values="ctrl.formValues"
+                    old-form-values="ctrl.savedFormValues"
+                  ></application-summary-section>
+                </div>
+                <!-- application summary end -->
               </div>
               <!-- #region ACTIONS -->
               <div class="col-sm-12 form-section-title !mt-6" ng-if="ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.GIT" ng-hide="ctrl.stack.IsComposeFormat"> Actions </div>
diff --git a/app/kubernetes/views/applications/create/createApplicationController.js b/app/kubernetes/views/applications/create/createApplicationController.js
index e9801cc59..1f7b05ffd 100644
--- a/app/kubernetes/views/applications/create/createApplicationController.js
+++ b/app/kubernetes/views/applications/create/createApplicationController.js
@@ -37,6 +37,7 @@ class KubernetesCreateApplicationController {
     $scope,
     $async,
     $state,
+    $timeout,
     Notifications,
     Authentication,
     KubernetesResourcePoolService,
@@ -54,6 +55,7 @@ class KubernetesCreateApplicationController {
     this.$scope = $scope;
     this.$async = $async;
     this.$state = $state;
+    this.$timeout = $timeout;
     this.Notifications = Notifications;
     this.Authentication = Authentication;
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
@@ -148,9 +150,26 @@ class KubernetesCreateApplicationController {
     this.updateApplicationType = this.updateApplicationType.bind(this);
     this.getAppType = this.getAppType.bind(this);
     this.showDataAccessPolicySection = this.showDataAccessPolicySection.bind(this);
+    this.refreshReactComponent = this.refreshReactComponent.bind(this);
+
+    this.$scope.$watch(
+      () => this.formValues,
+      () => {
+        this.refreshReactComponent();
+      },
+      _.isEqual
+    );
   }
   /* #endregion */
 
+  refreshReactComponent() {
+    this.isTemporaryRefresh = true;
+
+    this.$timeout(() => {
+      this.isTemporaryRefresh = false;
+    }, 10);
+  }
+
   onChangePlacements(values) {
     return this.$async(async () => {
       this.formValues.Placements = values.placements;