Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-autocomplete/mr-autocomplete.js b/static_src/elements/framework/mr-autocomplete/mr-autocomplete.js
new file mode 100644
index 0000000..c37eb42
--- /dev/null
+++ b/static_src/elements/framework/mr-autocomplete/mr-autocomplete.js
@@ -0,0 +1,105 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {ChopsAutocomplete} from
+ 'elements/chops/chops-autocomplete/chops-autocomplete';
+import {connectStore} from 'reducers/base.js';
+import * as userV0 from 'reducers/userV0.js';
+import * as projectV0 from 'reducers/projectV0.js';
+import {arrayDifference} from 'shared/helpers.js';
+import {userRefsToDisplayNames} from 'shared/convertersV0.js';
+
+
+/**
+ * `<mr-autocomplete>` displays an autocomplete input.
+ *
+ */
+export class MrAutocomplete extends connectStore(ChopsAutocomplete) {
+ /** @override */
+ static get properties() {
+ return {
+ ...ChopsAutocomplete.properties,
+ /**
+ * String for the name of autocomplete vocabulary used.
+ * Valid values:
+ * - 'project': Names of projects available to the current user.
+ * - 'member': All members in the current project a user is viewing.
+ * - 'owner': Similar to member, except with groups excluded.
+ *
+ * TODO(zhangtiff): Implement the following stores.
+ * - 'component': All components in the current project.
+ * - 'label': Well-known labels in the current project.
+ */
+ vocabularyName: {type: String},
+ /**
+ * Object where the keys are 'type' values and each value is an object
+ * with the format {strings, docDict, replacer}.
+ */
+ vocabularies: {type: Object},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+ this.vocabularyName = '';
+ this.vocabularies = {};
+ }
+
+ /** @override */
+ stateChanged(state) {
+ const visibleMembers = projectV0.viewedVisibleMembers(state);
+ const userProjects = userV0.projects(state);
+ this.vocabularies = {
+ 'project': this._setupProjectVocabulary(userProjects),
+ 'member': this._setupMemberVocabulary(visibleMembers),
+ 'owner': this._setupOwnerVocabulary(visibleMembers),
+ };
+ }
+
+ // TODO(zhangtiff): Move this logic into selectors to prevent computing
+ // vocabularies for every single instance of autocomplete.
+ _setupProjectVocabulary(userProjects) {
+ const {ownerOf = [], memberOf = [], contributorTo = []} = userProjects;
+ const strings = [...ownerOf, ...memberOf, ...contributorTo];
+ return {strings};
+ }
+
+ _setupMemberVocabulary(visibleMembers) {
+ const {userRefs = []} = visibleMembers;
+ return {strings: userRefsToDisplayNames(userRefs)};
+ }
+
+ _setupOwnerVocabulary(visibleMembers) {
+ const {userRefs = [], groupRefs = []} = visibleMembers;
+ const groups = userRefsToDisplayNames(groupRefs);
+ const users = userRefsToDisplayNames(userRefs);
+
+ // Remove groups from the list of all members.
+ const owners = arrayDifference(users, groups);
+ return {strings: owners};
+ }
+
+ /** @override */
+ update(changedProperties) {
+ if (changedProperties.has('vocabularyName') ||
+ changedProperties.has('vocabularies')) {
+ if (this.vocabularyName in this.vocabularies) {
+ const props = this.vocabularies[this.vocabularyName];
+
+ this.strings = props.strings || [];
+ this.docDict = props.docDict || {};
+ this.replacer = props.replacer;
+ } else {
+ // Clear autocomplete if there's no data for it.
+ this.strings = [];
+ this.docDict = {};
+ this.replacer = null;
+ }
+ }
+
+ super.update(changedProperties);
+ }
+}
+customElements.define('mr-autocomplete', MrAutocomplete);
diff --git a/static_src/elements/framework/mr-autocomplete/mr-autocomplete.test.js b/static_src/elements/framework/mr-autocomplete/mr-autocomplete.test.js
new file mode 100644
index 0000000..0c4e3ae
--- /dev/null
+++ b/static_src/elements/framework/mr-autocomplete/mr-autocomplete.test.js
@@ -0,0 +1,86 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+import {MrAutocomplete} from './mr-autocomplete.js';
+
+let element;
+
+describe('mr-autocomplete', () => {
+ beforeEach(() => {
+ element = document.createElement('mr-autocomplete');
+ document.body.appendChild(element);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, MrAutocomplete);
+ });
+
+ it('sets properties based on vocabularies', async () => {
+ assert.deepEqual(element.strings, []);
+ assert.deepEqual(element.docDict, {});
+
+ element.vocabularies = {
+ 'project': {
+ 'strings': ['chromium', 'v8'],
+ 'docDict': {'chromium': 'move the web forward'},
+ },
+ };
+
+ element.vocabularyName = 'project';
+
+ await element.updateComplete;
+
+ assert.deepEqual(element.strings, ['chromium', 'v8']);
+ assert.deepEqual(element.docDict, {'chromium': 'move the web forward'});
+ });
+
+ it('_setupProjectVocabulary', () => {
+ assert.deepEqual(element._setupProjectVocabulary({}), {strings: []});
+
+ assert.deepEqual(element._setupProjectVocabulary({
+ ownerOf: ['chromium'],
+ memberOf: ['skia'],
+ contributorTo: ['v8'],
+ }), {strings: ['chromium', 'skia', 'v8']});
+ });
+
+ it('_setupMemberVocabulary', () => {
+ assert.deepEqual(element._setupMemberVocabulary({}), {strings: []});
+
+ assert.deepEqual(element._setupMemberVocabulary({
+ userRefs: [
+ {displayName: 'group@example.com', userId: '100'},
+ {displayName: 'test@example.com', userId: '123'},
+ {displayName: 'test2@example.com', userId: '543'},
+ ],
+ groupRefs: [
+ {displayName: 'group@example.com', userId: '100'},
+ ],
+ }), {strings:
+ ['group@example.com', 'test@example.com', 'test2@example.com'],
+ });
+ });
+
+ it('_setupOwnerVocabulary', () => {
+ assert.deepEqual(element._setupOwnerVocabulary({}), {strings: []});
+
+ assert.deepEqual(element._setupOwnerVocabulary({
+ userRefs: [
+ {displayName: 'group@example.com', userId: '100'},
+ {displayName: 'test@example.com', userId: '123'},
+ {displayName: 'test2@example.com', userId: '543'},
+ ],
+ groupRefs: [
+ {displayName: 'group@example.com', userId: '100'},
+ ],
+ }), {strings:
+ ['test@example.com', 'test2@example.com'],
+ });
+ });
+});