fix: solve issue when updating an existing component with a code list (…

…#894)

* feat: solve issue when saving Component with a code list

* feat: create reusable See button

* fix: solve typescript issue

* fix: remove onClick props

src/packages/components/buttons/see.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { SeeButton } from './see'; // Chemin d'accès au fichier du composant
+
+describe('SeeButton', () => {
+	it('renders the button with the correct attributes and icon', () => {
+		render(<SeeButton onClick={jest.fn()} />);
+
+		const button = screen.getByRole('button');
+
+		expect(button).not.toBeNull();
+		expect(button.classList.contains('btn')).toBeTruthy();
+		expect(button.classList.contains('btn-default')).toBeTruthy();
+
+		expect(button.getAttribute('aria-label')).toBe('See');
+		expect(button.getAttribute('title')).toBe('See');
+		expect(button.getAttribute('type')).toBe('button');
+
+		const icon = button.querySelector('span')!;
+		expect(icon.classList.contains('glyphicon')).toBeTruthy();
+		expect(icon.classList.contains('glyphicon-eye-open')).toBeTruthy();
+	});
+
+	it('calls the onClick handler when clicked', () => {
+		const handleClick = jest.fn();
+		render(<SeeButton onClick={handleClick} />);
+
+		const button = screen.getByRole('button');
+		fireEvent.click(button);
+
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('passes additional props to the button element', () => {
+		render(<SeeButton onClick={jest.fn()} data-test="see-button" />);
+
+		const button = screen.getByRole('button');
+
+		expect(button.dataset.test).toEqual('see-button');
+	});
+});

src/packages/components/buttons/see.tsx

@@ -0,0 +1,25 @@
+import { createAllDictionary } from '../../utils/dictionnary';
+
+const { D } = createAllDictionary({
+	see: {
+		fr: 'Voir',
+		en: 'See',
+	},
+});
+
+type SeeButtonTypes = {
+	onClick: (e: any) => void;
+};
+export const SeeButton = ({ onClick, ...props }: Readonly<SeeButtonTypes>) => {
+	return (
+		<button
+			{...props}
+			type="button"
+			className="btn btn-default"
+			aria-label={D.see}
+			title={D.see}
+		>
+			<span className="glyphicon glyphicon-eye-open"></span>
+		</button>
+	);
+};

src/packages/components/index.ts

@@ -3,6 +3,7 @@ export * from './data/creators';
 export * from './advanced-search/home';
 export * from './advanced-search/controls';
 export * from './application-title';
+export * from './buttons/see';
 export * from './check-second-lang';
 export * from './confirmation-delete';
 export * from './contributors/contributors';

src/packages/model/structures/Component.ts

@@ -11,6 +11,7 @@ export type Component = {
 	required?: boolean;
 	attachment?: string;
 	codeList?: string;
+	fullCodeListValue?: string;
 	concept?: string;
 };
 

src/packages/modules-datasets/datasets/edit/tabs/statistical-information.js

@@ -1,25 +1,21 @@
 import { D1 } from '../../../../deprecated-locales';
-import { useQuery } from '@tanstack/react-query';
 import { withCodesLists } from '../../../../utils/hoc/withCodesLists';
 import ReactSelect from 'react-select';
-import StructureAPI from '../../../../modules-structures/apis/structure-api';
 import { TemporalField } from '../../components/temporalField';
 import { CL_FREQ } from '../../../../redux/actions/constants/codeList';
 import { Row } from '../../../../components';
 import { convertCodesListsToSelectOption } from '../../../../modules-datasets/utils/codelist-to-select-options';
+
+import { useStructures } from '../../../../utils/hooks/structures';
 const StatisticalInformationTab = ({
 	editingDataset,
 	setEditingDataset,
 	...props
 }) => {
 	const clDataTypes = convertCodesListsToSelectOption(props['CL_DATA_TYPES']);
 
-	const { data: structures } = useQuery({
-		queryKey: ['structures'],
-		queryFn: () => {
-			return StructureAPI.getStructures();
-		},
-	});
+	const { data: structures } = useStructures();
+
 	const structuresOptions =
 		structures?.map(({ iri, labelLg1 }) => ({ value: iri, label: labelLg1 })) ??
 		[];

src/packages/modules-datasets/datasets/view/view.js

@@ -5,8 +5,7 @@ import { useEffect, useState } from 'react';
 import { Note } from '@inseefr/wilco';
 import D, { D1, D2 } from '../../../deprecated-locales/build-dictionary';
 import api from '../../api/datasets-api';
-import StructureAPI from '../../../modules-structures/apis/structure-api';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useThemes } from '../useThemes';
 import { withCodesLists } from '../../../utils/hoc/withCodesLists';
 import { useDataset } from '../../hooks';
@@ -31,16 +30,13 @@ import { getLocales } from '../../../redux/selectors';
 import { useTitle } from '../../../utils/hooks/useTitle';
 import { stringToDate } from '../../../utils/date-utils';
 import { getSecondLang } from '../../../redux/second-lang';
+import { useStructures } from '../../../utils/hooks/structures';
 
 const Dataset = (props) => {
 	const { id } = useParams();
 	const history = useHistory();
-	const { data: structures } = useQuery({
-		queryKey: ['structures'],
-		queryFn: () => {
-			return StructureAPI.getStructures();
-		},
-	});
+	const { data: structures } = useStructures();
+
 	const [archivageUnits, setArchivageUnits] = useState([]);
 
 	useEffect(() => {

src/packages/modules-operations/components/sims/sims-geography-picker.js

@@ -13,6 +13,7 @@ import {
 } from '../../../redux/geographies.action';
 import Auth from '../../../auth/components/auth';
 import { ADMIN } from '../../../auth/roles';
+import { SeeButton } from '../../../components';
 
 const accentsMap = new Map([
 	['A', 'Á|À|Ã|Â|Ä'],
@@ -127,14 +128,10 @@ const SimsGeographyPicker = ({
 						{D.btnNew}
 					</button>
 				</Auth>
-				<button
+				<SeeButton
 					disabled={!shouldSeeViewButton}
-					type="button"
-					className="btn btn-default"
 					onClick={openViewPanel}
-				>
-					{D.btnSee}
-				</button>
+				></SeeButton>
 			</div>
 			<SlidingPanel
 				type={'right'}

src/packages/modules-operations/i18n/dictionary.js

@@ -41,10 +41,6 @@ const dictionary = {
 		fr: 'Nouveau',
 		en: 'New',
 	},
-	btnSee: {
-		fr: 'Voir',
-		en: 'See',
-	},
 	include: {
 		fr: 'Inclure',
 		en: 'Include',

src/packages/modules-structures/apis/index.ts

@@ -1,2 +1 @@
-export { default as StructureAPI } from './structure-api';
 export { getCodeList, getFormattedCodeList } from './code-list';

src/packages/modules-structures/components/component-detail/edit-container.js → src/packages/modules-structures/components/component-detail/edit-container.tsx

@@ -2,24 +2,25 @@ import { useState, useEffect, useCallback } from 'react';
 import { Loading } from '../../../components';
 import { useGoBack } from '../../../utils/hooks/useGoBack';
 import { DumbComponentDetailEdit } from './edit';
-import api from '../../apis/structure-api';
 import { getFormattedCodeList } from '../../apis';
-import { ConceptsApi } from '../../../sdk';
+import { ConceptsApi, saveComponent, StructureApi } from '../../../sdk';
 import { useParams } from 'react-router-dom';
 import { useStampsOptions } from '../../../utils/hooks/stamps';
+import { Component } from '../../../model/structures/Component';
+import { CodesLists } from '../../../model/CodesList';
 
-const EditContainer = (props) => {
+const EditContainer = (props: any) => {
 	const goBack = useGoBack();
 
-	const { id } = useParams();
+	const { id } = useParams<{ id: string }>();
 	const urlParams = new URLSearchParams(window.location.search);
 	const type = urlParams.get('type');
-	const [loading, setLoading] = useState(true);
-	const [saving, setSaving] = useState(false);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [saving, setSaving] = useState<boolean>(false);
 	const [component, setComponent] = useState({});
 	const [concepts, setConcepts] = useState([]);
-	const [codesLists, setCodesLists] = useState([]);
-	const [serverSideError, setServerSideError] = useState('');
+	const [codesLists, setCodesLists] = useState<CodesLists>([]);
+	const [serverSideError, setServerSideError] = useState<string>('');
 	const [attributes, setAttributes] = useState([]);
 
 	const stampListOptions = useStampsOptions();
@@ -30,23 +31,15 @@ const EditContainer = (props) => {
 	);
 
 	const handleSave = useCallback(
-		(component) => {
+		(component: Component) => {
 			setSaving(true);
 			setServerSideError('');
 
-			let request;
-
-			if (component.id) {
-				request = api.putMutualizedComponent(component);
-			} else {
-				request = api.postMutualizedComponent(component);
-			}
-
-			request
+			saveComponent(component)
 				.then((id = component.id) =>
 					goBack(`/structures/components/${id}`, !component.id)
 				)
-				.catch((error) => {
+				.catch((error: string) => {
 					setComponent(component);
 					setServerSideError(error);
 				})
@@ -57,11 +50,11 @@ const EditContainer = (props) => {
 
 	useEffect(() => {
 		const getComponent = id
-			? api.getMutualizedComponent(id)
+			? StructureApi.getMutualizedComponent(id)
 			: Promise.resolve({});
 		Promise.all([
 			getComponent,
-			api.getMutualizedAttributes(),
+			StructureApi.getMutualizedAttributes(),
 			ConceptsApi.getConceptList(),
 			getFormattedCodeList(),
 		])