#25: Make configure page optional

src/__tests__/integration/app.test.js

@@ -1,4 +1,4 @@
-import { integrationTest } from './index';
+import { integrationTest, toggleSettingsCheckbox } from './index';
 import Loading from '../../components/layouts/pages/loading/Loading';
 
 const { REACT_APP_VERSION } = process.env;
@@ -24,4 +24,17 @@ describe('App', () => {
             }
         )
     );
+
+    it(
+        'Turn settings on and off',
+        integrationTest((store, component) => {
+            expect(component.find('.MuiStepLabel-root')).toHaveLength(3);
+
+            toggleSettingsCheckbox(component, true);
+            expect(component.find('.MuiStepLabel-root')).toHaveLength(4);
+
+            toggleSettingsCheckbox(component, false);
+            expect(component.find('.MuiStepLabel-root')).toHaveLength(3);
+        })
+    );
 });

src/__tests__/integration/index.js

@@ -7,6 +7,7 @@ import fs from 'mz/fs';
 
 import App from '../../components/App';
 import configureStore from '../../store/rootStore';
+import Checkbox from '@material-ui/core/Checkbox';
 import { getInfo as getFileServiceInfo, uploadFile, getFileContent } from '../../services/fileService';
 import { getInfo as getJobServiceInfo, createJob, updateJob, executeJob, getJob } from '../../services/jobService';
 import { getList as getProfilesList } from '../../services/profiles';
@@ -242,8 +243,8 @@ export const navigateWithHeaderLink = (component, linkSelector) => {
     component.update();
 };
 
