[MERGE] Dev ip computing

cypress/integration/dashboardFront.spec.js

@@ -47,7 +47,7 @@ describe('Good Modal Front for DashboardView', () => {
 	});
 
 	it('Good number of buttons', () => {
-		cy.get('button').should('have.length', 8);
+		cy.get('button').should('have.length', 10);
 	});
 
 	it('Good number of input', () => {

cypress/integration/uploadProgram.js

@@ -0,0 +1,40 @@
+let dashboardSpecMnemonic = '';
+
+describe('Create account for DashboardView tests', () => {
+	it('Connect', () => {
+		cy.visit('/signup');
+		cy.wait(1000);
+		cy.get('#ipc-signupView-credentials-signup-button').click();
+		cy.get('#ipc-signupView-text-area')
+			.invoke('val')
+			.then((input) => {
+				dashboardSpecMnemonic = input;
+			});
+		cy.get('#ipc-modal-close-button').click();
+	});
+});
+
+describe('Upload a program modal for DashboardView', () => {
+	const fixtureFile = 'upload_test_program.zip';
+
+	beforeEach(() => {
+		cy.visit('/login');
+		cy.wait(1000);
+		cy.get('#ipc-loginView-text-area').click().type(dashboardSpecMnemonic);
+		cy.get('#ipc-loginView-credentials-button').click().wait(3000);
+		cy.get('#ipc-dashboardView-drawer-button').click({ force: true });
+		cy.get('#ipc-deploy-button').click().wait(2500);
+	});
+
+	it('Good number of buttons after upload', () => {
+		cy.get('#ipc-dashboardView-upload-program').attachFile(fixtureFile);
+		cy.get('#ipc-dashboardView-upload-program-modal-button').click();
+		cy.wait(2000);
+		cy.get('button').should('have.length', 10);
+	});
+
+	it('Good number of buttons after closing modal', () => {
+		cy.get('#ipc-modal-close-button').click();
+		cy.get('button').should('have.length', 10);
+	});
+});

src/components/CustomButtons.tsx

@@ -7,7 +7,7 @@ type UploadButtonProps = {
 };
 
 export const UploadButton = ({ text, onClick, isLoading }: UploadButtonProps): JSX.Element => (
-	<Button variant="inline" borderRadius="lg" onClick={onClick} isLoading={isLoading} id="ipc-upload-button">
+	<Button variant="inline" w="80%" borderRadius="lg" onClick={onClick} isLoading={isLoading} id="ipc-upload-button">
 		{text}
 	</Button>
 );
@@ -17,3 +17,9 @@ export const ContactButton = ({ text, onClick, isLoading }: UploadButtonProps):
 		{text}
 	</Button>
 );
+
+export const DeployButton = ({ text, onClick, isLoading }: UploadButtonProps): JSX.Element => (
+	<Button variant="inline" w="80%" borderRadius="lg" onClick={onClick} isLoading={isLoading} id="ipc-deploy-button">
+		{text}
+	</Button>
+);

src/components/DisplayFileCards.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { IPCContact, IPCFile } from '../types/types';
+import { IPCContact, IPCFile, IPCProgram } from '../types/types';
 import { FileCards } from './FileCards';
+import { ProgramCards } from './ProgramCards';
 import { ContactCards } from './ContactCards';
 import { ProfileCard } from './ProfileCard';
 
 type FileCardsProps = {
 	myFiles: IPCFile[];
+	myPrograms: IPCProgram[];
 	sharedFiles: IPCFile[];
 	contacts: IPCContact[];
 	index: number;
@@ -24,6 +26,7 @@ type FileCardsProps = {
 
 export const DisplayFileCards = ({
 	myFiles,
+	myPrograms,
 	sharedFiles,
 	contacts,
 	index,
@@ -75,6 +78,7 @@ export const DisplayFileCards = ({
 				deleteContact={deleteContact}
 			/>
 		);
+	if (index === 3) return <ProgramCards programs={myPrograms} />;
 	return (
 		<ProfileCard profile={contacts[0]} setContactInfo={setContactInfo} onOpenContactUpdate={onOpenContactUpdate} />
 	);

src/components/FileCards.tsx

@@ -28,7 +28,7 @@ export const FileCards = ({
 	onOpenUpdateFileContent,
 }: FileCardsProps): JSX.Element => (
 	<>
-		{files.map((file) => (
+		{files.map((file: IPCFile) => (
 			<FileCard key={file.created_at} file={file}>
 				<>
 					<Button

src/components/ProgramCard.tsx

@@ -0,0 +1,33 @@
+import { Box, Flex, Text, VStack } from '@chakra-ui/react';
+
+import { IPCProgram } from 'types/types';
+
+type ProgramCardProps = {
+	program: IPCProgram;
+	children: JSX.Element;
+};
+
+const ProgramCard = ({ program, children }: ProgramCardProps): JSX.Element => (
+	<Box
+		p="16px"
+		bg="white"
+		w="100%"
+		boxShadow="0px 2px 3px 3px rgb(240, 240, 240)"
+		borderRadius="4px"
+		border="1px solid rgb(200, 200, 200)"
+		mb="8px"
+		display="flex"
+		justifyContent="space-between"
+	>
+		<VStack w="100%" justify="space-between" align="center">
+			<Text fontWeight="500" isTruncated maxW="100%">
+				{program.name}
+			</Text>
+			<Flex w="100%" justify="space-between" align="center">
+				{children}
+			</Flex>
+		</VStack>
+	</Box>
+);
+
+export default ProgramCard;

src/components/ProgramCards.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@chakra-ui/react';
+import ProgramCard from './ProgramCard';
+import { IPCProgram } from '../types/types';
+
+type ProgramCardsProps = {
+	programs: IPCProgram[];
+};
+
+export const ProgramCards = ({ programs }: ProgramCardsProps): JSX.Element => (
+	<>
+		{programs.map((program: IPCProgram) => (
+			<ProgramCard key={program.created_at} program={program}>
+				<>
+					<Button
+						as="a"
+						href={`https://aleph.sh/vm/${program.hash}`}
+						target="_blank"
+						variant="inline"
+						size="sm"
+						w="100%"
+						p="0px"
+						id="ipc-computingView-forwardUrl-button"
+					>
+						Go to site
+					</Button>
+				</>
+			</ProgramCard>
+		))}
+	</>
+);

src/components/ResponsiveBar.tsx

@@ -18,28 +18,46 @@ import { HamburgerIcon } from '@chakra-ui/icons';
 import React from 'react';
 import colors from '../theme/foundations/colors';
 import Sidebar from './SideBar';
-import { UploadButton } from './CustomButtons';
+import { UploadButton, DeployButton } from './CustomButtons';
 
 type BarProps = {
 	onOpen: () => void;
+	onOpenProgram: () => void;
 	isUploadLoading: boolean;
+	isDeployLoading: boolean;
 	setSelectedTab: React.Dispatch<React.SetStateAction<number>>;
 	selectedTab: number;
 };
 
-export const LeftBar = ({ onOpen, isUploadLoading, setSelectedTab, selectedTab }: BarProps): JSX.Element => (
+export const LeftBar = ({
+	onOpen,
+	onOpenProgram,
+	isUploadLoading,
+	isDeployLoading,
+	setSelectedTab,
+	selectedTab,
+}: BarProps): JSX.Element => (
 	<Sidebar
 		uploadButton={<UploadButton text="Upload a file" onClick={() => onOpen()} isLoading={isUploadLoading} />}
+		deployButton={<DeployButton text="Deploy a program" onClick={onOpenProgram} isLoading={isDeployLoading} />}
 		contactTab="Contacts"
 		myFilesTab="My files"
+		myProgramsTab="My programs"
 		profileTab="My profile"
 		sharedFilesTab="Shared with me"
 		setSelectedTab={setSelectedTab}
 		currentTabIndex={selectedTab}
 	/>
 );
 
-export const BarWithDrawer = ({ onOpen, setSelectedTab, isUploadLoading, selectedTab }: BarProps): JSX.Element => {
+export const BarWithDrawer = ({
+	onOpen,
+	onOpenProgram,
+	setSelectedTab,
+	isDeployLoading,
+	isUploadLoading,
+	selectedTab,
+}: BarProps): JSX.Element => {
 	const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure();
 	const placement: SlideDirection = 'left';
 
@@ -50,8 +68,10 @@ export const BarWithDrawer = ({ onOpen, setSelectedTab, isUploadLoading, selecte
 				<DrawerContent w="75%">
 					<LeftBar
 						onOpen={onOpen}
+						onOpenProgram={onOpenProgram}
 						setSelectedTab={setSelectedTab}
 						isUploadLoading={isUploadLoading}
+						isDeployLoading={isDeployLoading}
 						selectedTab={selectedTab}
 					/>
 				</DrawerContent>
@@ -80,23 +100,34 @@ export const BarWithDrawer = ({ onOpen, setSelectedTab, isUploadLoading, selecte
 	);
 };
 
-export const ResponsiveBar = ({ onOpen, setSelectedTab, isUploadLoading, selectedTab }: BarProps): JSX.Element => {
+export const ResponsiveBar = ({
+	onOpen,
+	onOpenProgram,
+	setSelectedTab,
+	isUploadLoading,
+	isDeployLoading,
+	selectedTab,
+}: BarProps): JSX.Element => {
 	const isDrawerNeeded: boolean = useBreakpointValue({ base: true, xs: true, lg: false }) || false;
 
 	if (!isDrawerNeeded)
 		return (
 			<LeftBar
 				onOpen={onOpen}
+				onOpenProgram={onOpenProgram}
 				setSelectedTab={setSelectedTab}
 				isUploadLoading={isUploadLoading}
+				isDeployLoading={isDeployLoading}
 				selectedTab={selectedTab}
 			/>
 		);
 	return (
 		<BarWithDrawer
 			onOpen={onOpen}
+			onOpenProgram={onOpenProgram}
 			setSelectedTab={setSelectedTab}
 			isUploadLoading={isUploadLoading}
+			isDeployLoading={isDeployLoading}
 			selectedTab={selectedTab}
 		/>
 	);

src/components/SideBar.tsx

@@ -7,8 +7,10 @@ type SideBarPropsType = {
 	contactTab: string;
 	myFilesTab: string;
 	sharedFilesTab: string;
+	myProgramsTab: string;
 	profileTab: string;
 	uploadButton: JSX.Element;
+	deployButton: JSX.Element;
 	setSelectedTab: React.Dispatch<React.SetStateAction<number>>;
 	currentTabIndex: number;
 };
@@ -17,8 +19,10 @@ const SideBar = ({
 	contactTab,
 	myFilesTab,
 	sharedFilesTab,
+	myProgramsTab,
 	profileTab,
 	uploadButton,
+	deployButton,
 	setSelectedTab,
 	currentTabIndex,
 }: SideBarPropsType): JSX.Element => (
@@ -68,6 +72,14 @@ const SideBar = ({
 					>
 						{contactTab}
 					</Tab>
+					<Tab
+						borderLeft={`5px solid ${colors.blue[700]}`}
+						_selected={{
+							borderLeft: `5px solid ${colors.red[700]}`,
+						}}
+					>
+						{myProgramsTab}
+					</Tab>
 					<Tab
 						borderLeft={`5px solid ${colors.blue[700]}`}
 						_selected={{
@@ -79,6 +91,7 @@ const SideBar = ({
 				</TabList>
 			</Tabs>
 			{uploadButton}
+			{deployButton}
 		</VStack>
 	</VStack>
 );