Feat/migrate family menu (#901)

* feat: migrate family menu

* fix: remove unused import

* feat: migrate main view component

* fix: solve sonar issue

src/packages/components/page-title-block/index.tsx

@@ -1,5 +1,5 @@
 type PageTitleBlockTypes = {
-	titleLg1: string;
+	titleLg1?: string;
 	titleLg2?: string;
 	secondLang?: boolean;
 };

src/packages/model/operations/family.ts

@@ -0,0 +1,8 @@
+import { ValidationState } from '../../components';
+
+export type Family = {
+	id: string;
+	prefLabelLg1?: string;
+	prefLabelLg2?: string;
+	validationState: ValidationState;
+};

src/packages/modules-classifications/item/client.js

@@ -13,7 +13,7 @@ export const fetchingPreviousLevels = (classificationId, general) => {
 		general.broaderURI.lastIndexOf('/')
 	);
 	const previousLevel =
-		levels[levels.findIndex((level) => level.indexOf(currentLevel) === 0)];
+		levels[levels.findIndex((level) => level.startsWith(currentLevel))];
 
 	if (!!previousLevel) {
 		return ClassificationsApi.getClassificationLevelMembers(

src/packages/modules-operations/families/visualization/index.js → src/packages/modules-operations/families/visualization/index.tsx

@@ -1,32 +1,27 @@
 import D from '../../../deprecated-locales';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { Button, ActionToolbar, ReturnButton } from '@inseefr/wilco';
 import {
 	Loading,
 	ErrorBloc,
-	ValidationButton,
 	PageTitleBlock,
 	CheckSecondLang,
 } from '../../../components';
 
-import { useGoBack } from '../../../utils/hooks/useGoBack';
-
 import { useCallback, useEffect, useState } from 'react';
 import OperationsFamilyVisualization from '../../../modules-operations/families/visualization/visualization';
-import { containUnsupportedStyles } from '../../../utils/html-utils';
 import { getLocales } from '../../../redux/selectors';
 import { getSecondLang } from '../../../redux/second-lang';
 import { OperationsApi } from '../../../sdk/operations-api';
-import Auth from '../../../auth/components/auth';
-import { ADMIN } from '../../../auth/roles';
-const Family = () => {
-	const { id } = useParams();
-	const langs = useSelector((state) => getLocales(state));
-	const secondLang = useSelector((state) => getSecondLang(state));
-	const goBack = useGoBack();
+import { Menu } from './menu';
+import { Family } from '../../../model/operations/family';
+
+const FamilyView = () => {
+	const { id } = useParams<{ id: string }>();
+	const langs = useSelector(getLocales);
+	const secondLang = useSelector(getSecondLang);
 
-	const [family, setFamily] = useState({});
+	const [family, setFamily] = useState<Family>();
 	const [serverSideError, setServerSideError] = useState();
 	const [publishing, setPublishing] = useState(false);
 
@@ -41,42 +36,21 @@ const Family = () => {
 			.then(() => {
 				return OperationsApi.getFamilyById(id).then(setFamily);
 			})
-			.catch((error) => setServerSideError(error))
+			.catch((error: any) => setServerSideError(error))
 			.finally(() => setPublishing(false));
 	}, [family, id]);
 
-	if (!family.id) return <Loading />;
-	if (publishing) return <Loading text={'publishing'} />;
+	if (!family) return <Loading />;
+	if (publishing) return <Loading text="publishing" />;
 
-	/*
-	 * The publication button should be enabled only if RICH_TEXT value do not
-	 * have unsupported styles like STRIKETHROUGH, color or background color
-	 */
-	const publicationDisabled = containUnsupportedStyles(family);
 	return (
 		<div className="container">
 			<PageTitleBlock
 				titleLg1={family.prefLabelLg1}
 				titleLg2={family.prefLabelLg2}
 				secondLang={secondLang}
 			/>
-			<ActionToolbar>
-				<ReturnButton action={() => goBack('/operations/families')} />
-
-				<Auth roles={[ADMIN]}>
-					<ValidationButton
-						object={family}
-						callback={publish}
-						disabled={publicationDisabled}
-					/>
-				</Auth>
-				<Auth roles={[ADMIN]}>
-					<Button
-						action={`/operations/family/${family.id}/modify`}
-						label={D.btnUpdate}
-					/>
-				</Auth>
-			</ActionToolbar>
+			<Menu family={family} publish={publish} />
 			{serverSideError && <ErrorBloc error={serverSideError} D={D} />}
 			`
 			<CheckSecondLang />
@@ -88,4 +62,4 @@ const Family = () => {
 		</div>
 	);
 };
-export default Family;
+export default FamilyView;

src/packages/modules-operations/families/visualization/menu.spec.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import { Menu } from './menu';
+import { RBACMock } from '../../../tests-utils/rbac';
+import { ADMIN } from '../../../auth/roles';
+import { Family } from '../../../model/operations/family';
+
+describe('Family Home Page Menu', () => {
+	it('an admin can update and publish a family', () => {
+		render(
+			<RBACMock roles={[ADMIN]}>
+				<Menu family={{} as Family} publish={jest.fn()} />
+			</RBACMock>
+		);
+
+		screen.getByText('Update');
+		screen.getByText('Publish');
+		screen.getByText('Back');
+	});
+
+	it('a user without Admin cannot create or publish a family', () => {
+		render(
+			<RBACMock roles={[]}>
+				<Menu family={{} as Family} publish={jest.fn()} />
+			</RBACMock>
+		);
+
+		expect(screen.queryByText('Update')).toBeNull();
+		expect(screen.queryByText('Publish')).toBeNull();
+		screen.getByText('Back');
+	});
+});

src/packages/modules-operations/families/visualization/menu.tsx

@@ -0,0 +1,43 @@
+import { Family } from '../../../model/operations/family';
+import { ActionToolbar, Button, ReturnButton } from '@inseefr/wilco';
+import Auth from '../../../auth/components/auth';
+import { ADMIN } from '../../../auth/roles';
+import { ValidationButton } from '../../../components';
+import D from '../../../deprecated-locales/build-dictionary';
+import { containUnsupportedStyles } from '../../../utils/html-utils';
+import { useGoBack } from '../../../utils/hooks/useGoBack';
+
+type MenuTypes = {
+	family: Family;
+	publish: () => void;
+};
+
+export const Menu = ({ family, publish }: Readonly<MenuTypes>) => {
+	const goBack = useGoBack();
+
+	/*
+	 * The publication button should be enabled only if RICH_TEXT value do not
+	 * have unsupported styles like STRIKETHROUGH, color or background color
+	 */
+	const publicationDisabled = containUnsupportedStyles(family);
+
+	return (
+		<ActionToolbar>
+			<ReturnButton action={() => goBack('/operations/families')} />
+
+			<Auth roles={[ADMIN]}>
+				<ValidationButton
+					object={family}
+					callback={publish}
+					disabled={publicationDisabled}
+				/>
+			</Auth>
+			<Auth roles={[ADMIN]}>
+				<Button
+					action={`/operations/family/${family.id}/modify`}
+					label={D.btnUpdate}
+				/>
+			</Auth>
+		</ActionToolbar>
+	);
+};