fix: type code was not initialized and back button not work on export

src/packages/modules-concepts/collections/export/home-container.spec.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from '@testing-library/react';
+import { Mock, vi } from 'vitest';
+import { Component } from './home-container';
+import {
+	useCollections,
+	useCollectionExporter,
+} from '../../../utils/hooks/collections';
+import { useTitle } from '../../../utils/hooks/useTitle';
+import { Picker } from '../../../components';
+import D from '../../../deprecated-locales/build-dictionary';
+
+// Mock des hooks
+vi.mock('../../../utils/hooks/collections', () => ({
+	useCollections: vi.fn(),
+	useCollectionExporter: vi.fn(),
+}));
+
+vi.mock('../../../utils/hooks/useTitle', () => ({
+	useTitle: vi.fn(),
+}));
+
+vi.mock('../../../components', () => ({
+	Picker: vi.fn(() => <div data-testid="picker-mock" />),
+	Loading: () => <div data-testid="loading-mock" />,
+}));
+
+describe('Component', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('displays the loader while loading collections', () => {
+		(useCollections as Mock).mockReturnValue({
+			data: [],
+			isLoading: true,
+		});
+		(useCollectionExporter as Mock).mockReturnValue({
+			mutate: vi.fn(),
+			isPending: false,
+		});
+
+		render(<Component />);
+
+		screen.getByTestId('loading-mock');
+	});
+
+	it('displays the loader during export', () => {
+		(useCollections as Mock).mockReturnValue({
+			data: [],
+			isLoading: false,
+		});
+		(useCollectionExporter as Mock).mockReturnValue({
+			mutate: vi.fn(),
+			isPending: true,
+		});
+
+		render(<Component />);
+
+		screen.getByTestId('loading-mock');
+	});
+
+	it('displays Picker with the correct props after loading', () => {
+		const collectionsMock = [{ id: 1, label: 'Collection 1' }];
+		(useCollections as Mock).mockReturnValue({
+			data: collectionsMock,
+			isLoading: false,
+		});
+		(useCollectionExporter as Mock).mockReturnValue({
+			mutate: vi.fn(),
+			isPending: false,
+		});
+
+		render(<Component />);
+
+		screen.getByTestId('picker-mock');
+		expect(Picker).toHaveBeenCalledWith(
+			expect.objectContaining({
+				items: collectionsMock,
+				title: D.exportTitle,
+				panelTitle: D.collectionsExportPanelTitle,
+				labelWarning: D.hasNotCollectionToExport,
+				context: 'concepts/collections',
+				disabled: true, // ids.length < 1
+			}),
+			{},
+		);
+	});
+
+	it('calls useTitle with the correct titles', () => {
+		render(<Component />);
+
+		expect(useTitle).toHaveBeenCalledWith(D.collectionsTitle, D.exportTitle);
+	});
+});

src/packages/modules-concepts/collections/export/home-container.jsx → src/packages/modules-concepts/collections/export/home-container.tsx

