Skip to content

feat(decisions): replace browser confirm() with custom delete confirmation modal #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
neethika12 merged 1 commit into from
Apr 29, 2026
Merged

feat(decisions): replace browser confirm() with custom delete confirmation modal #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 136 additions & 0 deletions src/app/components/decision-list/decision-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@
border-radius: 8px;
cursor: pointer;
font-size: 13px;
transition: opacity 0.15s;
}

.btn-danger:hover:not(:disabled) {
opacity: 0.82;
}

.btn-danger:disabled {
opacity: 0.55;
cursor: not-allowed;
}

.decision-card {
Expand Down Expand Up @@ -171,3 +181,129 @@
@keyframes spin {
to { transform: rotate(360deg); }
}

/* ── Delete confirmation modal ───────────────────────────────────────────── */

.modal-backdrop {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(2, 6, 23, 0.55);
display: grid;
place-items: center;
padding: 18px;
animation: backdropIn 0.18s ease;
}

@keyframes backdropIn {
from { opacity: 0; }
to { opacity: 1; }
}

.delete-modal {
width: min(460px, 100%);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 16px;
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.24);
padding: 24px 24px 22px;
animation: modalIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalIn {
from { opacity: 0; transform: translateY(10px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

.delete-modal-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
color: #374151;
margin-bottom: 14px;
}

.delete-modal-eyebrow {
margin: 0 0 6px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
color: #6b7280;
font-weight: 700;
}

.delete-modal-title {
margin: 0;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: #0a0a0a;
word-break: break-word;
}

.delete-modal-copy {
margin: 10px 0 0;
font-size: 14px;
color: #4b5563;
line-height: 1.55;
}

.delete-modal-error {
margin: 14px 0 0;
background: #fdecec;
color: #8d1c1c;
border: 1px solid #f7c5c5;
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
font-weight: 600;
}

.delete-modal-actions {
margin-top: 22px;
display: flex;
justify-content: flex-end;
gap: 10px;
}

.modal-btn {
border-radius: 10px;
border: 1px solid transparent;
padding: 9px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s, background 0.15s;
line-height: 1;
}

.modal-btn.cancel {
background: #fff;
color: #111;
border-color: #d1d5db;
}

.modal-btn.cancel:hover:not(:disabled) {
background: #f9fafb;
}

.modal-btn.confirm {
background: #111;
color: #fff;
border-color: #111;
min-width: 100px;
}

.modal-btn.confirm:hover:not(:disabled) {
background: #000;
}

.modal-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
58 changes: 57 additions & 1 deletion src/app/components/decision-list/decision-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,64 @@ <h3>{{ decision.title }}</h3>
</div>
<div class="decision-actions">
<a [routerLink]="[decision.id, 'edit']" class="btn-secondary">Edit</a>
<button (click)="deleteDecision(decision.id)" class="btn-danger">Delete</button>
<button
type="button"
class="btn-danger"
(click)="requestDeleteDecision(decision)"
[disabled]="isDeletingDecision && pendingDeleteDecision?.id === decision.id"
>
{{ isDeletingDecision && pendingDeleteDecision?.id === decision.id ? 'Deleting…' : 'Delete' }}
</button>
</div>
</div>
</div>
</div>

<!-- Delete confirmation modal -->
<div class="modal-backdrop" *ngIf="pendingDeleteDecision as decision" (click)="cancelDeleteDecision()" role="presentation">
<section
class="delete-modal"
role="dialog"
aria-modal="true"
aria-labelledby="delete-decision-title"
(click)="$event.stopPropagation()"
>
<div class="delete-modal-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
</svg>
</div>

<p class="delete-modal-eyebrow">Delete Decision</p>
<h3 id="delete-decision-title" class="delete-modal-title">"{{ decision.title }}"</h3>
<p class="delete-modal-copy">
This will permanently remove this decision and all associated data.
This action cannot be undone.
</p>

<p *ngIf="deleteDecisionError" class="delete-modal-error">{{ deleteDecisionError }}</p>

<div class="delete-modal-actions">
<button
type="button"
class="modal-btn cancel"
(click)="cancelDeleteDecision()"
[disabled]="isDeletingDecision"
>
Cancel
</button>
<button
type="button"
class="modal-btn confirm"
(click)="confirmDeleteDecision()"
[disabled]="isDeletingDecision"
>
{{ isDeletingDecision ? 'Deleting…' : 'Yes, Delete' }}
</button>
</div>
</section>
</div>
70 changes: 69 additions & 1 deletion src/app/components/decision-list/decision-list.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,76 @@ describe('DecisionListComponent', () => {
it('should have correct edit link', () => {
const editButton = fixture.debugElement.query(By.css('.btn-secondary'));
expect(editButton).toBeTruthy();
// Since it's a relative link [decision.id, 'edit'], we check if the attribute is present or just trust the binding
const link = editButton.nativeElement as HTMLAnchorElement;
expect(link.textContent).toContain('Edit');
});

// ── Delete modal flow ────────────────────────────────────────────────────

it('should not show delete modal by default', () => {
const backdrop = fixture.nativeElement.querySelector('.modal-backdrop');
expect(backdrop).toBeNull();
});

it('should open delete modal with decision title when requestDeleteDecision is called', () => {
component.requestDeleteDecision(mockDecisions[0]);
fixture.detectChanges();

const backdrop = fixture.nativeElement.querySelector('.modal-backdrop');
expect(backdrop).toBeTruthy();

const title = fixture.nativeElement.querySelector('.delete-modal-title');
expect(title.textContent).toContain('Test Decision');
});

it('should close modal and clear state when cancelDeleteDecision is called', () => {
component.requestDeleteDecision(mockDecisions[0]);
fixture.detectChanges();

component.cancelDeleteDecision();
fixture.detectChanges();

const backdrop = fixture.nativeElement.querySelector('.modal-backdrop');
expect(backdrop).toBeNull();
expect(component.pendingDeleteDecision).toBeNull();
expect(component.deleteDecisionError).toBe('');
});

it('should close modal when backdrop overlay is clicked', () => {
component.requestDeleteDecision(mockDecisions[0]);
fixture.detectChanges();

const backdrop = fixture.nativeElement.querySelector('.modal-backdrop') as HTMLElement;
backdrop.click();
fixture.detectChanges();

expect(component.pendingDeleteDecision).toBeNull();
});

it('should call deleteDecision service and close modal on confirmDeleteDecision', () => {
component.requestDeleteDecision(mockDecisions[0]);
fixture.detectChanges();

component.confirmDeleteDecision();
fixture.detectChanges();

expect(mockDecisionService.deleteDecision).toHaveBeenCalledWith('10', '1');
expect(component.pendingDeleteDecision).toBeNull();
expect(component.isDeletingDecision).toBeFalse();
});

it('should not open modal while a delete is already in progress', () => {
component.isDeletingDecision = true;
component.requestDeleteDecision(mockDecisions[0]);

expect(component.pendingDeleteDecision).toBeNull();
});

it('should not close modal while a delete is in progress', () => {
component.requestDeleteDecision(mockDecisions[0]);
component.isDeletingDecision = true;
component.cancelDeleteDecision();

expect(component.pendingDeleteDecision).toEqual(mockDecisions[0]);
});
});
56 changes: 40 additions & 16 deletions src/app/components/decision-list/decision-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ import { Observable, Subject, takeUntil, startWith, switchMap, catchError, of }
export class DecisionListComponent implements OnInit, OnDestroy {
decisions$: Observable<Decision[]> | undefined;
error: string | null = null;

// Delete confirmation state
pendingDeleteDecision: Decision | null = null;
isDeletingDecision = false;
deleteDecisionError = '';

private refresh$ = new Subject<void>();
private destroy$ = new Subject<void>();
private workspaceId: string | null = null;
Expand All @@ -30,7 +36,7 @@ export class DecisionListComponent implements OnInit, OnDestroy {
this.decisions$ = this.refresh$.pipe(
startWith(undefined),
switchMap(() => this.decisionService.getDecisions(this.workspaceId!).pipe(
catchError(err => {
catchError(() => {
this.error = 'Failed to load decisions. Please try again.';
return of([]);
})
Expand All @@ -44,21 +50,39 @@ export class DecisionListComponent implements OnInit, OnDestroy {
this.destroy$.complete();
}

deleteDecision(id: string): void {
if (confirm('Are you sure you want to delete this decision?') && this.workspaceId) {
this.error = null;
this.decisionService.deleteDecision(this.workspaceId, id)
.pipe(takeUntil(this.destroy$))
.subscribe({
next: () => {
this.refresh$.next();
},
error: (err) => {
console.error('Delete failed', err);
this.error = 'Failed to delete decision. Please try again.';
}
});
}
requestDeleteDecision(decision: Decision): void {
if (this.isDeletingDecision) return;
this.pendingDeleteDecision = decision;
this.deleteDecisionError = '';
}

cancelDeleteDecision(): void {
if (this.isDeletingDecision) return;
this.pendingDeleteDecision = null;
this.deleteDecisionError = '';
}

confirmDeleteDecision(): void {
const decision = this.pendingDeleteDecision;
if (!decision || !this.workspaceId || this.isDeletingDecision) return;

this.isDeletingDecision = true;
this.deleteDecisionError = '';

this.decisionService.deleteDecision(this.workspaceId, decision.id)
.pipe(takeUntil(this.destroy$))
.subscribe({
next: () => {
this.pendingDeleteDecision = null;
this.isDeletingDecision = false;
this.error = null;
this.refresh$.next();
},
error: () => {
this.isDeletingDecision = false;
this.deleteDecisionError = 'Unable to delete decision. Please try again.';
}
});
}

isOverdue(decision: Decision): boolean {
Expand Down
Loading