Alert for VVA and VBMS document list retrievals

client/app/reader/LastRetrievalAlert.jsx

@@ -0,0 +1,65 @@
+import _ from 'lodash';
+import moment from 'moment';
+import React from 'react';
+import { connect } from 'react-redux';
+import Alert from '../components/Alert';
+
+const CACHE_TIMEOUT_HOURS = 3;
+const TIMEZONES = {
+  ' GMT': ' +0000',
+  ' EDT': ' -0400',
+  ' EST': ' -0500',
+  ' CDT': ' -0500',
+  ' CST': ' -0600',
+  ' MDT': ' -0600',
+  ' MST': ' -0700',
+  ' PDT': ' -0700',
+  ' PST': ' -0800'
+};
+
+class LastRetrievalAlert extends React.PureComponent {
+
+  render() {
+
+    // Check that document manifests have been recieved from VVA and VBMS
+    if (!this.props.manifestVbmsFetchedAt || !this.props.manifestVvaFetchedAt) {
+      return <Alert title="Error" type="error">
+        Some of {this.props.appeal.veteran_full_name}'s documents are not available at the moment due to
+        a loading error from VBMS or VVA. As a result, you may be viewing a partial list of claims folder documents.
+        <br />
+        <br />
+        Please refresh your browser at a later point to view a complete list of documents in the claims
+        folder.
+      </Alert>;
+    }
+
+    let staleCacheTime = new Date();
+
+    staleCacheTime.setHours(staleCacheTime.getHours() - CACHE_TIMEOUT_HOURS);
+
+    let staleCacheTimestamp = staleCacheTime.getTime() / 1000,
+      vbmsManifestTimeString = this.props.manifestVbmsFetchedAt,
+      vvaManifestTimeString = this.props.manifestVvaFetchedAt;
+
+    let parsableVbmsManifestTimeString = vbmsManifestTimeString.slice(0, -4) +
+      TIMEZONES[vbmsManifestTimeString.slice(-4)],
+      parsableVvaManifestTimeString = vvaManifestTimeString.slice(0, -4) +
+        TIMEZONES[vvaManifestTimeString.slice(-4)],
+      vbmsManifestTimestamp = moment(parsableVbmsManifestTimeString, 'MM/DD/YY HH:mma Z').unix(),
+      vvaManifestTimestamp = moment(parsableVvaManifestTimeString, 'MM/DD/YY HH:mma Z').unix();
+
+    // Check that manifest results are fresh
+    if (vbmsManifestTimestamp < staleCacheTimestamp || vvaManifestTimestamp < staleCacheTimestamp) {
+      return <Alert title="Warning" type="warning">
+        You may be viewing an outdated list of claims folder documents. Please refresh the page to load
+        the most up to date documents.
+      </Alert>;
+    }
+
+    return null;
+  }
+}
+
+export default connect(
+  (state) => _.pick(state.documentList, ['manifestVvaFetchedAt', 'manifestVbmsFetchedAt'])
+)(LastRetrievalAlert);

client/app/reader/LastRetrievalInfo.jsx

