fix: remove link (#163)

Author: CerDennis

.npmrc

@@ -0,0 +1,4 @@
+public-hoist-pattern[]=eslint-plugin-*
+public-hoist-pattern[]=@typescript-eslint/*
+public-hoist-pattern[]=eslint-config-*
+public-hoist-pattern[]=eslint-import-resolver-*

package.json

@@ -12,6 +12,7 @@
 		"build": "sdk build",
 		"start": "sdk watch",
 		"deploy": "sdk deploy",
+		"sdkInstall": "sdk install",
 		"prepare": "is-ci || husky",
 		"type-check": "tsc --noEmit",
 		"type-check:watch": "pnpm run type-check -- --watch",

src/app.jsx src/app.tsxsrc/app.jsx renamed to src/app.tsx

@@ -15,19 +15,19 @@ import { TwoFactorAuthModal } from './components/two-factor-auth-modal';
 
 const LazyAuth = lazy(() => import(/* webpackChunkName: "settings-view" */ './settings/auth-view'));
 
-const Auth = (props) => (
+const Auth = (): React.JSX.Element => (
 	<Suspense
 		fallback={
 			<Container>
 				<Spinner color={'primary'} />
 			</Container>
 		}
 	>
-		<LazyAuth {...props} />
+		<LazyAuth />
 	</Suspense>
 );
 
-export default function App() {
+export default function App(): React.JSX.Element {
 	const navigate = useNavigate();
 
 	useEffect(() => {
@@ -41,7 +41,7 @@ export default function App() {
 				id: 'carbonio-auth-ui',
 				label: capitalize(t('changePassword.title', 'Change password')),
 				icon: 'LockOutline',
-				execute: () => navigate(`/settings/auth?section=changepassword`, { replace: true }),
+				execute: (): void => navigate(`/settings/auth?section=changepassword`, { replace: true }),
 				disabled: false,
 				group: 'carbonio-auth-ui',
 				primary: true

src/components/test/two-factor-auth-modal.test.tsx

@@ -6,8 +6,8 @@
 import React from 'react';
 
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
-import fetchMock from '../../test/fetchMock';
 
+import fetchMock from '../../test/fetchMock';
 import { customRender } from '../../test/test-utils';
 import { TwoFactorAuthModal } from '../two-factor-auth-modal';
 

src/settings/assets/icons/empty-state.jsx src/settings/assets/icons/empty-state.tsxsrc/settings/assets/icons/empty-state.jsx renamed to src/settings/assets/icons/empty-state.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-export function EmptyState() {
+export function EmptyState(): React.JSX.Element {
 	return (
 		<svg
 			width="286"

…ings/assets/icons/powered-by-zextras.jsx …ings/assets/icons/powered-by-zextras.tsxsrc/settings/assets/icons/powered-by-zextras.jsx renamed to src/settings/assets/icons/powered-by-zextras.tsx src/settings/assets/icons/powered-by-zextras.jsx renamed to src/settings/assets/icons/powered-by-zextras.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-export function PoweredByZextras() {
+export function PoweredByZextras(): React.JSX.Element {
 	return (
 		<svg
 			width="128"

src/settings/assets/icons/svgAssets.js src/settings/assets/icons/svgAssets.tssrc/settings/assets/icons/svgAssets.js renamed to src/settings/assets/icons/svgAssets.ts

@@ -6,9 +6,11 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import styled from '@emotion/styled';
 import { Container, Divider, Link, Padding, Row, Text } from '@zextras/carbonio-design-system';
 import { t, useUserSettings } from '@zextras/carbonio-shell-ui';
 import { compact, orderBy } from 'lodash';
+import { Trans } from 'react-i18next';
 
 import { AuthOutline } from './assets/icons/auth-outline';
 import { AppMobile } from './components/operations/app-mobile';
@@ -17,17 +19,20 @@ import { ExchangeActiveSync } from './components/operations/exchange-active-sync
 import { OTPAuthentication } from './components/operations/otp-authentication';
 import { RecoveryPassword } from './components/operations/recovery-password';
 import { ResetPassword } from './components/operations/reset-password';
-import { ColumnFull, ColumnLeft, ColumnRight, Shell } from './components/shared/shell';
 import { SidebarNavigation } from './components/shared/sidebar-navigation';
 import { checkSupportedZextras } from './network/checkSupportedZextras';
 import { fetchSoap } from './network/fetchSoap';
 import { Password, Tab } from './types';
 
+const ColumnRight = styled(Row)`
+	width: ${({ theme, width }): string => `calc(${width} - ${theme.sizes.padding.large})`};
+`;
+
 function Instruction({
 	instruction,
 	link
 }: Readonly<{
-	instruction: string;
+	instruction: React.ReactNode;
 	link?: string;
 }>): React.JSX.Element {
 	return (
@@ -74,8 +79,14 @@ function useAuthTabs(): {
 		name: 'changepassword',
 		label: t('changePassword.title', 'Change Password'),
 		view: ChangePassword,
-		instruction: t('instruction.changePassword', 'Here you can change your password.'),
-		link: 'https://docs.zextras.com/suite/html/auth.html#auth-change-pass'
+		instruction: (
+			<Trans
+				t={t}
+				i18nKey="instruction.changePassword"
+				components={{ br: <br /> }}
+				defaults="Here you can change your password.<br>For more information, contact your administrator."
+			/>
+		)
 	};
 
 	const resetPasswordItem = {
@@ -140,15 +151,6 @@ function useAuthTabs(): {
 			link: 'https://docs.zextras.com/suite/html/auth.html#create-new-credentials-mobile-apps'
 		},
 		otpAuthenticationItem
-		/* section is hidden cause not officially supported yet
-		ref: AUTH-543
-		{
-			name: 'desktop',
-			label: t('appDesktop.title', 'Desktop Apps'),
-			view: AppDesktop,
-			instruction: t('instruction.desktop', 'Here you can manage Desktop App password.'),
-			link: 'https://docs.zextras.com/suite/html/auth.html#create-new-credentials-mobile-apps'
-		}, */
 	]);
 
 	return { links, linksWithoutZextras, otpAuthenticationItem };
@@ -250,34 +252,46 @@ export default function App(): React.JSX.Element {
 	}, [checkHasZextras]);
 
 	const occupyFull = useMemo(() => window.innerWidth <= 1800, []);
+
 	return (
-		<Shell>
+		<Container
+			orientation="horizontal"
+			mainAlignment="flex-start"
+			crossAlignment="flex-start"
+			height="100%"
+			background="gray5"
+			padding={{ all: 'large' }}
+		>
 			<SideBar
 				activeTab={activeTab}
 				setActiveTab={setActiveTab}
 				hasZextras={hasZextras}
 				links={links}
 				linksWithoutZextras={linksWithoutZextras}
 			/>
-			<ColumnFull data-testid="active-panel" mainAlignment="space-between" takeAvailableSpace>
-				<ColumnLeft
+			<Row
+				width="100%"
+				height="100%"
+				data-testid="active-panel"
+				mainAlignment="space-between"
+				takeAvailableSpace
+			>
+				<Row
+					height="100%"
 					width={`${occupyFull ? '100%' : 'calc(60% - 6.25rem)'} `}
 					mainAlignment="flex-start"
 					crossAlignment="flex-start"
 				>
 					{activeTab && <ActiveTab activeTab={activeTab} />}
-				</ColumnLeft>
+				</Row>
 				{!occupyFull && (
-					<ColumnRight width="calc(40% + 6.25rem)">
+					<ColumnRight width="calc(40% + 6.25rem)" height="100%">
 						{activeTab?.instruction && (
-							<Instruction
-								instruction={activeTab && activeTab.instruction}
-								link={activeTab && activeTab.link}
-							/>
+							<Instruction instruction={activeTab?.instruction} link={activeTab?.link} />
 						)}
 					</ColumnRight>
 				)}
-			</ColumnFull>
-		</Shell>
+			</Row>
+		</Container>
 	);
 }