Add multiple metadata options in questionnaire

- Remove stylelint from checker

.unimportedrc.json

@@ -8,6 +8,7 @@
         "#app/*": ["./src/App/*"],
         "#views/*": ["./src/views/*"],
         "#utils/*": ["./src/utils/*"],
+        "#types/*": ["./src/types/*"],
         "#redirects/*": ["./src/redirects/*"],
         "#contexts/*": ["./src/contexts/*"],
         "#components/*": ["./src/components/*"],

index.html

@@ -24,7 +24,7 @@
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link
-            href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;700;900;&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;700;900"
             rel="stylesheet"
         >
     </head>

src/App/Auth.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import { useContext } from 'react';
+import { PendingMessage } from '@the-deep/deep-ui';
 import { Navigate } from 'react-router-dom';
 import { isDefined } from '@togglecorp/fujs';
 import { gql, useQuery } from '@apollo/client';
@@ -40,7 +41,9 @@ function Auth(props: Props) {
 
     const { userDetails, setUser } = useContext(UserContext);
 
-    useQuery<MeQuery, MeQueryVariables>(
+    const {
+        loading,
+    } = useQuery<MeQuery, MeQueryVariables>(
         ME,
         {
             onCompleted: (response) => {
@@ -52,6 +55,12 @@ function Auth(props: Props) {
         },
     );
 
+    if (loading) {
+        return (
+            <PendingMessage />
+        );
+    }
+
     if (context.visibility === 'is-authenticated' && !userDetails) {
         return (
             <Navigate to="/login/" />

src/App/index.tsx

@@ -94,15 +94,11 @@ function App() {
         setUserDetails(undefined);
     }, []);
 
-    const setUser = useCallback((newUserDetails: UserDetails) => {
-        setUserDetails(newUserDetails);
-    }, []);
-
     const userContextValue = useMemo(() => ({
         userDetails,
-        setUser,
+        setUser: setUserDetails,
         removeUser,
-    }), [userDetails, setUser, removeUser]);
+    }), [userDetails, removeUser]);
 
     return (
         <ApolloProvider client={apolloClient}>

src/components/EditQuestionnaireModal/index.tsx

@@ -2,8 +2,10 @@ import { useCallback, useMemo } from 'react';
 import { isDefined, isNotDefined } from '@togglecorp/fujs';
 import { gql, useMutation, useQuery } from '@apollo/client';
 import {
-    Modal,
     Button,
+    Modal,
+    MultiSelectInput,
+    NumberInput,
     TextInput,
     useAlert,
 } from '@the-deep/deep-ui';
@@ -24,8 +26,13 @@ import {
     QuestionnaireDetailQuery,
     QuestionnaireDetailQueryVariables,
     QuestionnaireCreateInput,
+    QuestionnaireMetadataQuery,
+    QuestionnaireMetadataQueryVariables,
 } from '#generated/types';
-import MetaDataInputs from '#components/MetaDataInputs';
+import {
+    enumKeySelector,
+    enumLabelSelector,
+} from '#utils/common';
 
 import styles from './index.module.css';
 
@@ -78,19 +85,38 @@ const QUESTIONNAIRE_DETAIL = gql`
                     title
                     projectId
                     createdAt
-                    dataCollectionMethod
-                    dataCollectionMethodDisplay
-                    enumeratorSkill
-                    enumeratorSkillDisplay
-                    priorityLevelDisplay
-                    priorityLevel
+                    dataCollectionMethods
+                    dataCollectionMethodsDisplay
+                    enumeratorSkills
+                    enumeratorSkillsDisplay
+                    priorityLevels
+                    priorityLevelsDisplay
                     requiredDuration
                 }
             }
         }
     }
 `;
 
+const QUESTIONNAIRE_METADATA = gql`
+    query QuestionnaireMetadata {
+        enums {
+            QuestionnaireEnumeratorSkills {
+                key
+                label
+            }
+            QuestionnairePriorityLevels {
+                key
+                label
+            }
+            QuestionnaireDataCollectionMethods {
+                key
+                label
+            }
+        }
+    }
+`;
+
 type FormType = PartialForm<QuestionnaireCreateInput>;
 type FormSchema = ObjectSchema<FormType>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>;
@@ -101,9 +127,9 @@ const schema: FormSchema = {
             required: true,
             requiredValidation: requiredStringCondition,
         },
-        dataCollectionMethod: {},
-        enumeratorSkill: {},
-        priorityLevel: {},
+        dataCollectionMethods: {},
+        enumeratorSkills: {},
+        priorityLevels: {},
         requiredDuration: {},
     }),
 };
