Skip to content

fix(frontend): offer a bound plan's providers in the plans provider filter #1880

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
Nov 9, 2026
Merged

fix(frontend): offer a bound plan's providers in the plans provider filter #1880

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
17 changes: 17 additions & 0 deletions frontend/src/__tests__/plans-column-filters.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,23 @@ describe('Planned Purchases column filters (issue #166 follow-up)', () => {
expect(labels).toEqual(['Jan 2, 2026', 'Jan 10, 2026', 'Jun 2, 2026', 'Dec 1, 2026']);
});

// #1851: a bound plan spanning providers is shown as provider "multiple" and lists
// its real providers; the provider options are those providers, never "multiple".
test('provider options list a bound plan\'s providers, not "multiple"', async () => {
(api.getPlannedPurchases as jest.Mock).mockResolvedValue({ purchases: [
{ ...seedPurchases[0], id: 'b1', provider: 'multiple', providers: ['aws', 'gcp'] },
{ ...seedPurchases[1], id: 'u1', provider: 'azure' },
{ ...seedPurchases[0], id: 'e1', provider: 'oci', providers: [] },
] });
await loadPlans();
document.querySelector<HTMLButtonElement>(
'#planned-purchases-list th .column-filter-btn[data-column="provider"]',
)?.click();
const values = Array.from(document.querySelectorAll<HTMLInputElement>('.column-filter-popover .column-filter-item input[type="checkbox"]'))
.map((i) => i.dataset['value']);
expect(values).toEqual(['aws', 'azure', 'gcp', 'oci']);
});

test('clicking a trigger opens a popover detached to document.body', async () => {
await loadPlans();
const providerBtn = document.querySelector<HTMLButtonElement>(
Expand Down
13 changes: 12 additions & 1 deletion frontend/src/plans.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,15 @@ const PLANS_NUMERIC_COLUMNS: ReadonlySet<state.PlansColumnId> = new Set<state.Pl
'count', 'upfront_cost', 'estimated_savings',
]);

// A bound plan spanning providers has provider "multiple" and lists its real
// providers (#1746); the provider options are those providers, never "multiple".
function plansProviderOptions(purchases: readonly PlannedPurchase[]): string[] {
return sortedDistinctValues(
purchases.flatMap(p => (p.providers && p.providers.length > 0 ? p.providers : [p.provider ?? ''])),
(value) => value,
);
}

function plansColumnLabel(column: state.PlansColumnId): string {
switch (column) {
case 'plan_name': return 'Plan';
Expand Down Expand Up @@ -382,7 +391,9 @@ function openPlansColumnPopover(column: state.PlansColumnId, anchor: HTMLElement
column,
label: plansColumnLabel(column),
kind: PLANS_NUMERIC_COLUMNS.has(column) ? 'numeric' : 'categorical',
distinctValues: sortedDistinctValues(lastLoadedPurchases, (p) => categoricalCellValueForPlan(p, column)),
distinctValues: column === 'provider'
? plansProviderOptions(lastLoadedPurchases)
: sortedDistinctValues(lastLoadedPurchases, (p) => categoricalCellValueForPlan(p, column)),
displayLabel: (value) => plansCategoricalDisplayLabel(column, value),
getFilter: () => state.getPlansColumnFilters()[column],
onCommit: (filter) => {
Expand Down
Loading