Version bumper/v1.14.0 1

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.14.0](https://github.com/zextras/carbonio-contacts-ui/compare/v1.13.1...v1.14.0) (2024-12-12)
+
+
+### Features
+
+* add AuthGuard component to segregate authenticated-only content ([3541880](https://github.com/zextras/carbonio-contacts-ui/commit/3541880b21782e99571b4fea6d5a1e2db7af4c5d))
+
+
+### Bug Fixes
+
+* prevent module to load if the user is not authenticated ([9e7e393](https://github.com/zextras/carbonio-contacts-ui/commit/9e7e3939346cf82c82554604809a1e0cb32e7202))
+
 ### [1.13.1](https://github.com/zextras/carbonio-contacts-ui/compare/v1.13.0...v1.13.1) (2024-11-20)
 
 

__mocks__/@zextras/carbonio-shell-ui.ts

@@ -3,4 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import shell from '@zextras/carbonio-shell-ui';
+
 export * from '../../src/carbonio-ui-commons/test/mocks/carbonio-shell-ui';
+
+// TODO move it in the Commons submodule
+export const useAuthenticated = jest
+	.fn<ReturnType<typeof shell.useAuthenticated>, Parameters<typeof shell.useAuthenticated>>()
+	.mockReturnValue(true);

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "carbonio-contacts-ui",
-	"version": "1.13.1",
+	"version": "1.14.0",
 	"description": "Contacts module",
 	"main": "src/app.tsx",
 	"engines": {

src/app.tsx

@@ -3,295 +3,26 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React, { lazy, Suspense, useEffect, useMemo } from 'react';
+import React from 'react';
 
-import { ModalManager, useSnackbar } from '@zextras/carbonio-design-system';
-import {
-	ACTION_TYPES,
-	addBoard,
-	addBoardView,
-	addRoute,
-	addSearchView,
-	addSettingsView,
-	NewAction,
-	registerActions,
-	registerComponents,
-	registerFunctions,
-	SearchViewProps,
-	SecondaryBarComponentProps
-} from '@zextras/carbonio-shell-ui';
-import { useTranslation } from 'react-i18next';
-
-import { FOLDER_VIEW } from './carbonio-ui-commons/constants';
-import { useInitializeFolders } from './carbonio-ui-commons/hooks/use-initialize-folders';
+import { AuthGuard } from './app/auth-guard';
+import { FoldersSynchronizator } from './app/folders-syncronization';
+import { IntegrationsRegistration } from './app/integrations-registration';
+import { ViewsRegistration } from './app/views-registration';
 import { InitializeTags } from './components/initialize-tags';
-import { Spinner } from './components/Spinner';
-import {
-	CONTACTS_APP_ID,
-	CONTACTS_ROUTE,
-	NEW_CONTACT_GROUP_BOARD_ID,
-	GROUPS_ROUTE,
-	EDIT_CONTACT_GROUP_BOARD_ID,
-	EDIT_DL_BOARD_ID,
-	CONTACT_BOARD_ID
-} from './constants';
-import { ContactInput } from './legacy/integrations/contact-input';
-import createContactIntegration from './legacy/integrations/create-contact';
 import { StoreProvider } from './legacy/store/redux';
 import { SyncDataHandler } from './legacy/views/secondary-bar/sync-data-handler';
 
-const LazyContactsView = lazy(
-	() => import(/* webpackChunkName: "contacts-view" */ './views/contacts-view')
-);
-const LazySecondaryBarView = lazy(
-	() =>
-		import(/* webpackChunkName: "secondaryBarView" */ './views/distribution-list/SecondaryBarView')
-);
-const LazyLegacySecondaryBarView = lazy(
-	() =>
-		import(
-			/* webpackChunkName: "legacySecondaryBarView" */ './legacy/views/secondary-bar/secondary-bar-view'
-		)
-);
-
-const LazyDistributionListAppView = lazy(
-	() => import(/* webpackChunkName: "groupsAppView" */ './views/distribution-list-view')
-);
-const LazySettingsView = lazy(
-	() => import(/* webpackChunkName: "settings-view" */ './legacy/views/settings/settings-view')
-);
-const LazySearchView = lazy(
-	() => import(/* webpackChunkName: "search-view" */ './legacy/views/search/search-view')
-);
-
-const LazyBoardView = lazy(
-	() => import(/* webpackChunkName: "edit-view" */ './legacy/views/edit/edit-view-board-wrapper')
-);
-
-const LazyNewContactGroupBoardView = lazy(
-	() =>
-		import(
-			/* webpackChunkName: "newContactGroupView" */ './views/contact-groups/board/new-contact-group-board'
-		)
-);
-
-const LazyEditContactGroupBoardView = lazy(
-	() =>
-		import(
-			/* webpackChunkName: "editContactGroupView" */ './views/contact-groups/board/edit-contact-group-board'
-		)
-);
-
-const LazyEditDLBoardView = lazy(
-	() => import(/* webpackChunkName: "edit-dl-view" */ './views/board/edit-dl-board')
-);
-
-const ContactsAppView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<StoreProvider>
-			<ModalManager>
-				<LazyContactsView />
-			</ModalManager>
-		</StoreProvider>
-	</Suspense>
-);
-
-const SecondaryBarView = (props: SecondaryBarComponentProps): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<ModalManager>
-			<LazySecondaryBarView {...props} />
-		</ModalManager>
-	</Suspense>
-);
-
-const DistributionListAppView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<LazyDistributionListAppView />
-	</Suspense>
-);
-
-const BoardView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
+const App = (): React.JSX.Element => (
+	<AuthGuard>
+		<FoldersSynchronizator />
+		<InitializeTags />
+		<ViewsRegistration />
+		<IntegrationsRegistration />
 		<StoreProvider>
-			<ModalManager>
-				<LazyBoardView />
-			</ModalManager>
-		</StoreProvider>
-	</Suspense>
-);
-
-const NewContactGroupBoardView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<ModalManager>
-			<LazyNewContactGroupBoardView />
-		</ModalManager>
-	</Suspense>
-);
-
-const EditContactGroupBoardView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<ModalManager>
-			<LazyEditContactGroupBoardView />
-		</ModalManager>
-	</Suspense>
-);
-
-const EditDLBoardView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<LazyEditDLBoardView />
-	</Suspense>
-);
-
-const SettingsView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<StoreProvider>
-			<ModalManager>
-				<LazySettingsView />
-			</ModalManager>
-		</StoreProvider>
-	</Suspense>
-);
-
-const SearchView = (props: SearchViewProps): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<StoreProvider>
-			<ModalManager>
-				<LazySearchView {...props} />
-			</ModalManager>
-		</StoreProvider>
-	</Suspense>
-);
-
-const LegacySecondaryBarView = (props: SecondaryBarComponentProps): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
-		<StoreProvider>
-			<ModalManager>
-				<LazyLegacySecondaryBarView {...props} />
-			</ModalManager>
-		</StoreProvider>
-	</Suspense>
-);
-
-const App = (): React.JSX.Element => {
-	const [t] = useTranslation();
-	const createSnackbar = useSnackbar();
-
-	useInitializeFolders(FOLDER_VIEW.contact);
-
-	const newContactAction = useMemo(
-		(): NewAction => ({
-			id: 'new-contact',
-			label: t('label.new_contact', 'New Contact'),
-			icon: 'ContactsModOutline',
-			execute: (ev): void => {
-				ev?.preventDefault?.();
-				addBoard({
-					boardViewId: CONTACT_BOARD_ID,
-					title: t('label.new_contact', 'New Contact')
-				});
-			},
-			disabled: false,
-			group: CONTACTS_APP_ID,
-			primary: true
-		}),
-		[t]
-	);
-
-	const newContactGroupAction = useMemo(
-		(): NewAction => ({
-			id: 'new-contact-group',
-			label: t('label.newContactGroup', 'New contact group'),
-			icon: 'PeopleOutline',
-			execute: (): void => {
-				addBoard({
-					boardViewId: NEW_CONTACT_GROUP_BOARD_ID,
-					title: t('board.newContactGroup.title', 'New Group')
-				});
-			},
-			disabled: false,
-			primary: false,
-			group: CONTACTS_APP_ID
-		}),
-		[t]
-	);
-
-	useEffect(() => {
-		addRoute({
-			route: CONTACTS_ROUTE,
-			position: 300,
-			visible: true,
-			label: t('label.app_name', 'Contacts'),
-			primaryBar: 'ContactsModOutline',
-			secondaryBar: LegacySecondaryBarView,
-			appView: ContactsAppView
-		});
-		addRoute({
-			route: GROUPS_ROUTE,
-			position: 310,
-			visible: true,
-			label: t('label.distribution_list_app_name', 'Distribution Lists'),
-			primaryBar: 'ListOutline',
-			secondaryBar: SecondaryBarView,
-			appView: DistributionListAppView
-		});
-		addSettingsView({
-			route: CONTACTS_ROUTE,
-			label: t('label.app_name', 'Contacts'),
-			component: SettingsView
-		});
-		addSearchView({
-			route: CONTACTS_ROUTE,
-			label: t('label.app_name', 'Contacts'),
-			component: SearchView
-		});
-		addBoardView({
-			id: CONTACT_BOARD_ID,
-			component: BoardView
-		});
-		addBoardView({
-			id: NEW_CONTACT_GROUP_BOARD_ID,
-			component: NewContactGroupBoardView
-		});
-		addBoardView({
-			id: EDIT_CONTACT_GROUP_BOARD_ID,
-			component: EditContactGroupBoardView
-		});
-		addBoardView({
-			id: EDIT_DL_BOARD_ID,
-			component: EditDLBoardView
-		});
-	}, [t]);
-
-	useEffect(() => {
-		registerComponents({
-			id: 'contact-input',
-			component: ContactInput
-		});
-
-		registerActions<NewAction>(
-			{
-				action: () => newContactAction,
-				id: 'new-contact',
-				type: ACTION_TYPES.NEW
-			},
-			{
-				id: 'new-contact-group',
-				type: ACTION_TYPES.NEW,
-				action: () => newContactGroupAction
-			}
-		);
-		registerFunctions({
-			id: 'create_contact_from_vcard',
-			fn: createContactIntegration(createSnackbar, t)
-		});
-	}, [createSnackbar, newContactAction, newContactGroupAction, t]);
-
-	return (
-		<StoreProvider>
-			<InitializeTags />
 			<SyncDataHandler />
 		</StoreProvider>
-	);
-};
+	</AuthGuard>
+);
 
 export default App;

src/app/auth-guard.tsx

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { ReactNode } from 'react';
+
+import { useAuthenticated } from '@zextras/carbonio-shell-ui';
+
+type AuthGuardProps = {
+	children: ReactNode;
+};
+
+export const AuthGuard: React.FC<AuthGuardProps> = ({ children }) => {
+	const isAuthenticated = useAuthenticated();
+
+	return isAuthenticated ? <>{children}</> : null;
+};