@@ -152,7 +178,14 @@ function EditQuestionnaireModal(props: Props) {
         setValue,
     } = useForm(schema, { value: initialValue });
 
-    const fieldError = getErrorObject(formError);
+    const error = getErrorObject(formError);
+
+    const {
+        data: metadataOptions,
+        loading: metadataOptionsPending,
+    } = useQuery<QuestionnaireMetadataQuery, QuestionnaireMetadataQueryVariables>(
+        QUESTIONNAIRE_METADATA,
+    );
 
     useQuery<QuestionnaireDetailQuery, QuestionnaireDetailQueryVariables>(
         QUESTIONNAIRE_DETAIL,
@@ -163,9 +196,9 @@ function EditQuestionnaireModal(props: Props) {
                 const questionnaireDetails = response?.private?.projectScope?.questionnaire;
                 setValue({
                     title: questionnaireDetails?.title,
-                    priorityLevel: questionnaireDetails?.priorityLevel,
-                    enumeratorSkill: questionnaireDetails?.enumeratorSkill,
-                    dataCollectionMethod: questionnaireDetails?.dataCollectionMethod,
+                    priorityLevels: questionnaireDetails?.priorityLevels,
+                    enumeratorSkills: questionnaireDetails?.enumeratorSkills,
+                    dataCollectionMethods: questionnaireDetails?.dataCollectionMethods,
                     requiredDuration: questionnaireDetails?.requiredDuration,
                 });
             },
@@ -243,6 +276,10 @@ function EditQuestionnaireModal(props: Props) {
         },
     );
 
