(UI) fix adding Vertex Models (BerriAI#8129)

* fix handleSubmit

* update handleAddModelSubmit

* add jest testing for ui

* add step for running ui unit tests

* add validate json step to add model

* ui jest testing fixes

* update package lock

* ci/cd run again

* fix antd import

* run jest tests first

* fix antd install

* fix ui unit tests

* fix unit test ui

Author: ishaan-jaff

litellm-js/proxy/tsconfig.json

@@ -11,6 +11,7 @@
       "@cloudflare/workers-types"
     ],
     "jsx": "react-jsx",
-    "jsxImportSource": "hono/jsx"
+    "jsxImportSource": "hono/jsx",
+    "skipLibCheck": true
   },
 }

tests/local_testing/test_completion.py

@@ -11,7 +11,7 @@
 
 sys.path.insert(
     0, os.path.abspath("../..")
-)  # Adds the parent directory to the system-path
+)  # Adds the parent directory to the system path
 
 
 import os

tests/proxy_admin_ui_tests/ui_unit_tests/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

tests/proxy_admin_ui_tests/ui_unit_tests/handle_add_model_submit_test.tsx

@@ -0,0 +1,83 @@
+import { handleAddModelSubmit } from '../../../ui/litellm-dashboard/src/components/add_model/handle_add_model_submit';
+import { modelCreateCall } from '../../../ui/litellm-dashboard/src/components/networking';
+
+// Mock the dependencies
+const mockModelCreateCall = jest.fn().mockResolvedValue({ data: 'success' });
+jest.mock('../../../ui/litellm-dashboard/src/components/networking', () => ({
+  modelCreateCall: async (accessToken: string, formValues: any) => mockModelCreateCall(formValues)
+}));
+
+// Also need to mock provider_map
+jest.mock('../../../ui/litellm-dashboard/src/components/provider_info_helpers', () => ({
+  provider_map: {
+    'openai': 'openai'
+  }
+}));
+
+jest.mock('antd', () => ({
+  message: {
+    error: jest.fn()
+  }
+}));
+
+describe('handleAddModelSubmit', () => {
+  const mockForm = {
+    resetFields: jest.fn()
+  };
+  const mockAccessToken = 'test-token';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockModelCreateCall.mockClear();
+  });
+
+  it('should not modify model name when all-wildcard is not selected', async () => {
+    const formValues = {
+      model: 'gpt-4',
+      custom_llm_provider: 'openai',
+      model_name: 'my-gpt4-deployment'
+    };
+
+    await handleAddModelSubmit(formValues, mockAccessToken, mockForm);
+    
+    console.log('Expected call:', {
+      model_name: 'my-gpt4-deployment',
+      litellm_params: {
+        model: 'gpt-4',
+        custom_llm_provider: 'openai'
+      },
+      model_info: {}
+    });
+    console.log('Actual calls:', mockModelCreateCall.mock.calls);
+
+    expect(mockModelCreateCall).toHaveBeenCalledWith({
+      model_name: 'my-gpt4-deployment',
+      litellm_params: {
+        model: 'gpt-4',
+        custom_llm_provider: 'openai'
+      },
+      model_info: {}
+    });
+    expect(mockForm.resetFields).toHaveBeenCalled();
+  });
+
+  it('should handle all-wildcard model correctly', async () => {
+    const formValues = {
+      model: 'all-wildcard',
+      custom_llm_provider: 'openai',
+      model_name: 'my-deployment'
+    };
+
+    await handleAddModelSubmit(formValues, mockAccessToken, mockForm);
+
+    expect(mockModelCreateCall).toHaveBeenCalledWith({
+      model_name: 'openai/*',
+      litellm_params: {
+        model: 'openai/*',
+        custom_llm_provider: 'openai'
+      },
+      model_info: {}
+    });
+    expect(mockForm.resetFields).toHaveBeenCalled();
+  });
+});

tests/proxy_admin_ui_tests/ui_unit_tests/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+      '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+      '\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js'
+    },
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    testMatch: [
+      '<rootDir>/**/*.test.tsx',
+      '<rootDir>/**/*_test.tsx'  // Added this to match your file naming
+    ],
+    moduleDirectories: ['node_modules'],
+    testPathIgnorePatterns: ['/node_modules/'],
+    transform: {
+      '^.+\\.(ts|tsx)$': 'ts-jest'
+    }
+  }

tests/proxy_admin_ui_tests/ui_unit_tests/jest.setup.js

@@ -0,0 +1 @@
+// Add any global setup here