static_src/elements/issue-detail/mr-issue-page/mr-restriction-indicator.js

// Copyright 2019 The Chromium Authors
// 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);