fix incorrect enableWhenBehavior, some UI improvements (#65)

# fix incorrect `enableWhenBehavior`, some UI improvements

## ♻️ Current situation & Problem
- The editor currently does not add an `enableWhenBehavior` field to
questions with multiple `enableWhen` conditions, even though [the FHIR
spec requires
this](https://www.hl7.org/fhir/questionnaire-definitions.html#Questionnaire.item).
- Additionally, the UI would in this case say that the `any` behaviour
was selected (even though it wasn't; there was no selection).
- This is kinda bad, since ResearchKitOnFHIR defaults a missing
`enableWhenBehavior` to `all`, which is of course the opposite of what
you'd expect when the web UI said "any".
- (See #64 for a full
explanation.)
- The overlay displayed when editing questions always cuts off the
bottom 64 pixels of the question editor, which makes it difficult to
reach the buttons down there, or to even see that they exist


## ⚙️ Release Notes 
- fix incorrect default `enableWhenBehavior`
- improve question editing UI


## 📚 Documentation
n/a


## ✅ Testing
n/a


### Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

fixes #64

src/components/Drawer/Drawer.css

@@ -1,6 +1,6 @@
 .drawer {
     display: block;
-    height: 100%;
+    height: calc(100% - 64px);
     background: white;
     position: fixed;
     top: 64px;

src/components/EnableWhen/EnableBehavior.tsx

@@ -21,16 +21,13 @@ const EnableBehavior = ({ currentItem, dispatchUpdateItemEnableBehavior }: Props
                         ? QuestionnaireItemEnableBehaviorCodes.ALL
                         : QuestionnaireItemEnableBehaviorCodes.ANY
                 }
-                options={[
-                    {
-                        code: QuestionnaireItemEnableBehaviorCodes.ANY,
-                        display: t('At least one condition must be fulfilled'),
-                    },
-                    {
-                        code: QuestionnaireItemEnableBehaviorCodes.ALL,
-                        display: t('All conditions must be fulfilled'),
-                    },
-                ]}
+                options={[{
+                    code: QuestionnaireItemEnableBehaviorCodes.ALL,
+                    display: t('All conditions must be fulfilled')
+                }, {
+                    code: QuestionnaireItemEnableBehaviorCodes.ANY,
+                    display: t('At least one condition must be fulfilled')
+                }]}
                 name={`ew-behavior-${currentItem.linkId}`}
             />
         </div>

src/components/EnableWhen/EnableWhen.tsx

@@ -64,7 +64,13 @@ const EnableWhen = ({
 
     return (
         <div>
-            <p>{t('Set a condition for displaying this question:')}</p>
+            <p>{t('Define which conditions must be fulfilled for enabling this question.\nIf no conditions are defined, the question is always enabled.')}</p>
+            {enableWhen.length > 1 && (
+                <EnableBehavior
+                    currentItem={getItem(linkId)}
+                    dispatchUpdateItemEnableBehavior={dispatchUpdateItemEnableBehavior}
+                />
+            )}
             {enableWhen.map((x, index) => {
                 const conditionItem = getItem(x.question);
                 const hasValidationError = itemValidationErrors.some(
@@ -158,12 +164,6 @@ const EnableWhen = ({
                 icon="ion-plus-round"
                 title={t('Add a condition')}
             />
-            {enableWhen.length > 1 && (
-                <EnableBehavior
-                    currentItem={getItem(linkId)}
-                    dispatchUpdateItemEnableBehavior={dispatchUpdateItemEnableBehavior}
-                />
-            )}
             {enableWhen.length > 0 && (
                 <EnableWhenInfoBox
                     getItem={getItem}

src/components/Question/Question.css

@@ -1,6 +1,5 @@
 .question {
     background: white;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     border-radius: 8px;
     margin-bottom: 24px;
 }

src/store/treeStore/treeStore.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, Dispatch, useEffect, useReducer } from 'react';
 import produce from 'immer';
 
-import { Extension, QuestionnaireItem, ValueSet } from '../../types/fhir';
+import { Extension, QuestionnaireItem, QuestionnaireItemEnableBehaviorCodes, ValueSet } from '../../types/fhir';
 import {
     ADD_ITEM_CODE_ACTION,
     ADD_QUESTIONNAIRE_LANGUAGE_ACTION,
@@ -60,7 +60,7 @@ import {
 } from './treeActions';
 import { IQuestionnaireMetadata, IQuestionnaireMetadataType } from '../../types/IQuestionnaireMetadataType';
 import createUUID from '../../helpers/CreateUUID';
-import { IItemProperty, UseContextSystem } from '../../types/IQuestionnareItemType';
+import { IEnableWhen, IItemProperty, UseContextSystem } from '../../types/IQuestionnareItemType';
 import { INITIAL_LANGUAGE } from '../../helpers/LanguageHelper';
 import { isIgnorableItem } from '../../helpers/itemControl';
 import { createOptionReferenceExtensions } from '../../helpers/extensionHelper';
@@ -394,6 +394,21 @@ function updateItem(draft: TreeState, action: UpdateItemAction): void {
             ...createOptionReferenceExtensions,
         ];
     }
+
+    const isAnyOf = <T,>(val: T | undefined, ...options: (T | undefined)[]): boolean => {
+        return options.includes(val);
+    };
+
+    if (action.itemProperty === 'enableWhen') {
+        const numEntries = (action.itemValue as IEnableWhen[]).length;
+        if (numEntries <= 1) {
+            draft.qItems[action.linkId].enableBehavior = undefined;
+        } else if (numEntries > 1 &&
+            !isAnyOf(draft.qItems[action.linkId].enableBehavior, QuestionnaireItemEnableBehaviorCodes.ALL, QuestionnaireItemEnableBehaviorCodes.ANY)
+        ) {
+            draft.qItems[action.linkId].enableBehavior = QuestionnaireItemEnableBehaviorCodes.ALL;
+        }
+    }
 }
 
 function addItemCode(draft: TreeState, action: AddItemCodeAction): void {