#69 Restore functionality of the SDC-IDE

.eslintrc.cjs

@@ -58,11 +58,6 @@ module.exports = {
                         group: 'external',
                         position: 'after',
                     },
-                    {
-                        pattern: 'fhir-react/**',
-                        group: 'external',
-                        position: 'after',
-                    },
                     {
                         pattern: 'shared/**',
                         group: 'internal',

.github/workflows/tests.yml

@@ -8,6 +8,8 @@ jobs:
             AIDBOX_LICENSE_ID_TESTS: ${{ secrets.AIDBOX_LICENSE_ID_TESTS }}
         steps:
         - uses: actions/checkout@v2
+          with:
+            submodules: true
         - uses: actions/setup-node@v3
           with:
             node-version: 20.7.0

shared/src/setupTests.ts

@@ -1,15 +1,15 @@
+import {
+    resetInstanceToken as resetFHIRInstanceToken,
+    setInstanceBaseURL as setFHIRInstanceBaseURL,
+} from 'web/src/services/fhir';
+
 import {
     axiosInstance,
     resetInstanceToken as resetAidboxInstanceToken,
     setInstanceBaseURL as setAidboxInstanceBaseURL,
 } from 'aidbox-react/lib/services/instance';
 import { withRootAccess } from 'aidbox-react/lib/utils/tests';
 
-import {
-    resetInstanceToken as resetFHIRInstanceToken,
-    setInstanceBaseURL as setFHIRInstanceBaseURL,
-} from 'fhir-react/lib/services/instance';
-
 beforeAll(async () => {
     setAidboxInstanceBaseURL('http://localhost:8181');
     setFHIRInstanceBaseURL('http://localhost:8181/fhir');

web/package.json

@@ -48,15 +48,13 @@
         "react": "18.2.0",
         "react-app-rewired": "^2.2.1",
         "react-dom": "18.2.0",
-        "react-final-form": "^6.5.9",
         "react-final-form-arrays": "^3.1.3",
         "react-final-form-listeners": "^1.0.3",
         "react-router-dom": "^6.15.0",
         "react-scripts": "5.0.1",
         "react-select": "^5.4.0",
         "react-toastify": "^9.0.5",
         "sass": "^1.50.0",
-        "sdc-qrf": "*",
         "shared": "0.0.2",
         "ts-jest": "^27.1.4",
         "vitest": "^0.33.0",

web/src/components/CodeEditor/ContextMenu/index.tsx

@@ -1,10 +1,9 @@
+import { RemoteData } from '@beda.software/remote-data';
 import { QuestionnaireResponse, Parameters, Questionnaire } from 'fhir/r4b';
 import { useRef } from 'react';
 import { ModalExpression } from 'web/src/components/ModalExpression';
 import { SourceQueryDebugModal } from 'web/src/components/SourceQueryDebugModal';
 
-import { RemoteData } from 'fhir-react/lib/libs/remoteData';
-
 import s from './ContextMenu.module.scss';
 import { useContextMenu } from './useContextMenu';
 import { useMenuActions } from './useMenuActions';

web/src/components/ModalExpression/hooks.ts

@@ -1,13 +1,13 @@
+import { useService } from '@beda.software/fhir-react';
+import { isSuccess } from '@beda.software/remote-data';
 import fhirpath from 'fhirpath';
 import yaml from 'js-yaml';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { extractParameterName } from 'web/src/components/ModalExpression/utils';
 import { ExpressionResultOutput } from 'web/src/containers/Main/types';
+import { service } from 'web/src/services/fhir';
 import YAML, { visitor } from 'yaml';
 
-import { useService } from '@beda.software/fhir-react';
-import { isSuccess } from '@beda.software/remote-data';
-import { service } from 'src/services/fhir';
 
 import { QuestionnaireResponse } from 'shared/src/contrib/aidbox';
 

web/src/components/ModalExpression/types.ts

@@ -1,7 +1,6 @@
+import { RemoteData } from '@beda.software/remote-data';
 import { QuestionnaireResponse, Parameters } from 'fhir/r4b';
 
-import { RemoteData } from 'fhir-react/lib/libs/remoteData';
-
 import { CursorPosition, ExpressionType } from '../CodeEditor/ContextMenu/types';
 
 export interface ModalExpressionProps {

web/src/components/QRFormWrapper/components/date.tsx

@@ -3,9 +3,6 @@ import {
     QuestionItemProps,
     useQuestionnaireResponseFormContext,
 } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf';
-// import moment from 'moment';
-
-// import { FHIRDateTimeFormat } from 'fhir-react/lib/utils/date';
 
 import { QuestionLabel } from './label';
 

web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx

@@ -1,8 +1,8 @@
+import { useFieldController } from '@beda.software/fhir-questionnaire';
 import { GroupItemProps } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf';
 import _ from 'lodash';
 import React from 'react';
-// eslint-disable-next-line import/named
-import { Field, FieldInputProps } from 'react-final-form';
+import { useWatch } from 'react-hook-form';
 
 import s from './RepeatableGroups.module.scss';
 import { QuestionItems } from '../../questionItems';
@@ -20,82 +20,65 @@ export function RepeatableGroups(props: RepeatableGroupsProps) {
     const baseFieldPath = [...parentPath, linkId];
     const fieldName = baseFieldPath.join('.');
 
-    return (
-        <Field name={fieldName}>
-            {({ input }) => {
-                const items =
-                    input.value.items && input.value.items.length
-                        ? input.value.items
-                        : required
-                        ? [{}]
-                        : [];
+    const { onChange } = useFieldController(baseFieldPath, questionItem);
+    const value = useWatch({ name: fieldName });
+    const items = value.items && value.items.length ? value.items : required ? [{}] : [];
+
+    const append = () => {
+        const existingItems = value.items || [];
+        const updatedInput = { items: [...existingItems, {}] };
+        onChange(updatedInput);
+    };
 
-                return (
-                    <div className={s.group}>
-                        {_.map(items, (_elem, index: number) => {
-                            if (!input.value.items[index]) {
-                                return null;
-                            }
+    const remove = (index: number) => {
+        const filteredArray = _.filter(value.items, (_val, valIndex: number) => valIndex !== index);
+        onChange({
+            items: [...filteredArray],
+        });
+    };
 
-                            return renderGroup ? (
-                                <React.Fragment key={`${fieldName}-${index}`}>
-                                    {renderGroup({
-                                        index,
-                                        input,
-                                        groupItem,
-                                    })}
-                                </React.Fragment>
-                            ) : (
-                                <RepeatableGroupDefault
-                                    key={index}
-                                    index={index}
-                                    groupItem={groupItem}
-                                    input={input}
-                                />
-                            );
+    return (
+        <div className={s.group}>
+            {_.map(items, (_elem, index: number) => {
+                return renderGroup ? (
+                    <React.Fragment key={`${fieldName}-${index}`}>
+                        {renderGroup({
+                            index,
+                            groupItem,
+                            remove: () => remove(index),
                         })}
-                        <div>
-                            <button
-                                className={s.addButton}
-                                onClick={() => {
-                                    const existingItems = input.value.items || [];
-                                    const updatedInput = { items: [...existingItems, {}] };
-                                    input.onChange(updatedInput);
-                                }}
-                            >
-                                {`+ Add another answer`}
-                            </button>
-                        </div>
-                    </div>
+                    </React.Fragment>
+                ) : (
+                    <RepeatableGroupDefault
+                        key={index}
+                        index={index}
+                        groupItem={groupItem}
+                        remove={() => remove(index)}
+                    />
                 );
-            }}
-        </Field>
+            })}
+            <div>
+                <button className={s.addButton} onClick={append}>
+                    + Add another answer
+                </button>
+            </div>
+        </div>
     );
 }
 
 interface RepeatableGroupProps {
     index: number;
-    input: FieldInputProps<any, HTMLElement>;
     groupItem: GroupItemProps;
+    remove: () => void;
 }
 
 function useRepeatableGroup(props: RepeatableGroupProps) {
-    const { index, input, groupItem } = props;
+    const { index, groupItem, remove } = props;
     const { parentPath, questionItem, context } = groupItem;
     const { linkId } = questionItem;
 
-    const onRemove = () => {
-        const filteredArray = _.filter(
-            input.value.items,
-            (_val, valIndex: number) => valIndex !== index,
-        );
-        input.onChange({
-            items: [...filteredArray],
-        });
-    };
-
     return {
-        onRemove,
+        onRemove: remove,
         parentPath: [...parentPath, linkId, 'items', index.toString()],
         context: context[0]!,
     };
@@ -131,7 +114,7 @@ export function RepeatableGroupRow(props: RepeatableGroupProps) {
             <QuestionItems questionItems={item!} parentPath={parentPath} context={context} />
             <div className={s.rowControls}>
                 <button onClick={onRemove} className={s.removeIconButton} type="button">
-                    +
+                    Remove
                 </button>
             </div>
         </div>

web/src/components/QRFormWrapper/components/reference/hooks.ts

@@ -2,13 +2,12 @@ import {
     parseFhirQueryExpression,
     QuestionItemProps,
 } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf';
+import { ResourcesMap } from '@beda.software/fhir-react';
+import { isSuccess, buildQueryParams } from '@beda.software/remote-data';
 import fhirpath from 'fhirpath';
 import { ActionMeta, MultiValue, SingleValue } from 'react-select';
 import { loadResourceOptions } from 'web/src/services/questionnaire';
 
-import { isSuccess, buildQueryParams } from '@beda.software/remote-data';
-import { ResourcesMap } from '@beda.software/fhir-react';
-
 import {
     QuestionnaireItemAnswerOption,
     QuestionnaireResponseItemAnswer,

web/src/components/QRFormWrapper/index.tsx

@@ -8,15 +8,14 @@ import {
     mapResponseToForm,
     toFirstClassExtension,
 } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf';
+import { formatError } from '@beda.software/fhir-react';
+import { sequenceMap } from '@beda.software/remote-data';
 import _ from 'lodash';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { RenderRemoteData } from 'web/src/components/RenderRemoteData';
 import { QRFormWrapperProps } from 'web/src/containers/Main/types';
 
-import { sequenceMap } from '@beda.software/remote-data';
-import { formatError } from '@beda.software/fhir-react';
-
 import { QuestionnaireResponse as FCEQuestionnaireResponse } from 'shared/src/contrib/aidbox';
 
 import {
@@ -51,6 +50,38 @@ export function QRFormWrapper({
         questionnaireResponseRD,
     });
 
+    const widgetsByQuestionType = useMemo(
+        () => ({
+            date: QuestionDate,
+            dateTime: QuestionDateTime,
+            string: QuestionString,
+            text: QuestionString,
+            choice: QuestionChoice,
+            boolean: QuestionBoolean,
+            display: QuestionDisplay,
+            decimal: QuestionDecimal,
+            reference: QuestionReference,
+            integer: QuestionInteger,
+        }),
+        [],
+    );
+
+    const widgetsByQuestionItemControl = useMemo(
+        () => ({
+            'inline-choice': QuestionChoice,
+        }),
+        [],
+    );
+
+    const widgetsByGroupQuestionItemControl = useMemo(
+        () => ({
+            col: Col,
+            row: Row,
+            gtable: GTable,
+        }),
+        [],
+    );
+
     return (
         <RenderRemoteData
             remoteData={remoteDataResult}
@@ -74,21 +105,8 @@ export function QRFormWrapper({
                             toFirstClassExtension(data.questionnaireRD),
                         ),
                     }}
-                    widgetsByQuestionType={{
-                        date: QuestionDate,
-                        dateTime: QuestionDateTime,
-                        string: QuestionString,
-                        text: QuestionString,
-                        choice: QuestionChoice,
-                        boolean: QuestionBoolean,
-                        display: QuestionDisplay,
-                        decimal: QuestionDecimal,
-                        reference: QuestionReference,
-                        integer: QuestionInteger,
-                    }}
-                    widgetsByQuestionItemControl={{
-                        'inline-choice': QuestionChoice,
-                    }}
+                    widgetsByQuestionType={widgetsByQuestionType}
+                    widgetsByQuestionItemControl={widgetsByQuestionItemControl}
                     onSubmit={(newFormData) => {
                         const firstClassExtension = toFirstClassExtension(
                             data.questionnaireResponseRD,
@@ -106,7 +124,7 @@ export function QRFormWrapper({
                         return Promise.resolve();
                     }}
                     groupItemComponent={Group}
-                    widgetsByGroupQuestionItemControl={{ col: Col, row: Row, gtable: GTable }}
+                    widgetsByGroupQuestionItemControl={widgetsByGroupQuestionItemControl}
                     FormWrapper={FormWrapper}
                 />
             )}

web/src/components/ResourceCodeDisplay/index.tsx

@@ -1,10 +1,9 @@
+import { RemoteData } from '@beda.software/remote-data';
 import { FhirResource } from 'fhir/r4b';
 import { memo } from 'react';
 import { CodeEditor } from 'web/src/components/CodeEditor';
 import { RenderRemoteData } from 'web/src/components/RenderRemoteData';
 
-import { RemoteData } from 'fhir-react/lib/libs/remoteData';
-
 interface ResourceDisplayBoxProps {
     resourceResponse: RemoteData<FhirResource>;
 }