address code review

loculus-project · Feb 21, 2024 · 3bad737 · 3bad737
1 parent 00abc98
commit 3bad737
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 166 deletions.
diff --git a/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx b/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx
@@ -73,7 +73,7 @@ export const DownloadDialog: FC<DownloadDialogProps> = ({
                             />
                             <span className='label-text'>
                                 I agree to the {/* TODO(862) */}
-                                <a href='#' className='underline'>
+                                <a href='#TODO-MVP' className='underline'>
                                     data use terms
                                 </a>
                                 .

diff --git a/website/src/components/SearchPage/DownloadDialog/DownloadForm.tsx b/website/src/components/SearchPage/DownloadDialog/DownloadForm.tsx
@@ -80,7 +80,7 @@ export const DownloadForm: FC<DownloadFormProps> = ({ referenceGenomesSequenceNa
                             <>
                                 Yes, include restricted data
                                 <br />({/* TODO(862) */}
-                                <a href='#' className='underline'>
+                                <a href='#TODO-MVP' className='underline'>
                                     What does it mean?
                                 </a>
                                 )

diff --git a/website/src/components/Submission/DataUploadForm.tsx b/website/src/components/Submission/DataUploadForm.tsx
diff --git a/website/src/components/Submission/DateChangeModal.tsx b/website/src/components/Submission/DateChangeModal.tsx
@@ -1,6 +1,90 @@
-import { Datepicker } from 'flowbite-react';
+import { Datepicker, type FlowbiteDatepickerTheme } from 'flowbite-react';
 import { DateTime } from 'luxon';
 import { useState } from 'react';
+
+export const datePickerTheme: FlowbiteDatepickerTheme = {
+    root: {
+        base: 'relative',
+    },
+    popup: {
+        root: {
+            base: 'absolute top-10 z-50 block pt-2',
+            inline: 'relative top-0 z-auto',
+            inner: 'inline-block rounded-lg bg-white p-4 shadow-lg dark:bg-gray-700',
+        },
+        header: {
+            base: '',
+            title: 'px-2 py-3 text-center font-semibold text-gray-900 dark:text-white',
+            selectors: {
+                base: 'flex justify-between mb-2',
+                button: {
+                    base: 'text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200',
+                    prev: '',
+                    next: '',
+                    view: 'cursor-default pointer-events-none',
+                },
+            },
+        },
+        view: {
+            base: 'p-1',
+        },
+        footer: {
+            base: 'flex mt-2 space-x-2',
+            button: {
+                base: 'w-full rounded-lg px-5 py-2 text-center text-sm font-medium focus:ring-4 focus:ring-cyan-300',
+                today: 'bg-cyan-700 text-white hover:bg-cyan-800 dark:bg-cyan-600 dark:hover:bg-cyan-700',
+                clear: 'border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
+            },
+        },
+    },
+    views: {
+        days: {
+            header: {
+                base: 'grid grid-cols-7 mb-1',
+                title: 'dow h-6 text-center text-sm font-medium leading-6 text-gray-500 dark:text-gray-400',
+            },
+            items: {
+                base: 'grid w-64 grid-cols-7',
+                item: {
+                    base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600 ',
+                    selected: 'bg-cyan-700 text-white hover:bg-cyan-600',
+                    disabled: 'text-gray-300 disabled',
+                },
+            },
+        },
+        months: {
+            items: {
+                base: 'grid w-64 grid-cols-4',
+                item: {
+                    base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+                    selected: 'bg-cyan-700 text-white hover:bg-cyan-600',
+                    disabled: 'text-gray-300 disabled',
+                },
+            },
+        },
+        years: {
+            items: {
+                base: 'grid w-64 grid-cols-4',
+                item: {
+                    base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600 text-gray-900',
+                    selected: 'bg-cyan-700 text-white hover:bg-cyan-600',
+                    disabled: 'text-gray-300 disabled',
+                },
+            },
+        },
+        decades: {
+            items: {
+                base: 'grid w-64 grid-cols-4',
+                item: {
+                    base: 'block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9  hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600 text-gray-900',
+                    selected: 'bg-cyan-700 text-white hover:bg-cyan-600',
+                    disabled: 'text-gray-300 disabled',
+                },
+            },
+        },
+    },
+};
+
 export const DateChangeModal = ({
     restrictedUntil,
     setRestrictedUntil,
@@ -28,6 +112,7 @@ export const DateChangeModal = ({
                     showTodayButton={false}
                     minDate={minDate.toJSDate()}
                     maxDate={maxDate.toJSDate()}
+                    theme={datePickerTheme}
                     onSelectedDateChanged={(date) => {
                         setDate(date);
                     }}

diff --git a/website/src/components/Submission/RevisionForm.tsx b/website/src/components/Submission/RevisionForm.tsx
@@ -1,15 +1,16 @@
 import { type FC } from 'react';
 
+import { DataUploadForm } from './DataUploadForm.tsx';
 import { routes } from '../../routes.ts';
+import { type Group } from '../../types/backend.ts';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
-import { DataUploadForm } from '../Submission/DataUploadForm.tsx';
 import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 
 type RevisionFormProps = {
     accessToken: string;
     organism: string;
     clientConfig: ClientConfig;
-    groupsOfUser: object[];
+    groupsOfUser: Group[];
 };
 
 export const RevisionForm: FC<RevisionFormProps> = ({ accessToken, organism, clientConfig, groupsOfUser }) => {

diff --git a/website/src/components/Submission/SubmissionForm.spec.tsx b/website/src/components/Submission/SubmissionForm.spec.tsx
@@ -68,8 +68,18 @@ describe('SubmitForm', () => {
         await userEvent.click(getByLabelText('Select group'));
 
         await waitFor(() => {
-            expect(getByText('Group1')).toBeInTheDocument();
-            expect(getByText('Group2')).toBeInTheDocument();
+            expect(getByText(testGroups[0].groupName)).toBeInTheDocument();
+            expect(getByText(testGroups[1].groupName)).toBeInTheDocument();
+        });
+    });
+
+    test('should be able to open change date modal', async () => {
+        const { getByText, getByLabelText } = renderSubmissionForm();
+        await userEvent.click(getByLabelText(/Restricted/i));
+        await userEvent.click(getByText('Change date'));
+
+        await waitFor(() => {
+            expect(getByText('Change date until which sequences are restricted')).toBeInTheDocument();
         });
     });
 

diff --git a/website/src/components/Submission/SubmissionForm.tsx b/website/src/components/Submission/SubmissionForm.tsx
@@ -2,14 +2,15 @@ import { type FC } from 'react';
 
 import { DataUploadForm } from './DataUploadForm.tsx';
 import { routes } from '../../routes.ts';
+import { type Group } from '../../types/backend.ts';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
 import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 
 type SubmissionFormProps = {
     accessToken: string;
     organism: string;
     clientConfig: ClientConfig;
-    groupsOfUser: object[];
+    groupsOfUser: Group[];
 };
 
 export const SubmissionForm: FC<SubmissionFormProps> = ({ accessToken, organism, clientConfig, groupsOfUser }) => {