Adds filtering to the KV listing page

ui-v2/app/controllers/dc/kv/folder.js

@@ -0,0 +1,2 @@
+import Controller from './index';
+export default Controller.extend();

ui-v2/app/controllers/dc/kv/index.js

@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { get } from '@ember/object';
+import WithFiltering from 'consul-ui/mixins/with-filtering';
+import rightTrim from 'consul-ui/utils/right-trim';
+export default Controller.extend(WithFiltering, {
+  queryParams: {
+    s: {
+      as: 'filter',
+      replace: true,
+    },
+  },
+  filter: function(item, { s = '' }) {
+    const key = rightTrim(get(item, 'Key'), '/')
+      .split('/')
+      .pop();
+    return key.toLowerCase().indexOf(s.toLowerCase()) !== -1;
+  },
+});

ui-v2/app/helpers/left-trim.js

@@ -1,7 +1,6 @@
 import { helper } from '@ember/component/helper';
+import leftTrim from 'consul-ui/utils/left-trim';
 
-export function leftTrim([str = '', search = ''], hash) {
-  return str.indexOf(search) === 0 ? str.substr(search.length) : str;
-}
-
-export default helper(leftTrim);
+export default helper(function([str = '', search = ''], hash) {
+  return leftTrim(str, search);
+});

ui-v2/app/helpers/right-trim.js

@@ -1,8 +1,7 @@
 import { helper } from '@ember/component/helper';
 
-export function rightTrim([str = '', search = ''], hash) {
-  const pos = str.length - search.length;
-  return str.indexOf(search) === pos ? str.substr(0, pos) : str;
-}
+import rightTrim from 'consul-ui/utils/right-trim';
 
-export default helper(rightTrim);
+export default helper(function([str = '', search = ''], hash) {
+  return rightTrim(str, search);
+});

ui-v2/app/routes/dc/kv/index.js

@@ -5,6 +5,12 @@ import { get } from '@ember/object';
 import WithKvActions from 'consul-ui/mixins/kv/with-actions';
 
 export default Route.extend(WithKvActions, {
+  queryParams: {
+    s: {
+      as: 'filter',
+      replace: true,
+    },
+  },
   repo: service('kv'),
   model: function(params) {
     const key = params.key || '/';

ui-v2/app/templates/dc/kv/index.hbs

@@ -18,6 +18,13 @@
             {{/if}}
         </h1>
     {{/block-slot}}
+    {{#block-slot 'toolbar'}}
+{{#if (gt items.length 0) }}
+      <form class="filter-bar">
+          {{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name"}}
+      </form>
+{{/if}}
+    {{/block-slot}}
     {{#block-slot 'actions'}}
 {{#if (not-eq parent.Key '/') }}
         <a href="{{href-to 'dc.kv.create' parent.Key}}" class="type-create">Create</a>
@@ -26,9 +33,9 @@
 {{/if}}
     {{/block-slot}}
     {{#block-slot 'content'}}
-{{#if (gt items.length 0)}}
+{{#if (gt filtered.length 0)}}
         {{#tabular-collection
-            items=(sort-by 'isFolder:desc' items) as |item index|
+            items=(sort-by 'isFolder:desc' filtered) as |item index|
         }}
             {{#block-slot 'header'}}
                 <th>Name</th>

ui-v2/app/utils/left-trim.js

@@ -0,0 +1,3 @@
+export default function leftTrim(str = '', search = '') {
+  return str.indexOf(search) === 0 ? str.substr(search.length) : str;
+}

ui-v2/app/utils/right-trim.js

@@ -0,0 +1,4 @@
+export default function rightTrim(str = '', search = '') {
+  const pos = str.length - search.length;
+  return str.lastIndexOf(search) === pos ? str.substr(0, pos) : str;
+}

ui-v2/tests/integration/helpers/left-trim-test.js

@@ -1,4 +1,4 @@
-import { moduleForComponent, skip } from 'ember-qunit';
+import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('left trim', 'helper:left-trim', {
@@ -6,7 +6,7 @@ moduleForComponent('left trim', 'helper:left-trim', {
 });
 
 // Replace this with your real tests.
-skip('it renders', function(assert) {
+test('it renders', function(assert) {
   this.set('inputValue', '1234');
 
   this.render(hbs`{{left-trim inputValue}}`);

ui-v2/tests/integration/helpers/right-trim-test.js

@@ -1,4 +1,4 @@
-import { moduleForComponent, skip } from 'ember-qunit';
+import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('right-trim', 'helper:right-trim', {
@@ -6,7 +6,7 @@ moduleForComponent('right-trim', 'helper:right-trim', {
 });
 
 // Replace this with your real tests.
-skip('it renders', function(assert) {
+test('it renders', function(assert) {
   this.set('inputValue', '1234');
 
   this.render(hbs`{{right-trim inputValue}}`);

ui-v2/tests/unit/controllers/dc/kv/folder-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:dc/kv/folder', 'Unit | Controller | dc/kv/folder', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});

ui-v2/tests/unit/controllers/dc/kv/index-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:dc/kv/index', 'Unit | Controller | dc/kv/index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});

ui-v2/tests/unit/utils/left-trim-test.js

@@ -0,0 +1,44 @@
+import { module } from 'ember-qunit';
+import test from 'ember-sinon-qunit/test-support/test';
+import leftTrim from 'consul-ui/utils/left-trim';
+module('Unit | Utility | left trim');
+
+test('it trims characters from the left hand side', function(assert) {
+  [
+    {
+      args: ['/a/folder/here', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: ['/a/folder/here', ''],
+      expected: '/a/folder/here',
+    },
+    {
+      args: ['a/folder/here', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: ['a/folder/here/', '/'],
+      expected: 'a/folder/here/',
+    },
+    {
+      args: [],
+      expected: '',
+    },
+    {
+      args: ['/a/folder/here', '/a/folder'],
+      expected: '/here',
+    },
+    {
+      args: ['/a/folder/here/', '/a/folder/here'],
+      expected: '/',
+    },
+    {
+      args: ['/a/folder/here/', '/a/folder/here/'],
+      expected: '',
+    },
+  ].forEach(function(item) {
+    const actual = leftTrim(...item.args);
+    assert.equal(actual, item.expected);
+  });
+});

ui-v2/tests/unit/utils/right-trim-test.js

@@ -0,0 +1,44 @@
+import { module } from 'ember-qunit';
+import test from 'ember-sinon-qunit/test-support/test';
+import rightTrim from 'consul-ui/utils/right-trim';
+module('Unit | Utility | right trim');
+
+test('it trims characters from the right hand side', function(assert) {
+  [
+    {
+      args: ['/a/folder/here/', '/'],
+      expected: '/a/folder/here',
+    },
+    {
+      args: ['/a/folder/here', ''],
+      expected: '/a/folder/here',
+    },
+    {
+      args: ['a/folder/here', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: ['a/folder/here/', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: [],
+      expected: '',
+    },
+    {
+      args: ['/a/folder/here', '/folder/here'],
+      expected: '/a',
+    },
+    {
+      args: ['/a/folder/here', 'a/folder/here'],
+      expected: '/',
+    },
+    {
+      args: ['/a/folder/here/', '/a/folder/here/'],
+      expected: '',
+    },
+  ].forEach(function(item) {
+    const actual = rightTrim(...item.args);
+    assert.equal(actual, item.expected);
+  });
+});