Feature/questions order

package.json

@@ -17,7 +17,8 @@
         "lint:css": "stylelint ./src/**/*.css",
         "lint:unused": "unimported",
         "test": "vitest",
-        "test:coverage": "vitest run --coverage"
+        "test:coverage": "vitest run --coverage",
+        "postinstall": "patch-package"
     },
     "dependencies": {
         "@apollo/client": "^3.7.15",
@@ -75,7 +76,7 @@
         "vite": "^4.3.2",
         "vite-plugin-checker": "^0.6.0",
         "vite-plugin-compression2": "^0.9.1",
-        "vite-plugin-webfont-dl": "^3.7.4",
+        "vite-plugin-webfont-dl": "^3.7.6",
         "vite-tsconfig-paths": "^4.2.0",
         "vitest": "^0.31.0"
     }

src/components/EditQuestionnaireModal/index.tsx

@@ -5,8 +5,6 @@ import {
     Modal,
     Button,
     TextInput,
-    SelectInput,
-    NumberInput,
     useAlert,
 } from '@the-deep/deep-ui';
 import {
@@ -26,18 +24,8 @@ import {
     QuestionnaireDetailQuery,
     QuestionnaireDetailQueryVariables,
     QuestionnaireCreateInput,
-    QuestionnaireMetadataQuery,
-    QuestionnaireMetadataQueryVariables,
-    QuestionnairePriorityLevelTypeEnum,
-    QuestionnaireEnumeratorSkillTypeEnum,
-    QuestionnaireDataCollectionMethodTypeEnum,
 } from '#generated/types';
-
-import {
-    EnumOptions,
-    enumKeySelector,
-    enumLabelSelector,
-} from '#utils/common';
+import MetaDataInputs from '#components/MetaDataInputs';
 
 import styles from './index.module.css';
 
@@ -103,29 +91,6 @@ const QUESTIONNAIRE_DETAIL = gql`
     }
 `;
 
-const QUESTIONNAIRE_METADATA = gql`
-    query QuestionnaireMetadata {
-        questionnairePriorityLevelTypeOptions: __type(name: "QuestionnairePriorityLevelTypeEnum") {
-            enumValues {
-                name
-                description
-            }
-        }
-        questionnaireEnumeratorSkillTypeOptions: __type(name: "QuestionnaireEnumeratorSkillTypeEnum") {
-            enumValues {
-                name
-                description
-            }
-        }
-        questionnaireDataCollectionMethodTypeOptions: __type(name: "QuestionnaireDataCollectionMethodTypeEnum") {
-            enumValues {
-                name
-                description
-            }
-        }
-    }
-`;
-
 type FormType = PartialForm<QuestionnaireCreateInput>;
 type FormSchema = ObjectSchema<FormType>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>;
@@ -207,19 +172,6 @@ function EditQuestionnaireModal(props: Props) {
         },
     );
 
