From d415919497e47c529d4925c378642bd5882fe1f4 Mon Sep 17 00:00:00 2001 From: Daniel Mage Date: Wed, 10 Jul 2024 07:53:35 -0700 Subject: [PATCH 1/8] add Reader bandwidth alert banner in document list --- client/app/reader/BandwidthAlert.jsx | 58 +++++++++++++++++++ client/app/reader/PdfListView.jsx | 2 + client/test/app/reader/BandwidthAlert-test.js | 40 +++++++++++++ 3 files changed, 100 insertions(+) create mode 100644 client/app/reader/BandwidthAlert.jsx create mode 100644 client/test/app/reader/BandwidthAlert-test.js diff --git a/client/app/reader/BandwidthAlert.jsx b/client/app/reader/BandwidthAlert.jsx new file mode 100644 index 00000000000..4328d5cf9d8 --- /dev/null +++ b/client/app/reader/BandwidthAlert.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Alert from '../components/Alert'; +import { css } from 'glamor'; + +const alertStyling = css({ + marginBottom: '20px' +}); + +class BandwidthAlert extends React.Component { + constructor(props) { + super(props); + this.state = { + downlink: null, + }; + } + + componentDidMount() { + if ('connection' in navigator) { + this.updateConnectionInfo(); + const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; + + connection.addEventListener('change', this.updateConnectionInfo); + } + } + + componentWillUnmount() { + if ('connection' in navigator) { + const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; + + connection.removeEventListener('change', this.updateConnectionInfo); + } + } + + updateConnectionInfo = () => { + const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; + + this.setState({ downlink: connection.downlink }); + }; + + render() { + const { downlink } = this.state; + + if (downlink && downlink < 1.5) { + return ( +
+ + You may experience slower downloading times for certain files based on your bandwidth speed and document size. +
+ +
+ ); + } + + return null; + } +} + +export default BandwidthAlert; diff --git a/client/app/reader/PdfListView.jsx b/client/app/reader/PdfListView.jsx index ca4824dfa8e..e0166caf760 100644 --- a/client/app/reader/PdfListView.jsx +++ b/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'; @@ -85,6 +86,7 @@ export class PdfListView extends React.Component { userHasEfolderRole={this.props.userHasEfolderRole} efolderExpressUrl={this.props.efolderExpressUrl} appeal={this.props.appeal} /> + { + 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(1.0); + + render(); + + 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(2.0); + + render(); + + const alertMessage = screen.queryByText(/You may experience slower downloading times/i); + + expect(alertMessage).not.toBeInTheDocument(); + }); +}); From f1a48d6b67f9519085d3dcea596e16a356f84ad9 Mon Sep 17 00:00:00 2001 From: Daniel Mage Date: Wed, 10 Jul 2024 10:52:04 -0700 Subject: [PATCH 2/8] fix linting issue --- client/app/reader/BandwidthAlert.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/app/reader/BandwidthAlert.jsx b/client/app/reader/BandwidthAlert.jsx index 4328d5cf9d8..a58b0821897 100644 --- a/client/app/reader/BandwidthAlert.jsx +++ b/client/app/reader/BandwidthAlert.jsx @@ -44,7 +44,8 @@ class BandwidthAlert extends React.Component { return (
- You may experience slower downloading times for certain files based on your bandwidth speed and document size. + You may experience slower downloading times for certain files based on your + bandwidth speed and document size.
From bef16c01b265ad1ec1924c19501ad1230ea1507c Mon Sep 17 00:00:00 2001 From: Anusha Palliyil Date: Thu, 8 Aug 2024 13:22:03 -0400 Subject: [PATCH 3/8] Updated displayBandwidthAlert --- client/app/reader/BandwidthAlert.jsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/client/app/reader/BandwidthAlert.jsx b/client/app/reader/BandwidthAlert.jsx index 30b66f775b6..e7d078dbb65 100644 --- a/client/app/reader/BandwidthAlert.jsx +++ b/client/app/reader/BandwidthAlert.jsx @@ -12,29 +12,16 @@ class BandwidthAlert extends React.Component { constructor(props) { super(props); this.state = { - //downlink: null, - displayBandwidthAlert: true + displayBandwidthAlert: false }; } componentDidMount() { if ('connection' in navigator) { this.updateConnectionInfo(); - // const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; - - // connection.addEventListener('change', this.updateConnectionInfo); - } } - // componentWillUnmount() { - // if ('connection' in navigator) { - // const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; - - // connection.removeEventListener('change', this.updateConnectionInfo); - // } - // } - updateConnectionInfo = () => { const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; @@ -50,7 +37,7 @@ class BandwidthAlert extends React.Component { this.setState({ displayBandwidthAlert: true }); } }; -// const { displayBandwidthAlert } = this.state; + render() { if (this.state.displayBandwidthAlert) { From df217588d455c26b479bf6d30342ec678780c46b Mon Sep 17 00:00:00 2001 From: Anusha Palliyil Date: Tue, 20 Aug 2024 13:23:32 -0400 Subject: [PATCH 4/8] bandwidth_banner feature toggle added --- Gemfile | 2 +- Gemfile.lock | 6 +++--- app/views/reader/appeal/index.html.erb | 1 + client/app/reader/PdfListView.jsx | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/Gemfile b/Gemfile index 17eec027d43..e8e28f36722 100644 --- a/Gemfile +++ b/Gemfile @@ -89,7 +89,7 @@ gem "ziptz" group :production, :staging, :ssh_forwarding, :development, :test do # Oracle DB gem "activerecord-oracle_enhanced-adapter", "~> 6.0.0" - gem "ruby-oci8", "~> 2.2" + gem "ruby-oci8", "~> 2.2.14" end group :test, :development, :demo do diff --git a/Gemfile.lock b/Gemfile.lock index 2239aa22953..240fa24a367 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1914,7 +1914,7 @@ GEM ruby-debug-ide (0.7.3) rake (>= 0.8.1) ruby-graphviz (1.2.4) - ruby-oci8 (2.2.7) + ruby-oci8 (2.2.14) ruby-plsql (0.8.0) ruby-prof (1.4.1) ruby-progressbar (1.13.0) @@ -2130,7 +2130,7 @@ DEPENDENCIES rubocop-performance rubocop-rails ruby-debug-ide - ruby-oci8 (~> 2.2) + ruby-oci8 (~> 2.2.14) ruby-prof (~> 1.4) ruby_claim_evidence_api! sass-rails (~> 5.0) @@ -2157,4 +2157,4 @@ DEPENDENCIES ziptz BUNDLED WITH - 2.4.22 + 2.4.19 diff --git a/app/views/reader/appeal/index.html.erb b/app/views/reader/appeal/index.html.erb index 251d6f2a559..7ca4b8fed6d 100644 --- a/app/views/reader/appeal/index.html.erb +++ b/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), diff --git a/client/app/reader/PdfListView.jsx b/client/app/reader/PdfListView.jsx index c05f32b070f..ca08422735f 100644 --- a/client/app/reader/PdfListView.jsx +++ b/client/app/reader/PdfListView.jsx @@ -83,6 +83,7 @@ export class PdfListView extends React.Component { userHasEfolderRole={this.props.userHasEfolderRole} efolderExpressUrl={this.props.efolderExpressUrl} appeal={this.props.appeal} /> + {this.props.featureToggles.bandwidth_banner ? : null}
From 71d8c90d7aa26fe06a11f2617f939e0d12803915 Mon Sep 17 00:00:00 2001 From: Anusha Palliyil Date: Tue, 20 Aug 2024 22:18:11 -0400 Subject: [PATCH 5/8] added const --- client/app/reader/BandwidthAlert.jsx | 4 +++- client/app/reader/PdfListView.jsx | 3 +-- client/test/app/reader/BandwidthAlert-test.js | 7 +++++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/client/app/reader/BandwidthAlert.jsx b/client/app/reader/BandwidthAlert.jsx index e7d078dbb65..8c752cecc8b 100644 --- a/client/app/reader/BandwidthAlert.jsx +++ b/client/app/reader/BandwidthAlert.jsx @@ -4,6 +4,8 @@ import { css } from 'glamor'; import { storeMetrics } from '../util/Metrics'; import uuid from 'uuid'; +const bandwidthThreshold = 1.5; + const alertStyling = css({ marginBottom: '20px' }); @@ -25,7 +27,7 @@ class BandwidthAlert extends React.Component { updateConnectionInfo = () => { const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; - if (connection.downlink && connection.downlink < 1.5) { + if (connection.downlink && connection.downlink < bandwidthThreshold) { const logId = uuid.v4(); storeMetrics(logId, { bandwidth: this.state.downlink }, { diff --git a/client/app/reader/PdfListView.jsx b/client/app/reader/PdfListView.jsx index ca08422735f..4dbe9d3a6cd 100644 --- a/client/app/reader/PdfListView.jsx +++ b/client/app/reader/PdfListView.jsx @@ -83,11 +83,10 @@ export class PdfListView extends React.Component { userHasEfolderRole={this.props.userHasEfolderRole} efolderExpressUrl={this.props.efolderExpressUrl} appeal={this.props.appeal} /> - {this.props.featureToggles.bandwidth_banner ? : null}
- + {this.props.featureToggles.bandwidthBanner && } { Object.defineProperty(global.navigator, 'connection', { value: { @@ -19,7 +22,7 @@ describe('BandwidthAlert', () => { }); it('should render warning alert if downlink is below 1.5', () => { - mockNavigationConnection(1.0); + mockNavigationConnection(bandwidthUnderThreshold); render(); @@ -29,7 +32,7 @@ describe('BandwidthAlert', () => { }); it('should not render alert if downlink is above 1.5', () => { - mockNavigationConnection(2.0); + mockNavigationConnection(bandwidthOverThreshold); render(); From 6c5078bb1089becbb67b5bd92806bd53a1f244ab Mon Sep 17 00:00:00 2001 From: Anusha Palliyil Date: Wed, 21 Aug 2024 11:09:37 -0400 Subject: [PATCH 6/8] linted as requested --- Gemfile | 2 +- Gemfile.lock | 6 +++--- client/app/2.0/screens/reader/DocumentList.jsx | 5 ++--- client/app/reader/BandwidthAlert.jsx | 1 + client/app/reader/LastRetrievalAlert.jsx | 2 ++ client/test/app/reader/BandwidthAlert-test.js | 1 + 6 files changed, 10 insertions(+), 7 deletions(-) diff --git a/Gemfile b/Gemfile index e8e28f36722..17eec027d43 100644 --- a/Gemfile +++ b/Gemfile @@ -89,7 +89,7 @@ gem "ziptz" group :production, :staging, :ssh_forwarding, :development, :test do # Oracle DB gem "activerecord-oracle_enhanced-adapter", "~> 6.0.0" - gem "ruby-oci8", "~> 2.2.14" + gem "ruby-oci8", "~> 2.2" end group :test, :development, :demo do diff --git a/Gemfile.lock b/Gemfile.lock index 240fa24a367..2239aa22953 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1914,7 +1914,7 @@ GEM ruby-debug-ide (0.7.3) rake (>= 0.8.1) ruby-graphviz (1.2.4) - ruby-oci8 (2.2.14) + ruby-oci8 (2.2.7) ruby-plsql (0.8.0) ruby-prof (1.4.1) ruby-progressbar (1.13.0) @@ -2130,7 +2130,7 @@ DEPENDENCIES rubocop-performance rubocop-rails ruby-debug-ide - ruby-oci8 (~> 2.2.14) + ruby-oci8 (~> 2.2) ruby-prof (~> 1.4) ruby_claim_evidence_api! sass-rails (~> 5.0) @@ -2157,4 +2157,4 @@ DEPENDENCIES ziptz BUNDLED WITH - 2.4.19 + 2.4.22 diff --git a/client/app/2.0/screens/reader/DocumentList.jsx b/client/app/2.0/screens/reader/DocumentList.jsx index 044609cdf0a..a14cf16861f 100644 --- a/client/app/2.0/screens/reader/DocumentList.jsx +++ b/client/app/2.0/screens/reader/DocumentList.jsx @@ -37,7 +37,7 @@ import { selectComment } from 'store/reader/annotationLayer'; const DocumentList = (props) => { // Get the Document List state const state = props.featureToggles.readerSelectorsMemoized ? - useSelector(documentListScreenMemoized) : useSelector(documentListScreen); + useSelector(documentListScreenMemoized) : useSelector(documentListScreen); // Create the Dispatcher const dispatch = useDispatch(); @@ -74,10 +74,9 @@ const DocumentList = (props) => { )} -
- + Please submit a support ticket via YourIT to sync their eFolder with Reader. ); + render() { + // Check that document manifests have been recieved from VBMS if (!this.props.manifestVbmsFetchedAt) { return
diff --git a/client/test/app/reader/BandwidthAlert-test.js b/client/test/app/reader/BandwidthAlert-test.js index 85bf901c0bb..a16e2d029f4 100644 --- a/client/test/app/reader/BandwidthAlert-test.js +++ b/client/test/app/reader/BandwidthAlert-test.js @@ -2,6 +2,7 @@ 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; From 8a0d162a43c0ba64f99ea05fbb8acf25eeb8274f Mon Sep 17 00:00:00 2001 From: Anusha Palliyil Date: Fri, 23 Aug 2024 12:59:19 -0400 Subject: [PATCH 7/8] fixed linting issues --- client/app/reader/BandwidthAlert.jsx | 2 +- client/test/app/reader/BandwidthAlert-test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/app/reader/BandwidthAlert.jsx b/client/app/reader/BandwidthAlert.jsx index 991432ecc47..67939c00640 100644 --- a/client/app/reader/BandwidthAlert.jsx +++ b/client/app/reader/BandwidthAlert.jsx @@ -4,7 +4,7 @@ import { css } from 'glamor'; import { storeMetrics } from '../util/Metrics'; import uuid from 'uuid'; -//variables being defined are in mbps +// variables being defined are in mbps const bandwidthThreshold = 1.5; const alertStyling = css({ diff --git a/client/test/app/reader/BandwidthAlert-test.js b/client/test/app/reader/BandwidthAlert-test.js index a16e2d029f4..ff4c892dc50 100644 --- a/client/test/app/reader/BandwidthAlert-test.js +++ b/client/test/app/reader/BandwidthAlert-test.js @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import BandwidthAlert from '../../../app/reader/BandwidthAlert'; -//variables being defined are in mbps +// variables being defined are in mbps const bandwidthUnderThreshold = 1.0; const bandwidthOverThreshold = 2.0; From cd5d20ebc5bb486dbffccf828270b3f9476c9478 Mon Sep 17 00:00:00 2001 From: mikefinneran <110622959+mikefinneran@users.noreply.github.com> Date: Fri, 30 Aug 2024 18:35:20 -0400 Subject: [PATCH 8/8] code climate --- client/app/reader/utils.js | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/client/app/reader/utils.js b/client/app/reader/utils.js index 63f7a7d6470..d1356e27d7f 100644 --- a/client/app/reader/utils.js +++ b/client/app/reader/utils.js @@ -34,20 +34,24 @@ export const pageCoordsOfRootCoords = ({ 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) => {