| // 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 'elements/issue-detail/mr-flipper/mr-flipper.js'; |
| import 'elements/chops/chops-dialog/chops-dialog.js'; |
| import 'elements/chops/chops-timestamp/chops-timestamp.js'; |
| import {store, connectStore} from 'reducers/base.js'; |
| import * as issueV0 from 'reducers/issueV0.js'; |
| import * as userV0 from 'reducers/userV0.js'; |
| import * as projectV0 from 'reducers/projectV0.js'; |
| import {userIsMember} from 'shared/helpers.js'; |
| import {SHARED_STYLES} from 'shared/shared-styles.js'; |
| import 'elements/framework/links/mr-user-link/mr-user-link.js'; |
| import 'elements/framework/links/mr-crbug-link/mr-crbug-link.js'; |
| import 'elements/framework/mr-pref-toggle/mr-pref-toggle.js'; |
| import 'elements/framework/mr-dropdown/mr-dropdown.js'; |
| import {ISSUE_EDIT_PERMISSION, ISSUE_DELETE_PERMISSION, |
| ISSUE_FLAGSPAM_PERMISSION} from 'shared/consts/permissions.js'; |
| import {issueToIssueRef} from 'shared/convertersV0.js'; |
| import {prpcClient} from 'prpc-client-instance.js'; |
| import {AVAILABLE_MD_PROJECTS, DEFAULT_MD_PROJECTS} from 'shared/md-helper.js'; |
| |
| const DELETE_ISSUE_CONFIRMATION_NOTICE = `\ |
| Normally, you would just close issues by setting their status to a closed value. |
| Are you sure you want to delete this issue?`; |
| |
| |
| /** |
| * `<mr-issue-header>` |
| * |
| * The header for a given launch issue. |
| * |
| */ |
| export class MrIssueHeader extends connectStore(LitElement) { |
| /** @override */ |
| static get styles() { |
| return [ |
| SHARED_STYLES, |
| css` |
| :host { |
| width: 100%; |
| margin-top: 0; |
| font-size: var(--chops-large-font-size); |
| background-color: var(--monorail-metadata-toggled-bg); |
| border-bottom: var(--chops-normal-border); |
| padding: 0.25em 8px; |
| box-sizing: border-box; |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| align-items: center; |
| } |
| h1 { |
| font-size: 100%; |
| line-height: 140%; |
| font-weight: bolder; |
| padding: 0; |
| margin: 0; |
| } |
| mr-flipper { |
| border-left: var(--chops-normal-border); |
| padding-left: 8px; |
| margin-left: 4px; |
| font-size: var(--chops-main-font-size); |
| } |
| mr-pref-toggle { |
| margin-right: 2px; |
| } |
| .issue-actions { |
| min-width: fit-content; |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| font-size: var(--chops-main-font-size); |
| } |
| .issue-actions div { |
| min-width: 70px; |
| display: flex; |
| justify-content: space-between; |
| } |
| .spam-notice { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 1px 6px; |
| border-radius: 3px; |
| background: #F44336; |
| color: var(--chops-white); |
| font-weight: bold; |
| font-size: var(--chops-main-font-size); |
| margin-right: 4px; |
| } |
| .byline { |
| display: block; |
| font-size: var(--chops-main-font-size); |
| width: 100%; |
| line-height: 140%; |
| color: var(--chops-primary-font-color); |
| } |
| .role-label { |
| background-color: var(--chops-gray-600); |
| border-radius: 3px; |
| color: var(--chops-white); |
| display: inline-block; |
| padding: 2px 4px; |
| font-size: 75%; |
| font-weight: bold; |
| line-height: 14px; |
| vertical-align: text-bottom; |
| margin-left: 16px; |
| } |
| .main-text-outer { |
| flex-basis: 100%; |
| display: flex; |
| justify-content: flex-start; |
| flex-direction: row; |
| align-items: center; |
| } |
| .main-text { |
| flex-basis: 100%; |
| } |
| @media (max-width: 840px) { |
| :host { |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| .main-text { |
| width: 100%; |
| margin-bottom: 0.5em; |
| } |
| } |
| `, |
| ]; |
| } |
| |
| /** @override */ |
| render() { |
| const reporterIsMember = userIsMember( |
| this.issue.reporterRef, this.issue.projectName, this.usersProjects); |
| const markdownEnabled = AVAILABLE_MD_PROJECTS.has(this.projectName); |
| const markdownDefaultOn = DEFAULT_MD_PROJECTS.has(this.projectName); |
| return html` |
| <div class="main-text-outer"> |
| <div class="main-text"> |
| <h1> |
| ${this.issue.isSpam ? html` |
| <span class="spam-notice">Spam</span> |
| `: ''} |
| Issue ${this.issue.localId}: ${this.issue.summary} |
| </h1> |
| <small class="byline"> |
| Reported by |
| <mr-user-link |
| .userRef=${this.issue.reporterRef} |
| aria-label="issue reporter" |
| ></mr-user-link> |
| on <chops-timestamp .timestamp=${this.issue.openedTimestamp}></chops-timestamp> |
| ${reporterIsMember ? html` |
| <span class="role-label">Project Member</span>` : ''} |
| </small> |
| </div> |
| </div> |
| <div class="issue-actions"> |
| <div> |
| <mr-crbug-link .issue=${this.issue}></mr-crbug-link> |
| <mr-pref-toggle |
| .userDisplayName=${this.userDisplayName} |
| label="Code" |
| title="Code font" |
| prefName="code_font" |
| ></mr-pref-toggle> |
| ${markdownEnabled ? html` |
| <mr-pref-toggle |
| .userDisplayName=${this.userDisplayName} |
| initialValue=${markdownDefaultOn} |
| label="Markdown" |
| title="Render in markdown" |
| prefName="render_markdown" |
| ></mr-pref-toggle> ` : ''} |
| </div> |
| ${this._issueOptions.length ? html` |
| <mr-dropdown |
| .items=${this._issueOptions} |
| icon="more_vert" |
| label="Issue options" |
| ></mr-dropdown> |
| ` : ''} |
| <mr-flipper></mr-flipper> |
| </div> |
| `; |
| } |
| |
| /** @override */ |
| static get properties() { |
| return { |
| userDisplayName: {type: String}, |
| issue: {type: Object}, |
| issuePermissions: {type: Object}, |
| isRestricted: {type: Boolean}, |
| projectTemplates: {type: Array}, |
| projectName: {type: String}, |
| usersProjects: {type: Object}, |
| _action: {type: String}, |
| _targetProjectError: {type: String}, |
| }; |
| } |
| |
| /** @override */ |
| constructor() { |
| super(); |
| this.issuePermissions = []; |
| this.projectTemplates = []; |
| this.projectName = ''; |
| this.issue = {}; |
| this.usersProjects = new Map(); |
| this.isRestricted = false; |
| } |
| |
| /** @override */ |
| stateChanged(state) { |
| this.issue = issueV0.viewedIssue(state); |
| this.issuePermissions = issueV0.permissions(state); |
| this.projectTemplates = projectV0.viewedTemplates(state); |
| this.projectName = projectV0.viewedProjectName(state); |
| this.usersProjects = userV0.projectsPerUser(state); |
| |
| const restrictions = issueV0.restrictions(state); |
| this.isRestricted = restrictions && Object.keys(restrictions).length; |
| } |
| |
| /** |
| * @return {Array<MenuItem>} Actions the user can take on the issue. |
| * @private |
| */ |
| get _issueOptions() { |
| // We create two edit Arrays for the top and bottom half of the menu, |
| // to be separated by a separator in the UI. |
| const editOptions = []; |
| const riskyOptions = []; |
| const isSpam = this.issue.isSpam; |
| const isRestricted = this.isRestricted; |
| |
| const permissions = this.issuePermissions; |
| const templates = this.projectTemplates; |
| |
| |
| if (permissions.includes(ISSUE_EDIT_PERMISSION)) { |
| editOptions.push({ |
| text: 'Edit issue description', |
| handler: this._openEditDescription.bind(this), |
| }); |
| if (templates.length) { |
| riskyOptions.push({ |
| text: 'Convert issue template', |
| handler: this._openConvertIssue.bind(this), |
| }); |
| } |
| } |
| |
| if (permissions.includes(ISSUE_DELETE_PERMISSION)) { |
| riskyOptions.push({ |
| text: 'Delete issue', |
| handler: this._deleteIssue.bind(this), |
| }); |
| if (!isRestricted) { |
| editOptions.push({ |
| text: 'Move issue', |
| handler: this._openMoveCopyIssue.bind(this, 'Move'), |
| }); |
| editOptions.push({ |
| text: 'Copy issue', |
| handler: this._openMoveCopyIssue.bind(this, 'Copy'), |
| }); |
| } |
| } |
| |
| if (permissions.includes(ISSUE_FLAGSPAM_PERMISSION)) { |
| const text = (isSpam ? 'Un-flag' : 'Flag') + ' issue as spam'; |
| riskyOptions.push({ |
| text, |
| handler: this._markIssue.bind(this), |
| }); |
| } |
| |
| if (editOptions.length && riskyOptions.length) { |
| editOptions.push({separator: true}); |
| } |
| return editOptions.concat(riskyOptions); |
| } |
| |
| /** |
| * Marks an issue as either spam or not spam based on whether the issue |
| * was spam. |
| */ |
| _markIssue() { |
| prpcClient.call('monorail.Issues', 'FlagIssues', { |
| issueRefs: [{ |
| projectName: this.issue.projectName, |
| localId: this.issue.localId, |
| }], |
| flag: !this.issue.isSpam, |
| }).then(() => { |
| store.dispatch(issueV0.fetch({ |
| projectName: this.issue.projectName, |
| localId: this.issue.localId, |
| })); |
| }); |
| } |
| |
| /** |
| * Deletes an issue. |
| */ |
| _deleteIssue() { |
| const ok = confirm(DELETE_ISSUE_CONFIRMATION_NOTICE); |
| if (ok) { |
| const issueRef = issueToIssueRef(this.issue); |
| // TODO(crbug.com/monorail/7374): Delete for the v0 -> v3 migration. |
| prpcClient.call('monorail.Issues', 'DeleteIssue', { |
| issueRef, |
| delete: true, |
| }).then(() => { |
| store.dispatch(issueV0.fetch(issueRef)); |
| }); |
| } |
| } |
| |
| /** |
| * Launches the dialog to edit an issue's description. |
| * @fires CustomEvent#open-dialog |
| * @private |
| */ |
| _openEditDescription() { |
| this.dispatchEvent(new CustomEvent('open-dialog', { |
| bubbles: true, |
| composed: true, |
| detail: { |
| dialogId: 'edit-description', |
| fieldName: '', |
| }, |
| })); |
| } |
| |
| /** |
| * Opens dialog to either move or copy an issue. |
| * @param {"move"|"copy"} action |
| * @fires CustomEvent#open-dialog |
| * @private |
| */ |
| _openMoveCopyIssue(action) { |
| this.dispatchEvent(new CustomEvent('open-dialog', { |
| bubbles: true, |
| composed: true, |
| detail: { |
| dialogId: 'move-copy-issue', |
| action, |
| }, |
| })); |
| } |
| |
| /** |
| * Opens dialog for converting an issue. |
| * @fires CustomEvent#open-dialog |
| * @private |
| */ |
| _openConvertIssue() { |
| this.dispatchEvent(new CustomEvent('open-dialog', { |
| bubbles: true, |
| composed: true, |
| detail: { |
| dialogId: 'convert-issue', |
| }, |
| })); |
| } |
| } |
| |
| customElements.define('mr-issue-header', MrIssueHeader); |