Add source-info component to change-view which renders link to Waybac…

…k calendar view and page versions #196

README.md

@@ -10,7 +10,7 @@ It’s a React.js-based browser application with a Node.js backend with the foll
 * Consume subset of data from web-monitoring-db as proof of concept, read/write annotations
     * [DEMO](https://monitoring-staging.envirodatagov.org)
     * LIST VIEW shows first page of records from [web-monitor-db](https://api-staging.monitoring.envirdatagov.org/api/v0/pages) JSON endpoint
-    * PAGE VIEW shows basic info about the latest version of that page: site and URLs
+    * PAGE VIEW shows basic info about the latest version of that page: site, URLs and links to Wayback Machine calendar view and page versions
         * updates annotations
 
 

src/components/__tests__/source-info.test.jsx

@@ -0,0 +1,61 @@
+/* eslint-env jest */
+
+import React from 'react';
+import {shallow} from 'enzyme';
+import SourceInfo from '../source-info';
+
+describe('source-info', () => {
+  const noViewUrl = {
+    source_type: 'versionista', 
+    source_metadata: {
+      url: 'https://versionista.com/1111/2222/3333/',
+      account: 'versionista1',
+      page_id: '1234567',
+      site_id: '8888888',
+      version_id: '123456778',
+      has_content: true
+    }
+  };
+
+  const withViewUrl1 = {
+    source_type: 'internet_archive',
+    source_metadata: {
+      encoding: 'ISO-8859-1',
+      view_url: 'http://web.archive.org/web/1111111/https://19january2017snapshot.epa.gov/test-url',
+      mime_type: 'text/html',
+      status_code: 200
+    }
+  };
+
+  const withViewUrl2 = {
+    source_type: 'internet_archive',
+    source_metadata: {
+      encoding: 'ISO-8859-1',
+      view_url: 'http://web.archive.org/web/22222/https://19january2017snapshot.epa.gov/test-url',
+      mime_type: 'text/html',
+      status_code: 200
+    }
+  };
+
+  const pageUrl = 'https://19january2017snapshot.epa.gov/test-url';
+
+  it('Renders only the Wayback calendar link if neither of the page versions have a view_url', () => {
+    const sInfo = shallow(<SourceInfo from={noViewUrl} to={noViewUrl} pageUrl={pageUrl} />);
+    expect(sInfo.text()).toBe('Wayback Machine calendar view');
+    const anchorTag = sInfo.find('a');
+    expect(anchorTag.length).toBe(1);
+    const { props: { href } } = anchorTag.get(0);
+    expect(href).toBe('https://web.archive.org/web/*/https://19january2017snapshot.epa.gov/test-url');
+  });
+
+  it('Renders the Wayback calendar link and previous/next versions with Wayback links if they are sourced from Wayback', () => {
+    const sInfo = shallow(<SourceInfo from={withViewUrl1} to={withViewUrl2} pageUrl={pageUrl} />);
+    expect(sInfo.text()).toBe('Wayback Machine calendar view | Wayback Machine previous page version | Wayback Machine next page version');
+    const anchorTags = sInfo.find('a');
+    expect(anchorTags.length).toBe(3);
+    const { props: { href : href1 } } = anchorTags.get(1);
+    const { props: { href: href2 } } = anchorTags.get(2);
+    expect(href1).toBe('http://web.archive.org/web/1111111/https://19january2017snapshot.epa.gov/test-url');
+    expect(href2).toBe('http://web.archive.org/web/22222/https://19january2017snapshot.epa.gov/test-url');
+  });
+});

src/components/change-view.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import SelectDiffType from './select-diff-type';
 import SelectVersion from './select-version';
+import SourceInfo from './source-info';
 import WebMonitoringApi from '../services/web-monitoring-api';
 import WebMonitoringDb from '../services/web-monitoring-db';
 import {
@@ -58,7 +59,6 @@ export default class ChangeView extends React.Component {
 
   constructor (props) {
     super(props);
-
     this.state = {
       addingToDictionary: false,
       addingToImportant: false,
@@ -155,6 +155,11 @@ export default class ChangeView extends React.Component {
       <div className="change-view">
         {userCanAnnotate ? this.renderSubmission() : null}
         <div className="utilities">
+          <SourceInfo
+            from={this.props.from}
+            to={this.props.to}
+            pageUrl={this.props.page.url}
+          />
           <DiffSettingsForm
             settings={this.state.diffSettings}
             diffType={this.state.diffType}

src/components/source-info.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+/**
+ * @typedef SourceInfo
+ * @property {Version} from
+ * @property {Version} to
+ * @property {String} pageUrl
+ */
+
+/**
+ * Renders link to see Wayback Machine calendar view of the page
+ * If one or both of the versions were sourced from Wayback, this component renders links to the Wayback Machine source url(s)
+ *
+ * @class SourceInfo
+ * @extends {React.Component}
+ * @param {SourceInfoProps} props
+ */
+
+const sourceTypeName = {
+  internet_archive: 'Wayback Machine'
+};
+
+export default class SourceInfo extends React.Component {
+  render () {
+    const waybackCalendarUrl = `https://web.archive.org/web/*/${this.props.pageUrl}`;
+    const waybackCalendarLink = (
+      <li className="source-info__list-item" key={waybackCalendarUrl}>
+        <a
+          className="source-info__list-link"
+          href={waybackCalendarUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fa fa-calendar fa--no-hover" aria-hidden="true" />
+          Wayback Machine calendar view
+        </a>
+      </li>
+    );
+    const links = [waybackCalendarLink];
+
+    if (this.props.from.source_metadata.view_url) {
+      const fromLink = (
+        <li className="source-info__list-item" key={this.props.from.source_metadata.view_url}>
+          <span aria-hidden="true"> | </span>
+          <a 
+            className="source-info__list-link"
+            href={this.props.from.source_metadata.view_url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <i className="fa fa-arrow-left fa--no-hover" aria-hidden="true" />
+            {sourceTypeName[this.props.from.source_type]} previous page version
+          </a>
+        </li>
+      );
+
+      links.push(fromLink);
+    }
+
+    if (this.props.to.source_metadata.view_url) {
+      const toLink = (
+        <li className="source-info__list-item" key={this.props.to.source_metadata.view_url}>
+          <span aria-hidden="true"> | </span>
+          <a
+            className="source-info__list-link"
+            href={this.props.to.source_metadata.view_url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {sourceTypeName[this.props.to.source_type]} next page version
+            <i className="fa fa-arrow-right fa--right-icon fa--no-hover" aria-hidden="true" />
+          </a>
+        </li>
+      );
+
+      links.push(toLink);
+    }
+
+    return (
+      <aside>
+        <ol className="source-info__list">
+          {links}
+        </ol>
+      </aside>
+    );
+  }
+}

src/css/styles.css

@@ -38,6 +38,14 @@ body {
   margin-right: 0.5em;
 }
 
+.fa--right-icon {
+  margin-left: 0.5em;
+}
+
+.fa--no-hover:hover {
+  text-decoration: none;
+}
+
 /* ===== Containers ===== */
 .container-list-view,
 .container-page-view {
@@ -460,9 +468,9 @@ iframe {
 /* ===== Utilities ====== */
 .utilities {
   display: flex;
-  /* TODO: change this back to space-between when wayback link is added */
-  justify-content: flex-end;
+  justify-content: space-between;
   margin-top: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .utilities__label {
@@ -475,6 +483,21 @@ iframe {
   margin: 0 0.5rem;
 }
 
+/* ===== Source Info ====== */
+.source-info__list {
+  padding: 0;
+  list-style: none;
+}
+
+.source-info__list-item {
+  display: inline;
+}
+
+.source-info__list-link {
+  color: black;
+  font-weight: bold;
+}
+
 /* ===== Environment Banner ====== */
 .environment-banner {
   color: #333;