Merge pull request #90 from Zextras/20220609-rc

20220609 rc

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
 	},
 	globals: {
 		BASE_PATH: 'readonly',
-		__SHELL_ENV__: 'readonly',
 		__CARBONIO_DEV__: 'readonly',
 		PACKAGE_NAME: 'readonly',
 		PACKAGE_VERSION: 'readonly',

.nvmrc

@@ -1 +1 @@
-v16
+v16.13

babel.config.js

@@ -25,7 +25,8 @@ module.exports = {
 			{
 				outputPath: 'translations/{{ns}}.json',
 				defaultNS: 'en',
-				jsonSpace: 4
+				jsonSpace: 4,
+				compatibilityJSON: 'v3'
 			}
 		]
 	]

carbonio.webpack.js

@@ -41,8 +41,7 @@ module.exports = (conf, pkg, options, mode) => {
 			inject: true,
 			template: path.resolve(process.cwd(), 'src', 'index.template.html'),
 			chunks: ['index'],
-			BASE_PATH: baseStaticPath,
-			SHELL_ENV: root
+			BASE_PATH: baseStaticPath
 		}),
 		new HtmlWebpackPlugin({
 			inject: false,

package.json

@@ -64,7 +64,7 @@
 		"@types/ua-parser-js": "^0.7.36",
 		"@types/webpack-env": "1.16.3",
 		"@zextras/carbonio-ui-configs": "^0.1.11",
-		"@zextras/carbonio-ui-sdk": "github:Zextras/carbonio-ui-sdk#v1.2.4",
+		"@zextras/carbonio-ui-sdk": "1.3.1",
 		"autoprefixer": "10.4.2",
 		"babel-jest": "27.3.1",
 		"babel-loader": "8.2.3",
@@ -90,16 +90,16 @@
 		"rollup": "2.66.1",
 		"semver": "7.3.5",
 		"styled-components": "5.3.3",
-		"typeface-roboto": "1.1.13",
 		"webpack": "5.67.0",
 		"webpack-cli": "4.9.2",
 		"webpack-dev-server": "4.7.3",
 		"webpack-merge": "5.8.0"
 	},
 	"dependencies": {
+		"@fontsource/roboto": "^4.5.7",
 		"@sentry/browser": "^6.17.7",
 		"@tinymce/tinymce-react": "^3.13.0",
-		"@zextras/carbonio-design-system": "^0.3.0",
+		"@zextras/carbonio-design-system": "^0.3.5",
 		"@zextras/carbonio-ui-preview": "^0.1.5",
 		"darkreader": "4.9.46",
 		"history": "^5.2.0",

src/boot/app/load-app.ts

@@ -44,7 +44,7 @@ function loadAppModule(appPkg: CarbonioModule, store: Store<any>): Promise<Carbo
 				_resolve(appPkg);
 			}
 		};
-		const reject: (e: Error) => void = (e) => {
+		const reject: (e: unknown) => void = (e) => {
 			if (!resolved) {
 				resolved = true;
 				_reject(e);
@@ -98,10 +98,8 @@ function loadAppModule(appPkg: CarbonioModule, store: Store<any>): Promise<Carbo
 			script.setAttribute('src', `${appPkg.js_entrypoint}`);
 			document.body.appendChild(script);
 			_scripts[`${appPkg.name}-loader-${(_scriptId += 1)}`] = script;
-		} catch (err) {
+		} catch (err: unknown) {
 			console.error(err);
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
 			reject(err);
 		}
 	});

src/boot/app/load-apps.ts

