feature/appeals-54131

app/views/reader/appeal/index.html.erb

@@ -11,6 +11,7 @@
     userHasEfolderRole: current_user.can?('Download eFolder'),
     featureToggles: {
       interfaceVersion2: FeatureToggle.enabled?(:interface_version_2, user: current_user),
+      bandwidthBanner: FeatureToggle.enabled?(:bandwidth_banner, user: current_user),
       windowSlider: FeatureToggle.enabled?(:window_slider, user: current_user),
       readerSelectorsMemoized: FeatureToggle.enabled?(:bulk_upload_documents, user: current_user),
       readerGetDocumentLogging: FeatureToggle.enabled?(:reader_get_document_logging, user: current_user),

client/app/reader/BandwidthAlert.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Alert from '../components/Alert';
+import { css } from 'glamor';
+import { storeMetrics } from '../util/Metrics';
+import uuid from 'uuid';
+
+// variables being defined are in mbps
+const bandwidthThreshold = 1.5;
+
+const alertStyling = css({
+  marginBottom: '20px'
+});
+
+class BandwidthAlert extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayBandwidthAlert: false
+    };
+  }
+
+  componentDidMount() {
+    if ('connection' in navigator) {
+      this.updateConnectionInfo();
+    }
+  }
+
+  updateConnectionInfo = () => {
+    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+    if (connection.downlink && connection.downlink < bandwidthThreshold) {
+      const logId = uuid.v4();
+
+      storeMetrics(logId, { bandwidth: this.state.downlink }, {
+        message: 'Bandwidth Alert Displayed',
+        type: 'metric',
+        product: 'reader'
+      },
+      null);
+      this.setState({ displayBandwidthAlert: true });
+    }
+  };
+
+  render() {
+
+    if (this.state.displayBandwidthAlert) {
+      return (
+        <div {...alertStyling}>
+          <Alert title="Slow bandwidth" type="warning">
+            You may experience slower downloading times for certain files based on your
+            bandwidth speed and document size.
+            <br />
+          </Alert>
+        </div>
+      );
+    }
+
+    return null;
+  }
+}
+
+export default BandwidthAlert;

client/app/reader/PdfListView.jsx

@@ -7,6 +7,7 @@ import _ from 'lodash';
 import BackToQueueLink from './BackToQueueLink';
 import LastRetrievalAlert from './LastRetrievalAlert';
 import LastRetrievalInfo from './LastRetrievalInfo';
+import BandwidthAlert from './BandwidthAlert';
 import AppSegment from '@department-of-veterans-affairs/caseflow-frontend-toolkit/components/AppSegment';
 import DocumentListHeader from './DocumentListHeader';
 import ClaimsFolderDetails from './ClaimsFolderDetails';
@@ -78,13 +79,14 @@ export class PdfListView extends React.Component {
         queueTaskType={this.props.queueTaskType}
         veteranFullName={this.props.appeal.veteran_full_name}
         vbmsId={this.props.appeal.vbms_id} />}
+      <LastRetrievalAlert
+        userHasEfolderRole={this.props.userHasEfolderRole}
+        efolderExpressUrl={this.props.efolderExpressUrl}
+        appeal={this.props.appeal} />
       <AppSegment filledBackground>
         <div className="section--document-list">
           <ClaimsFolderDetails appeal={this.props.appeal} documents={this.props.documents} />
-          <LastRetrievalAlert
-            userHasEfolderRole={this.props.userHasEfolderRole}
-            efolderExpressUrl={this.props.efolderExpressUrl}
-            appeal={this.props.appeal} />
+          {this.props.featureToggles.bandwidthBanner && <BandwidthAlert /> }
           <DocumentListHeader
             documents={this.props.documents}
             noDocuments={noDocuments}

client/app/reader/utils.js

@@ -39,20 +39,24 @@ export const pageCoordsOfRootCoordsPrototype = ({ x, y }, pageBoundingBox, scale
 });
 
 export const rotateCoordinates = ({ x, y }, container, rotation) => {
-  if (rotation === 0) {
-    return { x, y };
-  } else if (rotation === 90) {
-    return { x: y, y: container.width - x };
-  } else if (rotation === 180) {
-    return { x: container.width - x, y: container.height - y };
-  } else if (rotation === 270) {
-    return { x: container.height - y, y: x };
+  let rotatedCoords = null;
+
+  switch (rotation) {
+  case 90:
+    rotatedCoords = { x: y, y: container.width - x };
+    break;
+  case 180:
+    rotatedCoords = { x: container.width - x, y: container.height - y };
+    break;
+  case 27:
+    rotatedCoords = { x: container.height - y, y: x };
+    break;
+  default:
+    rotatedCoords = { x, y };
+    break;
   }
 
-  return {
-    x,
-    y,
-  };
+  return rotatedCoords;
 };
 
 export const getPageCoordinatesOfMouseEvent = (event, container, scale, rotation) => {

client/test/app/reader/BandwidthAlert-test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import BandwidthAlert from '../../../app/reader/BandwidthAlert';
+
+// variables being defined are in mbps
+const bandwidthUnderThreshold = 1.0;
+const bandwidthOverThreshold = 2.0;
+
+const mockNavigationConnection = (downlink) => {
+  Object.defineProperty(global.navigator, 'connection', {
+    value: {
+      downlink,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    },
+    writable: true
+  });
+};
+
+describe('BandwidthAlert', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render warning alert if downlink is below 1.5', () => {
+    mockNavigationConnection(bandwidthUnderThreshold);
+
+    render(<BandwidthAlert />);
+
+    const alertMessage = screen.getByText(/You may experience slower downloading times/i);
+
+    expect(alertMessage).toBeInTheDocument();
+  });
+
+  it('should not render alert if downlink is above 1.5', () => {
+    mockNavigationConnection(bandwidthOverThreshold);
+
+    render(<BandwidthAlert />);
+
+    const alertMessage = screen.queryByText(/You may experience slower downloading times/i);
+
+    expect(alertMessage).not.toBeInTheDocument();
+  });
+});