From b59dbdc6ac19ec98095aeaf69c431f80b62b90b3 Mon Sep 17 00:00:00 2001
From: Buck Doyle <buck@hashicorp.com>
Date: Mon, 1 Mar 2021 09:46:22 -0600
Subject: [PATCH] Fix rendering of DAS interstitial components (#10094)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With the Ember update, when the will-destroy action is called
to check the element height, its height is already zero. That
seems strange but I didn’t look into it any further, as
using did-insert to store the element lets us check its height
before any other actions when a processing button is pressed.
---
 CHANGELOG.md                                  |  1 +
 ui/app/components/das/recommendation-card.hbs |  2 +-
 ui/app/components/das/recommendation-card.js  | 22 +++++++++++++++----
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 497882ccfe82..72f0624bc19a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ BUG FIXES:
  * api: Added missing devices block to AllocatedTaskResources [[GH-10064](https://github.com/hashicorp/nomad/pull/10064)]
  * cli: Fixed a bug where non-int proxy port would panic CLI [[GH-10072](https://github.com/hashicorp/nomad/issues/10072)]
  * cli: Fixed a bug where `nomad operator debug` incorrectly parsed https Consul API URLs. [[GH-10082](https://github.com/hashicorp/nomad/pull/10082)]
+ * ui: Fixed the rendering of interstitial components shown after processing a dynamic application sizing recommendation. [[GH-10094](https://github.com/hashicorp/nomad/pull/10094)] 
 
 ## 1.0.4 (February 24, 2021)
 
diff --git a/ui/app/components/das/recommendation-card.hbs b/ui/app/components/das/recommendation-card.hbs
index d1530e6573d0..51ecdd461138 100644
--- a/ui/app/components/das/recommendation-card.hbs
+++ b/ui/app/components/das/recommendation-card.hbs
@@ -7,7 +7,7 @@
     ...attributes
     data-test-task-group-recommendations
     class='recommendation-card'
-    {{will-destroy this.recommendationCardDestroying}}
+    {{did-insert this.cardInserted}}
   >
 
     <h2 class="top overview inner-container">Resource Recommendation</h2>
diff --git a/ui/app/components/das/recommendation-card.js b/ui/app/components/das/recommendation-card.js
index 0fdf3f028865..29f203e131fc 100644
--- a/ui/app/components/das/recommendation-card.js
+++ b/ui/app/components/das/recommendation-card.js
@@ -15,6 +15,8 @@ export default class DasRecommendationCardComponent extends Component {
 
   @tracked activeTaskToggleRowIndex = 0;
 
+  element = null;
+
   @tracked cardHeight;
   @tracked interstitialComponent;
   @tracked error;
@@ -166,9 +168,13 @@ export default class DasRecommendationCardComponent extends Component {
 
   @action
   accept() {
+    this.storeCardHeight();
     this.args.summary
       .save()
-      .then(() => this.onApplied.perform(), e => this.onError.perform(e))
+      .then(
+        () => this.onApplied.perform(),
+        e => this.onError.perform(e)
+      )
       .catch(e => {
         if (!didCancel(e)) {
           throw e;
@@ -178,10 +184,14 @@ export default class DasRecommendationCardComponent extends Component {
 
   @action
   dismiss() {
+    this.storeCardHeight();
     this.args.summary.excludedRecommendations.pushObjects(this.args.summary.recommendations);
     this.args.summary
       .save()
-      .then(() => this.onDismissed.perform(), e => this.onError.perform(e))
+      .then(
+        () => this.onDismissed.perform(),
+        e => this.onError.perform(e)
+      )
       .catch(e => {
         if (!didCancel(e)) {
           throw e;
@@ -237,8 +247,12 @@ export default class DasRecommendationCardComponent extends Component {
   }
 
   @action
-  recommendationCardDestroying(element) {
-    this.cardHeight = element.clientHeight;
+  cardInserted(element) {
+    this.element = element;
+  }
+
+  storeCardHeight() {
+    this.cardHeight = this.element.clientHeight;
   }
 }