import { LitElement, html, css, unsafeCSS } from 'lit';
import { customElement, state, property } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { nothing } from 'lit';
import '@shoelace-style/shoelace/dist/components/card/card.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '@shoelace-style/shoelace/dist/components/badge/badge.js';
import '@shoelace-style/shoelace/dist/components/tag/tag.js';
import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
import '@shoelace-style/shoelace/dist/components/menu/menu.js';
import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
import '../../components/project-filter-modal.ts';
import '../../components/single-issue-detail-view.ts';
import '../../components/improve-compliance-modal.ts';
import '../../components/pagination-controls.ts';
import { getStatusVariant, getComplianceVariant } from '../../utils/verdict';
import {
listProjects,
listOrganizations,
searchIssues,
getIssueCompliance,
getCompliancePrompts,
} from '../../api';
import type {
Project,
Organization,
Issue,
IssueComplianceResult,
CompliancePromptMetadata,
} from '../../types';
import consoleStyles from '../../styles/console-styles.css?inline';
@customElement('issues-compliance-view')
export class IssuesComplianceView extends LitElement {
private readonly INFO_ALERT_DISMISSED_KEY =
'preloop-issues-compliance-info-alert-dismissed';
@state()
private _isInfoAlertOpen = false;
@state()
private _searchQuery = '';
@state()
private _hasSearched = false;
@state()
private _issues: Issue[] = [];
@state()
private _complianceResults: Record<string, IssueComplianceResult> = {};
@state()
private _loadingCompliance: Record<string, boolean> = {};
@state()
private _loading = false;
@state()
private _error: string | null = null;
@state()
private _expandedRowKey: string | null = null;
@state()
private _isFilterModalOpen = false;
@state()
private _isImproveComplianceModalOpen = false;
@state()
private _selectedIssueForCompliance: Issue | null = null;
@state()
private _selectedProjectIds: string[] = [];
@state()
private _selectedStatus: 'opened' | 'closed' | 'all' = 'opened';
@state()
private _selectedCompliancePrompt = 'dor_compliance_v1';
@state()
private _compliancePrompts: CompliancePromptMetadata[] = [];
@state()
private _allProjects: Project[] = [];
@state()
private _hasProjects = true;
@state()
private _organizations: Organization[] = [];
@state()
private _initialLoadComplete = false;
@state()
private _updateSummary: string | null = null;
@state()
private _currentPage = 1;
@state()
private _hasMorePages = false;
private _pageSize = 10;
private _isViewActive = false;
private get _complianceMetricName() {
const firstResult = Object.values(this._complianceResults)[0];
return firstResult ? firstResult.short_name : 'Compliance';
}
static styles = [
unsafeCSS(consoleStyles),
css`
.table-card {
width: 100%;
--padding: 0;
border-spacing: 0;
}
.styled-table .issue-id {
font-weight: var(--sl-font-weight-semibold);
}
.issue-key {
color: var(--sl-color-neutral-600);
}
.faint-row {
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.clickable-row {
cursor: pointer;
}
.row-expanded {
background-color: var(--sl-color-primary-50);
}
.loading-overlay {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--sl-spacing-medium);
z-index: 10000;
}
.chart-header {
display: flex;
align-items: center;
gap: 0.5rem;
}
sl-icon {
font-size: 1rem;
}
.placeholder-content {
text-align: center;
}
.search-bar {
display: flex;
gap: var(--sl-spacing-small);
align-items: center;
margin-bottom: var(--sl-spacing-medium);
}
.search-bar sl-input {
flex-grow: 1;
}
.review-section {
margin-top: 3rem;
}
.issue-description {
font-size: var(--sl-font-size-small);
color: var(--sl-color-neutral-700);
background-color: var(--sl-color-neutral-100);
border: 1px solid var(--sl-color-neutral-200);
border-radius: var(--sl-border-radius-medium);
padding: var(--sl-spacing-medium);
white-space: pre-line;
overflow-wrap: break-word;
max-height: 400px;
overflow-y: auto;
}
.compliance-reason,
.compliance-suggestion {
margin-top: var(--sl-spacing-small);
}
.compliance-title {
display: block;
margin-top: var(--sl-spacing-medium);
margin-bottom: var(--sl-spacing-x-small);
font-weight: var(--sl-font-weight-semibold);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sl-spacing-medium);
}
.score-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--sl-spacing-medium);
}
.score-container .compliance-title {
margin: 0;
}
.improve-button-container {
display: flex;
justify-content: flex-end;
margin-top: var(--sl-spacing-medium);
}
`,
];
async connectedCallback() {
super.connectedCallback();
this._isViewActive = true;
const isDismissed = localStorage.getItem(this.INFO_ALERT_DISMISSED_KEY);
this._isInfoAlertOpen = isDismissed !== 'true';
// Fetch dynamic data first
await this.fetchCompliancePrompts();
await this.fetchProjects();
this.parseUrlAndUpdateState();
// Fetch issues on initial load, regardless of search query
this.fetchIssues();
this.fetchOrganizations();
this._initialLoadComplete = true;
window.addEventListener('popstate', this.handlePopState);
}
disconnectedCallback() {
super.disconnectedCallback();
this._isViewActive = false;
window.removeEventListener('popstate', this.handlePopState);
// Check if we are still on the issues path before cleaning up.
// This prevents a race condition where the URL of the *next* page is cleaned.
if (window.location.pathname.includes('/issues')) {
window.history.replaceState({}, '', window.location.pathname);
}
}
private handlePopState = () => {
this.parseUrlAndUpdateState();
this.fetchIssues();
};
private parseUrlAndUpdateState() {
const params = new URLSearchParams(window.location.search);
this._searchQuery = params.get('query') || '';
const prompt = params.get('prompt');
if (prompt && this._compliancePrompts.some((p) => p.id === prompt)) {
this._selectedCompliancePrompt = prompt;
}
const shortProjectIds = params.get('projects');
if (shortProjectIds && this._allProjects.length > 0) {
const shortIdSet = new Set(shortProjectIds.split(','));
this._selectedProjectIds = this._allProjects
.filter((p) => shortIdSet.has(p.id.split('-')[0]))
.map((p) => p.id);
} else {
this._selectedProjectIds = [];
}
this._expandedRowKey = params.get('selectedIssue') || null;
this._currentPage = Number(params.get('page')) || 1;
const status = params.get('status');
if (status && ['opened', 'closed', 'all'].includes(status)) {
this._selectedStatus = status;
}
}
private _updateUrl() {
// Only update the URL if we are on the issues page.
if (!window.location.pathname.includes('/issues')) {
return;
}
const params = new URLSearchParams();
params.set('status', this._selectedStatus);
params.set('prompt', this._selectedCompliancePrompt);
if (this._searchQuery) {
params.set('query', this._searchQuery);
}
if (this._selectedProjectIds.length > 0) {
const shortProjectIds = this._selectedProjectIds.map(
(id) => id.split('-')[0]
);
params.set('projects', shortProjectIds.join(','));
}
if (this._expandedRowKey) {
params.set('selectedIssue', this._expandedRowKey);
} else {
params.delete('selectedIssue');
}
params.set('page', this._currentPage.toString());
const newUrl = `${window.location.pathname}?${params.toString()}`;
window.history.pushState({}, '', newUrl);
}
async fetchInitialData() {
this.fetchIssues();
this.fetchProjects();
this.fetchOrganizations();
}
async fetchProjects() {
try {
this._allProjects = await listProjects();
this._hasProjects = this._allProjects.length > 0;
} catch (error) {
console.error('Failed to fetch project list:', error);
this._hasProjects = false; // Set to false on error
}
}
async fetchOrganizations() {
try {
this._organizations = await listOrganizations();
} catch (error) {
console.error('Failed to fetch organization list:', error);
}
}
async fetchCompliancePrompts() {
try {
this._compliancePrompts = await getCompliancePrompts();
// Ensure a valid prompt is always selected
if (
!this._compliancePrompts.some(
(p) => p.id === this._selectedCompliancePrompt
)
) {
this._selectedCompliancePrompt = this._compliancePrompts[0]?.id || '';
}
} catch (error) {
console.error('Failed to fetch compliance prompts:', error);
}
}
async fetchIssues() {
this._loading = true;
this._error = null;
this._hasSearched = true;
try {
const project_ids =
this._selectedProjectIds.length > 0
? this._selectedProjectIds
: undefined;
const skip = (this._currentPage - 1) * this._pageSize;
console.log(`Searching with query: "${this._searchQuery}"`);
// Only include query parameter if it's not empty
const searchParams: any = {
project_ids: project_ids,
status: this._selectedStatus,
limit: this._pageSize,
skip: skip,
};
if (this._searchQuery && this._searchQuery.trim()) {
searchParams.query = this._searchQuery;
}
const issues = await searchIssues(searchParams);
this._issues = issues;
this._hasMorePages = issues.length === this._pageSize;
this._updateUrl(); // Update URL after fetching
this.fetchComplianceResults();
} catch (error) {
this._error =
error instanceof Error ? error.message : 'An unknown error occurred.';
console.error('Failed to fetch issues:', error);
} finally {
this._loading = false;
}
}
async fetchComplianceResults() {
for (const issue of this._issues) {
if (!this._isViewActive) {
break;
}
const issueId = issue.id;
// Skip if we already have the result or if it's already loading.
if (
this._complianceResults[issueId] ||
this._loadingCompliance[issueId]
) {
continue;
}
this._loadingCompliance = { ...this._loadingCompliance, [issueId]: true };
try {
const result = await getIssueCompliance(
issueId,
this._selectedCompliancePrompt
);
this._complianceResults = {
...this._complianceResults,
[issueId]: result,
};
} catch (error) {
console.error(
`Failed to fetch compliance result for issue ${issueId}:`,
error
);
} finally {
this._loadingCompliance = {
...this._loadingCompliance,
[issueId]: false,
};
}
}
}
private _toggleRow(issueId: string) {
if (this._expandedRowKey === issueId) {
this._expandedRowKey = null;
} else {
this._expandedRowKey = issueId;
}
this._updateUrl();
}
private _openImproveComplianceModal(issue: Issue) {
this._selectedIssueForCompliance = issue;
this._isImproveComplianceModalOpen = true;
}
private _handleComplianceModalClose() {
this._isImproveComplianceModalOpen = false;
this._selectedIssueForCompliance = null;
}
private _handleComplianceUpdate(event: CustomEvent) {
const { issueId, summary } = event.detail;
if (summary) {
this._updateSummary = summary;
}
// Delete the stale local compliance data to allow it to be refetched.
const newComplianceResults = { ...this._complianceResults };
if (issueId in newComplianceResults) {
delete newComplianceResults[issueId];
this._complianceResults = newComplianceResults;
}
// Refetch the issues list. `fetchComplianceResults` will be called automatically.
this._currentPage = 1;
this.fetchIssues();
}
private _handleMenuAction(e: CustomEvent, issue: Issue) {
const action = e.detail.item.value;
if (action === 'improve-compliance') {
this._openImproveComplianceModal(issue);
}
}
private _openFilterModal() {
this._isFilterModalOpen = true;
}
private _removeProjectFilter(projectIdToRemove: string) {
this._selectedProjectIds = this._selectedProjectIds.filter(
(id) => id !== projectIdToRemove
);
this.fetchIssues();
}
private _clearAllFilters() {
this._selectedProjectIds = [];
this.fetchIssues();
}
private _renderActiveFilters() {
if (
this._selectedProjectIds.length === 0 &&
this._selectedStatus === 'opened'
) {
return html``;
}
const selectedProjects = this._selectedProjectIds
.map((id) => this._allProjects.find((p) => p.id.toString() === id))
.filter(Boolean) as Project[];
return html`
<div class="active-filters">
<span>Filtered by:</span>
${selectedProjects.map(
(project) => html`
<sl-tag
size="medium"
removable
@sl-remove=${() =>
this._removeProjectFilter(project.id.toString())}
>
${project.name}
</sl-tag>
`
)}
${this._selectedStatus !== 'opened'
? html`
<sl-tag
size="medium"
removable
@sl-remove=${() => this._clearStatusFilter()}
>
${this._selectedStatus === 'closed' ? 'Closed' : 'All'}
</sl-tag>
`
: ''}
<sl-button size="small" pill @click=${this._clearAllFilters}
>Clear all</sl-button
>
</div>
`;
}
private _clearStatusFilter() {
this._selectedStatus = 'opened';
this.fetchIssues();
}
private handleInfoAlertHide() {
localStorage.setItem(this.INFO_ALERT_DISMISSED_KEY, 'true');
this._isInfoAlertOpen = false;
}
private handleSearchInput(event: Event) {
const input = event.target as HTMLInputElement;
this._searchQuery = input.value;
}
private handleSearch(event: Event) {
event.preventDefault();
this._currentPage = 1;
this.fetchIssues();
}
private _handleComplianceTypeSelect(e: CustomEvent) {
const selectedValue = e.detail.item.value;
if (this._compliancePrompts.some((p) => p.id === selectedValue)) {
this._selectedCompliancePrompt = selectedValue;
// When the type changes, we need to refetch the compliance data.
this._complianceResults = {}; // Clear old results
this.fetchComplianceResults();
this._updateUrl(); // Also update the URL
}
}
private _renderSearchBar() {
const selectedPrompt = this._compliancePrompts.find(
(p) => p.id === this._selectedCompliancePrompt
);
return html`
<div class="search-bar">
<sl-input
placeholder="Search issues by title, description, or ID..."
.value=${this._searchQuery}
@sl-input=${(e: Event) =>
(this._searchQuery = (e.target as HTMLInputElement).value)}
@keydown=${(e: KeyboardEvent) => {
if (e.key === 'Enter') this.handleSearch(e);
}}
clearable
>
<sl-icon name="search" slot="prefix"></sl-icon>
</sl-input>
<sl-dropdown>
<sl-button slot="trigger" caret>
${selectedPrompt ? selectedPrompt.name : 'Select Type'}
</sl-button>
<sl-menu @sl-select=${this._handleComplianceTypeSelect}>
${this._compliancePrompts.map(
(prompt) =>
html`<sl-menu-item value=${prompt.id}
>${prompt.name}</sl-menu-item
>`
)}
</sl-menu>
</sl-dropdown>
<sl-button-group>
<sl-tooltip content="Filter by project">
<sl-button @click=${() => (this._isFilterModalOpen = true)}>
<sl-icon name="filter"></sl-icon>
</sl-button>
</sl-tooltip>
<sl-button @click=${this.handleSearch} variant="primary">
Search
</sl-button>
</sl-button-group>
</div>
`;
}
private renderIssueTable() {
if (this._loading && this._issues.length === 0) {
return html`<div class="loading-container">
<sl-spinner></sl-spinner>
<span>Loading issues...</span>
</div>`;
}
if (this._error) {
return html`<div class="error">${this._error}</div>`;
}
if (this._issues.length === 0) {
return html`<div class="placeholder-content">
<h3>No issues found</h3>
<p>Your search did not return any issues.</p>
</div>`;
}
return html`
<div class="table-container">
<sl-card class="table-card">
<table class="styled-table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Project</th>
<th>Status</th>
<th>${this._complianceMetricName}</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
${this._issues.map((issue) => {
const issueId = issue.id;
const isExpanded = this._expandedRowKey === issueId;
const project = this._allProjects.find(
(p) => p.id === issue.project_id
);
const complianceResult = this._complianceResults[issue.id];
return html`
<tr
class="clickable-row ${isExpanded ? 'row-expanded' : ''}"
@click=${() => this._toggleRow(issueId)}
>
<td>
<a
href="${issue.url}"
target="_blank"
@click=${(e: Event) => e.stopPropagation()}
>${issue.key}</a
>
</td>
<td>${issue.title}</td>
<td>${project?.name || 'N/A'}</td>
<td>
<sl-badge variant=${getStatusVariant(issue.status)}>
${issue.status}
</sl-badge>
</td>
<td>
${when(
this._loadingCompliance[issue.id],
() => html`<sl-spinner></sl-spinner>`,
() => {
return complianceResult
? html`
<sl-tooltip content=${complianceResult.reason}>
<sl-badge
variant=${getComplianceVariant(
complianceResult.compliance_factor
)}
pill
>
${(
complianceResult.compliance_factor * 100
).toFixed(0)}%
</sl-badge>
</sl-tooltip>
`
: html`<span>-</span>`;
}
)}
</td>
<td>
<sl-button-group>
<sl-button
size="small"
@click=${(e: Event) => {
e.stopPropagation();
this._openImproveComplianceModal(issue);
}}
?disabled=${!complianceResult ||
complianceResult.compliance_factor === 0 ||
complianceResult.compliance_factor === 1}
>
Improve
</sl-button>
<sl-dropdown
@click=${(e: Event) => e.stopPropagation()}
?disabled=${!complianceResult ||
complianceResult.compliance_factor === 0 ||
complianceResult.compliance_factor === 1}
>
<sl-button
slot="trigger"
size="small"
title="Actions"
>
<sl-icon name="three-dots-vertical"></sl-icon>
</sl-button>
<sl-menu
@sl-select=${(e: CustomEvent) =>
this._handleMenuAction(e, issue)}
>
<sl-menu-item value="improve-compliance">
<sl-icon
name="graph-up-arrow"
slot="prefix"
></sl-icon>
Improve Compliance
</sl-menu-item>
</sl-menu>
</sl-dropdown>
</sl-button-group>
</td>
</tr>
${isExpanded
? html`
<tr class="inline-detail-row">
<td colspan="6">
<div class="detail-view-card">
<single-issue-detail-view .issue=${issue}>
<div slot="additional-info">
${this._renderComplianceDetails(
issue,
complianceResult
)}
</div>
</single-issue-detail-view>
</div>
</td>
</tr>
`
: ''}
`;
})}
</tbody>
</table>
</sl-card>
<pagination-controls
.currentPage=${this._currentPage}
.hasMorePages=${this._hasMorePages}
.loading=${this._loading}
@prev-page=${this._goToPreviousPage}
@next-page=${this._goToNextPage}
></pagination-controls>
</div>
`;
}
private _goToNextPage() {
if (this._hasMorePages) {
this._currentPage += 1;
this.fetchIssues();
}
}
private _goToPreviousPage() {
if (this._currentPage > 1) {
this._currentPage -= 1;
this.fetchIssues();
}
}
private _renderNoProjectsState() {
return html`
<div class="placeholder-content">
<h3>No projects found</h3>
<p>
You don't have any projects. Please create a project to start tracking
issues.
</p>
</div>
`;
}
render() {
return html`
<view-header headerText="Issue Compliance" width="wide">
<div slot="main-column">${this._renderSearchBar()}</div>
</view-header>
<project-filter-modal
.isOpen=${this._isFilterModalOpen}
.projects=${this._allProjects}
.selectedProjectIds=${this._selectedProjectIds}
.selectedStatus=${this._selectedStatus}
.organizations=${this._organizations}
.showResolution=${false}
@on-close=${() => (this._isFilterModalOpen = false)}
@on-apply=${this._applyFilters}
></project-filter-modal>
<div class="column-layout wide">
<div class="main-column">
<div class="container">
<sl-alert
variant="primary"
?open=${this._isInfoAlertOpen}
closable
@sl-hide=${this.handleInfoAlertHide}
>
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong
>Check issues for compliance with guidelines and
templates</strong
><br />
Identify issues that do not comply with your organization's
guidelines and templates. Review each issue, check the compliance
score, and use the AI review to resolve or dismiss the suggestion.
</sl-alert>
${this._renderActiveFilters()}
${when(
this._updateSummary,
() => html`
<sl-alert
variant="success"
open
closable
@sl-after-hide=${() => (this._updateSummary = null)}
>
<sl-icon slot="icon" name="check-circle"></sl-icon>
${this._updateSummary}
</sl-alert>
`
)}
${when(
this._loading,
() =>
html`<div class="loading-overlay">
<sl-spinner></sl-spinner>
<span>Loading issues...</span>
</div>`
)}
${when(
this._error,
() => html`<div class="error">${this._error}</div>`
)}
${when(!this._loading && !this._error && this._hasSearched, () =>
this.renderIssueTable()
)}
</div>
</div>
<div class="side-column">
<sl-card class="detail-view-card">
<div slot="header">Issue Details</div>
${when(
this._expandedRowKey,
() => {
const issue = this._issues.find(
(i) => i.id === this._expandedRowKey
);
if (issue) {
const complianceResult = this._complianceResults[issue.id];
return html`<single-issue-detail-view .issue=${issue}>
<div slot="additional-info">
${this._renderComplianceDetails(issue, complianceResult)}
</div>
</single-issue-detail-view>`;
} else {
return html`<div class="placeholder-content">
<sl-icon name="info-circle"></sl-icon>
<p>Select an issue to see details.</p>
</div>`;
}
},
() =>
html`<div class="placeholder-content">
<sl-icon name="info-circle"></sl-icon>
<p>Select an issue to see details.</p>
</div>`
)}
</sl-card>
</div>
</div>
<improve-compliance-modal
.open=${this._isImproveComplianceModalOpen}
.issue=${this._selectedIssueForCompliance}
.promptName=${this._selectedCompliancePrompt}
@close=${this._handleComplianceModalClose}
@on-submit=${this._handleComplianceUpdate}
>
</improve-compliance-modal>
`;
}
private _renderComplianceDetails(
issue: Issue,
complianceResult: IssueComplianceResult | null
) {
if (!complianceResult) {
return nothing;
}
return html`
<div class="review-section">
<div class="review-header">
<h3>${complianceResult.name} Review</h3>
</div>
${when(
complianceResult.compliance_factor === 0,
() => html`
<sl-alert variant="warning" open>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
This issue could not be evaluated and requires manual review. It
may be missing key information or be too vague.
</sl-alert>
`,
() => html`
<div class="score-container">
<b class="compliance-title">Compliance Score</b>
<sl-badge
variant=${getComplianceVariant(
complianceResult.compliance_factor
)}
pill
>
${(complianceResult.compliance_factor * 100).toFixed(0)}%
</sl-badge>
</div>
<div>
<b class="compliance-title">Reason</b>
<div class="issue-description">${complianceResult.reason}</div>
</div>
<div>
<b class="compliance-title">Suggestion for Improvement</b>
<div class="issue-description">
${complianceResult.suggestion}
</div>
</div>
<div class="improve-button-container">
<sl-button
size="small"
@click=${() => this._openImproveComplianceModal(issue)}
?disabled=${!complianceResult ||
complianceResult.compliance_factor === 0 ||
complianceResult.compliance_factor === 1}
>
Improve
</sl-button>
</div>
`
)}
</div>
`;
}
private _applyFilters(e: CustomEvent) {
this._selectedProjectIds = e.detail.projectIds;
this._selectedStatus = e.detail.status;
this._isFilterModalOpen = false;
this._currentPage = 1;
this.fetchIssues();
}
private _handleProjectFilterChange(e: CustomEvent) {
this._selectedProjectIds = e.detail.selectedProjectIds;
this._currentPage = 1;
this.fetchIssues();
}
}
declare global {
interface HTMLElementTagNameMap {
'issues-compliance-view': IssuesComplianceView;
}
}
