diff --git a/services/editor/package.json b/services/editor/package.json index 66ce684b3..8c52ac65f 100644 --- a/services/editor/package.json +++ b/services/editor/package.json @@ -73,6 +73,7 @@ "passport-http": "^0.3.0", "passport-oauth2": "^1.4.0", "prop-types": "^15.6.0", + "query-string": "5.0.1", "ramda": "^0.25.0", "react": "^16.2.0", "react-autosize-textarea": "^1.0.2", diff --git a/services/editor/src/Routes.js b/services/editor/src/Routes.js index 1513e54e4..cd0a699b6 100644 --- a/services/editor/src/Routes.js +++ b/services/editor/src/Routes.js @@ -15,53 +15,43 @@ import './styles/styles.css'; const SelectKeyMessage = () =>
Select key...
; +const renderKeyRoutes = ({ match: { path } }) => ( + + + + + + +); + +const renderContextRoutes = ({ match }) => ( + + + +); + +const renderSettingsRoutes = ({ match }) => ( + + + +); + +const renderAppRoutes = () => ( + + + } /> + + + + + +); + export default props => ( - ( - - - } /> - ( - - - - - - - )} - /> - ( - - - - )} - /> - ( - - - - )} - /> - - - )} - /> + diff --git a/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.css b/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.css deleted file mode 100644 index 873e75ce5..000000000 --- a/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.css +++ /dev/null @@ -1,23 +0,0 @@ -.revision-history { - align-self: flex-start; -} -.modification-details-text { - color: #a5a5a5; - font-size: 14px; - margin-left: 5px; - margin-bottom: 4px; -} -.modification-details-text a { - color: #a5a5a5; - text-decoration: none; -} -.modification-details-text a label { - cursor: pointer; -} -.modification-details-text a:hover, -.modification-details-text a:active { - text-decoration: underline; -} -.modification-details-text a:visited { - color: #a5a5a5; -} diff --git a/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.js b/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.js index 0bcf45b27..842e44608 100644 --- a/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.js +++ b/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.js @@ -2,35 +2,40 @@ import React from 'react'; import moment from 'moment'; import { connect } from 'react-redux'; import { push } from 'react-router-redux'; -import './RevisionHistory.css'; +import styled from 'react-emotion'; + +const RevisionHistorySelect = styled('select')` + align-self: flex-start; +`; const formatDate = date => `${moment(new Date(date)).calendar(null, { sameElse: 'DD/MM/YYYY [at] HH:mm' })}`; -const RevisionHistory = ({ revisionHistory, goToRevision, selectedKey, revision }) => - revisionHistory.length === 0 - ?
No recent changes found
- : ; - -const goToRevision = (key, sha) => - push({ - pathname: `/keys/${key}`, - query: { - revision: sha, - }, - }); - -export default connect(({ selectedKey: { key } }) => ({ selectedKey: key }), { goToRevision })( - RevisionHistory, +const Revision = ({ sha, date, author }) => ( + ); + +const EmptyRevisionHistory = styled('div')` + color: gray; +`; + +const RevisionHistory = ({ revisionHistory, goToRevision, selectedKey, revision }) => + revisionHistory.length === 0 ? ( + + No recent changes found + + ) : ( + goToRevision(selectedKey, e.target.value)} + > + {revisionHistory.map(item => )} + + ); + +const goToRevision = (key, sha) => push({ pathname: `/keys/${key}`, search: `?revision=${sha}` }); + +const mapStateToProps = ({ selectedKey: { key: selectedKey } }) => ({ selectedKey }); + +export default connect(mapStateToProps, { goToRevision })(RevisionHistory); diff --git a/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.less b/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.less deleted file mode 100644 index 4ac47f62a..000000000 --- a/services/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.less +++ /dev/null @@ -1,25 +0,0 @@ -@text-color: #a5a5a5; - -.revision-history { - align-self: flex-start; -} - -.modification-details-text { - color: @text-color; - font-size: 14px; - margin-left: 5px; - margin-bottom: 4px; - a { - color: @text-color; - text-decoration: none; - label { - cursor: pointer; - } - &:hover, &:active { - text-decoration: underline; - } - &:visited { - color: @text-color; - } - } -} \ No newline at end of file diff --git a/services/editor/src/pages/keys/components/KeyPage/KeyPage.js b/services/editor/src/pages/keys/components/KeyPage/KeyPage.js index be6e971c0..67271905e 100644 --- a/services/editor/src/pages/keys/components/KeyPage/KeyPage.js +++ b/services/editor/src/pages/keys/components/KeyPage/KeyPage.js @@ -1,6 +1,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { compose, lifecycle } from 'recompose'; +import querystring from 'query-string'; import * as selectedKeyActions from '../../../../store/ducks/selectedKey'; import * as alertActions from '../../../../store/ducks/alerts'; import { BLANK_KEY_NAME } from '../../../../store/ducks/ducks-utils/blankKeyDefinition'; @@ -11,21 +12,52 @@ import KeyEditPage from './KeyEditPage/KeyEditPage'; import KeyAddPage from './KeyAddPage/KeyAddPage'; import './KeyPage.css'; -const KeyPage = compose( - connect( - (state, { match, location }) => { - const configKey = location.pathname.substring( - match.path.endsWith('/') ? match.path.length : match.path.length + 1, - ); - return { - selectedKey: state.selectedKey, - configKey, - revision: location.query && location.query.revision, - detailsAdded: state.selectedKey && state.selectedKey.detailsAdded, - }; - }, - { ...selectedKeyActions, ...alertActions }, - ), +const KeyPage = ({ + showCustomAlert, + showAlert, + showConfirm, + configKey, + detailsAdded, + ...props +}) => { + const { selectedKey } = props; + const alerter = { + showCustomAlert, + showAlert, + showConfirm, + }; + if (!selectedKey || !selectedKey.isLoaded) { + return ; + } + + if (configKey === BLANK_KEY_NAME && !detailsAdded) { + return ; + } + + const { implementation } = selectedKey.local; + return !implementation ? ( + + ) : ( + + ); +}; + +const mapStateToProps = (state, { match, location }) => { + const configKey = location.pathname.substring( + match.path.endsWith('/') ? match.path.length : match.path.length + 1, + ); + const query = location.search && querystring.parse(location.search); + + return { + selectedKey: state.selectedKey, + configKey, + revision: query.revision, + detailsAdded: state.selectedKey && state.selectedKey.detailsAdded, + }; +}; + +const enhance = compose( + connect(mapStateToProps, { ...selectedKeyActions, ...alertActions }), routeLeaveHook( hasUnsavedChanges, 'You have unsaved changes, are you sure you want to leave this page?', @@ -48,27 +80,8 @@ const KeyPage = compose( this.props.closeKey(); }, }), -)(({ showCustomAlert, showAlert, showConfirm, configKey, detailsAdded, ...props }) => { - const { selectedKey } = props; - const alerter = { - showCustomAlert, - showAlert, - showConfirm, - }; - if (!selectedKey || !selectedKey.isLoaded) { - return ; - } - - if ((configKey === BLANK_KEY_NAME) && !detailsAdded) { - return (); - } - - const { implementation } = selectedKey.local; - return !implementation - ? - : ; -}); +); KeyPage.displayName = 'KeyPage'; -export default KeyPage; +export default enhance(KeyPage); diff --git a/services/editor/src/pages/login/components/LoginPage.js b/services/editor/src/pages/login/components/LoginPage.js index 079c89814..3e6cd1c37 100644 --- a/services/editor/src/pages/login/components/LoginPage.js +++ b/services/editor/src/pages/login/components/LoginPage.js @@ -51,14 +51,14 @@ const LoginMessageSpan = styled('span')` font-size: 20px; font-weight: bold; color: #696969; - margin-bottom: 3px; + margin-bottom: 20px; margin-top: 250px; `; const LoginButton = styled('a')` padding-top: 14px; padding-bottom: 17px; - margin: 40px; + margin: 15px; width: 40%; background-color: #00aeef; border-radius: 25px;