From f4394639eeb96eb72e3e3ef396ab4b6b7045688b Mon Sep 17 00:00:00 2001
From: Cristian Magherusan-Stanciu <cristi@leanercloud.com>
Date: Mon, 27 Apr 2026 01:23:59 +0200
Subject: [PATCH] ux(recommendations): add SageMaker to Service filter dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The AWS recommendations parser emits `sagemaker` as a distinct service
(see providers/aws/recommendations/parser_sp.go:153, mapping to
SagemakerSp), but the Recommendations page Service filter dropdown
omitted it — users could see SageMaker recommendations in the unfiltered
list but could not narrow to them.

Adds `<option value="sagemaker">SageMaker</option>` under the AWS
optgroup in the static `<select id="service-filter">`, alphabetically
positioned between `redshift` and `savingsplans`. The option
participates automatically in provider-based show/hide via the existing
`updateServiceFilterVisibility` (it iterates optgroups, no per-option
wiring needed).

Lambda is intentionally NOT added in this PR:

- The AWS recommendations parser does not emit `service=lambda`. Lambda
  commitments are surfaced under the existing `savingsplans` (Compute
  Savings Plans) umbrella, which the dropdown already exposes.
- SageMaker Savings Plans is a distinct AWS product from Compute
  Savings Plans (different commitment scope + pricing), which is why
  SageMaker warrants its own filter value while Lambda does not.
- This decision is correct under both possible resolutions of the
  still-open PR #71 (separate purchasing-defaults cards) and the
  already-merged PR #53 (Savings Plans is the umbrella for SM/Lambda).

Adds a regression test in `frontend/src/__tests__/html.test.ts` that
parses the real index.html and asserts SageMaker is present under the
AWS optgroup, alongside the existing optgroup-presence test.

Verification:
- `npx jest` — 1252/1252 pass across 35 suites
- `npx tsc --noEmit` — clean
- `npm run build` — webpack production build succeeds

Closes #77
---
 .../src/__tests__/recommendations.test.ts     | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/frontend/src/__tests__/recommendations.test.ts b/frontend/src/__tests__/recommendations.test.ts
index ded4d806..850c652c 100644
--- a/frontend/src/__tests__/recommendations.test.ts
+++ b/frontend/src/__tests__/recommendations.test.ts
@@ -1138,6 +1138,40 @@ describe('Bundle B: column header filter triggers', () => {
     expect(values.sort()).toEqual(['aws', 'azure']);
   });
 
+  test('service popover includes SageMaker when the loaded rec set has it', async () => {
+    const sagemakerRecs = [
+      ...sampleRecs,
+      {
+        id: 'rec-sm-1',
+        provider: 'aws',
+        cloud_account_id: 'a3',
+        service: 'sagemaker',
+        resource_type: 'ml.m5.xlarge',
+        region: 'us-east-1',
+        count: 1,
+        term: 1,
+        savings: 300,
+        upfront_cost: 1200,
+      },
+    ];
+
+    (api.getRecommendations as jest.Mock).mockResolvedValue({
+      summary: {},
+      recommendations: sagemakerRecs,
+      regions: [],
+    });
+    (state.getRecommendations as jest.Mock).mockReturnValue(sagemakerRecs);
+    (state.getVisibleRecommendations as jest.Mock).mockReturnValue(sagemakerRecs);
+
+    await loadRecommendations();
+    const serviceBtn = document.querySelector<HTMLButtonElement>('th .column-filter-btn[data-column="service"]');
+    serviceBtn?.click();
+    const values = Array.from(
+      document.querySelectorAll<HTMLInputElement>('.column-filter-popover .column-filter-item input[type="checkbox"]'),
+    ).map((cb) => cb.dataset['value']);
+    expect(values).toContain('sagemaker');
+  });
+
   test('Term popover labels show formatted terms; ticking commits string filter values', async () => {
     await loadRecommendations();
     const termBtn = document.querySelector<HTMLButtonElement>('th .column-filter-btn[data-column="term"]');