feat: dashboard UI refactor

.github/workflows/end-to-end-tests.yaml

@@ -10,6 +10,12 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+
       - name: Create env file
         run: |
           touch .env

cypress/e2e/front/dashboard.cy.ts

@@ -62,7 +62,7 @@ describe('Good Upload file modal front in Dashboard', () => {
 	});
 
 	it('Good name for close button', () => {
-		cy.get('#ipc-modal-close-button').should('contain', 'Close');
+		cy.get('#ipc-modal-close-button').should('have.length', 1);
 	});
 });
 
@@ -85,11 +85,11 @@ describe('Good Deploy program modal front in Dashboard', () => {
 	});
 
 	it('Good name for upload a file button', () => {
-		cy.get('#ipc-dashboard-deploy-program-modal-button').should('contain', 'Deploy program');
+		cy.get('#ipc-dashboard-deploy-program-modal-button').should('contain', 'Deploy a program');
 	});
 
 	it('Good name for close button', () => {
-		cy.get('#ipc-modal-close-button').should('contain', 'Close');
+		cy.get('#ipc-modal-close-button').should('have.length', 1);
 	});
 });
 
@@ -116,6 +116,6 @@ describe('Good Create folder modal front in Dashboard', () => {
 	});
 
 	it('Good name for close button', () => {
-		cy.get('#ipc-modal-close-button').should('contain', 'Close');
+		cy.get('#ipc-modal-close-button').should('have.length', 1);
 	});
 });

cypress/e2e/front/landing.cy.ts

@@ -4,7 +4,7 @@ describe('Good front for Landing', () => {
 	});
 
 	it ('Good text', () => {
-		cy.get('#ipc-landing-navbar-name').should('contain', 'Inter Planetary Cloud');
+		cy.get('#ipc-landing-navigation-name').should('contain', 'Inter Planetary Cloud');
 		cy.get("#ipc-landing-headline").should('contain', 'The first distributed cloud unsealing your data.');
 		cy.get("#ipc-landing-subHeadline").should('contain', 'Build on top of Aleph, the next generation network of distributed big data applications.');
 		cy.get("#ipc-landing-services-title").should('contain', 'Inter Planetary Cloud offers two services');

cypress/e2e/front/login.cy.ts

@@ -41,7 +41,7 @@ describe('Login with credentials Button for Login', () => {
 	});
 
 	it('Good URL redirect for login button', () => {
-		cy.get('#ipc-login-credentials-button').click().url().should('eq', `${Cypress.config().baseUrl}/dashboard`);
+		cy.get('#ipc-login-credentials-button').click().url().should('eq', `${Cypress.config().baseUrl}/drive`);
 	});
 });
 

cypress/e2e/front/signup.cy.ts

@@ -35,7 +35,7 @@ describe('Good Modal front for Signup', () => {
 	});
 
 	it('Good number of buttons', () => {
-		cy.get('button').should('have.length', 4);
+		cy.get('button').should('have.length', 5);
 	});
 
 	it('Good number of text-area', () => {
@@ -47,7 +47,7 @@ describe('Good Modal front for Signup', () => {
 	});
 
 	it('Good name for close button', () => {
-		cy.get('#ipc-modal-close-button').should('contain', 'Close');
+		cy.get('#ipc-modal-close-button').should('have.length', 1);
 	});
 });
 
@@ -68,7 +68,7 @@ describe('Signup with credentials Button for Signup', () => {
 	});
 
 	it('Good URL redirect for close button', () => {
-		cy.get('#ipc-modal-close-button').click().url().should('eq', `${Cypress.config().baseUrl}/dashboard`);
+		cy.get('#ipc-modal-close-button').click().url().should('eq', `${Cypress.config().baseUrl}/drive`);
 	});
 });
 

package.json

@@ -12,6 +12,7 @@
     "@emotion/styled": "^11.10.5",
     "aleph-sdk-ts": "^3.2.0",
     "axios": "^0.27.2",
+    "boring-avatars": "^1.7.0",
     "crypto-js": "^4.1.1",
     "eth-crypto": "^2.4.0",
     "ethers": "^5.7.2",

pages/drive/account.tsx

@@ -0,0 +1,16 @@
+import { VStack } from '@chakra-ui/react';
+
+import Navigation from 'components/navigation/Navigation';
+import LabelBadge from "components/LabelBadge";
+import AccountCard from 'components/account/AccountCard';
+
+const Account = (): JSX.Element => (
+	<Navigation>
+		<VStack w="100%" spacing="48px" align="start">
+			<LabelBadge label="Account" />
+			<AccountCard />
+		</VStack>
+	</Navigation>
+);
+
+export default Account;