@@ -10,7 +10,7 @@ import { useTitle } from '../../../utils/hooks/useTitle';
 
 export const Component = () => {
 	useTitle(D.collectionsTitle, D.exportTitle);
-	const [ids, setIds] = useState([]);
+	const [ids, setIds] = useState<string[]>([]);
 
 	const { data: collections, isLoading } = useCollections();
 	const { mutate: exportCollection, isPending: isExporting } =
@@ -25,17 +25,18 @@ export const Component = () => {
 			title={D.exportTitle}
 			panelTitle={D.collectionsExportPanelTitle}
 			labelWarning={D.hasNotCollectionToExport}
-			handleAction={(value) => setIds(value)}
-			context="collections"
+			handleAction={(value: string[]) => setIds(value)}
+			context="concepts/collections"
 			disabled={ids.length < 1}
 			disabledWarningMessage={D.hasNotCollectionToExport}
 			ValidationButton={() => (
 				<ExportButtons
-					ids={ids}
 					disabled={ids.length < 1}
-					exportHandler={(type, withConcepts, lang = 'lg1') =>
-						exportCollection({ ids, type, withConcepts, lang })
-					}
+					exportHandler={(
+						type: string,
+						withConcepts: boolean,
+						lang: 'lg1' | 'lg2' = 'lg1',
+					) => exportCollection({ ids, type, withConcepts, lang })}
 				/>
 			)}
 		/>

src/packages/modules-operations/series/search.jsx

@@ -10,14 +10,13 @@ import { Select } from '../../components/select-rmes';
 
 import D from '../../deprecated-locales';
 
-import { CL_SOURCE_CATEGORY } from '../../redux/actions/constants/codeList';
 import { OperationsApi } from '../../sdk/operations-api';
 import { filterKeyDeburr } from '../../utils/array-utils';
-import { useCodesList } from '../../utils/hooks/codeslist';
 import { useOrganizationsOptions } from '../../utils/hooks/organizations';
 import { useStamps } from '../../utils/hooks/stamps';
 import { useTitle } from '../../utils/hooks/useTitle';
 import useUrlQueryParameters from '../../utils/hooks/useUrlQueryParameters';
+import { TypeCodeInput } from './search/typeCodeInput';
 
 const filterLabel = filterKeyDeburr(['prefLabelLg1']);
 const filterTypeCode = filterKeyDeburr(['typeCode']);
@@ -30,7 +29,7 @@ const defaultFormState = {
 	dataCollector: '',
 };
 
-export const SearchFormList = ({ categories, stamps, data }) => {
+export const SearchFormList = ({ stamps, data }) => {
 	const { form, reset, handleChange } = useUrlQueryParameters(defaultFormState);
 
 	const { prefLabelLg1, typeCode, creator, publisher, dataCollector } = form;
@@ -97,26 +96,10 @@ export const SearchFormList = ({ categories, stamps, data }) => {
 			</div>
 			<div className="form-group row">
 				<div className="col-md-12">
-					<label htmlFor="typeOperation" className="w-100">
-						{D.operationType}
-
-						<Select
-							placeholder=""
-							value={
-								(
-									categories.codes.find(
-										(category) => category.code === typeCode,
-									) || {}
-								).value
-							}
-							options={categories?.codes?.map((cat) => {
-								return { value: cat.code, label: cat.labelLg1 };
-							})}
-							onChange={(value) => {
-								handleChange('typeCode', value);
-							}}
-						/>
-					</label>
+					<TypeCodeInput
+						value={typeCode}
+						onChange={(value) => handleChange('typeCode', value)}
+					/>
 				</div>
 			</div>
 			<div className="form-group row">
@@ -179,7 +162,6 @@ export const SearchFormList = ({ categories, stamps, data }) => {
 export const Component = () => {
 	useTitle(D.seriesTitle + ' - ' + D.operationsTitle, D.advancedSearch);
 	const [data, setData] = useState();
-	const categories = useCodesList(CL_SOURCE_CATEGORY);
 
 	const { data: stamps = [] } = useStamps();
 
@@ -188,5 +170,5 @@ export const Component = () => {
 	}, []);
 
 	if (!data) return <Loading />;
-	return <SearchFormList data={data} categories={categories} stamps={stamps} />;
+	return <SearchFormList data={data} stamps={stamps} />;
 };

src/packages/modules-operations/series/search.spec.jsx

@@ -5,6 +5,7 @@ import {
 } from '../../redux/actions/constants/codeList';
 import useUrlQueryParameters from '../../utils/hooks/useUrlQueryParameters';
 import { renderWithRouter } from '../../tests-utils/render';
+import * as useCodesListHook from '../../utils/hooks/codeslist';
 
 const data = [
 	{
@@ -124,9 +125,12 @@ const organisations = [
 	{ value: 'DG75-A040', label: 'DG75-A040' },
 ];
 const stamps = ['DG57-C003'];
-const categories = {
-	codes: [{ code: 'S', labelLg2: 'Survey', labelLg1: 'Enquete' }],
-};
+
+vi.spyOn(useCodesListHook, 'useCodesList').mockImplementation(() => {
+	return {
+		codes: [{ code: 'S', labelLg2: 'Survey', labelLg1: 'Enquete' }],
+	};
+});
 
 vi.mock('../../utils/hooks/useUrlQueryParameters');
 
@@ -142,7 +146,7 @@ describe('<SearchFormList />', () => {
 		useUrlQueryParameters.mockReturnValue({ form });
 
 		const { container } = renderWithRouter(
-			<SearchFormList data={data} stamps={stamps} categories={categories} />,
+			<SearchFormList data={data} stamps={stamps} />,
 		);
 		expect(container.querySelectorAll('li')).toHaveLength(6);
 	});
@@ -152,23 +156,23 @@ describe('<SearchFormList />', () => {
 		useUrlQueryParameters.mockReturnValue({ form });
 
 		const { container } = renderWithRouter(
-			<SearchFormList data={data} stamps={stamps} categories={categories} />,
+			<SearchFormList data={data} stamps={stamps} />,
 		);
 		expect(container.querySelectorAll('li')).toHaveLength(1);
 	});
 	it('should filter by typeCode', () => {
 		const form = { typeCode: 'S' };
 		useUrlQueryParameters.mockReturnValue({ form });
 		const { container } = renderWithRouter(
-			<SearchFormList data={data} stamps={stamps} categories={categories} />,
+			<SearchFormList data={data} stamps={stamps} />,
 		);
 		expect(container.querySelectorAll('li')).toHaveLength(3);
 	});
 	it('should filter by creators', async () => {
 		const form = { creator: 'DG57-C003' };
 		useUrlQueryParameters.mockReturnValue({ form });
 		const { container } = renderWithRouter(
-			<SearchFormList data={data} stamps={stamps} categories={categories} />,
+			<SearchFormList data={data} stamps={stamps} />,
 		);
 
 		expect(container.querySelectorAll('li')).toHaveLength(1);
@@ -178,7 +182,7 @@ describe('<SearchFormList />', () => {
 		const form = { publisher: 'Acoss' };
 		useUrlQueryParameters.mockReturnValue({ form });
 		const { container } = renderWithRouter(
-			<SearchFormList data={data} stamps={stamps} categories={categories} />,
+			<SearchFormList data={data} stamps={stamps} />,
 		);
 
 		expect(container.querySelectorAll('li')).toHaveLength(1);
@@ -188,7 +192,7 @@ describe('<SearchFormList />', () => {
 		const form = { dataCollector: 'DG75-A040' };
 		useUrlQueryParameters.mockReturnValue({ form });
 		const { container } = renderWithRouter(
-			<SearchFormList data={data} stamps={stamps} categories={categories} />,
+			<SearchFormList data={data} stamps={stamps} />,
 		);
 
 		expect(container.querySelectorAll('li')).toHaveLength(1);

src/packages/modules-operations/series/search/typeCodeInput.tsx

@@ -0,0 +1,32 @@
+import { Select } from '../../../components/select-rmes';
+import D from '../../../deprecated-locales';
+import { Option } from '../../../model/SelectOption';
+import { CL_SOURCE_CATEGORY } from '../../../redux/actions/constants/codeList';
+import { useCodesList } from '../../../utils/hooks/codeslist';
+
+type TypeCodeInputTypes = {
+	value: string;
+	onChange: (value: string) => void;
+};
+export const TypeCodeInput = ({
+	value,
+	onChange,
+}: Readonly<TypeCodeInputTypes>) => {
+	const categories = useCodesList(CL_SOURCE_CATEGORY);
+	const options: Option[] = categories?.codes?.map((cat) => {
+		return { value: cat.code, label: cat.labelLg1 };
+	});
+
+	return (
+		<label className="w-100">
+			{D.operationType}
+
+			<Select
+				placeholder=""
+				value={value}
+				options={options}
+				onChange={onChange}
+			/>
+		</label>
+	);
+};