@medplum/react 1.0.6 → 2.0.1

package/dist/cjs/OperationOutcomeAlert/OperationOutcomeAlert.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { OperationOutcomeIssue } from '@medplum/fhirtypes';
+export interface OperationOutcomeAlertProps {
+    issues?: OperationOutcomeIssue[];
+}
+export declare function OperationOutcomeAlert(props: OperationOutcomeAlertProps): JSX.Element | null;

package/dist/cjs/ReferenceRangeEditor/ReferenceRangeEditor.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
 import { ObservationDefinition, ObservationDefinitionQualifiedInterval } from '@medplum/fhirtypes';
-declare const intervalFilters: readonly ["gender", "age", "gestationalAge", "context", "appliesTo"];
 export interface ReferenceRangeEditorProps {
     definition: ObservationDefinition;
     onSubmit: (result: ObservationDefinition) => void;
 }
 type IntervalGroup = {
     id: string;
-    filters: Record<typeof intervalFilters[number], any>;
+    filters: Record<string, any>;
     intervals: ObservationDefinitionQualifiedInterval[];
 };
 export declare function ReferenceRangeEditor(props: ReferenceRangeEditorProps): JSX.Element;

package/dist/cjs/ResourceTimeline/ResourceTimeline.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { ProfileResource } from '@medplum/core';
+import { MedplumClient, ProfileResource } from '@medplum/core';
 import { Attachment, Bundle, Communication, Media, Reference, Resource } from '@medplum/fhirtypes';
 export interface ResourceTimelineProps<T extends Resource> {
     value: T | Reference<T>;
-    buildSearchRequests: (resource: T) => Bundle;
+    loadTimelineResources: (medplum: MedplumClient, resource: T) => Promise<Bundle[]>;
     createCommunication?: (resource: T, sender: ProfileResource, text: string) => Communication;
     createMedia?: (resource: T, operator: ProfileResource, attachment: Attachment) => Media;
 }

package/dist/cjs/auth/AuthenticationForm.d.ts

@@ -1,10 +1,24 @@
 import { BaseLoginRequest, LoginAuthenticationResponse } from '@medplum/core';
 import React from 'react';
 export interface AuthenticationFormProps extends BaseLoginRequest {
-    readonly generatePkce?: boolean;
     readonly onForgotPassword?: () => void;
     readonly onRegister?: () => void;
     readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;
     readonly children?: React.ReactNode;
 }
 export declare function AuthenticationForm(props: AuthenticationFormProps): JSX.Element;
+export interface EmailFormProps extends BaseLoginRequest {
+    readonly generatePkce?: boolean;
+    readonly onRegister?: () => void;
+    readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;
+    readonly setEmail: (email: string) => void;
+    readonly children?: React.ReactNode;
+}
+export declare function EmailForm(props: EmailFormProps): JSX.Element;
+export interface PasswordFormProps extends BaseLoginRequest {
+    readonly email: string;
+    readonly onForgotPassword?: () => void;
+    readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;
+    readonly children?: React.ReactNode;
+}
+export declare function PasswordForm(props: PasswordFormProps): JSX.Element;

package/dist/cjs/auth/SignInForm.d.ts

@@ -1,6 +1,7 @@
 import { BaseLoginRequest } from '@medplum/core';
 import React from 'react';
 export interface SignInFormProps extends BaseLoginRequest {
+    readonly login?: string;
     readonly chooseScopes?: boolean;
     readonly onSuccess?: () => void;
     readonly onForgotPassword?: () => void;

package/dist/cjs/index.cjs

@@ -630,6 +630,13 @@
         return undefined;
     }
 
