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; }