+    const priorityLevelOptions = metadataOptions?.enums.QuestionnairePriorityLevels;
+    const skillOptions = metadataOptions?.enums.QuestionnaireEnumeratorSkills;
+    const collectionMethodOptions = metadataOptions?.enums.QuestionnaireDataCollectionMethods;
+
     const handleSubmit = useCallback(() => {
         const handler = createSubmitHandler(
             validate,
@@ -303,15 +340,49 @@ function EditQuestionnaireModal(props: Props) {
                 label="Title"
                 placeholder="Questionnaire Title"
                 value={formValue?.title}
-                error={fieldError?.title}
+                error={error?.title}
                 onChange={setFieldValue}
                 autoFocus
             />
-
-            <MetaDataInputs
+            <MultiSelectInput
+                name="priorityLevels"
+                value={formValue?.priorityLevels}
+                onChange={setFieldValue}
+                error={error?.priorityLevels}
+                label="Priority Levels"
+                options={priorityLevelOptions}
+                keySelector={enumKeySelector}
+                labelSelector={enumLabelSelector}
+                optionsPending={metadataOptionsPending}
+            />
+            <MultiSelectInput
+                name="dataCollectionMethods"
+                value={formValue?.dataCollectionMethods}
+                onChange={setFieldValue}
+                error={error?.dataCollectionMethods}
+                label="Data Collection Method"
+                options={collectionMethodOptions}
+                keySelector={enumKeySelector}
+                labelSelector={enumLabelSelector}
+                optionsPending={metadataOptionsPending}
+            />
+            <MultiSelectInput
+                name="enumeratorSkills"
+                value={formValue?.enumeratorSkills}
+                onChange={setFieldValue}
+                error={error?.enumeratorSkills}
+                label="Enumerator Skills"
+                options={skillOptions}
+                keySelector={enumKeySelector}
+                labelSelector={enumLabelSelector}
+                optionsPending={metadataOptionsPending}
+            />
+            <NumberInput
+                label="Maximum duration (in seconds)"
+                name="requiredDuration"
+                value={formValue?.requiredDuration}
+                error={error?.requiredDuration}
                 onChange={setFieldValue}
-                value={formValue}
-                error={fieldError}
             />
         </Modal>
     );

src/components/MetaDataInputs/index.tsx

@@ -23,17 +23,17 @@ import {
 } from '#utils/common';
 
 const METADATA_OPTIONS = gql`
-    query MetaDataOptions{
+    query MetaDataOptions {
         enums {
-            QuestionnaireEnumeratorSkill {
+            QuestionnaireEnumeratorSkills {
                 key
                 label
             }
-            QuestionnairePriorityLevel {
+            QuestionnairePriorityLevels {
                 key
                 label
             }
-            QuestionnaireDataCollectionMethod {
+            QuestionnaireDataCollectionMethods {
                 key
                 label
             }
@@ -74,11 +74,11 @@ function MetaDataInputs(props: Props) {
 
     const error = getErrorObject(riskyError);
 
-    const priorityLevelOptions = metaDataOptions?.enums.QuestionnairePriorityLevel;
+    const priorityLevelOptions = metaDataOptions?.enums.QuestionnairePriorityLevels;
 
-    const skillOptions = metaDataOptions?.enums.QuestionnaireEnumeratorSkill;
+    const skillOptions = metaDataOptions?.enums.QuestionnaireEnumeratorSkills;
 
-    const collectionMethodOptions = metaDataOptions?.enums.QuestionnaireDataCollectionMethod;
+    const collectionMethodOptions = metaDataOptions?.enums.QuestionnaireDataCollectionMethods;
 
     return (
         <>
@@ -120,7 +120,7 @@ function MetaDataInputs(props: Props) {
             />
             <NumberInput
                 className={className}
-                label="Maximum duration (in minutes)"
+                label="Maximum duration (in seconds)"
                 name="requiredDuration"
                 value={value?.requiredDuration}
                 error={error?.requiredDuration}

src/components/Navbar/index.module.css

@@ -1,6 +1,7 @@
 .navbar {
-    --height-navbar: 4rem;
+    --height-navbar: 3.6rem;
     display: flex;
+    flex-shrink: 0;
     background-color: var(--dui-color-secondary);
     padding: var(--dui-spacing-medium) var(--dui-spacing-super-large);
     padding-top: 0;
@@ -9,6 +10,7 @@
 
     .logo-container {
         display: flex;
+        align-self: center;
         flex-shrink: 0;
         padding: var(--dui-spacing-small);
         padding-bottom: 0;

src/components/Navbar/index.tsx

@@ -131,7 +131,6 @@ function Navbar(props: Props) {
                     >
                         About
                     </NavLink>
-
                 </div>
                 <div className={styles.actions}>
                     <DropdownMenu

src/components/SubNavbar/index.module.css

@@ -1,12 +1,15 @@
 .sub-navbar {
-    --height-navbar: 4rem;
+    --height-navbar: 3.6rem;
     display: flex;
+    flex-shrink: 0;
     background-color: var(--dui-color-secondary);
     padding: var(--dui-spacing-medium) var(--dui-spacing-super-large);
     height: var(--height-navbar);
+    gap: var(--dui-spacing-large);
 
     .logo-container {
         display: flex;
+        align-self: center;
         flex-shrink: 0;
 
         .logo {
@@ -18,7 +21,6 @@
         display: flex;
         align-self: center;
         flex-grow: 1;
-        padding-left: calc(20rem - 4rem);
     }
 
     .right {