+    function OperationOutcomeAlert(props) {
+        if (!props.issues) {
+            return null;
+        }
+        return (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, props.issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text)))));
+    }
+
     /**
      * Dynamically loads the recaptcha script.
      * We do not want to load the script on page load unless the user needs it.
@@ -684,12 +691,11 @@
                 }
             } },
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, props.children),
-            issues && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text))))),
+            React.createElement(OperationOutcomeAlert, { issues: issues }),
             googleClientId && (React.createElement(React.Fragment, null,
                 React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
                     React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: async (response) => {
                             try {
-                                await medplum.startPkce();
                                 props.handleAuthResponse(await medplum.startGoogleLogin({
                                     googleClientId: response.clientId,
                                     googleCredential: response.credential,
@@ -757,47 +763,79 @@
     }
 
     function AuthenticationForm(props) {
-        const { generatePkce, onForgotPassword, onRegister, handleAuthResponse, children, ...baseLoginRequest } = props;
+        const [email, setEmail] = React.useState();
+        if (!email) {
+            return React.createElement(EmailForm, { setEmail: setEmail, ...props });
+        }
+        else {
+            return React.createElement(PasswordForm, { email: email, ...props });
+        }
+    }
+    function EmailForm(props) {
+        const { setEmail, onRegister, handleAuthResponse, children, ...baseLoginRequest } = props;
         const medplum = useMedplum();
         const googleClientId = getGoogleClientId(props.googleClientId);
-        const [outcome, setOutcome] = React.useState();
-        const issues = getIssuesForExpression(outcome, undefined);
-        async function startPkce() {
-            if (generatePkce) {
-                await medplum.startPkce();
+        const isExternalAuth = React.useCallback(async (authMethod) => {
+            if (!authMethod.authorizeUrl) {
+                return false;
             }
-        }
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
-                startPkce()
-                    .then(() => medplum.startLogin({
-                    ...baseLoginRequest,
-                    email: formData.email,
-                    password: formData.password,
-                    remember: formData.remember === 'on',
-                }))
-                    .then(handleAuthResponse)
-                    .catch(setOutcome);
-            } },
+            const state = JSON.stringify({
+                ...(await medplum.ensureCodeChallenge(baseLoginRequest)),
+                domain: authMethod.domain,
+            });
+            const url = new URL(authMethod.authorizeUrl);
+            url.searchParams.set('state', state);
+            window.location.assign(url.toString());
+            return true;
+        }, [medplum, baseLoginRequest]);
+        const handleSubmit = React.useCallback(async (formData) => {
+            const authMethod = await medplum.post('auth/method', { email: formData.email });
+            if (!(await isExternalAuth(authMethod))) {
+                setEmail(formData.email);
+            }
+        }, [medplum, isExternalAuth, setEmail]);
+        const handleGoogleCredential = React.useCallback(async (response) => {
+            const authResponse = await medplum.startGoogleLogin({
+                ...baseLoginRequest,
+                googleCredential: response.credential,
+            });
+            if (!(await isExternalAuth(authResponse))) {
+                handleAuthResponse(authResponse);
+            }
+        }, [medplum, baseLoginRequest, isExternalAuth, handleAuthResponse]);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
-            issues && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text))))),
             googleClientId && (React.createElement(React.Fragment, null,
                 React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
-                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
-                            startPkce()
-                                .then(() => medplum.startGoogleLogin({
-                                ...baseLoginRequest,
-                                googleCredential: response.credential,
-                            }))
-                                .then(props.handleAuthResponse)
-                                .catch(setOutcome);
-                        } })),
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: handleGoogleCredential })),
                 React.createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
+            React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true }),
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
+                onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
+                React.createElement(core$1.Button, { type: "submit" }, "Next"))));
+    }
+    function PasswordForm(props) {
+        const { onForgotPassword, handleAuthResponse, children, ...baseLoginRequest } = props;
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        const issues = getIssuesForExpression(outcome, undefined);
+        const handleSubmit = React.useCallback((formData) => {
+            medplum
+                .startLogin({
+                ...baseLoginRequest,
+                password: formData.password,
+                remember: formData.remember === 'on',
+            })
+                .then(handleAuthResponse)
+                .catch(setOutcome);
+        }, [medplum, baseLoginRequest, handleAuthResponse]);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
+            React.createElement(OperationOutcomeAlert, { issues: issues }),
             React.createElement(core$1.Stack, { spacing: "xl" },
-                React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
                 React.createElement(core$1.PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
             React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
                 onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
-                onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
                 React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),
                 React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
     }
@@ -884,7 +922,22 @@
         const [login, setLogin] = React.useState(undefined);
         const [mfaRequired, setAuthenticatorRequired] = React.useState(false);
         const [memberships, setMemberships] = React.useState(undefined);
-        function handleAuthResponse(response) {
+        const handleCode = React.useCallback((code) => {
+            if (onCode) {
+                onCode(code);
+            }
+            else {
+                medplum
+                    .processCode(code)
+                    .then(() => {
+                    if (onSuccess) {
+                        onSuccess();
+                    }
+                })
+                    .catch(console.log);
+            }
+        }, [medplum, onCode, onSuccess]);
+        const handleAuthResponse = React.useCallback((response) => {
             setAuthenticatorRequired(!!response.mfaRequired);
             if (response.login) {
                 setLogin(response.login);
@@ -900,28 +953,21 @@
                     handleCode(response.code);
                 }
             }
-        }
-        function handleScopeResponse(response) {
+        }, [chooseScopes, handleCode]);
+        const handleScopeResponse = React.useCallback((response) => {
             handleCode(response.code);
-        }
-        function handleCode(code) {
-            if (onCode) {
-                onCode(code);
-            }
-            else {
+        }, [handleCode]);
+        React.useEffect(() => {
+            if (props.login) {
                 medplum
-                    .processCode(code)
-                    .then(() => {
-                    if (onSuccess) {
-                        onSuccess();
-                    }
-                })
-                    .catch(console.log);
+                    .get('auth/login/' + props.login)
+                    .then(handleAuthResponse)
+                    .catch(console.error);
             }
-        }
+        }, [medplum, props, handleAuthResponse]);
         return (React.createElement(Document, { width: 450 }, (() => {
             if (!login) {
-                return (React.createElement(AuthenticationForm, { generatePkce: !onCode, onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, ...baseLoginRequest }, props.children));
+                return (React.createElement(AuthenticationForm, { onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, ...baseLoginRequest }, props.children));
             }
             else if (mfaRequired) {
                 return React.createElement(MfaForm, { login: login, handleAuthResponse: handleAuthResponse });
@@ -1198,7 +1244,7 @@
                 if (!property?.path) {
                     throw Error(`Displaying property of type ${props.propertyType} requires element definition path`);
                 }
-                return (React.createElement(BackboneElementDisplay, { value: { type: core.buildTypeName(property?.path?.split('.')), value }, compact: true, ignoreMissingValues: props.ignoreMissingValues }));
+                return (React.createElement(BackboneElementDisplay, { value: { type: core.getElementDefinitionTypeName(property), value }, compact: true, ignoreMissingValues: props.ignoreMissingValues }));
         }
     }
     /**
@@ -2195,7 +2241,7 @@
             case core.PropertyType.UsageContext:
                 return (React.createElement(BackboneElementInput, { typeName: propertyType, defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
             default:
-                return (React.createElement(BackboneElementInput, { typeName: core.buildTypeName(property.path?.split('.')), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
+                return (React.createElement(BackboneElementInput, { typeName: core.getElementDefinitionTypeName(property), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
         }
     }
     function getTargetTypes(property) {
@@ -2753,7 +2799,7 @@
         const resource = useResource(props.value);
         const [history, setHistory] = React.useState();
         const [items, setItems] = React.useState([]);
-        const buildSearchRequests = props.buildSearchRequests;
+        const loadTimelineResources = props.loadTimelineResources;
         const itemsRef = React.useRef(items);
         itemsRef.current = items;
         const loadTimeline = React.useCallback(() => {
@@ -2762,8 +2808,8 @@
                 setHistory({});
                 return;
             }
-            medplum.executeBatch(buildSearchRequests(resource)).then(handleBatchResponse).catch(console.log);
-        }, [medplum, resource, buildSearchRequests]);
+            loadTimelineResources(medplum, resource).then(handleBatchResponse).catch(console.log);
+        }, [medplum, resource, loadTimelineResources]);
         React.useEffect(() => {
             loadTimeline();
         }, [loadTimeline]);
@@ -2771,29 +2817,24 @@
          * Handles a batch request response.
          * @param batchResponse The batch response.
          */
