[VS Code] Security Scanning (SAST) Sidebar

User problem to solve

When working on a project in VS Code, I want to see a detailed view of security scan results for my files, so I can quickly identify and prioritize security vulnerabilities that need attention.

Proposal

In the GitLab sidebar, users can view and interact with security scan results in an organized manner.

1. Scan status indicator: display a loading indicator while a file is being actively scanned
2. Scan history organization
   1. List scans in reverse chronological order (newest files scanned first)
   2. Display file name and relative timestamp for each scan (e.g.3 minutes ago)
3. Vulnerability display
   1. Present vulnerabilities in a collapsible tree structure under file
   2. Sort vulnerabilities by severity level (Critical -> Low)
   3. Allow users to expand/collapse the vulnerability tree for better workspace management
4. Visual hierarchy
   1. Each file entry should show:
      1. File name of the file scanned
      2. Relative scan timestamp
      3. Relative file path
      4. Expandable/collapsible vulnerability tree
   2. Label should indicate the severity level.
      1. Colored label by severity level would be a nice-to-have

Technical Proposal

1. Sidebar TreeView UI

• Create new tree view under existing workflow extension following contributes.view
  • ScanResultItem[] will be responsible rendering the view
  • Create RemoteSecurityScansDataProvider which implements vscode.TreeDataProvider to populate the data.
    • In gitlab-lsp/-/security_diagnostics_publisher.ts, update to send new response notification with results. Let RemoteSecurityScansDataProvider listen to the new response notification and update the ScanResultItem[].

type RemoteSecurityScanResponse = {
  documentUri: string;
  status: number;
  timestamp: string;
  results?: Diagnostic[];
  error?: string;
};

type ScanResultItem = {
  fileName: string;
  status: 'inProgress' | 'completed' | 'error'
  results?: Diagnostic[];
  error?: string;
  lastCompleted: string;
}

2. Scan Status Indicator
   • Upon initiating a scan, create a ScanResultItem with default status set to inProgress
   • When response notification is received, update the status accordingly.
     • if there's no vulnerabilities, we can either remove the item from the list or filter it out.

MVC Considerations

1. When a file is scanned and vulnerabilities are not found, they are not shown in the sidebar.
2. A file is listed only once in the sidebar view
   • If a file is being scanned again, the previous entry is removed and we only show the new scan results.
3. Multiple files can be scanned in parallel, the user has to either save the file or trigger the command for security scanning.
4. We are not storing state. When user restarts VS Code, they will not see results from their previous session.