Merge pull request #301 from openstax/upgrade-mantine

Upgrade mantine

frontend/package.json

@@ -25,9 +25,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.10.0",
     "@iconify-icons/mdi": "^1.2.47",
-    "@mantine/core": "^6.0.19",
-    "@mantine/hooks": "^6.0.19",
-    "@mantine/notifications": "^6.0.19",
+    "@mantine/core": "^7.1.0",
+    "@mantine/hooks": "^7.1.0",
+    "@mantine/notifications": "^7.1.0",
     "@nathanstitt/sundry": "^1.7.1",
     "@sentry/react": "^7.70.0",
     "@tabler/icons-react": "^2.35.0",

frontend/specs/helpers.ts

@@ -108,6 +108,7 @@ export const launchApprovedStudy = async(researcherPage: Page, studyId: number,
     await researcherPage.getByPlaceholder('Select a date').click()
     await researcherPage.locator('.open >> .today').click()
     await researcherPage.locator('.open >> .today').blur()
+    await researcherPage.fill('.flatpickr-hour', '12')
 
     await expect(researcherPage.locator('testId=launch-study-button')).toBeEnabled()
     await researcherPage.click('testId=launch-study-button')

frontend/specs/learner.spec.ts

@@ -103,6 +103,8 @@ test('launching study and completing with no consent', async ({ browser }) => {
     await interceptStudyLaunch(userPage)
 
     const studyId = await createStudy({ researcherPage, adminPage })
+    await researcherPage.waitForURL(`**/studies`)
+
     await goToPage({ page: userPage, path: `/studies/details/${studyId}` })
 
     // should have navigated
@@ -112,6 +114,8 @@ test('launching study and completing with no consent', async ({ browser }) => {
     await userPage.waitForLoadState('networkidle')
 
     await goToPage({ page: userPage, path: `/study/land/${studyId}?consent=false` })
+    await userPage.waitForLoadState('networkidle')
+
     await expect(userPage).not.toMatchText(/Points/)
     await expect(userPage).toMatchText(/Success!/g)
     // Our study is under "Learning"

frontend/src/components/confirm-navigation-if-dirty.tsx

@@ -19,7 +19,7 @@ export const ConfirmNavigationIfDirty = () => {
         <ReactRouterPrompt when={isDirty}>
             {({ isActive, onConfirm, onCancel }) => (
                 <Modal size='lg' centered zIndex={1040} opened={isActive} onClose={onCancel}>
-                    <Stack p='4rem' align='center' spacing='xl'>
+                    <Stack p='4rem' align='center' gap='xl'>
                         <Title order={6}>
                             Changes you made may not be saved.
                         </Title>

frontend/src/main.tsx

@@ -5,6 +5,7 @@ import { AppRoutes } from './routes'
 import './lib/sentry'
 import './index.css'
 import './styles/main.scss'
+import '@mantine/core/styles.css';
 import { mantineTheme } from '@theme'
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { MantineProvider } from '@mantine/core';
@@ -23,7 +24,7 @@ const App = () => (
     <React.StrictMode>
         <QueryClientProvider client={queryClient}>
             <EnvironmentProvider>
-                <MantineProvider withGlobalStyles withNormalizeCSS theme={mantineTheme}>
+                <MantineProvider theme={mantineTheme}>
                     <Notifications position='top-right' />
                     <ImpersonatingBanner />
                     <AppRoutes />

frontend/src/screens/admin/admin-reports.tsx

@@ -12,13 +12,19 @@ export function AdminReports() {
 }
 
 const LearnerActivity = () => {
-    const [monthsAgo, setMonthsAgo] = useState<number | ''>(1)
+    const [monthsAgo, setMonthsAgo] = useState<string | number>(1)
     return (
         <Center p='lg'>
             <Stack>
                 <Title order={6}>Learner Activity Report</Title>
                 <Group align='end'>
-                    <NumberInput label='Last N months for report' hideControls required defaultValue={1} value={monthsAgo} onChange={setMonthsAgo}/>
+                    <NumberInput label='Last N months for report'
+                        hideControls
+                        required
+                        defaultValue={1}
+                        value={monthsAgo}
+                        onChange={setMonthsAgo}
+                    />
                     <Button component='a' target='_blank' href={`${ENV.API_ADDRESS}/api/v1/admin/reports/learner-activity?months_ago=${monthsAgo}`}>
                         Generate Report
                     </Button>

frontend/src/screens/admin/impersonation.tsx

@@ -26,7 +26,7 @@ const ResearcherImpersonation = () => {
                 <Select
                     label='Select a researcher to impersonate'
                     searchable
-                    nothingFound='No results'
+                    nothingFoundMessage='No results'
                     onChange={(value) => {
                         if (!value) return setSelectedResearcher(null)
                         const researcher = researchers.find(r => r.id == +value)

frontend/src/screens/researcher/studies/dashboard/researcher-studies.tsx

@@ -75,7 +75,7 @@ export default function ResearcherStudies() {
                     color='blue'
                     data-testid="add-study"
                     onClick={() => nav('/study/create')}
-                    leftIcon={<IconPlus />}
+                    leftSection={<IconPlus />}
                 >
                     Create New Study
                 </Button>

frontend/src/screens/researcher/studies/overview/edit-submitted-study.tsx

@@ -2,7 +2,8 @@ import { Study } from '@api';
 import { useApi, useQueryParam } from '@lib';
 import { FormContext } from '@nathanstitt/sundry/form-hooks';
 import {
-    Col, ConfirmNavigationIfDirty,
+    Col,
+    ConfirmNavigationIfDirty,
     DateTime,
     DateTimeFormats,
     FieldErrorMessage,
@@ -147,7 +148,7 @@ const FormActions: FC<{study: Study}> = ({ study }) => {
     const { isValid, isDirty } = useFormState()
     const api = useApi()
     const [show, setShow] = useState(false)
-    const { getValues } = useFormContext()
+    const { getValues, reset } = useFormContext()
 
     if (isReadyForLaunch(study)) {
         return (
@@ -162,6 +163,7 @@ const FormActions: FC<{study: Study}> = ({ study }) => {
                                 study: getValues() as Study,
                                 statusAction: 'launch',
                             }).then(() => {
+                                reset(undefined, { keepValues: true, keepDirty: false });
                                 setShow(true)
                             })
                         }}

frontend/src/theme.ts

@@ -1,4 +1,4 @@
-import { DefaultMantineColor, MantineThemeOverride, Tuple } from '@mantine/core';
+import { createTheme, DefaultMantineColor, MantineColorsTuple } from '@mantine/core';
 
 // Color definitions in figma here:
 // https://www.figma.com/file/aoc0hf7t3uI7wu7ghxi625/LD-library--Desktop?type=design&node-id=1010-307&mode=design&t=vmlqtKSi8F2d0xrb-0
@@ -67,26 +67,25 @@ type ThemeT = typeof theme
 export type { ThemeT }
 
 type ExtendedCustomColors =
-    DefaultMantineColor |
     'osOrange' |
     'blue' |
     'purple' |
     'navy' |
     'white' |
-    'ash'
+    'ash' |
+    DefaultMantineColor
 
 declare module '@mantine/core' {
     export interface MantineThemeColorsOverride {
-        colors: Record<ExtendedCustomColors, Tuple<string, 10>>;
+        colors: Record<ExtendedCustomColors, MantineColorsTuple>;
     }
 }
 
-
 // https://10015.io/tools/color-shades-generator
 // use darken/lighten step 8%, step count 5+-
 // link to colors in figma:
 // https://www.figma.com/file/aoc0hf7t3uI7wu7ghxi625/LD-library--Desktop?type=design&node-id=1012-363&mode=design&t=vmlqtKSi8F2d0xrb-0
-export const mantineTheme: MantineThemeOverride = {
+export const mantineTheme = createTheme({
     colors: {
         'osOrange': ['#ffffff', '#fde5db', '#fbc9b5', '#f8ad8e', '#f47541', '#f2591a', '#d7470c', '#b03a0a', '#8a2e08', '#632106'],
         'blue': ['#cedbf6', '#abc2f0', '#88a8ea', '#668fe4', '#255ed3', '#1f4fb0', '#193f8e', '#13306b', '#0d2048', '#071125'],
@@ -108,4 +107,4 @@ export const mantineTheme: MantineThemeOverride = {
             h6: { fontSize: '1rem' },
         },
     },
-}
+})