Fix Jira render logic (#531)

* Tweak margin logic

* Move did-insert

* Add test

* Update jira-widget.hbs

web/app/components/project/index.hbs

@@ -64,7 +64,7 @@
 
   </div>
 </div>
-<div class="relative z-20 max-w-3xl">
+<div class="relative z-20 max-w-3xl pb-5">
 
   {{! Title }}
   <div class="mt-7 flex">
@@ -99,16 +99,19 @@
 </div>
 
 {{#if this.jiraIsEnabled}}
-  {{! Jira }}
-  <div class="mt-10 flex w-full max-w-3xl">
-    <Project::JiraWidget
-      {{did-insert this.maybeLoadJiraInfo}}
-      @issue={{this.jiraIssue}}
-      @onIssueRemove={{this.removeJiraIssue}}
-      @onIssueSelect={{this.addJiraIssue}}
-      @isLoading={{this.loadJiraIssue.isRunning}}
-      @isReadOnly={{not this.projectIsActive}}
-    />
+  <div {{did-insert this.maybeLoadJiraInfo}}>
+    {{#if this.jiraWidgetIsShown}}
+      {{! Jira }}
+      <div class="mt-5 flex w-full max-w-3xl">
+        <Project::JiraWidget
+          @issue={{this.jiraIssue}}
+          @onIssueRemove={{this.removeJiraIssue}}
+          @onIssueSelect={{this.addJiraIssue}}
+          @isLoading={{this.loadJiraIssue.isRunning}}
+          @isReadOnly={{not this.projectIsActive}}
+        />
+      </div>
+    {{/if}}
   </div>
 {{/if}}
 

web/app/components/project/index.ts

@@ -106,6 +106,26 @@ export default class ProjectIndexComponent extends Component<ProjectIndexCompone
     return this.status === ProjectStatus.Active;
   }
 
+  /**
+   * Whether the JiraWidget should be shown.
+   * True if the project is active, or if the project has a Jira issue
+   * (that may or may not be loading)
+   */
+  protected get jiraWidgetIsShown() {
+    /**
+     * This construction is weird, but it gives us
+     * the most accurate evaluations by `ember-animated`
+     * and prevents unnecessary re-renders.
+     */
+    if (
+      !!this.jiraIssue ||
+      this.projectIsActive ||
+      this.loadJiraIssue.isRunning
+    ) {
+      return true;
+    }
+  }
+
   /**
    * The related resources object, minimally formatted for a PUT request to the API.
    */