Move queries for selectors within the dropdowns

.changelog/19594.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: move nspace and partitions requests into their selector menus
+```

ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs

@@ -4,13 +4,6 @@
 }}
 
 {{#if (and (can "use nspaces") (can "choose nspaces"))}}
-  <DataSource
-    @src={{uri
-      "/${partition}/*/${dc}/namespaces"
-      (hash partition=@partition dc=@dc.Name)
-    }}
-    @onchange={{fn (optional @onchange)}}
-  />
   {{#let
     @list
     (if @nspace (hash Name=@nspace) (hash Name="default"))
@@ -34,15 +27,25 @@
         "components.hashicorp-consul.side-nav.nspaces.footer"
       }}
       data-test-nspace-menu
-      as |Dropdown item|
+      as |Selector|
     >
-      <Dropdown.Checkmark
-        @selected={{eq nspace.Name item.Name}}
+      <Selector.Data>
+        <DataSource
+          @src={{uri
+            "/${partition}/*/${dc}/namespaces"
+            (hash partition=@partition dc=@dc.Name)
+          }}
+          @loading="lazy"
+          @onchange={{fn (optional @onchange)}}
+        />
+      </Selector.Data>
+      <Selector.Dropdown.Checkmark
+        @selected={{eq nspace.Name Selector.item.Name}}
         @href={{href-to
           "dc.services.index"
           params=(hash
             partition=(if (gt @partition.length 0) @partition undefined)
-            nspace=item.Name
+            nspace=Selector.item.Name
             peer=undefined
             dc=@dc.Name
           )
@@ -50,8 +53,8 @@
         @isHrefExternal={{false}}
         data-test-nspace-item
       >
-        {{item.Name}}
-      </Dropdown.Checkmark>
+        {{Selector.item.Name}}
+      </Selector.Dropdown.Checkmark>
     </NavSelector>
   {{/let}}
 {{/if}}

ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs

@@ -10,10 +10,6 @@
   (can "choose partitions" dc=@dc)
   as |SNL partition isManaging canChoose|
 }}
-  <DataSource
-    @src={{uri "/*/*/${dc}/partitions" (hash dc=@dc.Name)}}
-    @onchange={{fn (optional @onchange)}}
-  />
   <SNL.Title class="consul-side-nav__selector-title">{{t
       "components.hashicorp-consul.side-nav.partitions.title"
     }}</SNL.Title>
@@ -32,24 +28,31 @@
     }}
     @disabled={{not canChoose}}
     data-test-datacenter-disclosure-menu
-    as |Dropdown item|
+    as |Selector|
   >
+    <Selector.Data>
+      <DataSource
+        @src={{uri "/*/*/${dc}/partitions" (hash dc=@dc.Name)}}
+        @loading="lazy"
+        @onchange={{fn (optional @onchange)}}
+      />
+    </Selector.Data>
     {{#if canChoose}}
-      <Dropdown.Checkmark
-        @selected={{eq partition.Name item.Name}}
+      <Selector.Dropdown.Checkmark
+        @selected={{eq partition.Name Selector.item.Name}}
         @href={{if
-          item.href
-          item.href
+          Selector.item.href
+          Selector.item.href
           (href-to
             "dc.services.index"
-            params=(hash partition=item.Name nspace=undefined peer=undefined dc=@dc.Name)
+            params=(hash partition=Selector.item.Name nspace=undefined peer=undefined dc=@dc.Name)
           )
         }}
         @isHrefExternal={{false}}
         data-test-partiton-item
       >
-        {{item.Name}}
-      </Dropdown.Checkmark>
+        {{Selector.item.Name}}
+      </Selector.Dropdown.Checkmark>
     {{/if}}
   </NavSelector>
 {{/let}}

ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs

@@ -16,14 +16,14 @@
       @description={{t "components.hashicorp-consul.side-nav.datacenters.description"}}
       class='consul-datacenter-selector'
       data-test-datacenter-menu
-      as |Dropdown item|
+      as |Selector|
     >
-      <Dropdown.Checkmark
-        @selected={{eq @dc.Name item.Name}}
+      <Selector.Dropdown.Checkmark
+        @selected={{eq @dc.Name Selector.item.Name}}
         @href={{href-to
           '.'
           params=(hash
-            dc=item.Name partition=undefined nspace=(if (gt @nspace.length 0) @nspace undefined)
+            dc=Selector.item.Name partition=undefined nspace=(if (gt @nspace.length 0) @nspace undefined)
           )
         }}
         @isHrefExternal={{false}}
@@ -31,20 +31,20 @@
         data-test-dc-item
       >
         <span class='consul-datacenter-selector__dc-name'>
-          {{item.Name}}
+          {{Selector.item.Name}}
 
-          {{#if (or item.Local item.Primary)}}
+          {{#if (or Selector.item.Local Selector.item.Primary)}}
             <span class='consul-datacenter-selector__badges'>
-              {{#if item.Primary}}
+              {{#if Selector.item.Primary}}
                 <Hds::Badge @text='Primary' />
               {{/if}}
-              {{#if item.Local}}
+              {{#if Selector.item.Local}}
                 <Hds::Badge @text='Local' />
               {{/if}}
             </span>
           {{/if}}
         </span>
-      </Dropdown.Checkmark>
+      </Selector.Dropdown.Checkmark>
     </NavSelector>
   {{else}}
     <SNL.Item class='consul-side-nav__datacenter' data-test-datacenter-single>

ui/packages/consul-ui/app/components/nav-selector/generic.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+{{yield}}

ui/packages/consul-ui/app/components/nav-selector/index.hbs

@@ -20,6 +20,7 @@
         disabled={{eq @disabled true}}
       />
       <DD.Header @hasDivider={{true}}>
+        {{yield (hash Data=(component 'nav-selector/generic'))}}
         {{#if @description}}
           <div class='consul-side-nav__selector-description'>
             <Hds::Text::Body @size='100' @color='faint'>{{@description}}</Hds::Text::Body>
@@ -37,7 +38,10 @@
         <DD.Description @text='No results' />
       {{else}}
         {{#each this.filteredItems as |item|}}
-          {{yield DD item}}
+          {{yield (hash
+            Dropdown=DD
+            item=item
+          )}}
         {{/each}}
       {{/if}}
       {{#if @footerLink}}