Merge remote-tracking branch 'upstream/main'

package.json

@@ -24,6 +24,7 @@
     "@mantine/form": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mantine/modals": "^7.10.1",
+    "@mantine/notifications": "^7.12.0",
     "@quentinroy/latin-square": "^1.1.1",
     "@reduxjs/toolkit": "^2.2.5",
     "@tabler/icons-react": "^3.5.0",

public/global.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.1/src/parser/GlobalConfigSchema.json",
+    "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.2/src/parser/GlobalConfigSchema.json",
     "configsList": [
         "Upset-Alttext-User-Survey",
         "test-randomization",

public/test-parser-errors/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.1/src/parser/StudyConfigSchema.json",
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.2/src/parser/StudyConfigSchema.json",
   "studyMetadata": {
     "title": "Test for parser errors",
     "version": "pilot",

public/test-randomization/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.1/src/parser/StudyConfigSchema.json",
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.2/src/parser/StudyConfigSchema.json",
   "studyMetadata": {
     "title": "Using Randomization",
     "description": "This is a test study to check the functionality of the reVISit sequence generator. This study is not meant to be used for any real data collection.",

src/Login.tsx

@@ -1,5 +1,5 @@
 import {
-  Badge, Button, Card, Text, Container, Flex, Image, LoadingOverlay,
+  Button, Card, Text, Container, Flex, Image, LoadingOverlay,
 } from '@mantine/core';
 import { useState, useEffect } from 'react';
 import {
@@ -12,19 +12,18 @@ import { useAuth } from './store/hooks/useAuth';
 import { useStorageEngine } from './storage/storageEngineHooks';
 import { FirebaseStorageEngine } from './storage/engines/FirebaseStorageEngine';
 import { StorageEngine } from './storage/engines/StorageEngine';
+import { showNotification } from './utils/notifications';
 
-export async function signInWithGoogle(storageEngine: StorageEngine | undefined, setLoading: (val: boolean) => void, setErrorMessage?: (val: string) => void) {
+export async function signInWithGoogle(storageEngine: StorageEngine | undefined, setLoading: (val: boolean) => void) {
   if (storageEngine instanceof FirebaseStorageEngine) {
     setLoading(true);
     const provider = new GoogleAuthProvider();
     const auth = getAuth();
     try {
       await signInWithPopup(auth, provider, browserPopupRedirectResolver);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      if (setErrorMessage) {
-        setErrorMessage(error.message);
-      }
+      showNotification({ title: 'Error', message: error.message, color: 'red' });
     } finally {
       setLoading(false);
     }
@@ -35,13 +34,12 @@ export async function signInWithGoogle(storageEngine: StorageEngine | undefined,
 
 export function Login() {
   const { user } = useAuth();
-  const [errorMessage, setErrorMessage] = useState<string|null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const { storageEngine } = useStorageEngine();
 
   useEffect(() => {
     if (!user.determiningStatus && !user.isAdmin && user.adminVerification) {
-      setErrorMessage('You are not authorized to use this application.');
+      showNotification({ title: 'Unauthorized', message: 'You are not authorized to use this application.', color: 'red' });
     }
   }, [user.adminVerification]);
 
@@ -56,9 +54,8 @@ export function Login() {
           <Image maw={200} mt={50} mb={100} src={`${PREFIX}revisitAssets/revisitLogoSquare.svg`} alt="Revisit Logo" />
           <>
             <Text mb={20}>To access admin settings, please sign in using your Google account.</Text>
-            <Button onClick={() => signInWithGoogle(storageEngine, setLoading, setErrorMessage)} leftSection={<IconBrandGoogleFilled />} variant="filled">Sign In With Google</Button>
+            <Button onClick={() => signInWithGoogle(storageEngine, setLoading)} leftSection={<IconBrandGoogleFilled />} variant="filled">Sign In With Google</Button>
           </>
-          {errorMessage ? <Badge size="lg" color="red" mt={30}>{errorMessage}</Badge> : null}
           <LoadingOverlay visible={loading} />
         </Flex>
       </Card>

src/analysis/dashboard/StudyCard.tsx

@@ -1,16 +1,17 @@
 import {
-  Box, Button, Card, Center, Text, Title, Container, Flex, Group, Popover,
+  Box, Button, Card, Center, Text, Title, Container, Flex, Group, Tooltip,
 } from '@mantine/core';
 import React, { useMemo, useState } from 'react';
 import { IconChartHistogram } from '@tabler/icons-react';
 import { DatePickerInput } from '@mantine/dates';
 import { VegaLite } from 'react-vega';
-import { useDisclosure, useResizeObserver } from '@mantine/hooks';
+import { useResizeObserver } from '@mantine/hooks';
 import { useNavigate } from 'react-router-dom';
 import { ParticipantData } from '../../storage/types';
 import { StoredAnswer } from '../../parser/types';
 import { DownloadButtons } from '../../components/downloader/DownloadButtons';
 import { ParticipantStatusBadges } from '../interface/ParticipantStatusBadges';
+import { PREFIX } from '../../utils/Prefix';
 
 function isWithinRange(answers: Record<string, StoredAnswer>, rangeTime: [Date | null, Date | null]) {
   const timeStamps = Object.values(answers).map((ans) => [ans.startTime, ans.endTime]).flat();
@@ -75,8 +76,6 @@ export function StudyCard({ studyId, allParticipants }: { studyId: string; allPa
     data: { values: completedStatsData },
   }), [dms.width, rangeTime, completedStatsData]);
 
-  const [checkOpened, { close: closeCheck, open: openCheck }] = useDisclosure(false);
-
   return (
     <Container>
       <Card ref={ref} padding="lg" shadow="md" withBorder>
@@ -87,24 +86,16 @@ export function StudyCard({ studyId, allParticipants }: { studyId: string; allPa
           </Flex>
           <Group>
             <DownloadButtons allParticipants={allParticipants} studyId={studyId} />
-
-            <Popover opened={checkOpened}>
-              <Popover.Target>
-                <Button
-                  onClick={(event) => { if (!event.ctrlKey && !event.metaKey) { event.preventDefault(); navigate(`/analysis/stats/${studyId}`); } }}
-                  onMouseEnter={openCheck}
-                  onMouseLeave={closeCheck}
-                  px={4}
-                  component="a"
-                  href={`/analysis/stats/${studyId}`}
-                >
-                  <IconChartHistogram />
-                </Button>
-              </Popover.Target>
-              <Popover.Dropdown>
-                <Text>Analyze and manage study data</Text>
-              </Popover.Dropdown>
-            </Popover>
+            <Tooltip label="Analyze and manage study data">
+              <Button
+                onClick={(event) => { if (!event.ctrlKey && !event.metaKey) { event.preventDefault(); navigate(`/analysis/stats/${studyId}`); } }}
+                px={4}
+                component="a"
+                href={`${PREFIX}analysis/stats/${studyId}`}
+              >
+                <IconChartHistogram />
+              </Button>
+            </Tooltip>
           </Group>
         </Flex>
 

src/analysis/individualStudy/StudyAnalysisTabs.tsx

@@ -60,7 +60,7 @@ export function StudyAnalysisTabs({ globalConfig }: { globalConfig: GlobalConfig
       <AppHeader studyIds={globalConfig.configsList} />
 
       <AppShell.Main>
-        <Container fluid style={{ height: '100%' }}>
+        <Container fluid style={{ height: '100%', position: 'relative' }}>
           <LoadingOverlay visible={loading} />
 
           <Flex direction="row" align="center">