fix(ips): export ips to csv fixes

ref: #MANAGER-18928

Signed-off-by: Sachin Ramesh <[email protected]>

Author: sachinrameshn

packages/manager/apps/ips/public/translations/error/Messages_fr_FR.json

@@ -1,4 +1,5 @@
 {
   "manager_error_page_default": "Une erreur est survenue lors du chargement de la page.",
-  "managerApiError": "Une erreur est survenue <br> {{error}} <br> request_id: {{ovhQueryId}}"
+  "managerApiError": "Une erreur est survenue <br> {{error}} <br> request_id: {{ovhQueryId}}",
+  "managerApiErrorWithoutRequestId": "Une erreur est survenue <br> {{error}}"
 }

packages/manager/apps/ips/src/components/ApiError/ApiErrorMessage.tsx

@@ -8,12 +8,16 @@ import { TRANSLATION_NAMESPACES } from '@/utils';
 export const useApiErrorMessage = (error?: ApiError) => {
   const { t } = useTranslation(TRANSLATION_NAMESPACES.error);
 
-  return error
-    ? t('managerApiError', {
-        error: error?.response?.data?.message,
-        ovhQueryId: error?.response.headers?.['x-ovh-queryid'],
-      })
-    : undefined;
+  const errorMessage = error?.response?.data?.message || error?.message;
+  const ovhQueryId = error?.response.headers?.['x-ovh-queryid'];
+
+  if (!errorMessage) {
+    return undefined;
+  }
+
+  return ovhQueryId
+    ? t('managerApiError', { error: errorMessage, ovhQueryId })
+    : t('managerApiErrorWithoutRequestId', { error: errorMessage });
 };
 
 export type ApiErrorMessageProps = {

packages/manager/apps/ips/src/data/api/get/ipExport.ts

@@ -1,9 +1,13 @@
 import { aapi } from '@ovh-ux/manager-core-api';
-import { GetIpListParams } from './ipList';
 import { ExportIpToCsvData } from '@/data/hooks';
+import { IpTypeEnum } from './ipDetails';
 
-export type GetIpExportParams = GetIpListParams & {
-  serviceName: string;
+export type GetIpExportParams = {
+  ip?: string;
+  isAdditionalIp?: boolean;
+  type?: IpTypeEnum;
+  serviceName?: string;
+  version?: number;
 };
 
 export type IpExportType = {

packages/manager/apps/ips/src/data/hooks/useExportIpToCsv.ts

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { mkConfig, generateCsv, download } from 'export-to-csv';
 import { useMutation } from '@tanstack/react-query';
+import { ApiError } from '@ovh-ux/manager-core-api';
 import { TRANSLATION_NAMESPACES } from '@/utils';
 import { getIpExport, GetIpListParams } from '../api';
 
@@ -32,7 +33,10 @@ export const useExportIpToCsv = ({
   const handleExportToCsv = async (): Promise<ExportIpMutationData> => {
     const result = await getIpExport({
       ...apiFilter,
-      serviceName: apiFilter['routedTo.serviceName'],
+      serviceName:
+        apiFilter['routedTo.serviceName'] === null
+          ? '_PARK'
+          : apiFilter['routedTo.serviceName'],
     });
 
     const resultLength = result?.data?.length ?? 0;
@@ -60,7 +64,7 @@ export const useExportIpToCsv = ({
     throw new Error('No valid CSV could be downloaded');
   };
 
-  return useMutation({
+  return useMutation<ExportIpMutationData, ApiError>({
     mutationFn: handleExportToCsv,
     onSuccess,
     onError,

packages/manager/apps/ips/src/pages/actions/exportIpToCsv/exportIpToCsv.page.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { OdsText } from '@ovhcloud/ods-components/react';
@@ -9,34 +9,37 @@ import Loading from '@/components/Loading/Loading';
 import { TRANSLATION_NAMESPACES } from '@/utils';
 import { useExportIpToCsv } from '@/data/hooks';
 import { ListingContext } from '@/pages/listing/listingContext';
+import { ApiErrorMessage } from '@/components/ApiError/ApiErrorMessage';
 
 export default function ExportIpToCsv() {
   const { t } = useTranslation([
     TRANSLATION_NAMESPACES.exportIpToCsv,
     NAMESPACES.ACTIONS,
   ]);
   const { apiFilter } = useContext(ListingContext);
-  const { addSuccess, addError } = useNotifications();
+  const { addSuccess } = useNotifications();
   const navigate = useNavigate();
+  const [search] = useSearchParams();
 
   /*
     We need this ref to prevent a double navigation
     when closing the modale before the end of the download.
-    A useState or useLocation would have required a rerender 
+    A useState or useLocation would have required a rerender
     that we cannot have upon closing the modale
   */
   const isOpen = useRef<boolean>(true);
 
   const closeModal = () => {
     if (isOpen.current) {
       isOpen.current = false;
-      navigate('..');
+      navigate(`..?${search.toString()}`);
     }
   };
 
   const {
-    mutateAsync: handleExportToCsv,
+    mutate: handleExportToCsv,
     isPending: isCSVLoading,
+    error,
   } = useExportIpToCsv({
     apiFilter,
     onSuccess: (data) => {
@@ -46,7 +49,6 @@ export default function ExportIpToCsv() {
         closeModal();
       }
     },
-    onError: () => addError(t('exportIpToCsvError')),
   });
 
   return (
@@ -77,6 +79,7 @@ export default function ExportIpToCsv() {
           </OdsText>
         </>
       )}
+      <ApiErrorMessage error={error} />
     </Modal>
   );
 }

packages/manager/apps/ips/src/pages/actions/exportIpToCsv/exportIpToCsv.spec.tsx

@@ -22,6 +22,7 @@ vi.mock('react-i18next', () => ({
 
 vi.mock('react-router-dom', () => ({
   useNavigate: () => vi.fn(),
+  useSearchParams: () => ['', vi.fn()],
 }));
 
 const renderComponent = () => {

packages/manager/apps/ips/src/pages/listing/ipListing/ip.listing.page.tsx

@@ -78,12 +78,14 @@ export default function IpListingPage() {
               ]}
             />
             <OdsButton
-                variant={ODS_BUTTON_VARIANT.outline}
-                icon={ODS_ICON_NAME.download}
-                size={ODS_BUTTON_SIZE.sm}
-                onClick={() => navigate(urls.listingExportIpToCsv)}
-                label=""
-              />
+              variant={ODS_BUTTON_VARIANT.outline}
+              icon={ODS_ICON_NAME.download}
+              size={ODS_BUTTON_SIZE.sm}
+              onClick={() =>
+                navigate(`${urls.listingExportIpToCsv}?${search.toString()}`)
+              }
+              label=""
+            />
           </div>
           <QuickFilter />
         </div>