@@ -4,12 +4,10 @@ import { connect } from 'react-redux';
 
 class UnconnectedLastRetrievalInfo extends React.PureComponent {
   render() {
-    if (!this.props.manifestVbmsFetchedAt) {
-      return null;
-    }
-
     return [
-      <div id="vbms-manifest-retrieved-at" key="vbms">Last VBMS retrieval: {this.props.manifestVbmsFetchedAt}</div>,
+      this.props.manifestVbmsFetchedAt ?
+        <div id="vbms-manifest-retrieved-at" key="vbms">Last VBMS retrieval: {this.props.manifestVbmsFetchedAt}</div> :
+        <div className="cf-red-text" key="vbms">Unable to display VBMS documents at this time</div>,
       this.props.manifestVvaFetchedAt ?
         <div id="vva-manifest-retrieved-at" key="vva">Last VVA retrieval: {this.props.manifestVvaFetchedAt}</div> :
         <div className="cf-red-text" key="vva">Unable to display VVA documents at this time</div>

client/app/reader/PdfListView.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import _ from 'lodash';
 
 import BackToQueueLink from './BackToQueueLink';
+import LastRetrievalAlert from './LastRetrievalAlert';
 import LastRetrievalInfo from './LastRetrievalInfo';
 import AppSegment from '@department-of-veterans-affairs/caseflow-frontend-toolkit/components/AppSegment';
 import DocumentListHeader from './DocumentListHeader';
@@ -59,14 +60,15 @@ export class PdfListView extends React.Component {
     }
 
     return <div>
-      { this.props.queueRedirectUrl && <BackToQueueLink
+      {this.props.queueRedirectUrl && <BackToQueueLink
         queueRedirectUrl={this.props.queueRedirectUrl}
         queueTaskType={this.props.queueTaskType}
         veteranFullName={this.props.appeal.veteran_full_name}
-        vbmsId={this.props.appeal.vbms_id} /> }
+        vbmsId={this.props.appeal.vbms_id} />}
       <AppSegment filledBackground>
         <div className="section--document-list">
           <ClaimsFolderDetails appeal={this.props.appeal} documents={this.props.documents} />
+          <LastRetrievalAlert appeal={this.props.appeal} />
           <DocumentListHeader
             documents={this.props.documents}
             noDocuments={noDocuments}
@@ -80,7 +82,8 @@ export class PdfListView extends React.Component {
 }
 
 const mapStateToProps = (state, props) => {
-  return { documents: getFilteredDocuments(state),
+  return {
+    documents: getFilteredDocuments(state),
     ..._.pick(state.documentList, 'docFilterCriteria', 'viewingDocumentsOrComments'),
     appeal: _.find(state.caseSelect.assignments, { vacols_id: props.match.params.vacolsId }) ||
       state.pdfViewer.loadedAppeal,

client/app/styles/reader/_document_list.scss

@@ -242,6 +242,10 @@
       background: inherit;
     }
   }
+
+  .usa-alert {
+    margin-bottom: 20px;
+  }
 }
 
 .document-list-filter-message {

spec/feature/reader/reader_spec.rb

@@ -235,19 +235,41 @@ def add_comment(text)
       end
 
       context "When both document source manifest retrieval times are set" do
-        scenario "Both times display on the page" do
+        scenario "Both times display on the page and there are no document alerts" do
           visit "/reader/appeal/#{appeal.vacols_id}/documents"
           expect(find("#vbms-manifest-retrieved-at").text).to have_content(vbms_ts_string)
           expect(find("#vva-manifest-retrieved-at").text).to have_content(vva_ts_string)
+          expect(page).to_not have_css(".section--document-list .usa-alert")
+        end
+      end
+
+      context "When VVA manifest retrieval time is older, but within the eFolder cache limit" do
+        let(:vva_fetched_ts) { Time.zone.now - 2.hours }
+        scenario "Both times display on the page and there are no document alerts" do
+          visit "/reader/appeal/#{appeal.vacols_id}/documents"
+          expect(find("#vbms-manifest-retrieved-at").text).to have_content(vbms_ts_string)
+          expect(find("#vva-manifest-retrieved-at").text).to have_content(vva_ts_string)
+          expect(page).to_not have_css(".section--document-list .usa-alert")
+        end
+      end
+
+      context "When VVA manifest retrieval time is olde and outside of the eFolder cache limit" do
+        let(:vva_fetched_ts) { Time.zone.now - 4.hours }
+        scenario "Both times display on the page and a warning alert is shown" do
+          visit "/reader/appeal/#{appeal.vacols_id}/documents"
+          expect(find("#vbms-manifest-retrieved-at").text).to have_content(vbms_ts_string)
+          expect(find("#vva-manifest-retrieved-at").text).to have_content(vva_ts_string)
+          expect(page).to have_css(".section--document-list .usa-alert-warning")
         end
       end
 
       context "When VVA manifest retrieval time is nil" do
         let(:vva_fetched_ts) { nil }
-        scenario "Only VBMS time displays on the page" do
+        scenario "Only VBMS time displays on the page and error alert is shown" do
           visit "/reader/appeal/#{appeal.vacols_id}/documents"
           expect(find("#vbms-manifest-retrieved-at").text).to have_content(vbms_ts_string)
           expect(page).to_not have_css("#vva-manifest-retrieved-at")
+          expect(page).to have_css(".section--document-list .usa-alert-error")
         end
       end