Fix rendering of DAS interstitial components (#10094)

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

@@ -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)
 

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>

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;
   }
 }