pages/drive/contacts.tsx

@@ -0,0 +1,26 @@
+import { HStack, VStack } from '@chakra-ui/react';
+
+import Navigation from 'components/navigation/Navigation';
+import DriveCards from 'components/cards/DriveCards';
+import LabelBadge from 'components/LabelBadge';
+import AddContact from 'components/contact/AddContact';
+
+import { useDriveContext } from 'contexts/drive';
+
+const Contacts = (): JSX.Element => {
+	const { contacts } = useDriveContext();
+
+	return (
+		<Navigation>
+			<VStack w="100%" spacing="48px" align="start">
+				<HStack spacing="48px">
+					<LabelBadge label="Contacts" />
+					<AddContact />
+				</HStack>
+				<DriveCards contacts={contacts} />
+			</VStack>
+		</Navigation>
+	);
+};
+
+export default Contacts;

pages/dashboard.tsx → pages/drive/index.tsx

@@ -1,30 +1,25 @@
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-
-import { Box, HStack, useColorMode, useToast, VStack } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { useColorMode, useToast, VStack } from '@chakra-ui/react';
 
 import { useUserContext } from 'contexts/user';
-
-import DisplayCards from 'components/DisplayCards';
-import { ResponsiveBar } from 'components/navbar/ResponsiveBar';
 import { useConfigContext } from 'contexts/config';
 import { useDriveContext } from 'contexts/drive';
 
