Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add API tests panel to sidebar navigation and UI components

Browse Source
This commit is contained in:
bruno
2025-10-23 14:02:46 -04:00
parent 69df390f58
commit 7e20098d14
8 changed files with 140 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/sidebar/nimbus-sidebar.component.ts
+10
View File
@@ -39,6 +39,11 @@ import { VaultService } from '../../../services/vault.service';
class="w-full text-left block text-sm px-2 py-1.5 rounded hover:bg-surface1 dark:hover:bg-card text-main dark:text-main hover:text-main dark:hover:text-gray-100">
Markdown Playground
</button>
<button
(click)="onApiTestsPanelClick()"
class="mt-1 w-full text-left block text-sm px-2 py-1.5 rounded hover:bg-surface1 dark:hover:bg-card text-main dark:text-main hover:text-main dark:hover:text-gray-100">
API Tests Panel
</button>
</div>
</section>
@@ -154,6 +159,7 @@ export class NimbusSidebarComponent {
@Output() tagSelected = new EventEmitter<string>();
@Output() quickLinkSelected = new EventEmitter<string>();
@Output() markdownPlaygroundSelected = new EventEmitter<void>();
@Output() testsPanelSelected = new EventEmitter<void>();
@Output() helpPageSelected = new EventEmitter<void>();
@Output() aboutSelected = new EventEmitter<void>();
@@ -167,6 +173,10 @@ export class NimbusSidebarComponent {
this.markdownPlaygroundSelected.emit();
}
onApiTestsPanelClick(): void {
this.testsPanelSelected.emit();
}
trashNotes = () => this.vault.trashNotes();
trashCount = () => this.vault.counts().trash;
trashHasContent = () => (this.vault.trashTree() || []).length > 0;
src/app/features/tests/tests-panel.component.ts
+65 -56
View File
@@ -191,8 +191,10 @@ interface TestResult {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: 'Monaco', 'Menlo', monospace;
font-family: var(--font-mono), 'Monaco', 'Menlo', monospace;
font-size: 14px;
color: var(--text-main);
background: var(--bg);
}
.panel-header {
@@ -204,11 +206,12 @@ interface TestResult {
margin: 0 0 10px 0;
font-size: 24px;
font-weight: 600;
color: var(--text-main);
}
.panel-description {
margin: 0;
color: #666;
color: var(--text-muted);
font-size: 16px;
max-width: 600px;
margin: 0 auto;
@@ -225,17 +228,17 @@ interface TestResult {
}
.test-section {
border: 1px solid #e0e0e0;
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
background: #fafafa;
background: var(--card);
}
.test-section h3 {
margin: 0 0 15px 0;
font-size: 18px;
font-weight: 600;
color: #333;
color: var(--text-main);
}
.test-group {
@@ -261,66 +264,66 @@ interface TestResult {
}
.test-btn--primary {
background: #007bff;
background: var(--primary);
color: white;
}
.test-btn--primary:hover:not(:disabled) {
background: #0056b3;
background: color-mix(in srgb, var(--primary) 85%, black 15%);
}
.test-btn--secondary {
background: #6c757d;
background: var(--muted);
color: white;
}
.test-btn--secondary:hover:not(:disabled) {
background: #545b62;
background: color-mix(in srgb, var(--muted) 85%, black 15%);
}
.test-btn--info {
background: #17a2b8;
background: var(--info);
color: white;
}
.test-btn--info:hover:not(:disabled) {
background: #138496;
background: color-mix(in srgb, var(--info) 85%, black 15%);
}
.test-btn--warning {
background: #ffc107;
color: #212529;
background: var(--warning);
color: var(--text-main);
}
.test-btn--warning:hover:not(:disabled) {
background: #e0a800;
background: color-mix(in srgb, var(--warning) 85%, black 15%);
}
.test-btn--danger {
background: #dc3545;
background: var(--danger);
color: white;
}
.test-btn--danger:hover:not(:disabled) {
background: #c82333;
background: color-mix(in srgb, var(--danger) 85%, black 15%);
}
.test-btn--accent {
background: #28a745;
background: var(--accent);
color: white;
}
.test-btn--accent:hover:not(:disabled) {
background: #218838;
background: color-mix(in srgb, var(--accent) 85%, black 15%);
}
.test-btn--neutral {
background: #6f42c1;
background: var(--secondary);
color: white;
}
.test-btn--neutral:hover:not(:disabled) {
background: #5a32a3;
background: color-mix(in srgb, var(--secondary) 85%, black 15%);
}
.file-test-form {
@@ -335,29 +338,31 @@ interface TestResult {
.form-row label {
font-weight: 600;
color: #333;
color: var(--text-main);
}
.form-input,
.form-textarea {
padding: 8px 12px;
border: 1px solid #ccc;
border: 1px solid var(--border);
border-radius: 4px;
font-family: inherit;
font-size: 14px;
background: var(--card);
color: var(--text-main);
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
border-color: var(--ring);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
}
.results-panel {
border: 1px solid #e0e0e0;
border: 1px solid var(--border);
border-radius: 8px;
background: white;
background: var(--card);
}
.results-header {
@@ -365,18 +370,19 @@ interface TestResult {
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #e0e0e0;
border-bottom: 1px solid var(--border);
}
.results-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-main);
}
.clear-btn {
padding: 6px 12px;
background: #dc3545;
background: var(--danger);
color: white;
border: none;
border-radius: 4px;
@@ -385,7 +391,7 @@ interface TestResult {
}
.clear-btn:hover {
background: #c82333;
background: color-mix(in srgb, var(--danger) 85%, black 15%);
}
.clear-btn:disabled {
@@ -399,7 +405,7 @@ interface TestResult {
}
.result-item {
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid var(--border);
padding: 15px 20px;
}
@@ -408,23 +414,23 @@ interface TestResult {
}
.result-item--success {
background: #d4edda;
border-left: 4px solid #28a745;
background: color-mix(in srgb, var(--success) 15%, transparent);
border-left: 4px solid var(--success);
}
.result-item--error {
background: #f8d7da;
border-left: 4px solid #dc3545;
background: color-mix(in srgb, var(--danger) 15%, transparent);
border-left: 4px solid var(--danger);
}
.result-item--running {
background: #fff3cd;
border-left: 4px solid #ffc107;
background: color-mix(in srgb, var(--warning) 15%, transparent);
border-left: 4px solid var(--warning);
}
.result-item--pending {
background: #f8f9fa;
border-left: 4px solid #6c757d;
background: var(--surface-1);
border-left: 4px solid var(--muted);
}
.result-header {
@@ -437,8 +443,8 @@ interface TestResult {
.result-method {
font-weight: bold;
color: #007bff;
background: #e7f3ff;
color: var(--primary);
background: color-mix(in srgb, var(--primary) 15%, transparent);
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
@@ -447,7 +453,7 @@ interface TestResult {
.result-endpoint {
font-family: monospace;
font-size: 14px;
color: #333;
color: var(--text-main);
flex: 1;
}
@@ -459,28 +465,28 @@ interface TestResult {
}
.result-item--success .result-status {
background: #d4edda;
color: #155724;
background: color-mix(in srgb, var(--success) 20%, transparent);
color: var(--success);
}
.result-item--error .result-status {
background: #f8d7da;
color: #721c24;
background: color-mix(in srgb, var(--danger) 20%, transparent);
color: var(--danger);
}
.result-item--running .result-status {
background: #fff3cd;
color: #856404;
background: color-mix(in srgb, var(--warning) 20%, transparent);
color: var(--warning);
}
.result-item--pending .result-status {
background: #f8f9fa;
color: #383d41;
background: var(--surface-1);
color: var(--muted);
}
.result-duration {
font-size: 12px;
color: #666;
color: var(--text-muted);
}
.result-details {
@@ -488,7 +494,7 @@ interface TestResult {
}
.result-json {
background: #f8f9fa;
background: var(--surface-1);
padding: 10px;
border-radius: 4px;
font-size: 12px;
@@ -497,12 +503,13 @@ interface TestResult {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
color: var(--text-main);
}
.no-results {
text-align: center;
padding: 40px 20px;
color: #666;
color: var(--text-muted);
}
.no-results p {
@@ -513,7 +520,7 @@ interface TestResult {
.sse-events {
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
background: var(--surface-1);
border-radius: 6px;
}
@@ -521,6 +528,7 @@ interface TestResult {
margin: 0 0 10px 0;
font-size: 14px;
font-weight: 600;
color: var(--text-main);
}
.events-list {
@@ -533,7 +541,7 @@ interface TestResult {
gap: 10px;
padding: 5px 0;
font-size: 12px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--border);
}
.event-item:last-child {
@@ -542,16 +550,17 @@ interface TestResult {
.event-type {
font-weight: bold;
color: #007bff;
color: var(--primary);
}
.event-data {
flex: 1;
font-family: monospace;
color: var(--text-main);
}
.event-time {
color: #666;
color: var(--text-muted);
}
`]
})