Merge pull request #1481 from tidepool-org/release-1.82.0

Release 1.82.0 to develop

app/components/clinic/PatientForm.js

@@ -227,7 +227,9 @@ export const PatientForm = (props) => {
 
     if (!isFirstRender && !inProgress) {
       if (completed) {
+        // Close the resend email modal and refetch patient details to update the connection status
         setShowResendDexcomConnectRequest(false);
+        fetchPatientDetails();
 
         setToast({
           message: successMessage,
@@ -309,7 +311,7 @@ export const PatientForm = (props) => {
 
   // Pull the patient on load to ensure the most recent dexcom connection state is made available
   useEffect(() => {
-    if ((action === 'edit') && selectedClinicId && patient?.id) dispatch(actions.async.fetchPatientFromClinic.bind(null, api, selectedClinicId, patient.id)())
+    if ((action === 'edit') && selectedClinicId && patient?.id) fetchPatientDetails();
   }, []);
 
   useEffect(() => {
@@ -329,6 +331,10 @@ export const PatientForm = (props) => {
     dispatch(actions.async.sendPatientDexcomConnectRequest(api, selectedClinicId, patient.id));
   }
 
+  function fetchPatientDetails() {
+    dispatch(actions.async.fetchPatientFromClinic(api, selectedClinicId, patient.id));
+  }
+
   function renderRegionalNote() {
     return (
       <Body0 sx={{ fontWeight: 'medium', color: colors.mediumGrey, lineHeight: '1.5 !important', fontStyle: 'italic'}}>

app/core/clinicUtils.js

@@ -397,12 +397,11 @@ export const clinicPatientTagSchema = yup.object().shape({
 export const patientSchema = config => {
   let mrnSchema = yup
     .string()
-    .matches(/^$|^[A-Z0-9]{4,25}$/, () => (
+    .matches(/^$|^[A-Z0-9]{0,25}$/, () => (
       <div>
         {t('Patient\'s MRN is invalid. MRN must meet the following criteria:')}
         <ul>
           <li>{t('All upper case letters or numbers')}</li>
-          <li>{t('Minimum length: 4 characters')}</li>
           <li>{t('Maximum length: 25 characters')}</li>
           <li>{t('No spaces')}</li>
         </ul>

app/core/hooks.js

@@ -183,3 +183,33 @@ export const useIsFirstRender = () => {
 
   return isFirstRenderRef.current;
 };
+
+/**
+ * Disables triggering the increment/decrememnt inputs on active number inputs while scrolling
+ * c.f https://stackoverflow.com/a/56250826
+ *
+ * There are a few different approaches, but this seems to be the best.
+ * Some approaches blur for a frame then refocus, which causes the outline to flicker, and could potentially trigger onBlur validations
+ * Some approaches simple cancel out mousewheel events on active number inputs, but this means that a user can't scroll out of an active, hovered input
+ * This approach has a very small flicker on the increment/decrement controls while scrolling on an active number input, but it seems to be the most minor of compromises
+ *
+ * Note: it may be prudent to at some point stop using number inputs altogther, switch to using
+ * plain text that mimic number fields without the scroll handlers built in:
+ * <input type="text" inputmode="numeric" pattern="[0-9]*">
+ * https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
+ */
+export const useDisableScrollOnNumberInput = () => {
+  useEffect(() => {
+    function handleScroll(e) {
+      if (e.target.tagName.toLowerCase() === 'input'
+        && (e.target.type === 'number')
+        && (e.target === document.activeElement)
+        && !e.target.readOnly
+      ) {
+        e.target.readOnly = true;
+        setTimeout(function(el){ el.readOnly = false; }, 0, e.target);
+      }
+    }
+    document.addEventListener('wheel', function(e){ handleScroll(e); });
+  }, []);
+};

app/pages/dashboard/TideDashboard.js

@@ -303,10 +303,12 @@ const TideDashboardSection = React.memo(props => {
     <Box onClick={handleClickPatient(patient)} sx={{ cursor: 'pointer' }}>
       <Text
         sx={{
+          display: 'inline-block',
           fontSize: [1, null, 0],
           fontWeight: 'medium',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
+          width: '100%',
         }}
       >
         {patient?.fullName}
@@ -435,12 +437,15 @@ const TideDashboardSection = React.memo(props => {
 
   const renderDexcomConnectionStatus = useCallback(({ patient }) => {
     const dexcomDataSource = find(patient?.dataSources, { providerName: 'dexcom' });
+    const dexcomAuthInviteExpired = dexcomDataSource?.expirationTime < moment.utc().toISOString();
     let dexcomConnectState;
 
     if (dexcomDataSource) {
       dexcomConnectState = includes(keys(dexcomConnectStateUI), dexcomDataSource?.state)
         ? dexcomDataSource.state
         : 'unknown';
+
+      if (includes(['pending', 'pendingReconnect'], dexcomConnectState) && dexcomAuthInviteExpired) dexcomConnectState = 'pendingExpired';
     } else {
       dexcomConnectState = 'noPendingConnections';
     }

app/pages/prescription/therapySettingsFormStep.js

@@ -12,7 +12,7 @@ import { default as _values } from 'lodash/values';
 
 import { getFieldError, getThresholdWarning, onChangeWithDependantFields } from '../../core/forms';
 import utils from '../../core/utils';
-import { useInitialFocusedInput } from '../../core/hooks';
+import { useInitialFocusedInput, useDisableScrollOnNumberInput } from '../../core/hooks';
 import { Paragraph2, Body2, Headline, Title } from '../../components/elements/FontStyles';
 import RadioGroup from '../../components/elements/RadioGroup';
 import PopoverLabel from '../../components/elements/PopoverLabel';
@@ -554,6 +554,7 @@ export const InsulinSettings = props => {
 InsulinSettings.propTypes = fieldsetPropTypes;
 
 export const TherapySettings = withTranslation()(props => {
+  useDisableScrollOnNumberInput();
   const formikContext = useFormikContext();
 
   const {

app/redux/reducers/misc.js

@@ -1149,8 +1149,9 @@ export const tideDashboardPatients = (state = initialState.tideDashboardPatients
     case types.FETCH_TIDE_DASHBOARD_PATIENTS_SUCCESS:
       return action?.payload?.results || initialState.tideDashboardPatients;
     case types.UPDATE_CLINIC_PATIENT_SUCCESS:
+    case types.FETCH_PATIENT_FROM_CLINIC_SUCCESS:
       const patient = _.get(action.payload, 'patient');
-      const patientId = _.get(action.payload, 'patientId');
+      const patientId = patient.id;
 
       const newResults = _.reduce(state.results, (results, value, key) => {
         const matchingPatientIndex = _.findIndex(value, ({ patient }) => patient?.id === patientId);

package.json

@@ -181,7 +181,7 @@
     "terser-webpack-plugin": "5.3.9",
     "theme-ui": "0.16.1",
     "tideline": "1.30.0",
-    "tidepool-platform-client": "0.61.0-web-3178-tide-connection-status.1",
+    "tidepool-platform-client": "0.61.0",
     "tidepool-standard-action": "0.1.1",
     "ua-parser-js": "1.0.36",
     "url-loader": "4.1.1",

test/fixtures/mockTideDashboardPatients.json

@@ -590,9 +590,7 @@
             "63d811e11710f10c0422ce6d",
             "645a9c5dd59edded4e573495"
           ],
-          "dataSources": [
-            { "providerName": "dexcom", "state": "noPendingConnections" }
-          ]
+          "dataSources": []
         }
       },
       {
@@ -615,7 +613,7 @@
             "646f7ed708e23bc18d91caa4"
           ],
           "dataSources": [
-            { "providerName": "dexcom", "state": "pendingExpired" }
+            { "providerName": "dexcom", "state": "pending", "expirationTime": "2024-11-17T15:17:20.159+00:00" }
           ]
         }
       },
@@ -640,7 +638,7 @@
             "646f7f0408e23bc18d91caa7"
           ],
           "dataSources": [
-            { "providerName": "dexcom", "state": "unknown" }
+            { "providerName": "dexcom", "state": "pending" }
           ]
         }
       }

test/unit/pages/ClinicPatients.test.js

@@ -797,10 +797,10 @@ describe('ClinicPatients', () => {
       expect(dialog().find('Button#addPatientConfirm').prop('disabled')).to.be.true;
 
       expect(patientForm().find('input[name="mrn"]').prop('value')).to.equal('');
-      patientForm().find('input[name="mrn"]').simulate('change', { persist: noop, target: { name: 'mrn', value: 'mr2' } });
-      expect(patientForm().find('input[name="mrn"]').prop('value')).to.equal('MR2');
+      patientForm().find('input[name="mrn"]').simulate('change', { persist: noop, target: { name: 'mrn', value: 'm' } });
+      expect(patientForm().find('input[name="mrn"]').prop('value')).to.equal('M');
 
-      expect(dialog().find('Button#addPatientConfirm').prop('disabled')).to.be.true;
+      expect(dialog().find('Button#addPatientConfirm').prop('disabled')).to.be.false;
 
       patientForm().find('input[name="mrn"]').simulate('change', { persist: noop, target: { name: 'mrn', value: 'mrn876thiswillexceedthelengthlimit' } });
       expect(patientForm().find('input[name="mrn"]').prop('value')).to.equal('MRN876THISWILLEXCEEDTHELENGTHLIMIT');

test/unit/pages/TideDashboard.test.js

@@ -660,6 +660,19 @@ describe('TideDashboard', () => {
 
       expect(getTableRow(6, 0).find('th').at(2).text()).contains('Days Since Last Data');
       expect(getTableRow(6, 1).find('td').at(1).text()).contains('200');
+
+      // Verify that various connection statuses are rendering correctly
+      expect(getTableRow(6, 2).find('th').at(0).text()).contains('Willie Gambles');
+      expect(getTableRow(6, 2).find('td').at(0).text()).contains('Invite Sent');
+
+      expect(getTableRow(6, 3).find('th').at(0).text()).contains('Denys Ickov');
+      expect(getTableRow(6, 3).find('td').at(0).text()).contains('Patient Disconnected');
+
+      expect(getTableRow(6, 4).find('th').at(0).text()).contains('Johna Slatcher');
+      expect(getTableRow(6, 4).find('td').at(0).text()).contains('No Pending Connections');
+
+      expect(getTableRow(6, 5).find('th').at(0).text()).contains('Emelda Stangoe');
+      expect(getTableRow(6, 5).find('td').at(0).text()).contains('Invite Expired');
     });
 
     it('should show empty text for a section without results', () => {

test/unit/redux/reducers/tideDashboardPatients.test.js

@@ -52,7 +52,7 @@ describe('tideDashboardPatients', () => {
   });
 
   describe('updateClinicPatientSuccess', () => {
-    it('should set state to initial empty state', () => {
+    it('should update matching patient in state', () => {
       const patients = { results: { 'foo': [
         { patient: {id: 'bar' } },
         { patient: { id: 'baz'} }
@@ -69,4 +69,23 @@ describe('tideDashboardPatients', () => {
       ] } });
     });
   });
+
+  describe('fetchPatientFromClinicSuccess', () => {
+    it('should update matching patient in state', () => {
+      const patients = { results: { 'foo': [
+        { patient: {id: 'bar' } },
+        { patient: { id: 'baz'} }
+      ] } };
+
+      const updatedPatient = { id: 'baz', updated: true }
+      let initialStateForTest = patients;
+      let action = actions.sync.fetchPatientFromClinicSuccess('clinicId123', updatedPatient);
+      let state = reducer(initialStateForTest, action);
+
+      expect(state).to.eql({ results: { 'foo': [
+        { patient: {id: 'bar' } },
+        { patient: { id: 'baz', updated: true } }
+      ] } });
+    });
+  });
 });

yarn.lock

@@ -7429,7 +7429,7 @@ __metadata:
     terser-webpack-plugin: 5.3.9
     theme-ui: 0.16.1
     tideline: 1.30.0
-    tidepool-platform-client: 0.61.0-web-3178-tide-connection-status.1
+    tidepool-platform-client: 0.61.0
     tidepool-standard-action: 0.1.1
     ua-parser-js: 1.0.36
     url-loader: 4.1.1
@@ -20184,15 +20184,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tidepool-platform-client@npm:0.61.0-web-3178-tide-connection-status.1":
-  version: 0.61.0-web-3178-tide-connection-status.1
-  resolution: "tidepool-platform-client@npm:0.61.0-web-3178-tide-connection-status.1"
+"tidepool-platform-client@npm:0.61.0":
+  version: 0.61.0
+  resolution: "tidepool-platform-client@npm:0.61.0"
   dependencies:
     async: 0.9.0
     lodash: 4.17.21
     superagent: 5.2.2
     uuid: 3.1.0
-  checksum: 0b7254503ba7ec9c880da9e47e69273a24d250a5b7ff2f4b15d424bc59780631d11a73e5024a4c348cb6e3b8985b4591e402217d7f8c9c5cb72a3e931ab20756
+  checksum: 96e221a65b7a003523e03d9ba357b0c1aa371b779ffd363c325ba015b893462955188662587b502193aaf269d6784577c8d24b8c764ba4ad759d4b0ba511c8ae
   languageName: node
   linkType: hard