-    const {
-        data: metadataResponse,
-    } = useQuery<QuestionnaireMetadataQuery, QuestionnaireMetadataQueryVariables>(
-        QUESTIONNAIRE_METADATA,
-    );
-
-    const priorityLevelOptions = metadataResponse
-        ?.questionnairePriorityLevelTypeOptions?.enumValues;
-    const enumeratorSkillOptions = metadataResponse
-        ?.questionnaireEnumeratorSkillTypeOptions?.enumValues;
-    const dataCollectionMethods = metadataResponse
-        ?.questionnaireDataCollectionMethodTypeOptions?.enumValues;
-
     const [
         triggerQuestionnaireCreate,
         { loading: questionnaireCreatePending },
@@ -355,46 +307,11 @@ function EditQuestionnaireModal(props: Props) {
                 onChange={setFieldValue}
                 autoFocus
             />
-            <SelectInput
-                name="priorityLevel"
-                label="Priority Level"
-                onChange={setFieldValue}
-                value={formValue?.priorityLevel}
-                error={fieldError?.priorityLevel}
-                options={priorityLevelOptions as EnumOptions<QuestionnairePriorityLevelTypeEnum>}
-                keySelector={enumKeySelector}
-                labelSelector={enumLabelSelector}
-            />
-            <SelectInput
-                name="enumeratorSkill"
-                label="Enumerator Skill"
-                onChange={setFieldValue}
-                value={formValue?.enumeratorSkill}
-                error={fieldError?.enumeratorSkill}
-                options={
-                    enumeratorSkillOptions as EnumOptions<QuestionnaireEnumeratorSkillTypeEnum>
-                }
-                keySelector={enumKeySelector}
-                labelSelector={enumLabelSelector}
-            />
-            <SelectInput
-                name="dataCollectionMethod"
-                label="Data Collection Method"
-                onChange={setFieldValue}
-                value={formValue?.dataCollectionMethod}
-                error={fieldError?.dataCollectionMethod}
-                options={
-                    dataCollectionMethods as EnumOptions<QuestionnaireDataCollectionMethodTypeEnum>
-                }
-                keySelector={enumKeySelector}
-                labelSelector={enumLabelSelector}
-            />
-            <NumberInput
-                name="requiredDuration"
-                label="Maximum Duration (in minutes)"
+
+            <MetaDataInputs
                 onChange={setFieldValue}
-                value={formValue?.requiredDuration}
-                error={fieldError?.requiredDuration}
+                value={formValue}
+                error={fieldError}
             />
         </Modal>
     );

src/components/MetaDataInputs/index.tsx

@@ -0,0 +1,144 @@
+import {
+    SelectInput,
+    NumberInput,
+} from '@the-deep/deep-ui';
+import { gql, useQuery } from '@apollo/client';
+import {
+    type Error,
+    getErrorObject,
+    type PartialForm,
+    type EntriesAsList,
+} from '@togglecorp/toggle-form';
+
+import {
+    MetaDataOptionsQuery,
+    MetaDataOptionsQueryVariables,
+    QuestionnairePriorityLevelTypeEnum,
+    QuestionnaireDataCollectionMethodTypeEnum,
+    QuestionnaireEnumeratorSkillTypeEnum,
+} from '#generated/types';
+import {
+    enumKeySelector,
+    EnumOptions,
+    enumLabelSelector,
+} from '#utils/common';
+
+const METADATA_OPTIONS = gql`
+    query MetaDataOptions{
+        questionnairePriorityLevelTypeOptions: __type(name: "QuestionnairePriorityLevelTypeEnum") {
+            enumValues {
+                name
+                description
+            }
+        }
+        questionnaireEnumeratorSkillTypeOptions: __type(name: "QuestionnaireEnumeratorSkillTypeEnum") {
+            enumValues {
+                name
+                description
+            }
+        }
+        questionnaireDataCollectionMethodTypeOptions: __type(name: "QuestionnaireDataCollectionMethodTypeEnum") {
+            enumValues {
+                name
+                description
+            }
+        }
+    }
+`;
+
+type Input = {
+    priorityLevel: QuestionnairePriorityLevelTypeEnum | undefined | null;
+    enumeratorSkill: QuestionnaireEnumeratorSkillTypeEnum| undefined | null;
+    dataCollectionMethod: QuestionnaireDataCollectionMethodTypeEnum| undefined | null;
+    requiredDuration: number | undefined | null;
+};
+
+type FormType = PartialForm<Input>;
+
+interface Props {
+    className?: string;
+    value: FormType | undefined;
+    error?: Error<FormType>;
+    onChange: (...entries: EntriesAsList<FormType>) => void;
+}
+
+function MetaDataInputs(props: Props) {
+    const {
+        className,
+        value,
+        error: riskyError,
+        onChange,
+    } = props;
+
+    const {
+        data: metaDataOptions,
+        loading: metaDataOptionsPending,
+    } = useQuery<MetaDataOptionsQuery, MetaDataOptionsQueryVariables>(
+        METADATA_OPTIONS,
+    );
+
+    const error = getErrorObject(riskyError);
+
+    const priorityLevelOptions = metaDataOptions
+        ?.questionnairePriorityLevelTypeOptions
+        ?.enumValues as EnumOptions<QuestionnairePriorityLevelTypeEnum>;
+
+    const skillOptions = metaDataOptions
+        ?.questionnaireEnumeratorSkillTypeOptions
+        ?.enumValues as EnumOptions<QuestionnaireEnumeratorSkillTypeEnum>;
+
+    const collectionMethodOptions = metaDataOptions
+        ?.questionnaireDataCollectionMethodTypeOptions
+        ?.enumValues as EnumOptions<QuestionnaireDataCollectionMethodTypeEnum>;
+
+    return (
+        <>
+            <SelectInput
+                className={className}
+                name="priorityLevel"
+                value={value?.priorityLevel}
+                onChange={onChange}
+                error={error?.priorityLevel}
+                label="Priority Levels"
+                options={priorityLevelOptions}
+                keySelector={enumKeySelector}
+                labelSelector={enumLabelSelector}
+                optionsPending={metaDataOptionsPending}
+            />
+            <SelectInput
+                className={className}
+                name="dataCollectionMethod"
+                value={value?.dataCollectionMethod}
+                onChange={onChange}
+                error={error?.dataCollectionMethod}
+                label="Data Collection Method"
+                options={collectionMethodOptions}
+                keySelector={enumKeySelector}
+                labelSelector={enumLabelSelector}
+                optionsPending={metaDataOptionsPending}
+            />
+            <SelectInput
+                className={className}
+                name="enumeratorSkill"
+                value={value?.enumeratorSkill}
+                onChange={onChange}
+                error={error?.enumeratorSkill}
+                label="Enumerator Skills"
+                options={skillOptions}
+                keySelector={enumKeySelector}
+                labelSelector={enumLabelSelector}
+                optionsPending={metaDataOptionsPending}
+            />
+            <NumberInput
+                className={className}
+                label="Maximum duration (in minutes)"
+                name="requiredDuration"
+                value={value?.requiredDuration}
+                error={error?.requiredDuration}
+                onChange={onChange}
+            />
+        </>
+    );
+}
+
+export default MetaDataInputs;

src/components/ProjectMembershipEditModal/index.tsx

@@ -26,17 +26,15 @@ import {
     UpdateMembershipMutationVariables,
     ProjectMembershipRoleTypeEnum,
 } from '#generated/types';
+import {
+    EnumOptions,
+    enumKeySelector,
+    enumLabelSelector,
+} from '#utils/common';
 
 import styles from './index.module.css';
 
-type EnumList<T extends string> = {
-    name: T;
-    description: string | null | undefined;
-}[];
-
-type ProjectMembershipRoleOptions = EnumList<ProjectMembershipRoleTypeEnum>;
-
-type ProjectMembershipRoleOption = ProjectMembershipRoleOptions[number];
+type ProjectMembershipRoleOptions = EnumOptions<ProjectMembershipRoleTypeEnum>;
 
 const UPDATE_MEMBERSHIP = gql`
     mutation UpdateMembership(
@@ -81,9 +79,6 @@ const ROLES = gql`
     }
 `;
 
-const roleKeySelector = (r: ProjectMembershipRoleOption) => r.name;
-const roleLabelSelector = (r: ProjectMembershipRoleOption) => r.description || r.name;
-
 export type Member = NonNullable<NonNullable<NonNullable<NonNullable<NonNullable<NonNullable<MembershipsQuery['private']>['projectScope']>['project']>['members']>['items']>[number]>;
 
 type FormType = PartialForm<ProjectMembershipUpdateInput>;
@@ -260,10 +255,10 @@ function ProjectMembershipEditModal(props: MembershipProps) {
                     className={styles.input}
                     options={(
                         roles?.projectMembershipRoleTypeOptions?.enumValues as
-                        ProjectMembershipRoleOptions | null | undefined
+                        ProjectMembershipRoleOptions
                     )}
-                    keySelector={roleKeySelector}
-                    labelSelector={roleLabelSelector}
+                    keySelector={enumKeySelector}
+                    labelSelector={enumLabelSelector}
                     value={formValue.role}
                     error={fieldError?.role}
                     onChange={setFieldValue}

src/utils/common.ts

@@ -1,4 +1,6 @@
-import { capitalize } from '@togglecorp/fujs';
+import {
+    capitalize,
+} from '@togglecorp/fujs';
 
 // eslint-disable-next-line import/prefer-default-export
 export function flatten<A, K>(

src/views/Home/QuestionnaireItem/index.tsx

@@ -391,7 +391,7 @@ function QuestionnaireItem(props: Props) {
                             Edit questions
                         </DropdownMenuItem>
                         <DropdownMenuItem
-                            name={questionnaireItem.id}
+                            name={undefined}
                             onClick={handleQuestionnaireExport}
                         >
                             Export Questionnaire