Skip to content

fix(inventory): default sub-tab is Active Commitments, not RI Exchange #757

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
cristim merged 1 commit into from
May 27, 2026
Merged

fix(inventory): default sub-tab is Active Commitments, not RI Exchange #757

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
21 changes: 12 additions & 9 deletions frontend/src/__tests__/inventory.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ function buildInventoryDOM(): void {
subnav.classList.add('inventory-subnav');

for (const [name, label, isActive] of [
['active-commitments', 'Active commitments', false],
['active-commitments', 'Active commitments', true],
['coverage', 'Coverage', false],
['ri-exchange', 'RI Exchange', true],
['ri-exchange', 'RI Exchange', false],
] as const) {
const btn = document.createElement('button');
btn.classList.add('sub-tab-btn');
Expand All @@ -56,7 +56,6 @@ function buildInventoryDOM(): void {
// container (matches index.html shape).
const ac = document.createElement('section');
ac.id = 'inventory-active-commitments';
ac.classList.add('hidden');
const refresh = document.createElement('button');
refresh.id = 'active-commitments-refresh-btn';
refresh.textContent = 'Refresh';
Expand All @@ -82,6 +81,7 @@ function buildInventoryDOM(): void {

const riSection = document.createElement('section');
riSection.id = 'inventory-ri-exchange';
riSection.classList.add('hidden');
riSection.textContent = 'ri-exchange';
tab.appendChild(riSection);

Expand Down Expand Up @@ -165,25 +165,28 @@ describe('Inventory & Coverage sub-section switching', () => {
expect(loadRIExchange).toHaveBeenCalledTimes(1);
});

test('switchInventorySubSection falls back to ri-exchange for unknown sub-section', () => {
test('switchInventorySubSection falls back to active-commitments for unknown sub-section', () => {
switchInventorySubSection('something-unknown');

expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(false);
expect(loadRIExchange).toHaveBeenCalledTimes(1);
expect(document.getElementById('inventory-active-commitments')?.classList.contains('hidden')).toBe(false);
expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(true);
expect(api.listActiveCommitments).toHaveBeenCalledTimes(1);
});

test('loadInventory wires sub-nav click handlers and lands on default', () => {
loadInventory();

// Default landing is ri-exchange.
expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(false);
// Default landing is active-commitments (issue #751).
expect(document.getElementById('inventory-active-commitments')?.classList.contains('hidden')).toBe(false);
expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(true);

// Clicking a sub-tab button switches the section.
const coverageBtn = document.querySelector<HTMLButtonElement>('[data-inv-subtab="coverage"]')!;
coverageBtn.click();
expect(document.getElementById('inventory-coverage')?.classList.contains('hidden')).toBe(false);
expect(document.getElementById('inventory-ri-exchange')?.classList.contains('hidden')).toBe(true);
expect(document.getElementById('inventory-active-commitments')?.classList.contains('hidden')).toBe(true);
});

});

describe('loadActiveCommitments — fetch + render flow', () => {
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,16 +214,16 @@ <h2>Purchase History</h2>
<!-- Inventory & Coverage Tab (umbrella section folding in RI Exchange, issue #340 T4) -->
<div id="inventory-tab" class="tab-content" role="tabpanel" aria-labelledby="inventory-tab-btn">
<div class="inventory-subnav" role="tablist" aria-label="Inventory &amp; Coverage navigation">
<button class="sub-tab-btn" id="inv-subtab-active-commitments" data-inv-subtab="active-commitments" role="tab" aria-selected="false" aria-controls="inventory-active-commitments">Active commitments</button>
<button class="sub-tab-btn active" id="inv-subtab-active-commitments" data-inv-subtab="active-commitments" role="tab" aria-selected="true" aria-controls="inventory-active-commitments">Active commitments</button>
<button class="sub-tab-btn" id="inv-subtab-coverage" data-inv-subtab="coverage" role="tab" aria-selected="false" aria-controls="inventory-coverage">Coverage</button>
<button class="sub-tab-btn active" id="inv-subtab-ri-exchange" data-inv-subtab="ri-exchange" role="tab" aria-selected="true" aria-controls="inventory-ri-exchange">RI Exchange</button>
<button class="sub-tab-btn" id="inv-subtab-ri-exchange" data-inv-subtab="ri-exchange" role="tab" aria-selected="false" aria-controls="inventory-ri-exchange">RI Exchange</button>
</div>

<!-- Active commitments — per-commitment list backed by
/api/inventory/commitments (issue #340 deferred sub-task).
The table is rendered into #active-commitments-list by
loadActiveCommitments in inventory.ts. -->
<section id="inventory-active-commitments" class="hidden" role="tabpanel" aria-labelledby="inv-subtab-active-commitments">
<section id="inventory-active-commitments" role="tabpanel" aria-labelledby="inv-subtab-active-commitments">
<section class="card page-hero">
<div class="section-header">
<h2>Active commitments</h2>
Expand Down Expand Up @@ -254,7 +254,7 @@ <h2>Coverage</h2>
</section>

<!-- RI Exchange — relocated from the former top-level ri-exchange-tab. -->
<section id="inventory-ri-exchange" role="tabpanel" aria-labelledby="inv-subtab-ri-exchange">
<section id="inventory-ri-exchange" class="hidden" role="tabpanel" aria-labelledby="inv-subtab-ri-exchange">
<section class="card page-hero">
<div class="section-header">
<h2>Convertible RI Exchange</h2>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/inventory.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const SUB_SECTION_IDS: Record<InventorySubSection, string> = {
'ri-exchange': 'inventory-ri-exchange',
};

const DEFAULT_SUB_SECTION: InventorySubSection = 'ri-exchange';
const DEFAULT_SUB_SECTION: InventorySubSection = 'active-commitments';

let currentSubSection: InventorySubSection | undefined;
let listenersWired = false;
Expand Down Expand Up @@ -382,8 +382,8 @@ function wireSubNavListeners(): void {

/**
* Initialize the Inventory & Coverage section. Called by navigation.ts'
* switchTab when 'inventory' is selected. Defaults to the ri-exchange
* sub-section if the user hasn't selected one this session.
* switchTab when 'inventory' is selected. Defaults to active-commitments
* if the user hasn't selected a sub-section this session.
*/
export function loadInventory(): void {
wireSubNavListeners();
Expand Down
Loading