feature: add export test cases (#2408)

Author: PolinaGurinovich97

apps/ai-dial-admin/src/app/api/test-suites/export/route.ts

@@ -0,0 +1,14 @@
+import { cookies, headers } from 'next/headers';
+import { NextRequest } from 'next/server';
+
+import { testSuitesApi } from '@/src/app/api/api';
+import { getUserToken } from '@/src/utils/auth/auth-request';
+import { getIsEnableAuthToggle } from '@/src/utils/env/get-auth-toggle';
+
+export async function GET(req: NextRequest) {
+  const token = await getUserToken(getIsEnableAuthToggle(), headers(), cookies());
+  const reqUrl = req.url;
+  const { searchParams } = new URL(reqUrl);
+  const id = searchParams.get('id') as string;
+  return testSuitesApi.exportTestCasesCsv(decodeURIComponent(id), token);
+}

apps/ai-dial-admin/src/components/Common/ComplexInput/ComplexInput.tsx

@@ -22,14 +22,16 @@ const ComplexInput: FC<Props> = ({ fullValue, label, isFullWidth, copyable = tru
   const t = useI18n();
   return (
     <div className="flex items-end gap-2">
-      <DialInput
-        labelProps={{ label, required }}
-        containerClassName={mergeClasses(
-          isFullWidth ? 'w-full' : copyable ? CONTROL_WITH_BUTTON_WIDTH : STANDARD_CONTROL_WIDTH,
-        )}
-        {...props}
-      />
-      {copyable && <CopyButton valueLabel={label} value={fullValue} buttonLabel={t(ButtonsI18nKey.Copy)} />}
+      <div className="flex items-end gap-2">
+        <DialInput
+          labelProps={{ label, required }}
+          containerClassName={mergeClasses(
+            isFullWidth ? 'w-full' : copyable ? CONTROL_WITH_BUTTON_WIDTH : STANDARD_CONTROL_WIDTH,
+          )}
+          {...props}
+        />
+        {copyable && <CopyButton valueLabel={label} value={fullValue} buttonLabel={t(ButtonsI18nKey.Copy)} />}
+      </div>
     </div>
   );
 };

apps/ai-dial-admin/src/components/TestSuites/TestCases/Header.tsx

@@ -3,7 +3,7 @@
 import { FC, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { IconPlus } from '@tabler/icons-react';
+import { IconDownload, IconPlus } from '@tabler/icons-react';
 import {
   ButtonAppearance,
   ButtonVariant,
@@ -21,8 +21,9 @@ interface Props {
   selectedTestSuiteId: string;
   onApplyImport: (file: File) => void;
   onAdd?: () => void;
+  onExport?: () => void;
 }
-const HeaderButtons: FC<Props> = ({ selectedTestSuiteId, onApplyImport, onAdd }) => {
+const HeaderButtons: FC<Props> = ({ selectedTestSuiteId, onApplyImport, onAdd, onExport }) => {
   const t = useI18n();
 
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
@@ -40,6 +41,15 @@ const HeaderButtons: FC<Props> = ({ selectedTestSuiteId, onApplyImport, onAdd })
         appearance={ButtonAppearance.Ghost}
       />
 
+      {onExport && (
+        <DialPrimaryButton
+          label={t(ButtonsI18nKey.Export)}
+          iconBefore={<IconDownload {...BASE_BUTTON_ICON_PROPS} />}
+          onClick={onExport}
+          appearance={ButtonAppearance.Ghost}
+        />
+      )}
+
       <DialPrimaryButton
         label={t(ButtonsI18nKey.Add)}
         iconBefore={<IconPlus {...BASE_BUTTON_ICON_PROPS} />}

apps/ai-dial-admin/src/components/TestSuites/TestCases/TestCasesList.tsx

@@ -19,8 +19,8 @@ import { SaveValidationContextProvider } from '@/src/context/SaveValidationConte
 import { useI18n } from '@/src/locales/client';
 import { TestCase, TestSuite } from '@/src/models/evaluation/test-suite';
 import { getErrorNotification, getSuccessNotification } from '@/src/utils/notification';
-import HeaderButtons from './Header';
 import { DialLoader } from '@epam/ai-dial-ui-kit';
+import HeaderButtons from './Header';
 
 export interface TestCasesActions {
   getDirtyTestCases: () => TestCase[];
@@ -152,6 +152,13 @@ const TestCasesList: FC<Props> = ({ selectedTestSuite, testCasesActionsRef, onDi
     [refreshGrid, selectedTestSuite.id, showNotification, t],
   );
 
+  const onExport = useCallback(() => {
+    const testSuiteId = selectedTestSuite.id;
+    if (!testSuiteId) return;
+
+    window.open(`/api/test-suites/export?id=${encodeURIComponent(testSuiteId)}`, '_blank');
+  }, [selectedTestSuite.id, showNotification, t]);
+
   const onAddTestCase = useCallback(() => {
     const testSuiteId = selectedTestSuite.id;
     if (!testSuiteId) return;
@@ -244,6 +251,7 @@ const TestCasesList: FC<Props> = ({ selectedTestSuite, testCasesActionsRef, onDi
               selectedTestSuiteId={selectedTestSuite.id as string}
               onApplyImport={onApplyImport}
               onAdd={onAddTestCase}
+              onExport={onExport}
             />
           </ListEntities>
         )}

apps/ai-dial-admin/src/server/eval/test-suites-api.ts

@@ -97,6 +97,11 @@ export class TestSuitesApi extends BaseApi {
     return this.putAction(TEST_CASES_URL(id), testCases, token);
   }
 
+  exportTestCasesCsv(testSuiteId: string, token: Token) {
+    const filename = `test_suite_${testSuiteId}_export.csv`;
+    return this.streamRequest(`${TEST_CASES_URL(testSuiteId)}/export.csv`, filename, token);
+  }
+
   createTestSuite(suite: TestSuite, token: Token): Promise<ServerActionResponse> {
     return this.postAction(TEST_SUITES_URL, suite, token);
   }

apps/ai-dial-admin/src/server/eval/tests/test-suites-api.spec.ts

@@ -243,6 +243,20 @@ describe('Server :: TestSuiteApi', () => {
     );
   });
 
+  test('Should call exportTestCasesCsv', async () => {
+    const streamResponse = new Response(null, { status: 200 });
+    const streamSpy = vi.spyOn(instance as any, 'streamRequest').mockResolvedValue(streamResponse);
+
+    const result = await instance.exportTestCasesCsv('suite-id', TOKEN_MOCK);
+
+    expect(streamSpy).toHaveBeenCalledWith(
+      `${TEST_CASES_URL('suite-id')}/export.csv`,
+      'test_suite_suite-id_export.csv',
+      TOKEN_MOCK,
+    );
+    expect(result).toBe(streamResponse);
+  });
+
   test('Should call getTestSuiteTemplateVariables', async () => {
     fetch.mockResponseOnce(JSON.stringify(mockTestSuite));
     await instance.getTestSuiteTemplateVariables('id', TOKEN_MOCK);