blob: b4725453fe49f5522802ff565378ad3dc7700581 [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6
7import {connectStore} from 'reducers/base.js';
8import * as issueV0 from 'reducers/issueV0.js';
9import * as userV0 from 'reducers/userV0.js';
10import {arrayToEnglish} from 'shared/helpers.js';
11
12
13/**
14 * `<mr-restriction-indicator>`
15 *
16 * Display for showing whether an issue is restricted.
17 *
18 */
19export class MrRestrictionIndicator extends connectStore(LitElement) {
20 /** @override */
21 static get styles() {
22 return css`
23 :host {
24 width: 100%;
25 margin-top: 0;
26 background-color: var(--monorail-metadata-toggled-bg);
27 border-bottom: var(--chops-normal-border);
28 font-size: var(--chops-main-font-size);
29 padding: 0.25em 8px;
30 box-sizing: border-box;
31 display: flex;
32 flex-direction: row;
33 justify-content: flex-start;
34 align-items: center;
35 }
36 :host([showWarning]) {
37 background-color: var(--chops-red-700);
38 color: var(--chops-white);
39 font-weight: bold;
40 }
41 :host([showWarning]) i {
42 color: var(--chops-white);
43 }
44 :host([hidden]) {
45 display: none;
46 }
47 i.material-icons {
48 color: var(--chops-primary-icon-color);
49 font-size: var(--chops-icon-font-size);
50 }
51 .lock-icon {
52 margin-right: 4px;
53 }
54 i.warning-icon {
55 margin-right: 4px;
56 }
57 i[hidden] {
58 display: none;
59 }
60 `;
61 }
62
63 /** @override */
64 render() {
65 return html`
66 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
67 rel="stylesheet">
68 <i
69 class="lock-icon material-icons"
70 icon="lock"
71 ?hidden=${!this._restrictionText}
72 title=${this._restrictionText}
73 >
74 lock
75 </i>
76 <i
77 class="warning-icon material-icons"
78 icon="warning"
79 ?hidden=${!this.showWarning}
80 title=${this._warningText}
81 >
82 warning
83 </i>
84 ${this._combinedText}
85 `;
86 }
87
88 /** @override */
89 static get properties() {
90 return {
91 restrictions: Object,
92 prefs: Object,
93 hidden: {
94 type: Boolean,
95 reflect: true,
96 },
97 showWarning: {
98 type: Boolean,
99 reflect: true,
100 },
101 };
102 }
103
104 /** @override */
105 constructor() {
106 super();
107
108 this.hidden = true;
109 this.showWarning = false;
110 this.prefs = {};
111 }
112
113 /** @override */
114 stateChanged(state) {
115 this.restrictions = issueV0.restrictions(state);
116 this.prefs = userV0.prefs(state);
117 }
118
119 /** @override */
120 update(changedProperties) {
121 if (changedProperties.has('prefs') ||
122 changedProperties.has('restrictions')) {
123 this.hidden = !this._combinedText;
124
125 this.showWarning = !!this._warningText;
126 }
127
128 super.update(changedProperties);
129 }
130
131 /**
132 * Checks if the user should see a corp mode warning about an issue being
133 * public.
134 * @return {string}
135 */
136 get _warningText() {
137 const {restrictions, prefs} = this;
138 if (!prefs) return '';
139 if (!restrictions) return '';
140 if ('view' in restrictions && restrictions['view'].length) return '';
141 if (prefs.get('public_issue_notice')) {
142 return 'Public issue: Please do not post confidential information.';
143 }
144 return '';
145 }
146
147 /**
148 * Gets either corp mode or restricted issue text depending on which
149 * is relevant to the issue.
150 * @return {string}
151 */
152 get _combinedText() {
153 if (this._warningText) return this._warningText;
154 return this._restrictionText;
155 }
156
157 /**
158 * Computes the text to show users on a restricted issue.
159 * @return {string}
160 */
161 get _restrictionText() {
162 const {restrictions} = this;
163 if (!restrictions) return;
164 if ('view' in restrictions && restrictions['view'].length) {
165 return `Only users with ${arrayToEnglish(restrictions['view'])
166 } permission or issue reporter may view.`;
167 } else if ('edit' in restrictions && restrictions['edit'].length) {
168 return `Only users with ${arrayToEnglish(restrictions['edit'])
169 } permission may edit.`;
170 } else if ('comment' in restrictions && restrictions['comment'].length) {
171 return `Only users with ${arrayToEnglish(restrictions['comment'])
172 } permission or issue reporter may comment.`;
173 }
174 return '';
175 }
176}
177
178customElements.define('mr-restriction-indicator', MrRestrictionIndicator);