-export const getNextStepButton = component => component.find('.page-navigation__end button');
-export const getPrevStepButton = component => component.find('.page-navigation__start button');
+export const getNextStepButton = component => component.find('.page-navigation > .nav-button_forward');
+export const getPrevStepButton = component => component.find('.page-navigation > .nav-button_back');
 
 export const moveBack = component => {
     getPrevStepButton(component).simulate('click', { button: 0 });
@@ -262,3 +263,13 @@ export const skipLoadingPage = async (store, component) => {
 
 export const isFileStored = state => state.pdfFiles.length;
 export const stepFinished = key => state => getProgress(state).steps.find(({ stepKey }) => stepKey === key)?.completed;
+
+export const toggleSettingsCheckbox = (component, checked) => {
+    expect(component.find(Checkbox)).toHaveLength(1);
+    component
+        .find(Checkbox)
+        .props()
+        .onChange({ target: { checked } });
+    component.update();
+    expect(component.find(Checkbox).props().checked).toBe(checked);
+};

src/__tests__/integration/settings.test.js

@@ -1,4 +1,11 @@
-import { DEFAULT_STARTUP_RESPONSES, TEST_FILE, integrationTest, storeFile, moveNext } from './index';
+import {
+    DEFAULT_STARTUP_RESPONSES,
+    TEST_FILE,
+    integrationTest,
+    storeFile,
+    moveNext,
+    toggleSettingsCheckbox,
+} from './index';
 import MaterialSelect from '@material-ui/core/Select';
 import Settings from '../../components/layouts/pages/settings/Settings';
 
@@ -20,6 +27,7 @@ describe('Settings', () => {
             integrationTest(
                 async (store, component) => {
                     await storeFile(component, store);
+                    toggleSettingsCheckbox(component, true);
                     moveNext(component);
 
                     expect(component.find(Settings)).toHaveLength(1);
@@ -39,6 +47,7 @@ describe('Settings', () => {
             'Profiles list loaded',
             integrationTest(async (store, component) => {
                 await storeFile(component, store);
+                toggleSettingsCheckbox(component, true);
                 moveNext(component);
 
                 expect(component.find(Settings)).toHaveLength(1);
@@ -57,6 +66,7 @@ describe('Settings', () => {
             integrationTest(
                 async (store, component) => {
                     await storeFile(component, store);
+                    toggleSettingsCheckbox(component, true);
                     moveNext(component);
                     expect(component.find(Settings)).toHaveLength(1);
                     expect(getProfileSelectError(component).text()).toBe(
@@ -76,6 +86,7 @@ describe('Settings', () => {
         'Profile changed',
         integrationTest(async (store, component) => {
             await storeFile(component, store, TEST_FILE);
+            toggleSettingsCheckbox(component, true);
             moveNext(component);
 
             expect(getProfileValue(store)).toEqual(PROFILE_VALUES[0]);

src/__tests__/integration/upload.test.js

@@ -1,4 +1,12 @@
-import { TEST_FILE, integrationTest, getNextStepButton, storeFile, moveBack, moveNext } from './index';
+import {
+    TEST_FILE,
+    integrationTest,
+    getNextStepButton,
+    storeFile,
+    moveBack,
+    moveNext,
+    toggleSettingsCheckbox,
+} from './index';
 
 const EMPTY_DROPZONE_TEXT = 'Drop a PDF file, or click to select a file';
 const FAILED_FILE = {
@@ -29,7 +37,7 @@ describe('Upload', () => {
         integrationTest(async (store, component) => {
             await storeFile(component, store);
 
-            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name} - ${TEST_FILE.size}`);
+            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name}${TEST_FILE.size}`);
             expect(getNextStepButton(component).props().disabled).toBeFalsy();
         })
     );
@@ -58,11 +66,12 @@ describe('Upload', () => {
         'File still attached after going back from next step',
         integrationTest(async (store, component) => {
             await storeFile(component, store);
+            toggleSettingsCheckbox(component, true);
 
             moveNext(component);
             moveBack(component);
 
-            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name} - ${TEST_FILE.size}`);
+            expect(getDropzoneText(component)).toEqual(`${TEST_FILE.name}${TEST_FILE.size}`);
         })
     );
 });

src/__tests__/integration/validation.test.js

@@ -21,9 +21,6 @@ describe('Validation', () => {
         integrationTest(async (store, component) => {
             await storeFile(component, store);
 
-            // Move to settings
-            moveNext(component);
-
             // Click validate button
             moveNext(component);
             expect(createJob).toHaveBeenCalledTimes(1);

src/components/layouts/pages/results/Results.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Redirect, useHistory, useParams } from 'react-router-dom';
@@ -7,32 +7,18 @@ import _ from 'lodash';
 import AppPages from '../../../AppPages';
 import { JOB_STATUS, TASK_STATUS } from '../../../../store/constants';
 import { getJobStatus, getTaskStatus } from '../../../../store/job/selectors';
+import { isCompliant } from '../../../../store/job/result/selectors';
 import { reset } from '../../../../store/application/actions';
+import Button from '../../../shared/button/Button';
 import WizardStep from '../../wizardStep/WizardStep';
 import Summary from './summary/Summary';
 import PageNavigation from '../../../shared/pageNavigation/PageNavigation';
-import { isCompliant } from '../../../../store/job/result/selectors';
+import LinkButton from '../../../shared/linkButton/LinkButton';
 
-function Results({ jobStatus, taskStatus, compliant, onBackClick }) {
+function Results({ jobStatus, taskStatus, compliant, resetApp }) {
     const { id: jobId } = useParams();
     const history = useHistory();
-
-    const backButton = useMemo(
-        () => ({
-            label: 'Validate another file',
-            onClick: () => onBackClick(history),
-        }),
-        [history, onBackClick]
-    );
-
-    const forwardButton = useMemo(
-        () => ({
-            label: 'Inspect errors',
-            to: AppPages.INSPECT.url(jobId),
-            disabled: compliant,
-        }),
-        [compliant, jobId]
-    );
+    const onBackClick = useCallback(() => resetApp(history), [history, resetApp]);
 
     if (jobStatus === JOB_STATUS.NOT_FOUND) {
         return <Redirect to={AppPages.NOT_FOUND} />;
@@ -44,7 +30,19 @@ function Results({ jobStatus, taskStatus, compliant, onBackClick }) {
     return (
         <WizardStep stepIndex={AppPages.RESULTS.route} className="results">
             <Summary />
-            <PageNavigation back={backButton} forward={forwardButton} />
+            <PageNavigation>
+                <Button className="nav-button_back" variant="outlined" color="primary" onClick={onBackClick}>
+                    Validate another file
+                </Button>
+                <LinkButton
+                    className="nav-button_forward"
+                    to={AppPages.INSPECT.url(jobId)}
+                    disabled={compliant}
+                    variant="contained"
+                >
+                    Inspect errors
+                </LinkButton>
+            </PageNavigation>
         </WizardStep>
     );
 }
@@ -53,7 +51,7 @@ Results.propTypes = {
     jobStatus: PropTypes.oneOf(_.values(JOB_STATUS)),
     taskStatus: PropTypes.oneOf(_.values(TASK_STATUS)),
     compliant: PropTypes.bool.isRequired,
-    onBackClick: PropTypes.func.isRequired,
+    resetApp: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state) {
@@ -66,7 +64,7 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
     return {
-        onBackClick: history => dispatch(reset(history)),
+        resetApp: history => dispatch(reset(history)),
     };
 }
 

src/components/layouts/pages/results/summary/Summary.js

@@ -23,7 +23,7 @@ function Summary({ fileInfo, resultSummary }) {
     const compliancePercent = useMemo(() => calculateCompliance(resultSummary), [resultSummary]);
     return (
         <Paper className="summary">
-            <h2>{fileInfo.name}</h2>
+            <h2 className="summary__document-title">{fileInfo.name}</h2>
             <section className="summary__chart">
                 <Chart
                     chartType="PieChart"

src/components/layouts/pages/results/summary/Summary.scss

@@ -4,11 +4,16 @@
 .summary {
   @include centered-column;
   width: fit-content;
+  max-width: 100%;
   margin: 0 auto;
   padding: 0 20px;
 
-  h2 {
+  &__document-title {
     margin-bottom: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
   }
 
   &__chart {

src/components/layouts/pages/settings/Settings.js

@@ -1,34 +1,23 @@
-import React, { useMemo } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import AppPages from '../../../AppPages';
 import WizardStep from '../../wizardStep/WizardStep';
 import ProfileSelect from './profile/ProfileSelect';
+import Button from '../../../shared/button/Button';
+import LinkButton from '../../../shared/linkButton/LinkButton';
 import PageNavigation from '../../../shared/pageNavigation/PageNavigation';
 import { getServerGeneralStatus } from '../../../../store/serverInfo/selectors';
 import { getJobId } from '../../../../store/job/selectors';
 import { validate } from '../../../../store/job/actions';
 
 import './Settings.scss';
 
-const backButton = {
-    label: 'Upload files',
-    to: AppPages.UPLOAD,
-};
-
 function Settings(props) {
     const { allServicesAvailable, jobId, onValidateClick } = props;
-
-    const forwardButton = useMemo(
-        () => ({
-            label: 'Validate',
-            disabled: !allServicesAvailable,
-            onClick: () => onValidateClick(),
-        }),
-        [allServicesAvailable, onValidateClick]
-    );
+    const onForwardClick = useCallback(() => onValidateClick(), [onValidateClick]);
 
     if (jobId) {
         // Once job is initialized and we know its ID redirect to status page to track its progress
@@ -42,7 +31,20 @@ function Settings(props) {
                     <ProfileSelect />
                 </form>
             </section>
-            <PageNavigation back={backButton} forward={forwardButton} />
+            <PageNavigation>
+                <LinkButton className="nav-button_back" to={AppPages.UPLOAD} type="back" variant="outlined">
+                    Upload files
+                </LinkButton>
+                <Button
+                    className="nav-button_forward"
+                    variant="contained"
+                    color="primary"
+                    disabled={!allServicesAvailable}
+                    onClick={onForwardClick}
+                >
+                    Validate
+                </Button>
+            </PageNavigation>
         </WizardStep>
     );
 }