-        function handleBatchResponse(batchResponse) {
+        function handleBatchResponse(bundles) {
             const newItems = [];
-            if (batchResponse.entry) {
-                for (const batchEntry of batchResponse.entry) {
-                    const bundle = batchEntry.resource;
-                    if (!bundle) {
-                        // User may not have access to all resource types
-                        continue;
-                    }
-                    if (bundle.type === 'history') {
-                        setHistory(bundle);
-                    }
-                    if (bundle.entry) {
-                        for (const entry of bundle.entry) {
-                            if (entry.resource) {
-                                newItems.push(entry.resource);
-                            }
-                        }
+            for (const bundle of bundles) {
+                if (!bundle) {
+                    // User may not have access to all resource types
+                    continue;
+                }
+                if (bundle.type === 'history') {
+                    setHistory(bundle);
+                }
+                if (bundle.entry) {
+                    for (const entry of bundle.entry) {
+                        newItems.push(entry.resource);
                     }
                 }
-                sortByDateAndPriority(newItems);
-                newItems.reverse();
             }
+            sortByDateAndPriority(newItems);
+            newItems.reverse();
             setItems(newItems);
         }
         /**
@@ -2914,10 +2955,10 @@
                         React.createElement(AttachmentButton, { onUpload: createMedia, onUploadStart: onUploadStart, onUploadProgress: onUploadProgress }, (props) => (React.createElement(core$1.ActionIcon, { ...props, radius: "xl", color: "blue", variant: "filled" },
                             React.createElement(icons.IconCloudUpload, { size: 16 })))))))),
             items.map((item) => {
+                const key = `${item.resourceType}/${item.id}/${item.meta?.versionId}`;
                 if (item.resourceType === resource.resourceType && item.id === resource.id) {
-                    return (React.createElement(HistoryTimelineItem, { key: item.meta?.versionId, history: history, resource: item, onDetails: onVersionDetails }));
+                    return (React.createElement(HistoryTimelineItem, { key: key, history: history, resource: item, onDetails: onVersionDetails }));
                 }
-                const key = `${item.resourceType}/${item.id}`;
                 switch (item.resourceType) {
                     case 'AuditEvent':
                         return React.createElement(AuditEventTimelineItem, { key: key, resource: item, onDetails: onDetails });
@@ -3006,51 +3047,22 @@
     }
 
     function DefaultResourceTimeline(props) {
-        return (React.createElement(ResourceTimeline, { value: props.resource, buildSearchRequests: (resource) => ({
-                resourceType: 'Bundle',
-                type: 'batch',
-                entry: [
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `${core.getReferenceString(resource)}/_history`,
-                        },
-                    },
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `AuditEvent?entity=${core.getReferenceString(resource)}&_sort=-_lastUpdated`,
-                        },
-                    },
-                ],
-            }) }));
+        return (React.createElement(ResourceTimeline, { value: props.resource, loadTimelineResources: async (medplum, resource) => {
+                return Promise.all([
+                    medplum.readHistory(resource.resourceType, resource.id),
+                    medplum.search('AuditEvent', '_sort=-_lastUpdated&entity=' + core.getReferenceString(resource)),
+                ]);
+            } }));
     }
 
     function EncounterTimeline(props) {
-        return (React.createElement(ResourceTimeline, { value: props.encounter, buildSearchRequests: (resource) => ({
-                resourceType: 'Bundle',
-                type: 'batch',
-                entry: [
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `${core.getReferenceString(resource)}/_history`,
-                        },
-                    },
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `Communication?encounter=${core.getReferenceString(resource)}`,
-                        },
-                    },
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `Media?encounter=${core.getReferenceString(resource)}`,
-                        },
-                    },
-                ],
-            }), createCommunication: (resource, sender, text) => ({
+        return (React.createElement(ResourceTimeline, { value: props.encounter, loadTimelineResources: async (medplum, resource) => {
+                return Promise.all([
+                    medplum.readHistory('Encounter', resource.id),
+                    medplum.search('Communication', 'encounter=' + core.getReferenceString(resource)),
+                    medplum.search('Media', 'encounter=' + core.getReferenceString(resource)),
+                ]);
+            }, createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
                 status: 'completed',
                 encounter: core.createReference(resource),
@@ -4523,26 +4535,19 @@
     }
     const MemoizedFhirPathTable = React.memo(FhirPathTable);
 
-    const searches = [
-        '$/_history',
-        'Communication?subject=$',
-        'Device?patient=$',
-        'DeviceRequest?patient=$',
-        'DiagnosticReport?subject=$',
-        'Media?subject=$',
-        'ServiceRequest?subject=$',
-    ];
     function PatientTimeline(props) {
-        return (React.createElement(ResourceTimeline, { value: props.patient, buildSearchRequests: (resource) => ({
-                resourceType: 'Bundle',
-                type: 'batch',
-                entry: searches.map((search) => ({
-                    request: {
-                        method: 'GET',
-                        url: search.replaceAll('$', core.getReferenceString(resource)),
-                    },
-                })),
-            }), createCommunication: (resource, sender, text) => ({
+        const loadTimelineResources = React.useCallback((medplum, resource) => {
+            return Promise.all([
+                medplum.readHistory('Patient', resource.id),
+                medplum.search('Communication', 'subject=' + core.getReferenceString(resource)),
+                medplum.search('Device', 'patient=' + core.getReferenceString(resource)),
+                medplum.search('DeviceRequest', 'patient=' + core.getReferenceString(resource)),
+                medplum.search('DiagnosticReport', 'subject=' + core.getReferenceString(resource)),
+                medplum.search('Media', 'subject=' + core.getReferenceString(resource)),
+                medplum.search('ServiceRequest', 'subject=' + core.getReferenceString(resource)),
+            ]);
+        }, []);
+        return (React.createElement(ResourceTimeline, { value: props.patient, loadTimelineResources: loadTimelineResources, createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
                 status: 'completed',
                 subject: core.createReference(resource),
@@ -6129,36 +6134,14 @@
     }
 
     function ServiceRequestTimeline(props) {
-        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, buildSearchRequests: (resource) => ({
-                resourceType: 'Bundle',
-                type: 'batch',
-                entry: [
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `${core.getReferenceString(resource)}/_history`,
-                        },
-                    },
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `Communication?based-on=${core.getReferenceString(resource)}&_sort=-_lastUpdated`,
-                        },
-                    },
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `Media?_count=100&based-on=${core.getReferenceString(resource)}&_sort=-_lastUpdated`,
-                        },
-                    },
-                    {
-                        request: {
-                            method: 'GET',
-                            url: `DiagnosticReport?based-on=${core.getReferenceString(resource)}&_sort=-_lastUpdated`,
-                        },
-                    },
-                ],
-            }), createCommunication: (resource, sender, text) => ({
+        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, loadTimelineResources: async (medplum, resource) => {
+                return Promise.all([
+                    medplum.readHistory('ServiceRequest', resource.id),
+                    medplum.search('Communication', 'based-on=' + core.getReferenceString(resource)),
+                    medplum.search('Media', '_count=100&based-on=' + core.getReferenceString(resource)),
+                    medplum.search('DiagnosticReport', 'based-on=' + core.getReferenceString(resource)),
+                ]);
+            }, createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
                 status: 'completed',
                 basedOn: [core.createReference(resource)],