revision added to key query string (#683)

revision added to query string in keys url
Soluto · Dec 12, 2017 · b00dafe · b00dafe
1 parent a5cadde
commit b00dafe
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 156 deletions.
diff --git 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
@@ -15,53 +15,43 @@ import './styles/styles.css';
 
 const SelectKeyMessage = () => <div className={'select-key-message'}>Select key...</div>;
 
+const renderKeyRoutes = ({ match: { path } }) => (
+  <KeysPage>
+    <Switch>
+      <Route exact path={path} component={SelectKeyMessage} />
+      <Route component={KeyPage} />
+    </Switch>
+  </KeysPage>
+);
+
+const renderContextRoutes = ({ match }) => (
+  <ContextPage {...match}>
+    <Route path={`${match.path}/:identityType/:identityId`} component={IdentityDetails} />
+  </ContextPage>
+);
+
+const renderSettingsRoutes = ({ match }) => (
+  <SettingsPage {...match}>
+    <Route path={`${match.path}/identities/:identityType`} component={IdentityPage} />
+  </SettingsPage>
+);
+
+const renderAppRoutes = () => (
+  <App>
+    <Switch>
+      <Route path="/" exact render={() => <Redirect to="/keys" />} />
+      <Route path="/keys" render={renderKeyRoutes} />
+      <Route path="/context" render={renderContextRoutes} />
+      <Route path="/settings" render={renderSettingsRoutes} />
+    </Switch>
+  </App>
+);
+
 export default props => (
   <ConnectedRouter history={browserHistory}>
     <Switch>
       <Route path="/login" component={LoginPage} />
-      <Route
-        path="/"
-        render={() => (
-          <App>
-            <Switch>
-              <Route path="/" exact render={() => <Redirect to="/keys" />} />
-              <Route
-                path="/keys"
-                render={({ match: { path } }) => (
-                  <KeysPage>
-                    <Switch>
-                      <Route exact path={path} component={SelectKeyMessage} />
-                      <Route component={KeyPage} />
-                    </Switch>
-                  </KeysPage>
-                )}
-              />
-              <Route
-                path="/context"
-                render={({ match }) => (
-                  <ContextPage {...match}>
-                    <Route
-                      path={`${match.path}/:identityType/:identityId`}
-                      component={IdentityDetails}
-                    />
-                  </ContextPage>
-                )}
-              />
-              <Route
-                path="/settings"
-                render={({ match }) => (
-                  <SettingsPage {...match}>
-                    <Route
-                      path={`${match.path}/identities/:identityType`}
-                      component={IdentityPage}
-                    />
-                  </SettingsPage>
-                )}
-              />
-            </Switch>
-          </App>
-        )}
-      />
+      <Route path="/" render={renderAppRoutes} />
       <Route component={NoMatch} />
     </Switch>
   </ConnectedRouter>

diff --git a/.../editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.css b/.../editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.css
diff --git a/...s/editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.js b/...s/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
-    ? <div data-comp="revision-history" data-no-changes style={{ color: 'gray' }}>No recent changes found</div>
-    : <select
-        data-comp="revision-history"
-        className="revision-history"
-        value={revision ? revision : revisionHistory[0]}
-        onChange={e => goToRevision(selectedKey, e.target.value)}
-      >
-        {revisionHistory.map(item =>
-          <option key={item.sha} value={item.sha}>
-            {`${formatDate(item.date)} : ${item.author}`}
-          </option>,
-        )}
-      </select>;
-
-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 }) => (
+  <option value={sha}>{`${formatDate(date)} : ${author}`}</option>
 );
+
+const EmptyRevisionHistory = styled('div')`
+  color: gray;
+`;
+
+const RevisionHistory = ({ revisionHistory, goToRevision, selectedKey, revision }) =>
+  revisionHistory.length === 0 ? (
+    <EmptyRevisionHistory data-comp="revision-history" data-no-changes>
+      No recent changes found
+    </EmptyRevisionHistory>
+  ) : (
+    <RevisionHistorySelect
+      data-comp="revision-history"
+      value={revision || revisionHistory[0]}
+      onChange={e => goToRevision(selectedKey, e.target.value)}
+    >
+      {revisionHistory.map(item => <Revision key={item.sha} {...item} />)}
+    </RevisionHistorySelect>
+  );
+
+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/...editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.less b/...editor/src/pages/keys/components/KeyPage/KeyEditPage/RevisionHistory/RevisionHistory.less
diff --git 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 <MessageKeyPage data-comp="loading-key" message="Loading..." />;
+  }
+
+  if (configKey === BLANK_KEY_NAME && !detailsAdded) {
+    return <KeyAddPage />;
+  }
+
+  const { implementation } = selectedKey.local;
+  return !implementation ? (
+    <MessageKeyPage data-comp="key-not-found" message="Non-existent key" />
+  ) : (
+    <KeyEditPage {...props} alerter={alerter} />
+  );
+};
+
+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 <MessageKeyPage data-comp="loading-key" message="Loading..." />;
-  }
-
-  if ((configKey === BLANK_KEY_NAME) && !detailsAdded) {
-    return (<KeyAddPage />);
-  }
-
-  const { implementation } = selectedKey.local;
-  return !implementation
-    ? <MessageKeyPage data-comp="key-not-found" message="Non-existent key" />
-    : <KeyEditPage {...props} alerter={alerter} />;
-});
+);
 
 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
@@ -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;