UX: show a message when more than 30 site settings matches the current filter

UX: show the counts when displaying only overridden settings
UX: show 30+ count when more than 30 site settings matches the current filter

app/assets/javascripts/admin/controllers/admin-site-settings-category.js.es6

@@ -1,16 +1,16 @@
+import computed from "ember-addons/ember-computed-decorators";
+
 export default Ember.Controller.extend({
   categoryNameKey: null,
   adminSiteSettings: Ember.inject.controller(),
 
-  filteredContent: function() {
-    if (!this.get('categoryNameKey')) { return []; }
-
-    const category = (this.get('adminSiteSettings.model') || []).findBy('nameKey', this.get('categoryNameKey'));
-    if (category) {
-      return category.siteSettings;
-    } else {
-      return [];
-    }
-  }.property('adminSiteSettings.model', 'categoryNameKey')
+  @computed("adminSiteSettings.model", "categoryNameKey")
+  category(categories, nameKey) {
+    return (categories || []).findBy("nameKey", nameKey);
+  },
 
+  @computed("category")
+  filteredContent(category) {
+    return category ? category.siteSettings : [];
+  }
 });

app/assets/javascripts/admin/controllers/admin-site-settings.js.es6

@@ -3,7 +3,6 @@ import debounce from 'discourse/lib/debounce';
 export default Ember.Controller.extend({
   filter: null,
   onlyOverridden: false,
-  filtered: Ember.computed.notEmpty('filter'),
 
   filterContentNow(category) {
     // If we have no content, don't bother filtering anything
@@ -14,9 +13,9 @@ export default Ember.Controller.extend({
       filter = this.get('filter').toLowerCase();
     }
 
-    if ((filter === undefined || filter.length < 1) && !this.get('onlyOverridden')) {
+    if ((!filter || 0 === filter.length) && !this.get('onlyOverridden')) {
       this.set('model', this.get('allSiteSettings'));
-      this.transitionToRoute("adminSiteSettings");
+      this.transitionToRoute('adminSiteSettings');
       return;
     }
 
@@ -28,11 +27,11 @@ export default Ember.Controller.extend({
       const siteSettings = settingsCategory.siteSettings.filter(item => {
         if (this.get('onlyOverridden') && !item.get('overridden')) return false;
         if (filter) {
-          if (item.get('setting').toLowerCase().indexOf(filter) > -1) return true;
-          if (item.get('setting').toLowerCase().replace(/_/g, ' ').indexOf(filter) > -1) return true;
-          if (item.get('description').toLowerCase().indexOf(filter) > -1) return true;
-          if ((item.get('value') || '').toLowerCase().indexOf(filter) > -1) return true;
-          return false;
+          const setting = item.get('setting').toLowerCase();
+          return setting.includes(filter) ||
+                 setting.replace(/_/g, ' ').includes(filter) ||
+                 item.get('description').toLowerCase().includes(filter) ||
+                 (item.get('value') || '').toLowerCase().includes(filter);
         } else {
           return true;
         }
@@ -49,15 +48,16 @@ export default Ember.Controller.extend({
     });
 
     all.siteSettings.pushObjects(matches.slice(0, 30));
-    all.count = matches.length;
+    all.hasMore = matches.length > 30;
+    all.count = all.hasMore ? '30+' : matches.length;
 
     this.set('model', matchesGroupedByCategory);
-    this.transitionToRoute("adminSiteSettingsCategory", category || "all_results");
+    this.transitionToRoute('adminSiteSettingsCategory', category || 'all_results');
   },
 
   filterContent: debounce(function() {
-    if (this.get("_skipBounce")) {
-      this.set("_skipBounce", false);
+    if (this.get('_skipBounce')) {
+      this.set('_skipBounce', false);
     } else {
       this.filterContentNow();
     }

app/assets/javascripts/admin/templates/site-settings-category.hbs

@@ -3,6 +3,9 @@
     {{#each filteredContent as |setting|}}
       {{site-setting setting=setting}}
     {{/each}}
+    {{#if category.hasMore}}
+      <p class="warning">{{i18n 'admin.site_settings.more_than_30_results'}}</p>
+    {{/if}}
   {{/d-section}}
 {{else}}
   <br/>

app/assets/javascripts/admin/templates/site-settings.hbs

@@ -18,9 +18,7 @@
       <li class="{{category.nameKey}}">
         {{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}
           {{category.name}}
-          {{#if filtered}}
-            {{#if category.count}}<span class="count">({{category.count}})</span>{{/if}}
-          {{/if}}
+          {{#if category.count}}<span class="count">({{category.count}})</span>{{/if}}
         {{/link-to}}
       </li>
     {{/each}}

app/assets/stylesheets/common/admin/admin_base.scss

@@ -578,6 +578,10 @@ $mobile-breakpoint: 700px;
       background-color: $highlight-medium;
     }
   }
+
+  .warning {
+    color: $danger;
+  }
 }
 
 section.details {
@@ -856,7 +860,7 @@ section.details {
 
 .version-checks {
   display: flex;
-  flex-wrap: wrap; 
+  flex-wrap: wrap;
 
   h2 {
     flex: 1 1 100%;
@@ -879,7 +883,7 @@ section.details {
     margin: .25em 0 1em 0;
     @media screen and (max-width: 650px) {
        margin: 0;
-    }      
+    }
     tr {
       border: none;
     }
@@ -901,13 +905,13 @@ section.details {
     font-weight: bold;
     margin: 0 0 1em 0;
     padding-right: 20px;
-    flex: 1 1 33.33%; 
+    flex: 1 1 33.33%;
     h3 {
       flex: 1 0 auto;
       white-space: nowrap;
     }
     h4 {
-      font-size: $font-down-2; 
+      font-size: $font-down-2;
       margin-bottom: 0;
     }
   }
@@ -917,8 +921,8 @@ section.details {
     align-items: center;
     margin: 0 0 1em 0;
     flex: 1 1 33.33%;
-    box-sizing: border-box;    
-    padding-right: 20px; 
+    box-sizing: border-box;
+    padding-right: 20px;
     min-width: 250px;
     @include small-width {
       max-width: unset;
@@ -1063,7 +1067,7 @@ table.api-keys {
   }
 
   &.detected-problems {
-    display: flex;    
+    display: flex;
     margin-bottom: 30px;
 
     .look-here {

config/locales/client.en.yml

@@ -3749,6 +3749,7 @@ en:
       site_settings:
         title: 'Settings'
         no_results: "No results found."
+        more_than_30_results: "There are more than 30 results. Please refine your search or select a category."
         clear_filter: "Clear"
         add_url: "add URL"
         add_host: "add host"