Add PrepareImportPage

RocketChat · Apr 16, 2020 · 78a5de4 · 78a5de4
1 parent a623e85
commit 78a5de4
Show file tree

Hide file tree

Showing 5 changed files with 349 additions and 338 deletions.
diff --git a/app/importer/client/components/ImportHistoryPage.js b/app/importer/client/components/ImportHistoryPage.js
@@ -108,7 +108,8 @@ function ImportHistoryPage() {
 							{currentOperation?.valid && <ImportOperationSummary {...currentOperation} />}
 							{latestOperations
 								?.filter(({ _id }) => currentOperation?._id !== _id || !currentOperation?.valid)
-								?.map((operation) => <ImportOperationSummary key={operation._id} {...operation} />)}
+								// Forcing valid=false as the current API only accept preparation/progress over currentOperation
+								?.map((operation) => <ImportOperationSummary key={operation._id} {...operation} valid={false} />)}
 						</>}
 				</Table.Body>
 			</Table>

diff --git a/app/importer/client/components/ImportOperationSummary.js b/app/importer/client/components/ImportOperationSummary.js
@@ -1,4 +1,4 @@
-import { Box, Button, ButtonGroup, Skeleton, Table } from '@rocket.chat/fuselage';
+import { Skeleton, Table } from '@rocket.chat/fuselage';
 import React, { useMemo } from 'react';
 
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
@@ -14,7 +14,6 @@ import {
 
 function ImportOperationSummary({
 	type,
-	importerKey,
 	_updatedAt,
 	status,
 	file,
@@ -60,42 +59,39 @@ function ImportOperationSummary({
 
 	const canCheckProgress = useMemo(() => valid && ImportingStartedStates.includes(status), [valid, status]);
 
-	const hasActions = canContinue || canCheckProgress;
-
-	const importProgressRoute = useRoute('admin-import-progress');
 	const prepareImportRoute = useRoute('admin-import-prepare');
+	const importProgressRoute = useRoute('admin-import-progress');
 
-	const handlePrepareImportClick = () => {
-		prepareImportRoute.push();
-	};
+	const handleClick = () => {
+		if (canContinue) {
+			prepareImportRoute.push();
+			return;
+		}
 
-	const handleImportProgressClick = () => {
-		importProgressRoute.push();
+		if (canCheckProgress) {
+			importProgressRoute.push();
+		}
 	};
 
-	return <>
-		<Table.Row>
-			<Table.Cell>
-				<Box textStyle='p1' textColor='default'>{type}</Box>
-				<Box textStyle='p1' textColor='hint'>{importerKey}</Box>
-			</Table.Cell>
-			<Table.Cell>{formatDateAndTime(_updatedAt)}</Table.Cell>
-			<Table.Cell>{status && t(status.replace('importer_', 'importer_status_'))}</Table.Cell>
-			<Table.Cell>{fileName}</Table.Cell>
-			<Table.Cell align='center'>{users}</Table.Cell>
-			<Table.Cell align='center'>{channels}</Table.Cell>
-			<Table.Cell align='center'>{messages}</Table.Cell>
-			<Table.Cell align='center'>{total}</Table.Cell>
-		</Table.Row>
-		{hasActions && <Table.Row>
-			<Table.Cell colSpan={8}>
-				<ButtonGroup>
-					{canContinue && <Button primary onClick={handlePrepareImportClick}>{t('Continue')}</Button>}
-					{canCheckProgress && <Button primary onClick={handleImportProgressClick}>{t('Check_Progress')}</Button>}
-				</ButtonGroup>
-			</Table.Cell>
-		</Table.Row>}
-	</>;
+	const hasAction = canContinue || canCheckProgress;
+
+	const props = hasAction ? {
+		tabIndex: 0,
+		role: 'link',
+		action: true,
+		onClick: handleClick,
+	} : {};
+
+	return <Table.Row {...props}>
+		<Table.Cell>{type}</Table.Cell>
+		<Table.Cell>{formatDateAndTime(_updatedAt)}</Table.Cell>
+		<Table.Cell>{status && t(status.replace('importer_', 'importer_status_'))}</Table.Cell>
+		<Table.Cell>{fileName}</Table.Cell>
+		<Table.Cell align='center'>{users}</Table.Cell>
+		<Table.Cell align='center'>{channels}</Table.Cell>
+		<Table.Cell align='center'>{messages}</Table.Cell>
+		<Table.Cell align='center'>{total}</Table.Cell>
+	</Table.Row>;
 }
 
 function ImportOperationSummarySkeleton() {

diff --git a/app/importer/client/components/NewImportPage.js b/app/importer/client/components/NewImportPage.js
@@ -163,9 +163,14 @@ function NewImportPage() {
 
 	return <Page className='page-settings'>
 		<Page.Header title={t('Import_New_File')}>
-			<Button ghost onClick={handleBackToImportsButtonClick}>
-				<Icon name='back' /> {t('Back_to_imports')}
-			</Button>
+			<ButtonGroup>
+				<Button ghost onClick={handleBackToImportsButtonClick}>
+					<Icon name='back' /> {t('Back_to_imports')}
+				</Button>
+				{importer && <Button primary minHeight='x40' disabled={isLoading} onClick={handleImportButtonClick}>
+					{isLoading ? <Throbber inheritColor /> : t('Import')}
+				</Button>}
+			</ButtonGroup>
 		</Page.Header>
 		<Page.ContentShadowScroll>
 			<Box marginInline='auto' marginBlock='neg-x24' width='full' maxWidth='x580'>
@@ -232,11 +237,6 @@ function NewImportPage() {
 								<TextInput id={fileSourceInputId} value={filePath} onChange={handleFilePathChange} />
 							</Field.Row>
 						</Field>}
-						<ButtonGroup>
-							<Button primary minHeight='x40' disabled={isLoading} onClick={handleImportButtonClick}>
-								{isLoading ? <Throbber inheritColor /> : t('Import')}
-							</Button>
-						</ButtonGroup>
 					</>}
 				</Margins>
 			</Box>