Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/issue-detail/mr-issue-page/mr-restriction-indicator.js b/static_src/elements/issue-detail/mr-issue-page/mr-restriction-indicator.js
new file mode 100644
index 0000000..af558a4
--- /dev/null
+++ b/static_src/elements/issue-detail/mr-issue-page/mr-restriction-indicator.js
@@ -0,0 +1,178 @@
+// 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 {connectStore} from 'reducers/base.js';
+import * as issueV0 from 'reducers/issueV0.js';
+import * as userV0 from 'reducers/userV0.js';
+import {arrayToEnglish} from 'shared/helpers.js';
+
+
+/**
+ * `<mr-restriction-indicator>`
+ *
+ * Display for showing whether an issue is restricted.
+ *
+ */
+export class MrRestrictionIndicator extends connectStore(LitElement) {
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ width: 100%;
+ margin-top: 0;
+ background-color: var(--monorail-metadata-toggled-bg);
+ border-bottom: var(--chops-normal-border);
+ font-size: var(--chops-main-font-size);
+ padding: 0.25em 8px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ }
+ :host([showWarning]) {
+ background-color: var(--chops-red-700);
+ color: var(--chops-white);
+ font-weight: bold;
+ }
+ :host([showWarning]) i {
+ color: var(--chops-white);
+ }
+ :host([hidden]) {
+ display: none;
+ }
+ i.material-icons {
+ color: var(--chops-primary-icon-color);
+ font-size: var(--chops-icon-font-size);
+ }
+ .lock-icon {
+ margin-right: 4px;
+ }
+ i.warning-icon {
+ margin-right: 4px;
+ }
+ i[hidden] {
+ display: none;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ rel="stylesheet">
+ <i
+ class="lock-icon material-icons"
+ icon="lock"
+ ?hidden=${!this._restrictionText}
+ title=${this._restrictionText}
+ >
+ lock
+ </i>
+ <i
+ class="warning-icon material-icons"
+ icon="warning"
+ ?hidden=${!this.showWarning}
+ title=${this._warningText}
+ >
+ warning
+ </i>
+ ${this._combinedText}
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ restrictions: Object,
+ prefs: Object,
+ hidden: {
+ type: Boolean,
+ reflect: true,
+ },
+ showWarning: {
+ type: Boolean,
+ reflect: true,
+ },
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+
+ this.hidden = true;
+ this.showWarning = false;
+ this.prefs = {};
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this.restrictions = issueV0.restrictions(state);
+ this.prefs = userV0.prefs(state);
+ }
+
+ /** @override */
+ update(changedProperties) {
+ if (changedProperties.has('prefs') ||
+ changedProperties.has('restrictions')) {
+ this.hidden = !this._combinedText;
+
+ this.showWarning = !!this._warningText;
+ }
+
+ super.update(changedProperties);
+ }
+
+ /**
+ * Checks if the user should see a corp mode warning about an issue being
+ * public.
+ * @return {string}
+ */
+ get _warningText() {
+ const {restrictions, prefs} = this;
+ if (!prefs) return '';
+ if (!restrictions) return '';
+ if ('view' in restrictions && restrictions['view'].length) return '';
+ if (prefs.get('public_issue_notice')) {
+ return 'Public issue: Please do not post confidential information.';
+ }
+ return '';
+ }
+
+ /**
+ * Gets either corp mode or restricted issue text depending on which
+ * is relevant to the issue.
+ * @return {string}
+ */
+ get _combinedText() {
+ if (this._warningText) return this._warningText;
+ return this._restrictionText;
+ }
+
+ /**
+ * Computes the text to show users on a restricted issue.
+ * @return {string}
+ */
+ get _restrictionText() {
+ const {restrictions} = this;
+ if (!restrictions) return;
+ if ('view' in restrictions && restrictions['view'].length) {
+ return `Only users with ${arrayToEnglish(restrictions['view'])
+ } permission or issue reporter may view.`;
+ } else if ('edit' in restrictions && restrictions['edit'].length) {
+ return `Only users with ${arrayToEnglish(restrictions['edit'])
+ } permission may edit.`;
+ } else if ('comment' in restrictions && restrictions['comment'].length) {
+ return `Only users with ${arrayToEnglish(restrictions['comment'])
+ } permission or issue reporter may comment.`;
+ }
+ return '';
+ }
+}
+
+customElements.define('mr-restriction-indicator', MrRestrictionIndicator);