From f58fca2048d58aeb233f064e617eabf1b9b84b21 Mon Sep 17 00:00:00 2001
From: Michael Klein <Michael@firstiwaslike.com>
Date: Wed, 8 Jun 2022 17:07:51 +0200
Subject: [PATCH] ui: upgrade ember composable helper (#13394)

Upgrade ember-composable-helpers to version 5.x. This version contains the pick-helper which makes composition in the template layer easier with Octane.

{{!-- this is usually hard to do with Octane --}}
<input {{on "input" (pick "target.value" this.updateText)}} .../>
Version 5.x also fixes a regression with sort-by that according to @johncowen was the reason why the version was pinned to 4.0.0 at the moment.

Version 5 of ember-composable-helpers removes the contains-helper in favor of includes which I changed all occurences for.
---
 .changelog/13394.txt                               |  3 +++
 .../consul/lock-session/notifications/README.mdx   |  2 +-
 .../components/consul/nspace/search-bar/index.hbs  |  2 +-
 .../consul/partition/search-bar/index.hbs          |  2 +-
 .../consul/auth-method/search-bar/index.hbs        | 10 +++++-----
 .../consul/health-check/search-bar/index.hbs       |  8 ++++----
 .../consul/intention/permission/form/index.hbs     |  2 +-
 .../consul/intention/search-bar/index.hbs          |  4 ++--
 .../app/components/consul/kv/search-bar/index.hbs  |  4 ++--
 .../components/consul/node/search-bar/index.hbs    |  4 ++--
 .../components/consul/policy/search-bar/index.hbs  |  6 +++---
 .../components/consul/role/search-bar/index.hbs    |  2 +-
 .../app/components/consul/server/card/index.hbs    |  4 ++--
 .../consul/service-instance/search-bar/index.hbs   |  6 +++---
 .../components/consul/service/search-bar/index.hbs | 14 +++++++-------
 .../components/consul/token/search-bar/index.hbs   |  4 ++--
 .../consul/upstream-instance/search-bar/index.hbs  |  2 +-
 .../consul/upstream/search-bar/index.hbs           |  4 ++--
 .../app/components/disclosure-menu/menu/index.hbs  |  2 +-
 .../app/components/form-group/element/index.hbs    |  2 +-
 .../consul-ui/app/components/policy-form/index.hbs |  2 +-
 .../consul-ui/app/styles/base/icons/README.mdx     |  2 +-
 .../consul-ui/app/templates/application.hbs        |  2 +-
 .../app/templates/dc/services/show/topology.hbs    |  2 +-
 ui/packages/consul-ui/package.json                 |  2 +-
 ui/yarn.lock                                       | 14 +++++++-------
 26 files changed, 57 insertions(+), 54 deletions(-)
 create mode 100644 .changelog/13394.txt

diff --git a/.changelog/13394.txt b/.changelog/13394.txt
new file mode 100644
index 000000000..c00759f44
--- /dev/null
+++ b/.changelog/13394.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: upgrade ember-composable-helpers to v5.x
+```
diff --git a/ui/packages/consul-lock-sessions/app/components/consul/lock-session/notifications/README.mdx b/ui/packages/consul-lock-sessions/app/components/consul/lock-session/notifications/README.mdx
index 6d90f0fff..07ee84b1c 100644
--- a/ui/packages/consul-lock-sessions/app/components/consul/lock-session/notifications/README.mdx
+++ b/ui/packages/consul-lock-sessions/app/components/consul/lock-session/notifications/README.mdx
@@ -30,7 +30,7 @@ A Notification component specifically for LockSessions.
   </figcaption>
 
   <Consul::LockSession::Notifications
-    @type={{if (contains this.type (array 'success' 'error')) 'remove' 'kv'}}
+    @type={{if (includes this.type (array 'success' 'error')) 'remove' 'kv'}}
     @error={{if (eq this.type 'error') (hash
       status="403"
       detail=""
diff --git a/ui/packages/consul-nspaces/app/components/consul/nspace/search-bar/index.hbs b/ui/packages/consul-nspaces/app/components/consul/nspace/search-bar/index.hbs
index 1742d99f2..fc6e5c282 100644
--- a/ui/packages/consul-nspaces/app/components/consul/nspace/search-bar/index.hbs
+++ b/ui/packages/consul-nspaces/app/components/consul/nspace/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/search-bar/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/search-bar/index.hbs
index 1d2999c9b..b0f15ec30 100644
--- a/ui/packages/consul-partitions/app/components/consul/partition/search-bar/index.hbs
+++ b/ui/packages/consul-partitions/app/components/consul/partition/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs
index ec8b98336..be122a1d8 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -78,10 +78,10 @@ as |key value|}}
         </BlockSlot>
         <BlockSlot @name="options">
         {{#let components.Optgroup components.Option as |Optgroup Option|}}
-          <Option class="kubernetes" @value="kubernetes" @selected={{contains 'kubernetes' @filter.kind.value}}>Kubernetes</Option>
-          <Option class="jwt" @value="jwt" @selected={{contains 'jwt' @filter.kind.value}}>JWT</Option>
+          <Option class="kubernetes" @value="kubernetes" @selected={{includes 'kubernetes' @filter.kind.value}}>Kubernetes</Option>
+          <Option class="jwt" @value="jwt" @selected={{includes 'jwt' @filter.kind.value}}>JWT</Option>
         {{#if (env 'CONSUL_SSO_ENABLED')}}
-          <Option class="oidc" @value="oidc" @selected={{contains 'oidc' @filter.kind.value}}>OIDC</Option>
+          <Option class="oidc" @value="oidc" @selected={{includes 'oidc' @filter.kind.value}}>OIDC</Option>
         {{/if}}
         {{/let}}
         </BlockSlot>
@@ -100,7 +100,7 @@ as |key value|}}
         <BlockSlot @name="options">
       {{#let components.Optgroup components.Option as |Optgroup Option|}}
         {{#each (array "local" "global") as |option|}}
-          <Option class="{{option}}" @value={{option}} @selected={{contains option @filter.types}}>
+          <Option class="{{option}}" @value={{option}} @selected={{includes option @filter.types}}>
             {{t (concat "components.consul.auth-method.search-bar.locality.options." option)}}
           </Option>
         {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/health-check/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/health-check/search-bar/index.hbs
index 78392f665..9c784527a 100644
--- a/ui/packages/consul-ui/app/components/consul/health-check/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/health-check/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -80,7 +80,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "passing" "warning" "critical" "empty") as |state|}}
-          <Option class="value-{{state}}" @value={{state}} @selected={{contains state @filter.status.value}}>
+          <Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.status.value}}>
             {{t (concat "common.consul." state)
                 default=(array
                   (concat "common.search." state)
@@ -106,7 +106,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "service" "node") as |item|}}
-          <Option @value={{item}} @selected={{contains item @filter.kind.value}}>
+          <Option @value={{item}} @selected={{includes item @filter.kind.value}}>
             {{t (concat "components.consul.health-check.search-bar.kind.options." item)
                 default=(array
                   (concat "common.search." item)
@@ -132,7 +132,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "alias" "docker" "grpc" "http" "script" "serf" "tcp" "ttl") as |item|}}
-          <Option @value={{item}} @selected={{contains item @filter.check.value}}>
+          <Option @value={{item}} @selected={{includes item @filter.check.value}}>
             {{t (concat "components.consul.health-check.search-bar.check.options." item)
                 default=(array
                   (concat "common.search." item)
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.hbs
index d97e59e21..f2b09732a 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/index.hbs
@@ -108,7 +108,7 @@ as |group|>
             type="checkbox"
             name="method"
             value={{method}}
-            checked={{if (contains method changeset.HTTP.Methods) 'checked'}}
+            checked={{if (includes method changeset.HTTP.Methods) 'checked'}}
             onchange={{action 'change' 'method' changeset}}
           />
           <span>{{method}}</span>
diff --git a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs
index 0ffc6a0e0..4fa5dc1fe 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -80,7 +80,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "allow" "deny" "") as |item|}}
-          <Option class={{concat 'value-' item}} @value={{or item 'app-aware'}} @selected={{contains (or item 'app-aware') @filter.access.value}}>
+          <Option class={{concat 'value-' item}} @value={{or item 'app-aware'}} @selected={{includes (or item 'app-aware') @filter.access.value}}>
             <span>{{t (concat "components.consul.intention.search-bar.access.options." (or item 'app-aware'))}}</span>
           </Option>
     {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs
index 9636e9bc5..2c2409c13 100644
--- a/ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -80,7 +80,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "folder" "key") as |item|}}
-          <Option class="value-{item}}" @value={{item}} @selected={{contains item @filter.kind.value}}>
+          <Option class="value-{item}}" @value={{item}} @selected={{includes item @filter.kind.value}}>
             {{t (concat "components.consul.kv.search-bar.kind.options." item)}}
           </Option>
     {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/node/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/node/search-bar/index.hbs
index 703d1be05..bc9669a9f 100644
--- a/ui/packages/consul-ui/app/components/consul/node/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/node/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -79,7 +79,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "passing" "warning" "critical") as |state|}}
-          <Option class="value-{{state}}" @value={{state}} @selected={{contains state @filter.status.value}}>
+          <Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.status.value}}>
             {{t (concat "common.consul." state)
                 default=(array
                   (concat "common.search." state)
diff --git a/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.hbs
index 1a6cbec8c..a10d6a245 100644
--- a/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -79,7 +79,7 @@ as |key value|}}
         <BlockSlot @name="options">
       {{#let components.Optgroup components.Option as |Optgroup Option|}}
           {{#each dcs as |dc|}}
-            <Option @value={{dc.Name}} @selected={{contains dc.Name @filter.datacenter.value}}>{{dc.Name}}</Option>
+            <Option @value={{dc.Name}} @selected={{includes dc.Name @filter.datacenter.value}}>{{dc.Name}}</Option>
           {{/each}}
             <DataSource
               @src={{uri "/${partition}/*/*/datacenters"
@@ -107,7 +107,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "global-management" "standard") as |state|}}
-          <Option class="value-{{state}}" @value={{state}} @selected={{contains state @filter.kind.value}}>
+          <Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.kind.value}}>
             {{t (concat "components.consul.policy.search-bar.kind.options." state)
                 default=(array
                   (concat "common.search." state)
diff --git a/ui/packages/consul-ui/app/components/consul/role/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/role/search-bar/index.hbs
index d4b5dc237..e22a8a518 100644
--- a/ui/packages/consul-ui/app/components/consul/role/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/role/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/server/card/index.hbs b/ui/packages/consul-ui/app/components/consul/server/card/index.hbs
index 7c838d829..409d5ed17 100644
--- a/ui/packages/consul-ui/app/components/consul/server/card/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/server/card/index.hbs
@@ -8,7 +8,7 @@
     ))
     (array 'voting-status-non-voter' (or
       @item.ReadReplica
-      (contains @item.Status (array 'non-voter' 'staging'))
+      (includes @item.Status (array 'non-voter' 'staging'))
     ))
   }}
   ...attributes
@@ -31,7 +31,7 @@
       Status
     </dt>
     <dd>
-      {{if (contains @item.Status (array 'leader' 'voter')) 'Active voter' 'Backup voter'}}
+      {{if (includes @item.Status (array 'leader' 'voter')) 'Active voter' 'Backup voter'}}
     </dd>
 
   </dl>
diff --git a/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs
index aa83582da..b8fdbcf9a 100644
--- a/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs
@@ -56,7 +56,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -81,7 +81,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "passing" "warning" "critical" "empty") as |state|}}
-          <Option class="value-{{state}}" @value={{state}} @selected={{contains state @filter.status.value}}>
+          <Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.status.value}}>
             {{t (concat "common.consul." state)
                 default=(array
                   (concat "common.search." state)
@@ -107,7 +107,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each @sources as |source|}}
-          <Option class={{source}} @value={{source}} @selected={{contains source @filter.source.value}}>
+          <Option class={{source}} @value={{source}} @selected={{includes source @filter.source.value}}>
             {{t (concat "common.brand." source)}}
           </Option>
     {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs
index 3b300dbbc..291a2342e 100644
--- a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -79,7 +79,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "passing" "warning" "critical" "empty") as |state|}}
-          <Option class="value-{{state}}" @value={{state}} @selected={{contains state @filter.status.value}}>
+          <Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.status.value}}>
             {{t (concat "common.consul." state)
                 default=(array
                   (concat "common.search." state)
@@ -102,14 +102,14 @@ as |key value|}}
         </BlockSlot>
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
-          <Option @value="service" @selected={{contains 'service' @filter.kind.value}}>
+          <Option @value="service" @selected={{includes 'service' @filter.kind.value}}>
             {{t "common.consul.service"}}
           </Option>
           <Optgroup
             @label={{t "common.consul.gateway"}}
           >
       {{#each (array "ingress-gateway" "terminating-gateway" "mesh-gateway") as |kind|}}
-            <Option @value={{kind}} @selected={{contains kind @filter.kind.value}}>
+            <Option @value={{kind}} @selected={{includes kind @filter.kind.value}}>
               {{t (concat "common.consul." kind)}}
             </Option>
       {{/each}}
@@ -118,7 +118,7 @@ as |key value|}}
             @label={{t "common.consul.mesh"}}
           >
     {{#each (array "in-mesh" "not-in-mesh") as |state|}}
-            <Option @value={{state}} @selected={{contains state @filter.kind.value}}>
+            <Option @value={{state}} @selected={{includes state @filter.kind.value}}>
               {{t (concat "common.search." state)}}
             </Option>
     {{/each}}
@@ -148,7 +148,7 @@ as |nonDefaultPartitions|}}
       @label={{t 'common.brand.consul'}}
     >
     {{#each @partitions as |partition|}}
-      <Option class="partition" @value={{partition}} @selected={{contains partition @filter.source.value}}>
+      <Option class="partition" @value={{partition}} @selected={{includes partition @filter.source.value}}>
         {{partition}}
       </Option>
     {{/each}}
@@ -161,7 +161,7 @@ as |nonDefaultPartitions|}}
       @label={{t 'common.search.integrations'}}
     >
     {{#each @sources as |source|}}
-          <Option class={{source}} @value={{source}} @selected={{contains source @filter.source.value}}>
+          <Option class={{source}} @value={{source}} @selected={{includes source @filter.source.value}}>
             {{t (concat "common.brand." source)}}
           </Option>
     {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/token/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/token/search-bar/index.hbs
index f7d13be10..633908b66 100644
--- a/ui/packages/consul-ui/app/components/consul/token/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/token/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -79,7 +79,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
     {{#each (array "global-management" "global" "local") as |state|}}
-          <Option class="value-{{state}}" @value={{state}} @selected={{contains state @filter.kind.value}}>
+          <Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.kind.value}}>
             {{t (concat "components.consul.token.search-bar.kind.options." state)
                 default=(array
                   (concat "common.search." state)
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream-instance/search-bar/index.hbs
index cc3fb877f..037744a4f 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs
index e8e00687a..05f57a7a7 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs
@@ -55,7 +55,7 @@ as |key value|}}
           <BlockSlot @name="options">
     {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
-              <Option @value={{prop}} @selected={{contains prop @filter.searchproperty.value}}>
+              <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
                 {{t (concat "common.consul." (lowercase prop))}}
               </Option>
             {{/each}}
@@ -78,7 +78,7 @@ as |key value|}}
         <BlockSlot @name="options">
   {{#let components.Optgroup components.Option as |Optgroup Option|}}
       {{#each (array "registered" "not-registered") as |item|}}
-            <Option @value={{item}} @selected={{contains item @filter.instance.value}}>
+            <Option @value={{item}} @selected={{includes item @filter.instance.value}}>
               {{t (concat "common.consul." item)}}
             </Option>
       {{/each}}
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
index b5b16cc05..95a61809c 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
@@ -9,7 +9,7 @@
       {{css-prop '--paged-row-height' returns=pager.rowHeight}}
       {{css-prop 'max-height' returns=pager.maxHeight}}
       class={{class-map
-        (array 'paged-collection-scroll' (contains pager.type (array 'virtual-scroll' 'native-scroll')))
+        (array 'paged-collection-scroll' (includes pager.type (array 'virtual-scroll' 'native-scroll')))
       }}
       ...attributes
     >
diff --git a/ui/packages/consul-ui/app/components/form-group/element/index.hbs b/ui/packages/consul-ui/app/components/form-group/element/index.hbs
index 3eaa61e51..7387615d7 100644
--- a/ui/packages/consul-ui/app/components/form-group/element/index.hbs
+++ b/ui/packages/consul-ui/app/components/form-group/element/index.hbs
@@ -13,7 +13,7 @@
   state=state
 )
 as |el|}}
-  {{#if (contains this.type (array 'radiogroup' 'checkbox-group' 'checkboxgroup'))}}
+  {{#if (includes this.type (array 'radiogroup' 'checkbox-group' 'checkboxgroup'))}}
     <div
       data-property={{this.prop}}
       class="type-{{this.type}}{{if (state-matches state 'error') ' has-error'}}"
diff --git a/ui/packages/consul-ui/app/components/policy-form/index.hbs b/ui/packages/consul-ui/app/components/policy-form/index.hbs
index da1f05479..467624ed4 100644
--- a/ui/packages/consul-ui/app/components/policy-form/index.hbs
+++ b/ui/packages/consul-ui/app/components/policy-form/index.hbs
@@ -122,7 +122,7 @@
     <div class="checkbox-group" role="group">
       {{#each datacenters as |dc| }}
         <label class="type-checkbox">
-          <input type="checkbox" name="{{name}}[Datacenters]" value={{dc.Name}} checked={{if (contains dc.Name item.Datacenters) 'checked' }} onchange={{action 'change'}} />
+          <input type="checkbox" name="{{name}}[Datacenters]" value={{dc.Name}} checked={{if (includes dc.Name item.Datacenters) 'checked' }} onchange={{action 'change'}} />
           <span>{{dc.Name}}</span>
         </label>
       {{/each}}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/README.mdx b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
index 7da27e565..fe79e1800 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/README.mdx
+++ b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
@@ -150,7 +150,7 @@ use `-mask`, use `-icon` instead:
 >
 {{#each-in this.icons as |prop value|}}
 {{#if (and
-    (not (contains prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
+    (not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
     (not (string-includes prop '-24'))
   )
 }}
diff --git a/ui/packages/consul-ui/app/templates/application.hbs b/ui/packages/consul-ui/app/templates/application.hbs
index 7932cb0bd..feace296f 100644
--- a/ui/packages/consul-ui/app/templates/application.hbs
+++ b/ui/packages/consul-ui/app/templates/application.hbs
@@ -28,7 +28,7 @@ as |route|>
   @src={{uri 'settings://consul:theme'}}
 as |source|>
 {{#each-in source.data as |key value|}}
-  {{#if (and value (contains key (array "color-scheme" "contrast")))}}
+  {{#if (and value (includes key (array "color-scheme" "contrast")))}}
     {{document-attrs class=(concat 'prefers-' key '-' value)}}
   {{/if}}
 {{/each-in}}
diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
index 6c950a255..2c4e99d4b 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
@@ -63,7 +63,7 @@ as |nspace dc items topology|}}
                     class="topology-metrics-notice"
                     id={{details.id}}
                     data-test-notice={{prop}}
-                    @type={{if (contains prop (array 'filtered-by-acls' 'no-dependencies'))
+                    @type={{if (includes prop (array 'filtered-by-acls' 'no-dependencies'))
                       'info'
                       'warning'
                     }}
diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json
index bd61e6a91..515398314 100644
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@@ -113,7 +113,7 @@
     "ember-cli-yadda": "^0.6.0",
     "ember-collection": "^1.0.0-alpha.9",
     "ember-compatibility-helpers": "^1.2.5",
-    "ember-composable-helpers": "~4.0.0",
+    "ember-composable-helpers": "^5.0.0",
     "ember-data": "~3.20.4",
     "ember-data-model-fragments": "5.0.0-beta.0",
     "ember-decorators": "^6.1.1",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index bf5329450..39b3974a4 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -6402,7 +6402,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0, em
   resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.1.tgz#5016b80cdef37036c4282eef2d863e1d73576879"
   integrity sha512-sKvOiPNHr5F/60NLd7SFzMpYPte/nnGkq/tMIfXejfKHIhaiIkYFqX8Z9UFTKWLLn+V7NOaby6niNPZUdvKCRw==
 
-ember-cli-babel@7, ember-cli-babel@^7.0.0, ember-cli-babel@^7.1.3, ember-cli-babel@^7.10.0, ember-cli-babel@^7.11.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.0, ember-cli-babel@^7.17.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.20.0, ember-cli-babel@^7.20.5, ember-cli-babel@^7.21.0, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.7.3, ember-cli-babel@^7.8.0:
+ember-cli-babel@7, ember-cli-babel@^7.0.0, ember-cli-babel@^7.1.3, ember-cli-babel@^7.10.0, ember-cli-babel@^7.11.0, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.0, ember-cli-babel@^7.17.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.20.0, ember-cli-babel@^7.20.5, ember-cli-babel@^7.21.0, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.7.3, ember-cli-babel@^7.8.0:
   version "7.26.1"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.26.1.tgz#d3f06bd9aec8aac9197c5ff4d0b87ff1e4f0d62a"
   integrity sha512-WEWP3hJSe9CWL22gEWQ+Y3uKMGk1vLoIREUQfJNKrgUUh3l49bnfAamh3ywcAQz31IgzvkLPO8ZTXO4rxnuP4Q==
@@ -6454,7 +6454,7 @@ ember-cli-babel@^6.0.0, ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.11.0,
     ember-cli-version-checker "^2.1.2"
     semver "^5.5.0"
 
-ember-cli-babel@^7.26.5:
+ember-cli-babel@^7.26.3, ember-cli-babel@^7.26.5:
   version "7.26.11"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.26.11.tgz#50da0fe4dcd99aada499843940fec75076249a9f"
   integrity sha512-JJYeYjiz/JTn34q7F5DSOjkkZqy8qwFOOxXfE6pe9yEJqWGu4qErKxlz8I22JoVEQ/aBUO+OcKTpmctvykM9YA==
@@ -7022,14 +7022,14 @@ ember-compatibility-helpers@^1.2.5:
     fs-extra "^9.1.0"
     semver "^5.4.1"
 
-ember-composable-helpers@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/ember-composable-helpers/-/ember-composable-helpers-4.0.0.tgz#856cf4d86f2245feeb69ae1684e5a58ec742fcca"
-  integrity sha512-SF/mrLEoB0W7Mf+G2ye13K1I9IgkUaeFaWDVDTRzSAX7xmjBiPepLsqZvNJ1WcXimFTodGffku4AbQ2D0t+/2Q==
+ember-composable-helpers@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ember-composable-helpers/-/ember-composable-helpers-5.0.0.tgz#055bab3a3e234ab2917499b1465e968c253ca885"
+  integrity sha512-gyUrjiSju4QwNrsCLbBpP0FL6VDFZaELNW7Kbcp60xXhjvNjncYgzm4zzYXhT+i1lLA6WEgRZ3lOGgyBORYD0w==
   dependencies:
     "@babel/core" "^7.0.0"
     broccoli-funnel "2.0.1"
-    ember-cli-babel "^7.11.1"
+    ember-cli-babel "^7.26.3"
     resolve "^1.10.0"
 
 ember-concurrency-decorators@^2.0.0: