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,58 @@
+/* eslint-env jest */
+
+import React from 'react';
+import {render} 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('Only renders the Wayback calendar link if neither of the page versions have a view_url', () => {
+    const sInfo = render(<SourceInfo from={noViewUrl} to={noViewUrl} pageUrl={pageUrl} />);
+    expect(sInfo.text()).toBe('Wayback Machine calendar view');
+    const { attribs: { href } } = sInfo.find('a')[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 = render(<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');
+    const { attribs: { href : href1 } } = anchorTags[1];
+    const { attribs: { href: href2 } } = anchorTags[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,36 @@
+import React from 'react';
+
+/**
+ * @typedef SourceInfo
+ * @property {Object} from
+ * @property {Object} to
+ * @property {String} pageUrl
+ */
+
+/**
+ * Renders link to see Wayback Machine calendar view of the page
+ * If one or both of the page diffs 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}`;
+
+    return (
+      <div>
+        <i className="fa fa-calendar" aria-hidden="true" />
+        <a href={waybackCalendarUrl} className="source-info-link" target="_blank" rel="noopener noreferrer">Wayback Machine calendar view</a>
+        {this.props.from.source_metadata.view_url ? <span> | <i className="fa fa-arrow-left" aria-hidden="true" /><a href={this.props.from.source_metadata.view_url} className="source-info-link" target="_blank" rel="noopener noreferrer">{sourceTypeName[this.props.from.source_type]} previous page version</a></span> : ''}
+        {this.props.to.source_metadata.view_url ? <span> | <a href={this.props.to.source_metadata.view_url} className="source-info-link" target="_blank" rel="noopener noreferrer">{sourceTypeName[this.props.to.source_type]} next page version</a><i className="fa fa-arrow-right fa--right-icon" aria-hidden="true" /></span> : ''}
+      </div>
+    );
+  }
+}

src/css/styles.css

@@ -38,6 +38,10 @@ body {
   margin-right: 0.5em;
 }
 
+.fa--right-icon {
+  margin-left: 0.5em;
+}
+
 /* ===== Containers ===== */
 .container-list-view,
 .container-page-view {
@@ -460,9 +464,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 +479,12 @@ iframe {
   margin: 0 0.5rem;
 }
 
+/* ===== Source Info ====== */
+.source-info-link {
+  color: black;
+  font-weight: bold;
+}
+
 /* ===== Environment Banner ====== */
 .environment-banner {
   color: #333;