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);