diff --git a/src/__tests__/integration/index.js b/src/__tests__/integration/index.js
index 4a8a377c..ea24672f 100644
--- a/src/__tests__/integration/index.js
+++ b/src/__tests__/integration/index.js
@@ -243,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 });
diff --git a/src/components/layouts/pages/results/Results.js b/src/components/layouts/pages/results/Results.js
index 58c2ef37..2c2c09fc 100644
--- a/src/components/layouts/pages/results/Results.js
+++ b/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 ;
@@ -44,7 +30,19 @@ function Results({ jobStatus, taskStatus, compliant, onBackClick }) {
return (
-
+
+
+
+ Inspect errors
+
+
);
}
@@ -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)),
};
}
diff --git a/src/components/layouts/pages/settings/Settings.js b/src/components/layouts/pages/settings/Settings.js
index 3b9199c2..6cee922c 100644
--- a/src/components/layouts/pages/settings/Settings.js
+++ b/src/components/layouts/pages/settings/Settings.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 } from 'react-router-dom';
@@ -6,6 +6,8 @@ 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';
@@ -13,22 +15,9 @@ 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) {
-
+
+
+ Upload files
+
+
+
);
}
diff --git a/src/components/layouts/pages/upload/Upload.js b/src/components/layouts/pages/upload/Upload.js
index 75b047a7..5c5176f6 100644
--- a/src/components/layouts/pages/upload/Upload.js
+++ b/src/components/layouts/pages/upload/Upload.js
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
import AppPages from '../../../AppPages';
import { validate } from '../../../../store/job/actions';
@@ -12,23 +12,18 @@ import Dropzone from './dropzone/Dropzone';
import WizardStep from '../../wizardStep/WizardStep';
import PageNavigation from '../../../shared/pageNavigation/PageNavigation';
import SettingsCheckbox from './settingsCheckbox/SettingsCheckbox';
+import Button from '../../../shared/button/Button';
function Upload({ filesAttached, isUseSettings, jobId, onValidateClick }) {
- const forwardButton = useMemo(() => {
- const button = { disabled: !filesAttached };
+ const history = useHistory();
+ const forwardLabel = useMemo(() => (isUseSettings ? 'Configure' : 'Validate'), [isUseSettings]);
+ const onForwardClick = useMemo(() => {
if (isUseSettings) {
- return {
- ...button,
- label: 'Configure job',
- to: AppPages.SETTINGS,
- };
+ return () => history.push(AppPages.SETTINGS);
}
- return {
- ...button,
- label: 'Validate',
- onClick: onValidateClick,
- };
- }, [filesAttached, onValidateClick, isUseSettings]);
+
+ return onValidateClick;
+ }, [history, isUseSettings, onValidateClick]);
if (!isUseSettings && jobId) {
// Once job is initialized and we know its ID redirect to status page to track its progress
@@ -38,7 +33,18 @@ function Upload({ filesAttached, isUseSettings, jobId, onValidateClick }) {
return (
- } forward={forwardButton} />
+
+
+
+
);
}
diff --git a/src/components/layouts/pages/upload/dropzone/Dropzone.scss b/src/components/layouts/pages/upload/dropzone/Dropzone.scss
index 0ba71fbe..2af8ce19 100644
--- a/src/components/layouts/pages/upload/dropzone/Dropzone.scss
+++ b/src/components/layouts/pages/upload/dropzone/Dropzone.scss
@@ -10,7 +10,7 @@
flex-direction: column;
&__container {
- width: 70%;
+ width: 80%;
height: 100px;
margin: auto;
padding: 20px;
diff --git a/src/components/shared/pageNavigation/NavButton.js b/src/components/shared/linkButton/LinkButton.js
similarity index 60%
rename from src/components/shared/pageNavigation/NavButton.js
rename to src/components/shared/linkButton/LinkButton.js
index e9d90c14..10142652 100644
--- a/src/components/shared/pageNavigation/NavButton.js
+++ b/src/components/shared/linkButton/LinkButton.js
@@ -2,16 +2,14 @@ import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+
import Button from '../button/Button';
-function NavButton(props) {
- const { to, disabled, type, variant } = props;
+function LinkButton(props) {
+ const { to, disabled, variant, className } = props;
return (
-
+
@@ -19,11 +17,10 @@ function NavButton(props) {
);
}
-NavButton.propTypes = {
+LinkButton.propTypes = {
to: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]).isRequired,
- type: PropTypes.string.isRequired,
variant: PropTypes.string,
disabled: PropTypes.bool,
};
-export default NavButton;
+export default LinkButton;
diff --git a/src/components/shared/pageNavigation/PageNavigation.js b/src/components/shared/pageNavigation/PageNavigation.js
index d65b5e57..43c5d6a2 100644
--- a/src/components/shared/pageNavigation/PageNavigation.js
+++ b/src/components/shared/pageNavigation/PageNavigation.js
@@ -1,70 +1,9 @@
import React from 'react';
-import PropTypes from 'prop-types';
-import NavButton from './NavButton';
-import Button from '../button/Button';
-import './PageNavigation.scss';
-
-const TYPE = {
- BACK: 'back',
- CENTER: 'center',
- FORWARD: 'forward',
-};
-const VARIANTS = {
- [TYPE.BACK]: 'outlined',
- [TYPE.CENTER]: 'contained',
- [TYPE.FORWARD]: 'contained',
-};
-
-function PageNavigation(props) {
- const { back, forward, center } = props;
- return (
-
- );
-}
-
-function getComponent(componentObject, type) {
- if (React.isValidElement(componentObject)) {
- return componentObject;
- }
- if (componentObject?.to) {
- return (
-
- {componentObject.label}
-
- );
- }
-
- if (componentObject?.onClick) {
- return (
-
- );
- }
+import './PageNavigation.scss';
- return null;
+function PageNavigation({ children }) {
+ return ;
}
-const ButtonInterface = PropTypes.shape({
- to: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
- label: PropTypes.string.isRequired,
- disabled: PropTypes.bool,
- onClick: PropTypes.func,
-});
-
-PageNavigation.propTypes = {
- back: PropTypes.oneOfType([ButtonInterface, PropTypes.element]),
- forward: PropTypes.oneOfType([ButtonInterface, PropTypes.element]),
-};
-
export default PageNavigation;
diff --git a/src/components/shared/pageNavigation/PageNavigation.scss b/src/components/shared/pageNavigation/PageNavigation.scss
index 3472cb42..033c3d3c 100644
--- a/src/components/shared/pageNavigation/PageNavigation.scss
+++ b/src/components/shared/pageNavigation/PageNavigation.scss
@@ -1,17 +1,7 @@
.page-navigation {
display: flex;
padding: 20px 0 10px 0;
-
- section {
- display: flex;
- flex-grow: 1;
- flex-basis: 0;
- justify-content: center;
- align-items: start;
-
- .app-link {
- color: inherit;
- display: flex;
- }
- }
+ justify-content: space-between;
+ width: 80%;
+ margin: auto;
}