Merge pull request #229 from Zextras/devel-to-release-20230329

Devel to release 20230329

src/assets.d.ts

@@ -3,6 +3,9 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-declare module '*.svg';
+declare module '*.svg' {
+	const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+	export default content;
+}
 declare module '*.mp3';
 declare module '*.png';

src/boot/splash.tsx

@@ -4,17 +4,24 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import '../splash.css';
-import React, { FC } from 'react';
-import Logo from '../svg/carbonio.svg';
-import Helmet from '../svg/carbonio-head.svg';
+import React from 'react';
+import styled from 'styled-components';
+import Helmet from '../../assets/carbonio-head.svg';
+// TODO: change with import from logo component when ready
+import Logo from '../../assets/carbonio.svg';
+// import { Logo } from '../shell/logo';
 
-const LoadingView: FC = () => (
+const StyledLogo = styled(Logo)`
+	fill: #a3aebc;
+	width: 50%;
+`;
+const LoadingView = (): JSX.Element => (
 	<div className="splash">
 		<Helmet fill="#A3AEBC" />
 		<div className="loader">
 			<div className="bar"></div>
 		</div>
-		<Logo fill="#A3AEBC" width="50%" />
+		<StyledLogo />
 	</div>
 );
 export default LoadingView;

src/network/login-config.ts

@@ -7,22 +7,22 @@
 import { LoginConfigStore } from '../../types/loginConfig';
 import { useLoginConfigStore } from '../store/login/store';
 import { LOGIN_V3_CONFIG_PATH } from '../constants';
+import { getClientTitle, getFavicon } from '../store/login/getters';
 
 export const loginConfig = (): Promise<void> =>
 	fetch(LOGIN_V3_CONFIG_PATH)
 		.then((response) => response.json())
 		.then((data: LoginConfigStore) => {
 			useLoginConfigStore.setState(data);
-			const favicon = document.getElementById('favicon');
-			if (favicon && favicon instanceof HTMLLinkElement) {
-				favicon.href = data.carbonioWebUiFavicon
-					? data.carbonioWebUiFavicon
-					: `${BASE_PATH}favicon.svg`;
-			}
-			if (data.carbonioWebUiTitle) {
-				document.title = data.carbonioWebUiTitle;
-			}
 		})
 		.catch((reason) => {
 			console.warn(reason);
+		})
+		.finally(() => {
+			useLoginConfigStore.setState({ loaded: true });
+			const favicon = document.getElementById('favicon');
+			if (favicon && favicon instanceof HTMLLinkElement) {
+				favicon.href = getFavicon();
+			}
+			document.title = getClientTitle();
 		});

src/notification/NotificationManager.ts

@@ -5,31 +5,14 @@
  */
 
 import { debounce, noop } from 'lodash';
-import {
-	NotificationConfig,
-	PopupNotificationConfig,
+import type {
 	AudioNotificationConfig,
-	INotificationManager
-} from '../../types/notification';
+	INotificationManager,
+	NotificationConfig,
+	PopupNotificationConfig
+} from '../../types';
 import defaultAudio from '../../assets/notification.mp3';
-import defaultIcon from '../../assets/carbonio-logo.png';
-
-const PopupNotificationDefaultConfig = {
-	title: 'Carbonio client',
-	icon: defaultIcon,
-	vibrate: [200, 100, 200]
-};
-
-const AudioNotificationDefaultConfig = {
-	sound: defaultAudio
-};
-
-const NotificationDefaultConfig: NotificationConfig = {
-	...PopupNotificationDefaultConfig,
-	...AudioNotificationDefaultConfig,
-	showPopup: true,
-	playSound: false
-};
+import { getFavicon } from '../store/login/getters';
 
 /**
  * The main goals of the NotificationManager are:
@@ -54,6 +37,35 @@ export class NotificationManager implements INotificationManager {
 	 */
 	private static DEBOUNCE_TIME = 1000;
 
+	/**
+	 * Default configuration for the popup-only notification
+	 * @private
+	 */
+	private PopupNotificationDefaultConfig = {
+		title: '',
+		vibrate: [200, 100, 200],
+		icon: getFavicon()
+	};
+
+	/**
+	 * Default configuration for the audio-only notification
+	 * @private
+	 */
+	private AudioNotificationDefaultConfig: AudioNotificationConfig = {
+		sound: defaultAudio
+	};
+
+	/**
+	 * Default configuration for a notification with both popup and audio
+	 * @private
+	 */
+	private NotificationDefaultConfig: NotificationConfig = {
+		...this.PopupNotificationDefaultConfig,
+		...this.AudioNotificationDefaultConfig,
+		showPopup: true,
+		playSound: false
+	};
+
 	/**
 	 * Map of functions to play a specific audio file
 	 * @private
@@ -85,7 +97,7 @@ export class NotificationManager implements INotificationManager {
 	 */
 	public playSound = (config: AudioNotificationConfig): void => {
 		const defConfig = {
-			...AudioNotificationDefaultConfig,
+			...this.AudioNotificationDefaultConfig,
 			...config
 		};
 		if (!defConfig.sound) {
@@ -102,7 +114,7 @@ export class NotificationManager implements INotificationManager {
 	 */
 	public showPopup = (config: PopupNotificationConfig): void => {
 		const defConfig = {
-			...PopupNotificationDefaultConfig,
+			...this.PopupNotificationDefaultConfig,
 			...config
 		};
 
@@ -125,7 +137,7 @@ export class NotificationManager implements INotificationManager {
 	 */
 	public notify = (config: NotificationConfig): void => {
 		const defConfig = {
-			...NotificationDefaultConfig,
+			...this.NotificationDefaultConfig,
 			...config
 		};
 

src/settings/accounts-settings.tsx

@@ -75,7 +75,7 @@ const getAvailableEmailAddresses = (account: Account, settings: AccountSettings)
 	// Adds the email addresses of all the shared accounts
 	if (account.rights?.targets) {
 		account.rights?.targets.forEach((target) => {
-			if (target.right === 'sendAs' && target.target) {
+			if (target.target && (target.right === 'sendAs' || target.right === 'sendOnBehalfOf')) {
 				target.target.forEach((user) => {
 					if (user.type === 'account' && user.email) {
 						user.email.forEach((email) => {

src/shell/logo.tsx

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+import { useLogo } from '../store/login/hooks';
+import { useLoginConfigStore } from '../store/login/store';
+
+export const Logo = (props: Record<string, unknown>): JSX.Element => {
+	const { loaded } = useLoginConfigStore();
+	const LogoElement = useLogo();
+
+	return loaded ? (
+		(typeof LogoElement === 'string' && <img alt={''} {...props} src={LogoElement} />) || (
+			<LogoElement {...props} />
+		)
+	) : (
+		<></>
+	);
+};

src/shell/shell-header.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { FC, useMemo } from 'react';
+import React from 'react';
 import {
 	Catcher,
 	Container,
@@ -14,39 +14,36 @@ import {
 	useScreenMode
 } from '@zextras/carbonio-design-system';
 import styled from 'styled-components';
-import Logo from '../svg/carbonio.svg';
 import { SearchBar } from '../search/search-bar';
 import { CreationButton } from './creation-button';
 import { useAppStore } from '../store/app';
-import { useLoginConfigStore } from '../store/login/store';
 import { useDarkMode } from '../dark-mode/use-dark-mode';
+import { Logo } from './logo';
 
-const CustomImg = styled.img`
+const StyledLogo = styled(Logo)`
 	height: 2rem;
 `;
 
-const ShellHeader: FC<{
+interface ShellHeaderProps {
 	mobileNavIsOpen: boolean;
 	onMobileMenuClick: () => void;
-}> = ({ mobileNavIsOpen, onMobileMenuClick, children }) => {
-	const { carbonioWebUiAppLogo, carbonioWebUiDarkAppLogo } = useLoginConfigStore();
+	children: React.ReactNode | React.ReactNode[];
+}
 
-	const { darkModeEnabled, darkReaderStatus } = useDarkMode();
-
-	const logoSrc = useMemo(() => {
-		if (darkModeEnabled) {
-			return carbonioWebUiDarkAppLogo || carbonioWebUiAppLogo;
-		}
-		return carbonioWebUiAppLogo || carbonioWebUiDarkAppLogo;
-	}, [carbonioWebUiDarkAppLogo, carbonioWebUiAppLogo, darkModeEnabled]);
+const ShellHeader = ({
+	mobileNavIsOpen,
+	onMobileMenuClick,
+	children
+}: ShellHeaderProps): JSX.Element => {
+	const { darkReaderStatus } = useDarkMode();
 
 	const screenMode = useScreenMode();
 	const searchEnabled = useAppStore((s) => s.views.search.length > 0);
 	return (
 		<Container
 			data-testid="MainHeaderContainer"
 			orientation="horizontal"
-			background="gray3"
+			background={'gray3'}
 			width="fill"
 			height="3.75rem"
 			minHeight="3.75rem"
@@ -71,9 +68,7 @@ const ShellHeader: FC<{
 						</Padding>
 					</Responsive>
 					<Container width="15.625rem" height="2rem" crossAlignment="flex-start">
-						{darkReaderStatus && (
-							<>{logoSrc ? <CustomImg src={logoSrc} /> : <Logo height="2rem" />}</>
-						)}
+						{darkReaderStatus && <StyledLogo />}
 					</Container>
 					<Padding horizontal="large">
 						<CreationButton />
@@ -82,17 +77,6 @@ const ShellHeader: FC<{
 				</Container>
 				<Container orientation="horizontal" width="auto" mainAlignment="flex-end">
 					<Responsive mode="desktop">{children}</Responsive>
-					<Responsive mode="mobile">
-						<Container
-							orientation="horizontal"
-							mainAlignment="flex-end"
-							padding={{ right: 'extrasmall' }}
-						>
-							{/* <Dropdown items={secondaryActions} placement="bottom-start">
-							<IconButton icon="Plus" />
-						</Dropdown> */}
-						</Container>
-					</Responsive>
 				</Container>
 			</Catcher>
 		</Container>

src/shell/shell-primary-bar.tsx

@@ -26,12 +26,14 @@ const ToggleBoardIcon: FC = () => {
 	const { minimized, boards } = useBoardStore();
 	if (isEmpty(boards)) return null;
 	return (
-		<IconButton
-			iconColor="primary"
-			icon={minimized ? 'BoardOpen' : 'BoardCollapse'}
-			onClick={minimized ? reopenBoards : minimizeBoards}
-			size="large"
-		/>
+		<Container width={'3rem'} height={'3rem'}>
+			<IconButton
+				iconColor="primary"
+				icon={minimized ? 'BoardOpen' : 'BoardCollapse'}
+				onClick={minimized ? reopenBoards : minimizeBoards}
+				size="large"
+			/>
+		</Container>
 	);
 };
 
@@ -150,6 +152,7 @@ const ShellPrimaryBarComponent: FC<{ activeRoute: AppRoute }> = ({ activeRoute }
 						/>
 					) : null
 				)}
+				<ToggleBoardIcon />
 			</Row>
 			<Row
 				mainAlignment="flex-end"
@@ -163,7 +166,6 @@ const ShellPrimaryBarComponent: FC<{ activeRoute: AppRoute }> = ({ activeRoute }
 				{accessories.map((v) => (
 					<PrimaryBarAccessoryElement view={v} key={v.id} />
 				))}
-				<ToggleBoardIcon />
 			</Row>
 		</ContainerWithDivider>
 	);