feat: finish implementing experimental features

Author: joshunrau

apps/web/src/features/admin/components/AppSettingsForm.tsx

@@ -0,0 +1,34 @@
+import { Form } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import type { SetupState, UpdateSetupStateData } from '@opendatacapture/schemas/setup';
+import type { Promisable, SetNonNullable } from 'type-fest';
+import { z } from 'zod';
+
+export type AppSettingsFormProps = {
+  initialValues: SetupState;
+  onSubmit: (data: UpdateSetupStateData) => Promisable<any>;
+};
+
+export const AppSettingsForm = ({ initialValues, onSubmit }: AppSettingsFormProps) => {
+  const { t } = useTranslation();
+  return (
+    <Form
+      className="mx-auto max-w-3xl"
+      content={{
+        isExperimentalFeaturesEnabled: {
+          kind: 'boolean',
+          label: t('setup.enableExperimentalFeatures'),
+          variant: 'radio'
+        }
+      }}
+      initialValues={initialValues}
+      preventResetValuesOnReset={true}
+      validationSchema={
+        z.object({
+          isExperimentalFeaturesEnabled: z.boolean()
+        }) satisfies z.ZodType<SetNonNullable<UpdateSetupStateData>>
+      }
+      onSubmit={(data) => void onSubmit(data)}
+    />
+  );
+};

apps/web/src/features/admin/hooks/useUpdateSetupStateMutation.ts

@@ -0,0 +1,16 @@
+import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import type { UpdateSetupStateData } from '@opendatacapture/schemas/setup';
+import { useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function useUpdateSetupStateMutation() {
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  return useMutation({
+    mutationFn: async (data: UpdateSetupStateData) => {
+      await axios.patch('/v1/setup', data);
+    },
+    onSuccess() {
+      addNotification({ type: 'success' });
+    }
+  });
+}

apps/web/src/features/admin/index.tsx

@@ -2,7 +2,7 @@
 
 import type { RouteObject } from 'react-router-dom';
 
-import { AdminSettingsPage } from './pages/AdminSettingsPage';
+import { AppSettingsPage } from './pages/AppSettingsPage';
 import { CreateGroupPage } from './pages/CreateGroupPage';
 import { CreateUserPage } from './pages/CreateUserPage';
 import { ManageGroupsPage } from './pages/ManageGroupsPage';
@@ -39,7 +39,7 @@ export const adminRoute: RouteObject = {
     },
     {
       path: 'settings',
-      element: <AdminSettingsPage />
+      element: <AppSettingsPage />
     }
   ]
 };

apps/web/src/features/admin/pages/AdminSettingsPage.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Heading } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import type { UpdateSetupStateData } from '@opendatacapture/schemas/setup';
+
+import { PageHeader } from '@/components/PageHeader';
+import { useSetupState } from '@/hooks/useSetupState';
+
+import { AppSettingsForm } from '../components/AppSettingsForm';
+import { useUpdateSetupStateMutation } from '../hooks/useUpdateSetupStateMutation';
+
+export const AppSettingsPage = () => {
+  const { t } = useTranslation();
+  const setupState = useSetupState();
+  const updateSetupStateMutation = useUpdateSetupStateMutation();
+
+  const handleSubmit = (data: UpdateSetupStateData) => {
+    updateSetupStateMutation.mutate(data);
+  };
+
+  return (
+    <React.Fragment>
+      <PageHeader>
+        <Heading className="text-center" variant="h2">
+          {t({
+            en: 'Modify Application Settings',
+            fr: "Modifier les paramètres de l'application"
+          })}
+        </Heading>
+      </PageHeader>
+      {setupState.data && <AppSettingsForm initialValues={setupState.data} onSubmit={handleSubmit} />}
+    </React.Fragment>
+  );
+};

apps/web/src/features/admin/pages/AppSettingsPage.tsx

@@ -68,10 +68,7 @@ export const SetupPage = ({ onSubmit }: SetupPageProps) => {
                 fields: {
                   enableExperimentalFeatures: {
                     kind: 'boolean',
-                    label: t({
-                      en: 'Enable Experimental Features',
-                      fr: 'Activer les fonctionnalités expérimentales'
-                    }),
+                    label: t('setup.enableExperimentalFeatures'),
                     variant: 'radio'
                   },
                   initDemo: {
@@ -116,6 +113,9 @@ export const SetupPage = ({ onSubmit }: SetupPageProps) => {
               }
             ]}
             data-cy="setup-form"
+            initialValues={{
+              enableExperimentalFeatures: false
+            }}
             submitBtnLabel={t('core.submit')}
             validationSchema={z.object({
               firstName: z.string().min(1),

apps/web/src/features/setup/pages/SetupPage/SetupPage.tsx

@@ -39,6 +39,10 @@
       "fr": "Démonstration"
     }
   },
+  "enableExperimentalFeatures": {
+    "en": "Enable Experimental Features (Not Recommended)",
+    "fr": "Activer les fonctionnalités expérimentales (Non recommandé)"
+  },
   "loadingSubtitle": {
     "en": "Please be patient, this may take a while...",
     "fr": "Veuillez patienter, cela peut prendre un certain temps..."