@@ -21,7 +21,7 @@ export function loadApps(storeFactory: StoreFactory, apps: Array<CarbonioModule>
 	injectSharedLibraries();
 	const appsToLoad = filter(apps, (app) => {
 		if (app.name === SHELL_APP_ID) return false;
-		if (app.attrKey && getUserSetting('attrs', app.attrKey) !== 'TRUE') return false;
+		if (app.attrKey && getUserSetting('attrs', app.attrKey) === 'FALSE') return false;
 		return true;
 	});
 	console.log(

src/boot/bootstrapper-router.tsx

@@ -4,15 +4,16 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { FC, useContext } from 'react';
-import { BrowserRouter, useHistory } from 'react-router-dom';
+import React, { FC, useContext, useEffect } from 'react';
+import { BrowserRouter, Route, Switch, useHistory, useParams } from 'react-router-dom';
 import { SnackbarManagerContext, ModalManagerContext } from '@zextras/carbonio-design-system';
 import AppLoaderMounter from './app/app-loader-mounter';
 import { useBridge } from '../store/context-bridge';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import ShellView from '../shell/shell-view';
-import { BASENAME } from '../constants';
+import { BASENAME, IS_STANDALONE } from '../constants';
+import { useAppStore } from '../store/app';
 
 const ContextBridge: FC = () => {
 	const history = useHistory();
@@ -30,12 +31,26 @@ const ContextBridge: FC = () => {
 	return null;
 };
 
+const StandaloneListener: FC = () => {
+	const { route } = useParams<{ route?: string }>();
+	useEffect(() => {
+		if (route) useAppStore.setState({ standalone: route });
+	}, [route]);
+	return null;
+};
+
 const BootstrapperRouter: FC = () => (
 	<BrowserRouter basename={BASENAME}>
+		{IS_STANDALONE && (
+			<Switch>
+				<Route path={'/:route'}>
+					<StandaloneListener />
+				</Route>
+			</Switch>
+		)}
 		<ContextBridge />
 		<AppLoaderMounter />
 		<ShellView />
 	</BrowserRouter>
 );
-
 export default BootstrapperRouter;

src/boot/init.ts

@@ -13,7 +13,7 @@ import StoreFactory from '../redux/store-factory';
 import { getInfo } from '../network/get-info';
 
 export const init = (_i18nFactory: I18nFactory, _storeFactory: StoreFactory): void => {
-	getInfo().then(() => {
+	getInfo().finally(() => {
 		_i18nFactory.setLocale(
 			(
 				(useAccountStore.getState().settings?.prefs?.zimbraPrefLocale as string) ??

src/constants/index.ts

@@ -75,9 +75,16 @@ export const darkReaderDynamicThemeFixes: DynamicThemeFix = {
 	disableStyleSheetsProxy: false
 };
 
-export const BASENAME = `/carbonio/`;
+const base = '/carbonio/';
+
+const standaloneBase = `${base}standalone`;
+
+export const IS_STANDALONE = window.location.pathname.startsWith(standaloneBase);
+export const BASENAME = IS_STANDALONE ? standaloneBase : base;
 export const EMAIL_VALIDATION_REGEX =
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars, max-len, no-control-regex
 	/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
 
 export const ROOT_NAME = 'USER_ROOT';
+
+export const DR_VALUES = ['auto', 'enabled', 'disabled'];

src/i18n/i18n-factory.ts

@@ -51,6 +51,7 @@ export default class I18nFactory implements II18nFactory {
 			// for all options read: https://www.i18next.com/overview/configuration-options
 			.init({
 				returnEmptyString: true,
+				compatibilityJSON: 'v3',
 				lng: this.locale,
 				fallbackLng: 'en',
 				debug: false,

src/index.template.html

@@ -4,24 +4,25 @@
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="">
+
 <head>
-    <title>Carbonio Client</title>
-    <link rel="icon" type="image/svg+xml" href="<%- htmlWebpackPlugin.options.BASE_PATH %>favicon.svg">
-    <link rel="alternate icon" href="<%- htmlWebpackPlugin.options.BASE_PATH %>favicon.png">
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="minimum-scale=1.0, initial-scale=1.0, width=device-width, shrink-to-fit=no">
-    <base href="/<%- htmlWebpackPlugin.options.SHELL_ENV %>/" />
-    <meta http-equiv="Cache-Control" content="no-cache" />
-    <meta http-equiv="Pragma" content="no-cache" />
-    <meta http-equiv="Expires" content="0" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"></head>
+	<title>Carbonio Client</title>
+	<link rel="icon" type="image/svg+xml" href="<%- htmlWebpackPlugin.options.BASE_PATH %>favicon.svg">
+	<link rel="alternate icon" href="<%- htmlWebpackPlugin.options.BASE_PATH %>favicon.png">
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="minimum-scale=1.0, initial-scale=1.0, width=device-width, shrink-to-fit=no">
+	<base href="/carbonio/" />
+	<meta http-equiv="Cache-Control" content="no-cache" />
+	<meta http-equiv="Pragma" content="no-cache" />
+	<meta http-equiv="Expires" content="0" />
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+</head>
+
 <body>
-	<script>
-		window.__SHELL_ENV__ = "<%- htmlWebpackPlugin.options.SHELL_ENV %>"
-	</script>
 	<div id="app"></div>
 </body>
+
 </html>

src/index.tsx

@@ -10,6 +10,10 @@ import './index.css';
 import React, { lazy, Suspense } from 'react';
 import { render } from 'react-dom';
 import LoadingView from './boot/splash';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 
 window.addEventListener('contextmenu', (ev) => {
 	if (
@@ -31,7 +35,6 @@ window.addEventListener('contextmenu', (ev) => {
 // @ts-ignore works as intended, but it's tampering with the window
 window.__CARBONIO_DEV__ = !!new URL(window.location).searchParams.get('dev');
 const Bootstrapper = lazy(() => import('./boot/bootstrapper'));
-
 if (module.hot) module.hot.accept();
 render(
 	<Suspense fallback={<LoadingView />}>

src/network/edit-settings.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { filter, find, findIndex, forEach, map, reduce } from 'lodash';
+import { filter, find, findIndex, forEach, map, reduce, isArray } from 'lodash';
 import { SHELL_APP_ID } from '../constants';
 import { useAccountStore } from '../store/account/store';
 import { AccountState, Mods, Account } from '../../types';
@@ -22,9 +22,10 @@ export const editSettings = (mods: Mods, appId: string = SHELL_APP_ID): Promise<
 				: ''
 		}${
 			mods.prefs
-				? `<ModifyPrefsRequest xmlns="urn:zimbraAccount">${map(
-						mods.prefs,
-						(pref, key) => `<pref name="${key}">${pref}</pref>`
+				? `<ModifyPrefsRequest xmlns="urn:zimbraAccount">${map(mods.prefs, (pref, key) =>
+						isArray(pref)
+							? map(pref, (p) => `<pref name="${key}">${p}</pref>`).join('')
+							: `<pref name="${key}">${pref}</pref>`
 				  ).join('')}</ModifyPrefsRequest>`
 				: ''
 		}${