+import DriveCards from 'components/cards/DriveCards';
+import Navigation from 'components/navigation/Navigation';
+import LabelBadge from 'components/LabelBadge';
+
 const Dashboard = (): JSX.Element => {
 	const toast = useToast({ duration: 2000, isClosable: true });
-	const router = useRouter();
 	const { user } = useUserContext();
-	const { config, setConfig } = useConfigContext();
+	const { setConfig } = useConfigContext();
 	const { colorMode, toggleColorMode } = useColorMode();
 
-	const { sharedFiles, setFiles, setFolders, setContacts, setPrograms, setSharedFiles } = useDriveContext();
-	const [selectedTab, setSelectedTab] = useState(0);
+	const { path, folders, files, setFiles, setFolders, setContacts, setPrograms, setSharedFiles } = useDriveContext();
 
 	useEffect(() => {
 		(async () => {
-			if (!user) {
-				router.push('/');
-			} else {
+			if (user) {
 				await loadContact();
 				await loadUserContents();
 			}
@@ -57,22 +52,15 @@ const Dashboard = (): JSX.Element => {
 	};
 
 	return (
-		<HStack minH="100vh" minW="100vw" align="start" bg={config?.theme ?? 'white'}>
-			<ResponsiveBar setSelectedTab={setSelectedTab} selectedTab={selectedTab} configTheme={config?.theme ?? 'white'} />
-			<VStack w="100%" m="32px !important">
-				<Box w="100%">
-					<VStack w="100%" id="test" spacing="16px" mt={{ base: '64px', lg: '0px' }}>
-						{/* TODO: clear DisplayCardsParams */}
-						<DisplayCards
-							sharedFiles={sharedFiles}
-							index={selectedTab}
-							isRedeployLoading={false}
-							onOpenRedeployProgram={() => {}}
-						/>
-					</VStack>
-				</Box>
+		<Navigation>
+			<VStack w="100%" spacing="48px" align="start">
+				<LabelBadge label="My drive" />
+				<DriveCards
+					files={files.filter((elem) => elem.path === path && !elem.deletedAt)}
+					folders={folders.filter((elem) => elem.path === path)}
+				/>
 			</VStack>
-		</HStack>
+		</Navigation>
 	);
 };
 

pages/drive/programs.tsx

@@ -0,0 +1,22 @@
+import { VStack } from '@chakra-ui/react';
+
+import Navigation from 'components/navigation/Navigation';
+import DriveCards from 'components/cards/DriveCards';
+import LabelBadge from 'components/LabelBadge';
+
+import { useDriveContext } from 'contexts/drive';
+
+const Programs = (): JSX.Element => {
+	const { programs } = useDriveContext();
+
+	return (
+		<Navigation>
+			<VStack w="100%" spacing="48px" align="start">
+				<LabelBadge label="My programs" />
+				<DriveCards programs={programs} />
+			</VStack>
+		</Navigation>
+	);
+};
+
+export default Programs;

pages/drive/shared.tsx

@@ -0,0 +1,22 @@
+import { VStack } from '@chakra-ui/react';
+
+import DriveCards from 'components/cards/DriveCards';
+import Navigation from 'components/navigation/Navigation';
+import LabelBadge from 'components/LabelBadge';
+
+import { useDriveContext } from 'contexts/drive';
+
+const Shared = (): JSX.Element => {
+	const { sharedFiles } = useDriveContext();
+
+	return (
+		<Navigation>
+			<VStack w="100%" spacing="48px" align="start">
+				<LabelBadge label="Share with me" />
+				<DriveCards files={sharedFiles.filter((elem) => !elem.deletedAt)} />
+			</VStack>
+		</Navigation>
+	);
+};
+
+export default Shared;

pages/drive/trash.tsx

@@ -0,0 +1,29 @@
+import { HStack, VStack } from '@chakra-ui/react';
+
+import DriveCards from 'components/cards/DriveCards';
+import DeleteBin from 'components/file/DeleteBin';
+import Navigation from 'components/navigation/Navigation';
+import LabelBadge from 'components/LabelBadge';
+
+import { useDriveContext } from 'contexts/drive';
+
+const Trash = (): JSX.Element => {
+	const { path, files, folders, sharedFiles } = useDriveContext();
+
+	const deletedFiles = files.filter((elem) => elem.path === path && elem.deletedAt !== null);
+	const deletedFolders = folders.filter((elem) => elem.path === path);
+
+	return (
+		<Navigation>
+			<VStack w="100%" spacing="48px" align="start">
+				<HStack spacing="48px">
+					<LabelBadge label="Trash" />
+					<DeleteBin files={deletedFiles} folders={deletedFolders} concernedFiles={sharedFiles} />
+				</HStack>
+				<DriveCards files={deletedFiles} folders={deletedFolders} />
+			</VStack>
+		</Navigation>
+	);
+};
+
+export default Trash;

pages/login.tsx

@@ -32,8 +32,8 @@ const Login = (): JSX.Element => {
 		if (login.user) {
 			toast({ title: login.message, status: 'success' });
 			setUser(login.user);
-			router.push('/dashboard');
-			await login.user.drive.autoDelete()
+			router.push('/drive');
+			await login.user.drive.autoDelete();
 		} else {
 			toast({ title: login.message, status: 'error' });
 		}
@@ -47,12 +47,12 @@ const Login = (): JSX.Element => {
 		if (login.user) {
 			toast({ title: login.message, status: 'success' });
 			setUser(login.user);
-			router.push('/dashboard');
-			await login.user.drive.autoDelete()
+			router.push('/drive');
+			await login.user.drive.autoDelete();
 		} else {
 			toast({ title: login.message, status: 'error' });
 		}
-	}
+	};
 
 	return (
 		<AuthPage

pages/signup.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-import { Button, Text, Textarea, useDisclosure, useToast, VStack } from '@chakra-ui/react';
+import { HStack, Text, Textarea, useDisclosure, useToast, VStack } from '@chakra-ui/react';
 
 import { useAuthContext } from 'contexts/auth';
 import { useUserContext } from 'contexts/user';
@@ -15,6 +15,7 @@ import Modal from 'components/Modal';
 import OutlineButton from 'components/OutlineButton';
 
 import colors from 'theme/foundations/colors';
+import Button from 'components/Button';
 
 const Signup = (): JSX.Element => {
 	const auth = useAuthContext();
@@ -53,7 +54,7 @@ const Signup = (): JSX.Element => {
 		toast({ title: signupResult.message, status: 'success' });
 		setUser(signupResult.user);
 		setConfig(signupResult.user?.config);
-		router.push('/dashboard');
+		router.push('/drive');
 	};
 
 	const onClick = () => {
@@ -89,9 +90,15 @@ const Signup = (): JSX.Element => {
 						onClose={closeModal}
 						title="Your Mnemonics"
 						CTA={
-							<Button variant="inline" onClick={onClick} w="100%" mb="16px" id="ipc-signup-copy-mnemonics-button">
-								Copy my mnemonics
-							</Button>
+							<HStack w="100%" justify="space-between">
+								<Button variant="primary" size="lg" onClick={onClick} id="ipc-signup-copy-mnemonics-button">
+									Copy my mnemonics
+								</Button>
+
+								<Button variant="secondary" size="lg" onClick={closeModal} id="ipc-signup-go-to-dashboard-button">
+									Go to my dashboard
+								</Button>
+							</HStack>
 						}
 					>
 						<Textarea