fix(web): label workspace default model selectors (#44500)

Author: linw1995

web/app/components/header/account-setting/model-provider-page/__tests__/index.spec.tsx

@@ -698,7 +698,11 @@ describe('ModelProviderPage', () => {
       const refreshedDialog = screen.getByRole('dialog', {
         name: 'modelProvider.modelProvider.systemModelSettingsTitle',
       })
-      expect(await within(refreshedDialog).findByRole('button', { name: /^GPT-4/ })).toBeVisible()
+      expect(
+        await within(refreshedDialog).findByRole('button', {
+          name: 'modelProvider.modelProvider.systemReasoningModel.key GPT-4',
+        }),
+      ).toBeVisible()
       expect(mockDefaultModelQuery).toHaveBeenCalledTimes(5)
     })
 

web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/clear-confirmation.browser.spec.tsx

@@ -83,7 +83,7 @@ it.each([
       )
       await screen.getByRole('button', { name: 'System Model Settings' }).click()
       const settings = screen.getByRole('dialog', { name: 'Default Model Settings' })
-      await settings.getByRole('button', { name: new RegExp(`^${modelType} model`) }).hover()
+      await settings.getByRole('button', { name: `${label} ${modelType} model` }).hover()
       const clearButton = settings.getByRole('button', { name: `Clear ${label}` })
       const settingsPopup = settings.element()
       await clearButton.click()
@@ -101,9 +101,10 @@ it.each([
         await expect.element(screen.getByRole('alertdialog')).not.toBeInTheDocument()
       }
       await expect.element(clearButton).not.toBeInTheDocument()
-      // All other defaults remain configured, so the only empty selector is the cleared field.
       await expect
-        .element(settings.getByRole('button', { name: 'plugin.detailPanel.configureModel' }))
+        .element(
+          settings.getByRole('button', { name: `${label} plugin.detailPanel.configureModel` }),
+        )
         .toHaveFocus()
     } finally {
       queryClient.clear()

web/app/components/header/account-setting/model-provider-page/system-model-selector/__tests__/index.spec.tsx

@@ -266,7 +266,7 @@ describe('SystemModel', () => {
       screen.queryByRole('button', { name: 'Clear Speech to Text Model' }),
     ).not.toBeInTheDocument()
     expect(
-      screen.getAllByRole('button', { name: 'plugin.detailPanel.configureModel' }),
+      screen.getAllByRole('button', { name: / plugin\.detailPanel\.configureModel$/ }),
     ).toHaveLength(4)
     expect(save).toBeEnabled()
   })
@@ -564,7 +564,9 @@ describe('SystemModel', () => {
 
       await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument())
       expect(screen.getByRole('dialog', { name: 'Default Model Settings' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /^Test model/ })).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'System Reasoning Model Test model' }),
+      ).toBeInTheDocument()
       expect(
         await screen.findByRole('button', { name: 'Clear System Reasoning Model' }),
       ).toBeEnabled()
@@ -655,7 +657,7 @@ describe('SystemModel', () => {
     await user.click(screen.getByRole('button', { name: /system model settings/i }))
 
     expect(
-      await screen.findAllByRole('button', { name: 'plugin.detailPanel.configureModel' }),
+      await screen.findAllByRole('button', { name: / plugin\.detailPanel\.configureModel$/ }),
     ).toHaveLength(5)
     expect(
       screen.queryByRole('button', { name: 'Clear System Reasoning Model' }),
@@ -686,7 +688,9 @@ describe('SystemModel', () => {
       )
     })
 
-    expect(screen.getByRole('button', { name: /^Test model/ })).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'System Reasoning Model Test model' }),
+    ).toBeInTheDocument()
     expect(screen.queryByText('background-model')).not.toBeInTheDocument()
     await user.click(screen.getByRole('button', { name: 'Save' }))
     await waitFor(() => {

web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx

@@ -287,6 +287,7 @@ function SystemModelSession({
   }
 
   const getClearProps = (modelType: ModelTypeEnum, labelKey: SystemModelLabelKey) => ({
+    'aria-labelledby': `${modelLabelId}-${labelKey}`,
     triggerRef: (element: HTMLButtonElement | null) => {
       modelTriggersRef.current[modelType] = element
     },