Update template linting and fix missed curly invocations (#8382)

This includes fixes for newer template lint rules that came along with updating that dependency, which was necessary to be able to use the no-curly-component-invocation rule. It also updates some curly invocations that I missed in #8075.
hashicorp · Jul 9, 2020 · 0db4324 · 0db4324
1 parent 1f6e76b
commit 0db4324
Show file tree

Hide file tree

Showing 50 changed files with 448 additions and 345 deletions.
diff --git a/ui/.template-lintrc.js b/ui/.template-lintrc.js
@@ -31,5 +31,8 @@ module.exports = {
     'attribute-indentation': false,
     'block-indentation': false,
     quotes: false,
+
+    // remove when moving from extending `recommended` to `octane`
+    'no-curly-component-invocation': true,
   },
 };
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
@@ -9,7 +9,7 @@
           <p data-test-inline-error-body>{{error.description}}</p>
         </div>
         <div class="column is-centered is-minimum">
-          <button data-test-inline-error-close class="button is-danger" onclick={{action onDismiss}}>Okay</button>
+          <button data-test-inline-error-close class="button is-danger" onclick={{action onDismiss}} type="button">Okay</button>
         </div>
       </div>
     </div>
@@ -204,12 +204,7 @@
     <div class="boxed-section is-warning" data-test-was-preempted>
       <div class="boxed-section-head">Preempted By</div>
       <div class="boxed-section-body">
