[WEB-3275] patient data source management

app/components/chart/settings.js

@@ -94,7 +94,12 @@ const Settings = ({
   const isClinicContext = !!selectedClinicId;
   const [showDataConnectionsModal, setShowDataConnectionsModal] = useState(false);
   const [showUploadOverlay, setShowUploadOverlay] = useState(false);
-  const patientData = clinicPatient || clinicPatientFromAccountInfo(patient);
+  const dataSources = useSelector(state => state.blip.dataSources);
+
+  const patientData = clinicPatient || {
+    ...clinicPatientFromAccountInfo(patient),
+    dataSources,
+  };
 
   const deviceSelectionPopupState = usePopupState({
     variant: 'popover',

app/components/datasources/DataConnections.js

@@ -10,8 +10,10 @@ import get from 'lodash/get';
 import includes from 'lodash/includes';
 import intersection from 'lodash/intersection';
 import keys from 'lodash/keys';
+import last from 'lodash/last';
 import map from 'lodash/map';
 import max from 'lodash/max';
+import min from 'lodash/min';
 import noop from 'lodash/noop';
 import reduce from 'lodash/reduce';
 import { utils as vizUtils } from '@tidepool/viz';
@@ -115,7 +117,7 @@ export function getProviderHandlers(patient, selectedClinicId, provider) {
       buttonText: t('Disconnect'),
       buttonStyle: 'text',
       action: actions.async.disconnectDataSource,
-      args: [api, id, dataSourceFilter],
+      args: [api, dataSourceFilter],
     },
     inviteSent: {
       buttonDisabled: true,
@@ -338,13 +340,43 @@ export const DataConnections = (props) => {
   const [activeHandler, setActiveHandler] = useState(null);
   const dataConnectionProps = getDataConnectionProps(patient, isLoggedInUser, selectedClinicId, setActiveHandler);
 
+  const authorizedDataSource = useSelector((state) => state.blip.authorizedDataSource);
+  const [providerConnectionPopup, setProviderConnectionPopup] = useState(null);
+
+  const openProviderConnectionPopup = useCallback((url, displayName) => {
+    const popupWidth = min([window.innerWidth * .85, 1080]);
+    const popupHeight = min([window.innerHeight * .85, 840]);
+    const popupLeft = window.screenX + (window.outerWidth - popupWidth) / 2;
+    const popupTop = window.screenY + (window.outerHeight - popupHeight) / 2;
+
+    const popupOptions = [
+      'toolbar=no',
+      'location=no',
+      'directories=no',
+      'status=no',
+      'menubar=no',
+      'scrollbars=yes',
+      'resizable=yes',
+      'copyhistory=no',
+      `width=${popupWidth}`,
+      `height=${popupHeight}`,
+      `left=${popupLeft}`,
+      `top=${popupTop}`,
+    ];
+
+    const popup = window.open(url, `Connect ${displayName} to Tidepool`, popupOptions.join(','));
+    setProviderConnectionPopup(popup);
+  }, []);
+
   const {
     sendingPatientDataProviderConnectRequest,
     updatingClinicPatient,
+    disconnectingDataSource,
   } = useSelector((state) => state.blip.working);
 
   const previousSendingPatientDataProviderConnectRequest = usePrevious(sendingPatientDataProviderConnectRequest);
   const previousUpdatingClinicPatient = usePrevious(updatingClinicPatient);
+  const previousDisconnectingDataSource = usePrevious(disconnectingDataSource);
 
   const fetchPatientDetails = useCallback(() => {
     dispatch(actions.async.fetchPatientFromClinic(api, selectedClinicId, patient?.id));
@@ -465,8 +497,13 @@ export const DataConnections = (props) => {
     setShowPatientEmailModal(false);
     setShowResendDataSourceConnectRequest(false);
     setActiveHandler(null);
-    fetchPatientDetails();
-  }, [fetchPatientDetails]);
+
+    if (selectedClinicId) {
+      fetchPatientDetails();
+    } else {
+      dispatch(actions.async.fetchDataSources(api));
+    }
+  }, [fetchPatientDetails, selectedClinicId, dispatch]);
 
   useEffect(() => {
     if(activeHandler?.action && !activeHandler?.inProgress) {
@@ -520,6 +557,84 @@ export const DataConnections = (props) => {
     patient?.email
   ]);
 
+  useEffect(() => {
+    handleAsyncResult({ ...disconnectingDataSource, prevInProgress: previousDisconnectingDataSource?.inProgress }, t('{{ providerDisplayName }} connection has been disconnected.', {
+      providerDisplayName: providers[activeHandler?.providerName]?.displayName,
+    }), handleActiveHandlerComplete);
+  }, [
+    disconnectingDataSource,
+    previousDisconnectingDataSource?.inProgress,
+    handleAsyncResult,
+    handleActiveHandlerComplete,
+    activeHandler?.providerName,
+  ]);
+
+  useEffect(() => {
+    if (authorizedDataSource?.id) {
+      const provider = find(providers, { id: authorizedDataSource.id});
+      if (provider) openProviderConnectionPopup(authorizedDataSource?.url, provider?.displayName);
+    }
+  }, [authorizedDataSource, openProviderConnectionPopup]);
+
+  useEffect(() => {
+    let timer;
+    if (!providerConnectionPopup || providerConnectionPopup.closed) {
+      return;
+    }
+
+    timer = setInterval(() => {
+      if (!providerConnectionPopup || providerConnectionPopup.closed) {
+        timer && clearInterval(timer);
+        dispatch(actions.sync.clearAuthorizedDataSource());
+        setProviderConnectionPopup(null);
+        handleActiveHandlerComplete();
+        return;
+      }
+
+      try {
+        const currentUrl = providerConnectionPopup.location.href;
+        const currentPath = providerConnectionPopup.location.pathname;
+
+        if (!currentUrl) return;
+
+        if (currentUrl.indexOf(authorizedDataSource?.id) !== -1) {
+          providerConnectionPopup.close();
+          const status = last(currentPath.split('/'));
+
+          const toastMessages = {
+            authorized: t('Connection Authorized. Thank you for connecting!'),
+            declined: t('Connection Declined. You can always decide to connect at a later time.'),
+            error: t('Connection Authorization Error. Please try again.'),
+          };
+
+          const toastVariants = {
+            authorized: 'success',
+            declined: 'info',
+            error: 'danger',
+          };
+
+          setToast({
+            message: toastMessages[status],
+            variant: toastVariants[status],
+          });
+        }
+      } catch (e) {
+        // The above try block will fail while the user is navigated to an external site, due to
+        // trying to access the currentUrl being a CORS violation.
+        // Once they complete the authorization flow, they will be redirected to our
+        // /oauth/[providerName]/[status] route where we can react to the results and then close the
+        // modal. So, we just return while this loop runs in the meantime.
+        return;
+      }
+    }, 500);
+  }, [
+    dispatch,
+    providerConnectionPopup,
+    authorizedDataSource?.id,
+    handleActiveHandlerComplete,
+    setToast,
+  ]);
+
   return (
     <>
       <Box id="data-connections" {...themeProps}>
@@ -578,7 +693,9 @@ const userDataSourceShape = {
 
 DataConnections.propTypes = {
   ...BoxProps,
-  patient: PropTypes.oneOf([PropTypes.shape(clinicPatientDataSourceShape), PropTypes.shape(userDataSourceShape)]),
+  patient: PropTypes.shape({
+    dataSources: PropTypes.oneOf([PropTypes.shape(clinicPatientDataSourceShape), PropTypes.shape(userDataSourceShape)])
+  }),
   shownProviders: PropTypes.arrayOf(PropTypes.oneOf(activeProviders)),
   trackMetric: PropTypes.func.isRequired,
 };

app/components/datasources/DataConnectionsModal.js

@@ -43,9 +43,15 @@ export const DataConnectionsModal = (props) => {
   const { set: setToast } = useToasts();
   const selectedClinicId = useSelector((state) => state.blip.selectedClinicId);
   const { updatingClinicPatient } = useSelector((state) => state.blip.working);
+  const dataSources = useSelector((state) => state.blip.dataSources);
   const previousUpdatingClinicPatient = usePrevious(updatingClinicPatient);
-  const patientData = (patient?.profile) ? clinicPatientFromAccountInfo(patient) : patient;
-  const [showPatientEmailModal, setShowPatientEmailModal] = useState(false);
+
+  const patientData = (patient?.profile) ? {
+    ...clinicPatientFromAccountInfo(patient),
+    dataSources,
+   } : patient;
+
+   const [showPatientEmailModal, setShowPatientEmailModal] = useState(false);
   const [processingEmailUpdate, setProcessingEmailUpdate] = useState(false);
   const [patientEmailFormContext, setPatientEmailFormContext] = useState();
   const dispatch = useDispatch();
@@ -114,6 +120,14 @@ export const DataConnectionsModal = (props) => {
     setToast,
   ]);
 
+  const dataSourcesText = selectedClinicId
+    ? t('Invite patients to authorize syncing from these accounts. Only available in the US at this time.')
+    : t('When you connect an account, data can flow into Tidepool without any extra effort. Only available in the US at this time.');
+
+  const learnMoreText = selectedClinicId
+    ? t('Learn more.')
+    : t('Learn more here.');
+
   return (
     <>
       <Dialog
@@ -129,12 +143,12 @@ export const DataConnectionsModal = (props) => {
         </DialogTitle>
 
         <DialogContent>
-          <PatientDetails mb={3} patient={patientData} />
+          {!!selectedClinicId && <PatientDetails mb={3} patient={patientData} />}
           <Subheading sx={{ fontWeight: 'bold'}}>{t('Connect a Device Account')}</Subheading>
 
           <Box mb={3}>
             <Body1 sx={{ fontWeight: 'medium'}}>
-              {t('Invite patients to authorize syncing from these accounts. Only available in the US at this time.')}&nbsp;
+              {dataSourcesText}&nbsp;
               <Link
                 id="data-connections-restrictions-link"
                 href={URL_TIDEPOOL_EXTERNAL_DATA_CONNECTIONS}
@@ -144,7 +158,7 @@ export const DataConnectionsModal = (props) => {
                   fontSize: 1,
                   fontWeight: 'medium',
                 }}
-              >{t('Learn more.')}</Link>
+              >{learnMoreText}</Link>
             </Body1>
 
             {patientData?.email && patient?.permissions?.custodian && (
@@ -168,20 +182,43 @@ export const DataConnectionsModal = (props) => {
           <DataConnections mb={4} patient={patientData} shownProviders={shownProviders} trackMetric={trackMetric} />
           <Divider mb={3} />
 
-          <Body1 sx={{ fontWeight: 'medium'}}>
-            {t('Have other devices with data to view? Tidepool supports over 85 devices. To add data from a device directly, search for this patient in')}&nbsp;
-            <Link
-              id="data-connections-restrictions-link"
-              href={URL_UPLOADER_DOWNLOAD_PAGE}
-              target="_blank"
-              rel="noreferrer noopener"
-              sx={{
-                fontSize: 1,
-                fontWeight: 'medium',
-              }}
-            >{t('Tidepool Uploader')}</Link>,&nbsp;
-            {t('select the devices, and upload.')}&nbsp;
-          </Body1>
+          {!!selectedClinicId && (
+            <Body1 sx={{ fontWeight: 'medium'}}>
+              {t('Have other devices with data to view? Tidepool supports over 85 devices. To add data from a device directly, search for this patient in')}&nbsp;
+
+              <Link
+                id="data-connections-restrictions-link"
+                href={URL_UPLOADER_DOWNLOAD_PAGE}
+                target="_blank"
+                rel="noreferrer noopener"
+                sx={{
+                  fontSize: 1,
+                  fontWeight: 'medium',
+                }}
+              >{t('Tidepool Uploader')}</Link>,&nbsp;
+
+              {t('select the devices, and upload.')}&nbsp;
+            </Body1>
+          )}
+
+          {!selectedClinicId && (
+            <Body1 sx={{ fontWeight: 'medium'}}>
+              {t('Don’t have any of the accounts above? Tidepool supports over 85 devices. Open')}&nbsp;
+
+              <Link
+                id="data-connections-restrictions-link"
+                href={URL_UPLOADER_DOWNLOAD_PAGE}
+                target="_blank"
+                rel="noreferrer noopener"
+                sx={{
+                  fontSize: 1,
+                  fontWeight: 'medium',
+                }}
+              >{t('Tidepool Uploader')}</Link>,&nbsp;
+
+              {t('select your devices, and upload directly.')}&nbsp;
+            </Body1>
+          )}
 
           {showPatientEmailModal && <PatientEmailModal
             action="edit"