refactor: use search module instead of shell for search

package.json

@@ -58,7 +58,8 @@
 		"@types/react-router-dom": "^5.3.3",
 		"@types/styled-components": "^5.1.26",
 		"@types/uuid": "^10.0.0",
-		"@zextras/carbonio-ui-configs": "^1.0.0",
+		"@zextras/carbonio-search-ui": "github:zextras/carbonio-search-ui#devel",
+		"@zextras/carbonio-ui-configs": "^2.0.1",
 		"@zextras/carbonio-ui-sdk": "^1.7.7",
 		"babel-plugin-styled-components": "^2.0.7",
 		"babel-plugin-transform-import-meta": "^2.2.0",
@@ -74,7 +75,7 @@
 		"msw": "^2.2.3",
 		"npm": "^10.5.0",
 		"ts-node": "^10.9.1",
-		"typescript": "^4.9.5"
+		"typescript": "^5.7.2"
 	},
 	"dependencies": {
 		"@emotion/react": "^11.11.4",

src/api/errors/create-mountpoint-error.ts

@@ -10,7 +10,7 @@ import { GenericSoapApiError } from '../../carbonio-ui-commons/soap/errors/gener
 export class CreateMountpointError extends GenericSoapApiError {
 	public static readonly FOLDER_ALREADY_EXISTS = 'mail.ALREADY_EXISTS';
 
-	getLocalizedMessage(t: TFunction): string {
+	override getLocalizedMessage(t: TFunction): string {
 		if (this.fault.Detail.Error.Code === CreateMountpointError.FOLDER_ALREADY_EXISTS) {
 			return t(
 				'api.error.CreateMountpoint.folder_already_exists',

src/app-utils/add-shell-components.tsx

@@ -8,10 +8,8 @@ import React, { Suspense, lazy } from 'react';
 import { ModalManager } from '@zextras/carbonio-design-system';
 import {
 	addRoute,
-	addSearchView,
 	addBoardView,
 	addSettingsView,
-	SearchViewProps,
 	t,
 	SecondaryBarComponentProps,
 	upsertApp
@@ -39,10 +37,6 @@ const LazySettingsView = lazy(
 	() => import(/* webpackChunkName: "mail-setting-view" */ '../views/settings/settings-view')
 );
 
-const LazySearchView = lazy(
-	() => import(/* webpackChunkName: "mail-search-view" */ '../views/search/search-view')
-);
-
 const LazySidebarView = lazy(
 	() => import(/* webpackChunkName: "mail-sidebar-view" */ '../views/sidebar/sidebar')
 );
@@ -79,18 +73,6 @@ const SettingsView = (): React.JSX.Element => (
 	</Suspense>
 );
 
-const SearchView = (props: SearchViewProps): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<StoreProvider>
-			<ExtraWindowsManager>
-				<ModalManager>
-					<LazySearchView {...props} />
-				</ModalManager>
-			</ExtraWindowsManager>
-		</StoreProvider>
-	</Suspense>
-);
-
 const SidebarView = (props: SecondaryBarComponentProps): React.JSX.Element => (
 	<Suspense fallback={<Spinner />}>
 		<StoreProvider>
@@ -112,11 +94,6 @@ export const addComponentsToShell = async (): Promise<void> => {
 		secondaryBar: SidebarView,
 		appView: AppView
 	});
-	addSearchView({
-		route: MAILS_ROUTE,
-		component: SearchView,
-		label
-	});
 	addBoardView({
 		id: MAILS_BOARD_VIEW_ID,
 		component: EditView

src/app-utils/register-shell-integrations.ts

@@ -15,9 +15,6 @@ export const registerShellIntegrations = (): void => {
 	registerFunctions(
 		{
 			id: 'compose',
-			// TOFIX-SHELL: fix the function type definition
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
 			fn: openComposerSharedFunction
 		},
 		{

src/app-utils/search-registration.tsx

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useSearchRegisterer } from './use-search-registerer';
+
+export const SearchRegistration = (): null => {
+	useSearchRegisterer();
+	return null;
+};

src/app-utils/test/add-shell-components.test.tsx

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { addRoute, addSearchView, addSettingsView, upsertApp } from '@zextras/carbonio-shell-ui';
+import { addBoardView, addRoute, addSettingsView, upsertApp } from '@zextras/carbonio-shell-ui';
 import { HttpResponse } from 'msw';
 
 import { createAPIInterceptor } from '../../carbonio-ui-commons/test/mocks/network/msw/create-api-interceptor';
-import { MAIL_APP_ID } from '../../constants';
+import { MAIL_APP_ID, MAILS_BOARD_VIEW_ID } from '../../constants';
 import { mockAdvancedAccountAPI } from '../../tests/utils';
 import { addComponentsToShell } from '../add-shell-components';
 
@@ -33,23 +33,12 @@ describe('addShellComponents', () => {
 			})
 		);
 	});
-	it('should call addSearchView with the correct parameters', async () => {
-		await addComponentsToShell();
 
-		expect(addSearchView).toHaveBeenCalledWith(
-			expect.objectContaining({
-				route: 'mails',
-				component: expect.anything(),
-				label
-			})
-		);
-	});
 	it('should call addBoardView with the correct parameters', async () => {
 		await addComponentsToShell();
-
-		expect(addSearchView).toHaveBeenCalledWith(
+		expect(addBoardView).toHaveBeenCalledWith(
 			expect.objectContaining({
-				route: 'mails',
+				id: MAILS_BOARD_VIEW_ID,
 				component: expect.anything()
 			})
 		);

src/app-utils/test/use-search-registerer.ts

@@ -0,0 +1,67 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import * as Shell from '@zextras/carbonio-shell-ui';
+
+import { setupHook } from '../../carbonio-ui-commons/test/test-setup';
+import { MAIL_APP_ID, MAILS_ROUTE } from '../../constants';
+import { useSearchRegisterer } from '../use-search-registerer';
+
+describe('useSearchView', () => {
+	it('should add search view if integration is available', () => {
+		const addSearchViewFn = jest.fn();
+		jest.spyOn(Shell, 'useIntegratedFunction').mockImplementation((id) => {
+			if (id === 'search-add-view') {
+				return [addSearchViewFn, true];
+			}
+			return [(): void => undefined, false];
+		});
+
+		setupHook(useSearchRegisterer);
+
+		expect(addSearchViewFn).toHaveBeenCalledWith({
+			id: MAIL_APP_ID,
+			app: MAIL_APP_ID,
+			icon: 'MailModOutline',
+			route: MAILS_ROUTE,
+			component: expect.anything(),
+			label: 'Mails',
+			position: 100
+		});
+	});
+
+	it('should remove search view on unmount', () => {
+		const addSearchViewFn = jest.fn();
+		const removeSearchViewFn = jest.fn();
+		jest.spyOn(Shell, 'useIntegratedFunction').mockImplementation((id) => {
+			if (id === 'search-add-view') {
+				return [addSearchViewFn, true];
+			}
+			if (id === 'search-remove-view') {
+				return [removeSearchViewFn, true];
+			}
+			return [(): void => undefined, false];
+		});
+
+		const { unmount } = setupHook(useSearchRegisterer);
+
+		unmount();
+		expect(removeSearchViewFn).toHaveBeenCalledWith(MAIL_APP_ID);
+	});
+
+	it('should not call addSearchView if integration is not available', () => {
+		const addSearchViewFn = jest.fn();
+		jest.spyOn(Shell, 'useIntegratedFunction').mockImplementation((id) => {
+			if (id === 'search-add-view') {
+				return [addSearchViewFn, false];
+			}
+			return [(): void => undefined, false];
+		});
+
+		setupHook(useSearchRegisterer);
+
+		expect(addSearchViewFn).not.toHaveBeenCalled();
+	});
+});

src/app-utils/use-search-registerer.tsx

@@ -0,0 +1,60 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { lazy, Suspense, useEffect } from 'react';
+
+import { ModalManager } from '@zextras/carbonio-design-system';
+import type * as Search from '@zextras/carbonio-search-ui';
+import { useIntegratedFunction } from '@zextras/carbonio-shell-ui';
+import { useTranslation } from 'react-i18next';
+
+import { Spinner } from '../assets/spinner';
+import { MAIL_APP_ID, MAILS_ROUTE } from '../constants';
+import { StoreProvider } from '../store/redux';
+import { ExtraWindowsManager } from '../views/app/extra-windows/extra-window-manager';
+
+const LazySearchView = lazy(
+	() => import(/* webpackChunkName: "mail-search-view" */ '../views/search/search-view')
+);
+
+const SearchView = (props: Search.SearchViewProps): React.JSX.Element => (
+	<Suspense fallback={<Spinner />}>
+		<StoreProvider>
+			<ExtraWindowsManager>
+				<ModalManager>
+					<LazySearchView {...props} />
+				</ModalManager>
+			</ExtraWindowsManager>
+		</StoreProvider>
+	</Suspense>
+);
+
+export const useSearchRegisterer = (): void => {
+	const [t] = useTranslation();
+	const [addSearchView, isAddSearchViewAvailable] =
+		useIntegratedFunction<typeof Search.addSearchView>('search-add-view');
+	const [removeSearchView, isRemoveSearchViewAvailable] =
+		useIntegratedFunction<typeof Search.removeSearchView>('search-remove-view');
+
+	useEffect(() => {
+		if (isAddSearchViewAvailable) {
+			addSearchView({
+				id: MAIL_APP_ID,
+				app: MAIL_APP_ID,
+				icon: 'MailModOutline',
+				route: MAILS_ROUTE,
+				component: SearchView,
+				label: t('label.app_name', 'Mails'),
+				position: 100
+			});
+		}
+
+		return () => {
+			if (isRemoveSearchViewAvailable) {
+				removeSearchView(MAIL_APP_ID);
+			}
+		};
+	}, [addSearchView, isAddSearchViewAvailable, isRemoveSearchViewAvailable, removeSearchView, t]);
+};

src/app.test.tsx

@@ -13,6 +13,7 @@ import App from './app';
 import * as addComponentsToShell from './app-utils/add-shell-components';
 import * as registerShellActions from './app-utils/register-shell-actions';
 import * as registerShellIntegrations from './app-utils/register-shell-integrations';
+import * as useSearchRegisterer from './app-utils/use-search-registerer';
 import { generateFolder } from './carbonio-ui-commons/test/mocks/folders/folders-generator';
 import {
 	createAPIInterceptor,
@@ -83,6 +84,12 @@ describe('App', () => {
 		expect(registerShellIntegrationsSpy).toHaveBeenCalled();
 	});
 
+	it('should register the search', () => {
+		const useSearchRegistererSpy = jest.spyOn(useSearchRegisterer, 'useSearchRegisterer');
+		setupTest(<App />);
+		expect(useSearchRegistererSpy).toHaveBeenCalled();
+	});
+
 	it('should add the backup search route when the backup search messages are present', () => {
 		updateBackupSearchStoreWith([aDeletedMessage()]);
 

src/app.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 
 import { BackupSearchComponentToggler } from './app-utils/backup-search-component-toggler';
+import { SearchRegistration } from './app-utils/search-registration';
 import { ShellRegistrations } from './app-utils/shell-registrations';
 import { AuthGuard } from './auth-guard';
 import { StoreProvider } from './store/redux';
@@ -21,6 +22,7 @@ const App = (): React.JSX.Element => (
 	<AuthGuard>
 		<ShellRegistrations />
 		<BackupSearchComponentToggler />
+		<SearchRegistration />
 
 		<StoreProvider>
 			<GlobalModalManager>

src/commons/gap-container.tsx

@@ -48,4 +48,4 @@ const GapRow = React.forwardRef<HTMLDivElement, GapRowProps>(function GapRowFn(
 	);
 });
 
-export { GapContainer, GapRow, GapContainerProps, GapRowProps };
+export { GapContainer, GapRow, type GapContainerProps, type GapRowProps };

src/helpers/identities.ts

@@ -564,9 +564,9 @@ export function getExtraAccountsIds(): Array<string> {
 }
 
 export {
-	IdentityDescriptor,
-	MatchingReplyIdentity,
-	RecipientWeight,
+	type IdentityDescriptor,
+	type MatchingReplyIdentity,
+	type RecipientWeight,
 	getNoIdentityPlaceholder,
 	getDefaultIdentity,
 	checkMatchingAddress,

src/hooks/use-get-tags-accordions.tsx

@@ -15,10 +15,12 @@ import {
 	Tooltip,
 	useModal
 } from '@zextras/carbonio-design-system';
-import { runSearch, t, QueryChip } from '@zextras/carbonio-shell-ui';
+import type { QueryChip } from '@zextras/carbonio-search-ui';
+import { t } from '@zextras/carbonio-shell-ui';
 import { reduce } from 'lodash';
 
 import { ZIMBRA_STANDARD_COLORS } from '../carbonio-ui-commons/constants/utils';
+import { useRunSearchIntegration } from '../carbonio-ui-commons/integrations/search/use-run-search';
 import { useTags } from '../carbonio-ui-commons/store/zustand/tags';
 import type { TagsAccordionItems } from '../carbonio-ui-commons/types/tags';
 import type { ItemType } from '../types';
@@ -31,9 +33,11 @@ type ItemProps = {
 const CustomComp: FC<ItemProps> = (props) => {
 	const actions = useGetTagsActions({ tag: props?.item });
 
+	const runSearch = useRunSearchIntegration();
+
 	const triggerSearch = useCallback(
 		() =>
-			runSearch(
+			runSearch?.(
 				[
 					// TODO: add a new type for query chips
 					{
@@ -49,7 +53,7 @@ const CustomComp: FC<ItemProps> = (props) => {
 				],
 				'mails'
 			),
-		[props?.item?.color, props?.item?.name]
+		[props?.item?.color, props?.item?.name, runSearch]
 	);
 
 	return (

src/tests/generators/generateConversation.ts

@@ -99,4 +99,4 @@ const generateConversation = ({
 	};
 };
 
-export { ConversationGenerationParams, generateConversation };
+export { type ConversationGenerationParams, generateConversation };

src/tests/generators/generateMessage.ts

@@ -156,4 +156,4 @@ const generateMessage = ({
 	messageIsFromDistributionList: false
 });
 
-export { MessageGenerationParams, generateMessage };
+export { type MessageGenerationParams, generateMessage };

src/tests/generators/getMsgResponse.ts

@@ -122,4 +122,4 @@ const generateGetMsgResponse = ({
 	return result;
 };
 
-export { GetMsgResponseGenerationParams, generateGetMsgResponse };
+export { type GetMsgResponseGenerationParams, generateGetMsgResponse };