-        {{#if (not preempter)}}
-          <div class="empty-message">
-            <h3 class="empty-message-headline">Allocation is gone</h3>
-            <p class="empty-message-body">This allocation has been stopped and garbage collected.</p>
-          </div>
-        {{else}}
+        {{#if preempter}}
           <div class="boxed-section is-small">
             <div class="boxed-section-body inline-definitions">
               <span class="pair">
@@ -238,6 +233,11 @@
               </span>
             </div>
           </div>
+        {{else}}
+          <div class="empty-message">
+            <h3 class="empty-message-headline">Allocation is gone</h3>
+            <p class="empty-message-body">This allocation has been stopped and garbage collected.</p>
+          </div>
         {{/if}}
       </div>
     </div>

diff --git a/ui/app/templates/allocations/allocation/task/index.hbs b/ui/app/templates/allocations/allocation/task/index.hbs
@@ -9,7 +9,7 @@
           <p data-test-inline-error-body>{{error.description}}</p>
         </div>
         <div class="column is-centered is-minimum">
-          <button data-test-inline-error-close class="button is-danger" onclick={{action onDismiss}}>Okay</button>
+          <button data-test-inline-error-close class="button is-danger" onclick={{action onDismiss}} type="button">Okay</button>
         </div>
       </div>
     </div>

diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs
@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class="column is-centered is-minimum">
-        <button data-test-dismiss class="button is-danger" onclick={{action (mut eligibilityError) ""}}>Okay</button>
+        <button data-test-dismiss class="button is-danger" onclick={{action (mut eligibilityError) ""}} type="button">Okay</button>
       </div>
     </div>
   {{/if}}
@@ -23,7 +23,7 @@
         </div>
       </div>
       <div class="column is-centered is-minimum">
-        <button data-test-dismiss class="button is-danger" onclick={{action (mut stopDrainError) ""}}>Okay</button>
+        <button data-test-dismiss class="button is-danger" onclick={{action (mut stopDrainError) ""}} type="button">Okay</button>
       </div>
     </div>
   {{/if}}
@@ -36,7 +36,7 @@
         </div>
       </div>
       <div class="column is-centered is-minimum">
-        <button data-test-dismiss class="button is-danger" onclick={{action (mut drainError) ""}}>Okay</button>
+        <button data-test-dismiss class="button is-danger" onclick={{action (mut drainError) ""}} type="button">Okay</button>
       </div>
     </div>
   {{/if}}
@@ -48,7 +48,7 @@
           <p data-test-message>The drain has been stopped and the node has been set to ineligible.</p>
         </div>
         <div class="column is-centered is-minimum">
-          <button data-test-dismiss class="button is-info" onclick={{action (mut showDrainStoppedNotification) false}}>Okay</button>
+          <button data-test-dismiss class="button is-info" onclick={{action (mut showDrainStoppedNotification) false}} type="button">Okay</button>
         </div>
       </div>
     </div>
@@ -61,7 +61,7 @@
           <p data-test-message>The new drain specification has been applied.</p>
         </div>
         <div class="column is-centered is-minimum">
-          <button data-test-dismiss class="button is-info" onclick={{action (mut showDrainUpdateNotification) false}}>Okay</button>
+          <button data-test-dismiss class="button is-info" onclick={{action (mut showDrainUpdateNotification) false}} type="button">Okay</button>
         </div>
       </div>
     </div>
@@ -74,7 +74,7 @@
           <p data-test-message>Allocations have been drained and the node has been set to ineligible.</p>
         </div>
         <div class="column is-centered is-minimum">
-          <button data-test-dimiss class="button is-info" onclick={{action (mut showDrainNotification) false}}>Okay</button>
+          <button data-test-dimiss class="button is-info" onclick={{action (mut showDrainNotification) false}} type="button">Okay</button>
         </div>
       </div>
     </div>
@@ -93,13 +93,13 @@
       </h1>
       <p>
         <label class="is-interactive">
-          {{#toggle
+          <Toggle
             data-test-eligibility-toggle
-            isActive=model.isEligible
-            isDisabled=(or setEligibility.isRunning model.isDraining (cannot "write client"))
-            onToggle=(perform setEligibility (not model.isEligible))}}
+            @isActive={{model.isEligible}}
+            @isDisabled={{or setEligibility.isRunning model.isDraining (cannot "write client")}}
+            @onToggle={{perform setEligibility (not model.isEligible)}}>
             Eligible
-          {{/toggle}}
+          </Toggle>
           <span class="tooltip" aria-label="Only eligible clients can receive allocations">
             {{x-icon "info-circle-outline" class="is-faded"}}
           </span>
@@ -164,7 +164,7 @@
         <div class="boxed-section-row">Drain Strategy</div>
         <div class="boxed-section-row">
           <div class="inline-definitions is-small">
-            {{#if (not model.drainStrategy.hasNoDeadline)}}
+            {{#unless model.drainStrategy.hasNoDeadline}}
               <span class="pair">
                 <span class="term">Duration</span>
                 {{#if model.drainStrategy.isForced}}
@@ -175,7 +175,7 @@
                   </span>
                 {{/if}}
               </span>
-            {{/if}}
+            {{/unless}}
             <span class="pair">
               <span class="term">{{if model.drainStrategy.hasNoDeadline "Deadline" "Remaining"}}</span>
               {{#if model.drainStrategy.hasNoDeadline}}
@@ -201,7 +201,7 @@
               {{if model.drainStrategy.ignoreSystemJobs "No" "Yes"}}
             </span>
           </div>
-          {{#if (not model.drainStrategy.isForced)}}
+          {{#unless model.drainStrategy.isForced}}
             <div class="pull-right">
               <TwoStepButton
                 data-test-force
@@ -214,7 +214,7 @@
                 @awaitingConfirmation={{forceDrain.isRunning}}
                 @onConfirm={{perform forceDrain}} />
             </div>
-          {{/if}}
+          {{/unless}}
         </div>
       </div>
       <div class="boxed-section-body">
@@ -272,11 +272,11 @@
     <div class="boxed-section-head">
       <div>
         Allocations
-        <button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}} data-test-filter-all>
+        <button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}} data-test-filter-all type="button">
           {{model.allocations.length}}
         </button>
         {{#if preemptions.length}}
-          <button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}} data-test-filter-preemptions>
+          <button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}} data-test-filter-preemptions type="button">
             {{preemptions.length}} {{pluralize "preemption" preemptions.length}}
           </button>
         {{/if}}

diff --git a/ui/app/templates/components/agent-monitor.hbs b/ui/app/templates/components/agent-monitor.hbs
@@ -10,7 +10,7 @@
       @onChange={{action setLevel}} as |level|>
       <span class="ember-power-select-prefix">Level: </span>{{capitalize level}}
     </PowerSelect>
-    <button data-test-toggle class="button is-white is-compact pull-right" {{action toggleStream}}>
+    <button data-test-toggle class="button is-white is-compact pull-right" {{action toggleStream}} type="button">
       {{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
     </button>
   </div>

diff --git a/ui/app/templates/components/allocation-subnav.hbs b/ui/app/templates/components/allocation-subnav.hbs
@@ -1,6 +1,6 @@
 <div class="tabs is-subnav">
   <ul>
-    <li>{{#link-to "allocations.allocation.index" allocation activeClass="is-active"}}Overview{{/link-to}}</li>
-    <li>{{#link-to "allocations.allocation.fs-root" allocation class=(if filesLinkActive "is-active")}}Files{{/link-to}}</li>
+    <li><LinkTo @route="allocations.allocation.index" @model={{allocation}} @activeClass="is-active">Overview</LinkTo></li>
+    <li><LinkTo @route="allocations.allocation.fs-root" @model={{allocation}} class={{if filesLinkActive "is-active"}}>Files</LinkTo></li>
   </ul>
 </div>
diff --git a/ui/app/templates/components/client-subnav.hbs b/ui/app/templates/components/client-subnav.hbs
@@ -1,6 +1,6 @@
 <div class="tabs is-subnav">
   <ul>
-    <li>{{#link-to "clients.client.index" client activeClass="is-active"}}Overview{{/link-to}}</li>
-    <li>{{#link-to "clients.client.monitor" client activeClass="is-active"}}Monitor{{/link-to}}</li>
+    <li><LinkTo @route="clients.client.index" @model={{client}} @activeClass="is-active">Overview</LinkTo></li>
+    <li><LinkTo @route="clients.client.monitor" @model={{client}} @activeClass="is-active">Monitor</LinkTo></li>
   </ul>
 </div>
diff --git a/ui/app/templates/components/drain-popover.hbs b/ui/app/templates/components/drain-popover.hbs
@@ -12,12 +12,12 @@
     <h4 class="group-heading">Drain Options</h4>
     <div class="field">
       <label class="label is-interactive">
-        {{#toggle
+        <Toggle
           data-test-drain-deadline-toggle
-          isActive=deadlineEnabled
-          onToggle=(action (mut deadlineEnabled) value="target.checked")}}
+          @isActive={{deadlineEnabled}}
+          @onToggle={{action (mut deadlineEnabled) value="target.checked"}}>
           Deadline
-        {{/toggle}}
+       </Toggle>
         <span class="tooltip multiline" aria-label="The amount of time a drain must complete within.">
           {{x-icon "info-circle-outline" class="is-faded"}}
         </span>
@@ -53,25 +53,25 @@
     {{/if}}
     <div class="field">
       <label class="label is-interactive">
-        {{#toggle
+        <Toggle
           data-test-force-drain-toggle
-          isActive=forceDrain
-          onToggle=(action (mut forceDrain) value="target.checked")}}
+          @isActive={{forceDrain}}
+          @onToggle={{action (mut forceDrain) value="target.checked"}}>
           Force Drain
-        {{/toggle}}
+       </Toggle>
         <span class="tooltip multiline" aria-label="Immediately remove allocations from the client.">
           {{x-icon "info-circle-outline" class="is-faded"}}
         </span>
       </label>
     </div>
     <div class="field">
       <label class="label is-interactive">
-        {{#toggle
+        <Toggle
           data-test-system-jobs-toggle
-          isActive=drainSystemJobs
-          onToggle=(action (mut drainSystemJobs) value="target.checked")}}
+          @isActive={{drainSystemJobs}}
+          @onToggle={{action (mut drainSystemJobs) value="target.checked"}}>
           Drain System Jobs
-        {{/toggle}}
+       </Toggle>
         <span class="tooltip multiline" aria-label="Stop allocations for system jobs.">
           {{x-icon "info-circle-outline" class="is-faded"}}
         </span>

diff --git a/ui/app/templates/components/exec/task-group-parent.hbs b/ui/app/templates/components/exec/task-group-parent.hbs
@@ -1,12 +1,12 @@
-<button {{action "toggleOpen"}} class="toggle-button {{if hasPendingAllocations "is-loading"}}" data-test-task-group-name>
+<button {{action "toggleOpen"}} class="toggle-button {{if hasPendingAllocations "is-loading"}}" data-test-task-group-name type="button">
   {{x-icon (if isOpen "chevron-down" "chevron-right")}}
   {{taskGroup.name}}
 </button>
 {{#if isOpen}}
   <ul class="task-list">
     {{#each sortedTasks as |task|}}
       {{#if shouldOpenInNewWindow}}
-        <a {{on "click" (action "openInNewWindow" taskGroup.job taskGroup task)}} class="task-item" data-test-task>
+        <a {{on "click" (action "openInNewWindow" taskGroup.job taskGroup task)}} href="#" class="task-item" data-test-task>
           <Exec::TaskContents
             @task={{task}}
             @active={{and currentRouteIsThisTaskGroup (eq task.name activeTaskName)}}

diff --git a/ui/app/templates/components/fs/file.hbs b/ui/app/templates/components/fs/file.hbs
@@ -8,15 +8,15 @@
   {{yield}}
   <span class="pull-right">
 
-    {{#if (not fileTypeIsUnknown)}}
+    {{#unless fileTypeIsUnknown}}
       <a data-test-log-action="raw" class="button is-white is-compact" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
-    {{/if}}
+    {{/unless}}
     {{#if (and isLarge isStreamable)}}
-      <button data-test-log-action="head" class="button is-white is-compact" onclick={{action "gotoHead"}}>Head</button>
-      <button data-test-log-action="tail" class="button is-white is-compact" onclick={{action "gotoTail"}}>Tail</button>
+      <button data-test-log-action="head" class="button is-white is-compact" onclick={{action "gotoHead"}} type="button">Head</button>
+      <button data-test-log-action="tail" class="button is-white is-compact" onclick={{action "gotoTail"}} type="button">Tail</button>
     {{/if}}
     {{#if isStreamable}}
-      <button data-test-log-action="toggle-stream" class="button is-white is-compact" onclick={{action "toggleStream"}}>
+      <button data-test-log-action="toggle-stream" class="button is-white is-compact" onclick={{action "toggleStream"}} type="button">
         {{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
       </button>
     {{/if}}

diff --git a/ui/app/templates/components/job-deployment.hbs b/ui/app/templates/components/job-deployment.hbs
@@ -14,15 +14,15 @@
         </span>
       </span>
     </span>
-    <button data-test-deployment-toggle-details class="button is-light is-compact pull-right" {{action (toggle "isOpen" this)}}>details</button>
+    <button data-test-deployment-toggle-details class="button is-light is-compact pull-right" {{action (toggle "isOpen" this)}} type="button">details</button>
  </span>
 </div>
 {{#if isOpen}}
   <div data-test-deployment-details class="boxed-section-body">
     <JobDeploymentDetails @deployment={{deployment}} as |d|>
-      {{d.metrics}}
-      {{d.taskGroups}}
-      {{d.allocations}}
+      <d.metrics />
+      <d.taskGroups />
+      <d.allocations />
     </JobDeploymentDetails>
   </div>
 {{/if}}
diff --git a/ui/app/templates/components/job-editor.hbs b/ui/app/templates/components/job-editor.hbs
@@ -26,7 +26,7 @@
           <p data-test-editor-help-message>Paste or author HCL or JSON to submit to your cluster. A plan will be requested before the job is submitted.</p>
         </div>
         <div class="column is-centered is-minimum">
-          <button class="button is-info" onclick={{toggle-action "showEditorMessage" this}} data-test-editor-help-dismiss>Okay</button>
+          <button class="button is-info" onclick={{toggle-action "showEditorMessage" this}} data-test-editor-help-dismiss type="button">Okay</button>
         </div>
       </div>
     </div>
@@ -35,7 +35,7 @@
     <div class="boxed-section-head">
       Job Definition
       {{#if cancelable}}
-        <button class="button is-light is-compact pull-right" onclick={{action onCancel}} data-test-cancel-editing>Cancel</button>
+        <button class="button is-light is-compact pull-right" onclick={{action onCancel}} data-test-cancel-editing type="button">Cancel</button>
       {{/if}}
     </div>
     <div class="boxed-section-body is-full-bleed">
@@ -65,7 +65,7 @@
           <p data-test-plan-help-message>This is the impact running this job will have on your cluster.</p>
         </div>
         <div class="column is-centered is-minimum">
-          <button class="button is-info" onclick={{toggle-action "showPlanMessage" this}} data-test-plan-help-dismiss>Okay</button>
+          <button class="button is-info" onclick={{toggle-action "showPlanMessage" this}} data-test-plan-help-dismiss type="button">Okay</button>
         </div>
       </div>
     </div>

diff --git a/ui/app/templates/components/job-page/parts/error.hbs b/ui/app/templates/components/job-page/parts/error.hbs
@@ -6,7 +6,7 @@
         <p data-test-job-error-body>{{errorMessage.description}}</p>
       </div>
       <div class="column is-centered is-minimum">
-        <button data-test-job-error-close class="button is-danger" onclick={{action onDismiss}}>Okay</button>
+        <button data-test-job-error-close class="button is-danger" onclick={{action onDismiss}} type="button">Okay</button>
       </div>
     </div>
   </div>

diff --git a/ui/app/templates/components/job-page/parts/latest-deployment.hbs b/ui/app/templates/components/job-page/parts/latest-deployment.hbs
@@ -26,15 +26,15 @@
     </div>
     <div class="boxed-section-body with-foot">
       <JobDeploymentDetails @deployment={{job.latestDeployment}} as |d|>
-        {{d.metrics}}
+        <d.metrics />
         {{#if isShowingDeploymentDetails}}
-          {{d.taskGroups}}
-          {{d.allocations}}
+          <d.taskGroups />
+          <d.allocations />
         {{/if}}
       </JobDeploymentDetails>
     </div>
     <div class="boxed-section-foot">
-      <a class="pull-right" {{action (toggle "isShowingDeploymentDetails" this)}} data-test-deployment-toggle-details>
+      <a class="pull-right" {{action (toggle "isShowingDeploymentDetails" this)}} href="#" data-test-deployment-toggle-details>
         {{if isShowingDeploymentDetails "Hide" "Show"}} deployment task groups and allocations
       </a>
     </div>

diff --git a/ui/app/templates/components/job-page/parts/summary.hbs b/ui/app/templates/components/job-page/parts/summary.hbs
@@ -15,7 +15,7 @@
         {{/if}}
       </div>
 
-      {{#if (not a.isOpen)}}
+      {{#unless a.isOpen}}
         <div class="column">
           <div class="inline-chart bumper-left">
             {{#if a.item.hasChildren}}
@@ -29,7 +29,7 @@
             {{/if}}
           </div>
         </div>
-      {{/if}}
+      {{/unless}}
     </div>
   </a.head>
   <a.body>

diff --git a/ui/app/templates/components/job-page/periodic.hbs b/ui/app/templates/components/job-page/periodic.hbs
@@ -3,7 +3,7 @@
 
   <JobPage::Parts::Title @job={{job}} @title={{job.trimmedName}} @handleError={{action "handleError"}}>
     <span class="tag is-hollow">periodic</span>
-    <button data-test-force-launch class="button is-warning is-small is-inline" onclick={{action "forceLaunch"}}>Force Launch</button>
+    <button data-test-force-launch class="button is-warning is-small is-inline" onclick={{action "forceLaunch"}} type="button">Force Launch</button>
   </JobPage::Parts::Title>
 
   <div class="boxed-section job-stats">