Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/help/mr-click-throughs/mr-click-throughs.js b/static_src/elements/help/mr-click-throughs/mr-click-throughs.js
new file mode 100644
index 0000000..8b142f0
--- /dev/null
+++ b/static_src/elements/help/mr-click-throughs/mr-click-throughs.js
@@ -0,0 +1,185 @@
+// 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 {LitElement, html, css} from 'lit-element';
+import {store, connectStore} from 'reducers/base.js';
+import * as userV0 from 'reducers/userV0.js';
+import 'elements/chops/chops-button/chops-button.js';
+import 'elements/chops/chops-dialog/chops-dialog.js';
+import {SHARED_STYLES} from 'shared/shared-styles.js';
+
+/**
+ * `<mr-click-throughs>`
+ *
+ * An element that displays help dialogs that the user is required
+ * to click through before they can participate in the community.
+ *
+ */
+export class MrClickThroughs extends connectStore(LitElement) {
+ /** @override */
+ constructor() {
+ super();
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ userDisplayName: {type: String},
+ prefs: {type: Object},
+ prefsLoaded: {type: Boolean},
+ };
+ }
+
+ /** @override */
+ static get styles() {
+ return [SHARED_STYLES, css`
+ :host {
+ --chops-dialog-max-width: 800px;
+ }
+ h2 {
+ margin-top: 0;
+ display: flex;
+ justify-content: space-between;
+ font-weight: normal;
+ border-bottom: 2px solid white;
+ font-size: var(--chops-large-font-size);
+ padding-bottom: 0.5em;
+ }
+ .edit-actions {
+ width: 100%;
+ margin: 0.5em 0;
+ text-align: right;
+ }
+ `];
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <chops-dialog
+ id="privacyDialog"
+ ?opened=${this._showPrivacyDialog}
+ forced
+ >
+ <h2>Email display settings</h2>
+
+ <p>There is a <a href="/hosting/settings">setting</a> to control how
+ your email address appears on comments and issues that you post.</p>
+
+ <p>Project members will always see your full email address. By
+ default, other users who visit the site will see an
+ abbreviated version of your email address.</p>
+
+ <p>If you do not wish your email address to be shared, there
+ are other ways to <a
+ href="http://www.chromium.org/getting-involved">get
+ involved</a> in the community. To report a problem when using
+ the Chrome browser, you may use the "Report an issue..." item
+ on the "Help" menu.</p>
+
+
+ <div class="edit-actions">
+ <chops-button @click=${this.dismissPrivacyDialog}>
+ Got it
+ </chops-button>
+ </div>
+ </chops-dialog>
+
+ <chops-dialog
+ id="corpModeDialog"
+ ?opened=${this._showCorpModeDialog}
+ forced
+ >
+ <h2>This site hosts public issues in public projects</h2>
+
+ <p>Unlike our internal issue tracker, this site makes most
+ issues public, unless the issue is labeled with a Restrict-View-*
+ label, such as Restrict-View-Google.</p>
+
+ <p>Components are not used for permissions. And, regardless of
+ restriction labels, the issue reporter, owner,
+ and Cc'd users may always view the issue.</p>
+
+ ${this.prefs.get('restrict_new_issues') ? html`
+ <p>Your account is a member of a user group that indicates that
+ you may have access to confidential information. To help prevent
+ leaks when working in public projects, the issue tracker UX has
+ been altered for you:</p>
+
+ <ul>
+ <li>When you open a new issue, the form will initially have a
+ Restrict-View-Google label. If you know that your issue does
+ not contain confidential information, please remove the label.</li>
+ <li>When you view public issues, a red banner is shown to remind
+ you that any comments or attachments you post will be public.</li>
+ </ul>
+ ` : ''}
+
+ <div class="edit-actions">
+ <chops-button @click=${this.dismissCorpModeDialog}>
+ Got it
+ </chops-button>
+ </div>
+ </chops-dialog>
+ `;
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this.prefs = userV0.prefs(state);
+ this.prefsLoaded = userV0.currentUser(state).prefsLoaded;
+ }
+
+ /**
+ * Checks whether the user should see a dialogue telling them about
+ * Monorail's privacy settings.
+ */
+ get _showPrivacyDialog() {
+ if (!this.userDisplayName) return false;
+ if (!this.prefsLoaded) return false;
+ if (!this.prefs) return false;
+ if (this.prefs.get('privacy_click_through')) return false;
+ return true;
+ }
+
+ /**
+ * Computes whether the user should see the dialog telling them about corp mode.
+ */
+ get _showCorpModeDialog() {
+ // TODO(jrobbins): Replace this with a API call that gets the project.
+ if (window.CS_env.projectIsRestricted) return false;
+ if (!this.userDisplayName) return false;
+ if (!this.prefsLoaded) return false;
+ if (!this.prefs) return false;
+ if (!this.prefs.get('public_issue_notice')) return false;
+ if (this.prefs.get('corp_mode_click_through')) return false;
+ return true;
+ }
+
+ /**
+ * Event handler for dismissing Monorail's privacy notice.
+ */
+ dismissPrivacyDialog() {
+ this.dismissCue('privacy_click_through');
+ }
+
+ /**
+ * Event handler for dismissing corp mode.
+ */
+ dismissCorpModeDialog() {
+ this.dismissCue('corp_mode_click_through');
+ }
+
+ /**
+ * Dispatches a Redux action to tell Monorail's backend that the user
+ * clicked through a particular cue.
+ * @param {string} pref The pref to set to true.
+ */
+ dismissCue(pref) {
+ const newPrefs = [{name: pref, value: 'true'}];
+ store.dispatch(userV0.setPrefs(newPrefs, !!this.userDisplayName));
+ }
+}
+
+customElements.define('mr-click-throughs', MrClickThroughs);