Suffixing field names in auto completion with colon (':'). (#7489) (#…

…7493)

* Suffixing field names with colon.

* Adding test cases.

Co-authored-by: Dennis Oelkers <dennis@graylog.com>

graylog2-web-interface/src/views/components/searchbar/completions/FieldNameCompletion.js

@@ -11,8 +11,8 @@ import type { Completer } from '../SearchBarAutocompletions';
 const _fieldResult = (field: FieldTypeMapping, score: number = 1): CompletionResult => {
   const { name, type } = field;
   return {
-    name: name,
-    value: name,
+    name,
+    value: `${name}:`,
     score,
     meta: type.type,
   };

graylog2-web-interface/src/views/components/searchbar/completions/FieldNameCompletion.test.jsx

@@ -0,0 +1,49 @@
+// @flow strict
+import { StoreMock as MockStore } from 'helpers/mocking';
+import asMock from 'helpers/mocking/AsMock';
+import { FieldTypesStore } from 'views/stores/FieldTypesStore';
+
+import FieldNameCompletion from './FieldNameCompletion';
+
+jest.mock('views/stores/FieldTypesStore', () => ({
+  FieldTypesStore: MockStore(
+    'listen',
+    ['getInitialState', jest.fn(() => ({ all: [], queryFields: { get: () => [] } }))],
+  ),
+}));
+
+const _createField = name => ({ name, type: { type: 'string' } });
+const dummyFields = ['source', 'message', 'timestamp'].map(_createField);
+
+const _createQueryFields = fields => ({ get: () => fields });
+const _createFieldTypesStoreState = fields => ({ all: fields, queryFields: _createQueryFields(fields) });
+
+describe('FieldNameCompletion', () => {
+  beforeEach(() => {
+    asMock(FieldTypesStore.getInitialState).mockReturnValue(_createFieldTypesStoreState(dummyFields));
+  });
+  it('returns empty list if inputs are empty', () => {
+    asMock(FieldTypesStore.getInitialState).mockReturnValue(_createFieldTypesStoreState([]));
+
+    const completer = new FieldNameCompletion();
+    expect(completer.getCompletions(null, null, '')).toEqual([]);
+  });
+
+  it('returns matching fields if prefix is present in one field name', () => {
+    const completer = new FieldNameCompletion();
+    expect(completer.getCompletions(null, null, 'mess').map(result => result.name))
+      .toEqual(['message']);
+  });
+
+  it('returns matching fields if prefix is present in at least one field name', () => {
+    const completer = new FieldNameCompletion();
+    expect(completer.getCompletions(null, null, 'e').map(result => result.name))
+      .toEqual(['source', 'message', 'timestamp']);
+  });
+
+  it('suffixes matching fields with colon', () => {
+    const completer = new FieldNameCompletion();
+    expect(completer.getCompletions(null, null, 'e').map(result => result.value))
+      .toEqual(['source:', 'message:', 'timestamp:']);
+  });
+});