feat(website): change paths of submission pages and re-use header

website/src/components/Edit/EditPage.tsx

@@ -146,7 +146,7 @@ function useSubmitEditedSequence(
         {
             onSuccess: async () => {
                 await logger.info('Successfully submitted edited data ' + getAccessionVersionString(reviewData));
-                location.href = routes.userSequenceReviewPage(organism);
+                location.href = routes.userSequenceReviewPage(organism, reviewData.groupId);
             },
             onError: async (error) => {
                 const message = `Failed to submit edited data for ${getAccessionVersionString(

website/src/components/SequenceDetailsPage/RevokeButton.tsx

@@ -14,15 +14,22 @@ type RevokeSequenceEntryProps = {
     accessToken: string;
     clientConfig: ClientConfig;
     accessionVersion: string;
+    groupId: number;
 };
 
-const InnerRevokeButton: FC<RevokeSequenceEntryProps> = ({ organism, accessToken, clientConfig, accessionVersion }) => {
+const InnerRevokeButton: FC<RevokeSequenceEntryProps> = ({
+    organism,
+    accessToken,
+    clientConfig,
+    accessionVersion,
+    groupId,
+}) => {
     const hooks = backendClientHooks(clientConfig);
     const useRevokeSequenceEntries = hooks.useRevokeSequences(
         { headers: createAuthorizationHeader(accessToken), params: { organism } },
         {
             onSuccess: () => {
-                document.location = routes.userSequenceReviewPage(organism);
+                document.location = routes.userSequenceReviewPage(organism, groupId);
             },
             onError: (error) =>
                 toast.error(getRevokeSequenceEntryErrorMessage(error), {

website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro

@@ -19,7 +19,7 @@ interface Props {
 }
 
 const { tableData, organism, accessionVersion, dataUseTermsHistory } = Astro.props;
-const groupId = tableData.find((entry) => entry.name === 'groupId')?.value;
+const groupId = tableData.find((entry) => entry.name === 'groupId')!.value as number;
 const isRestricted = tableData.find((entry) => entry.name === 'dataUseTerms')?.value === 'RESTRICTED';
 
 const runtimeConfig = getRuntimeConfig();
@@ -87,6 +87,7 @@ const isMyGroup =
                 clientConfig={clientConfig}
                 accessionVersion={accessionVersion.split('.')[0]}
                 accessToken={accessToken}
+                groupId={groupId}
                 client:load
             />
         </div>

website/src/components/Submission/DataUploadForm.tsx

@@ -1,4 +1,3 @@
-import { Menu } from '@headlessui/react';
 import { isErrorFromAlias } from '@zodios/core';
 import type { AxiosError } from 'axios';
 import { type DateTime } from 'luxon';
@@ -19,12 +18,9 @@ import type { ClientConfig } from '../../types/runtimeConfig.ts';
 import { dateTimeInMonths } from '../../utils/DateTimeInMonths.tsx';
 import { createAuthorizationHeader } from '../../utils/createAuthorizationHeader.ts';
 import { stringifyMaybeAxiosError } from '../../utils/stringifyMaybeAxiosError.ts';
-import { NeedAGroup } from '../common/NeedAGroup.tsx';
 import { withQueryProvider } from '../common/withQueryProvider.tsx';
-import DashiconsGroups from '~icons/dashicons/groups';
 import Locked from '~icons/fluent-emoji-high-contrast/locked';
 import Unlocked from '~icons/fluent-emoji-high-contrast/unlocked';
-import IwwaArrowDown from '~icons/iwwa/arrow-down';
 import MaterialSymbolsInfoOutline from '~icons/material-symbols/info-outline';
 import MaterialSymbolsLightDataTableOutline from '~icons/material-symbols-light/data-table-outline';
 import PhDnaLight from '~icons/ph/dna-light';
@@ -35,7 +31,7 @@ type DataUploadFormProps = {
     organism: string;
     clientConfig: ClientConfig;
     action: Action;
-    groupsOfUser: Group[];
+    group: Group;
     onSuccess: () => void;
     onError: (message: string) => void;
 };
@@ -181,53 +177,6 @@ const DevExampleData = ({
     );
 };
 
-const GroupSelector = ({
-    groups,
-    selectedGroup,
-    setSelectedGroup,
-}: {
-    groups: Group[];
-    selectedGroup: Group | undefined;
-    setSelectedGroup: (group: Group) => void;
-}) => {
-    if (groups.length === 1) {
-        return <div className='mb-4 text-gray-500'>Current group: {selectedGroup?.groupName}</div>;
-    }
-    return (
-        <div className='mb-4 text-gray-500 text-sm'>
-            <Menu>
-                <Menu.Button aria-label='Select group'>
-                    Current group: {selectedGroup?.groupName}
-                    <span className='text-primary-600 ml-2'>
-                        <IwwaArrowDown className='w-4 h-4 inline-block -mt-0.5' />
-                    </span>
-                </Menu.Button>
-                <Menu.Items
-                    className={`absolute z-10 bg-white border border-gray-300 divide-y divide-gray-300 min-w-56 rounded mt-2
-                transition-all duration-200 ease-in-out shadow-lg 
-                `}
-                >
-                    {groups.map((group) => (
-                        <Menu.Item key={group.groupId}>
-                            {({ active }) => (
-                                <button
-                                    className={`${
-                                        active ? 'bg-primary-500 text-white' : 'text-gray-900'
-                                    } flex  w-full px-4 py-2 text-sm`}
-                                    onClick={() => setSelectedGroup(group)}
-                                >
-                                    <DashiconsGroups className='w-6 h-6 inline-block mr-2' />
-                                    {group.groupName}
-                                </button>
-                            )}
-                        </Menu.Item>
-                    ))}
-                </Menu.Items>
-            </Menu>
-        </div>
-    );
-};
-
 const UploadComponent = ({
     setFile,
     name,
@@ -351,16 +300,13 @@ const InnerDataUploadForm = ({
     action,
     onSuccess,
     onError,
-    groupsOfUser,
+    group,
 }: DataUploadFormProps) => {
     const [metadataFile, setMetadataFile] = useState<File | null>(null);
     const [sequenceFile, setSequenceFile] = useState<File | null>(null);
     const [exampleEntries, setExampleEntries] = useState<number | undefined>(10);
 
-    const noGroup = groupsOfUser.length === 0;
-
     const { submit, revise, isLoading } = useSubmitFiles(accessToken, organism, clientConfig, onSuccess, onError);
-    const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(noGroup ? undefined : groupsOfUser[0]);
     const [dataUseTermsType, setDataUseTermsType] = useState<DataUseTermsType>(openDataUseTermsType);
     const [restrictedUntil, setRestrictedUntil] = useState<DateTime>(dateTimeInMonths(6));
 
@@ -390,7 +336,7 @@ const InnerDataUploadForm = ({
 
         switch (action) {
             case 'submit':
-                const groupId = selectedGroup?.groupId ?? groupsOfUser[0].groupId;
+                const groupId = group.groupId;
                 submit({
                     metadataFile,
                     sequenceFile,
@@ -406,13 +352,8 @@ const InnerDataUploadForm = ({
         }
     };
 
-    if (noGroup) {
-        return <NeedAGroup />;
-    }
-
     return (
         <div className='text-left mt-3 max-w-6xl'>
-            <GroupSelector groups={groupsOfUser} selectedGroup={selectedGroup} setSelectedGroup={setSelectedGroup} />
             <div className='flex-col flex gap-8 divide-y'>
                 <div className='grid sm:grid-cols-3 gap-x-16'>
                     <div className=''>

website/src/components/Submission/RevisionForm.tsx

@@ -10,10 +10,10 @@ type RevisionFormProps = {
     accessToken: string;
     organism: string;
     clientConfig: ClientConfig;
-    groupsOfUser: Group[];
+    group: Group;
 };
 
-export const RevisionForm: FC<RevisionFormProps> = ({ accessToken, organism, clientConfig, groupsOfUser }) => {
+export const RevisionForm: FC<RevisionFormProps> = ({ accessToken, organism, clientConfig, group }) => {
     const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
 
     return (
@@ -25,9 +25,9 @@ export const RevisionForm: FC<RevisionFormProps> = ({ accessToken, organism, cli
                 clientConfig={clientConfig}
                 action='revise'
                 onError={openErrorFeedback}
-                groupsOfUser={groupsOfUser}
+                group={group}
                 onSuccess={() => {
-                    window.location.href = routes.userSequenceReviewPage(organism);
+                    window.location.href = routes.userSequenceReviewPage(organism, group.groupId);
                 }}
             />
         </div>

website/src/components/Submission/SubmissionForm.spec.tsx

@@ -35,7 +35,7 @@ function renderSubmissionForm() {
             accessToken={testAccessToken}
             organism={testOrganism}
             clientConfig={testConfig.public}
-            groupsOfUser={testGroups.map((groupNames) => ({ ...group, groupName: groupNames.groupName }))}
+            group={group}
         />,
     );
 }
@@ -78,16 +78,6 @@ describe('SubmitForm', () => {
         });
     });
 
-    test('should have options to select a group if there is more than one', async () => {
-        const { getByText, getByLabelText } = renderSubmissionForm();
-        await userEvent.click(getByLabelText('Select group'));
-
-        await waitFor(() => {
-            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));

website/src/components/Submission/SubmissionForm.tsx

@@ -10,10 +10,10 @@ type SubmissionFormProps = {
     accessToken: string;
     organism: string;
     clientConfig: ClientConfig;
-    groupsOfUser: Group[];
+    group: Group;
 };
 
-export const SubmissionForm: FC<SubmissionFormProps> = ({ accessToken, organism, clientConfig, groupsOfUser }) => {
+export const SubmissionForm: FC<SubmissionFormProps> = ({ accessToken, organism, clientConfig, group }) => {
     const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
 
     return (
@@ -25,9 +25,9 @@ export const SubmissionForm: FC<SubmissionFormProps> = ({ accessToken, organism,
                 clientConfig={clientConfig}
                 action='submit'
                 onError={openErrorFeedback}
-                groupsOfUser={groupsOfUser}
+                group={group}
                 onSuccess={() => {
-                    window.location.href = routes.userSequenceReviewPage(organism);
+                    window.location.href = routes.userSequenceReviewPage(organism, group.groupId);
                 }}
             />
         </div>

website/src/components/MySequencesPage/MySequencesGroupSelector.tsx → website/src/components/Submission/SubmissionGroupSelector.tsx

@@ -10,7 +10,8 @@ type GroupSelectorProps = {
     selectedGroupId: number;
     organism: string;
 };
-export const MySequencesGroupSelector: FC<GroupSelectorProps> = ({ groups, selectedGroupId, organism }) => {
+
+export const SubmissionGroupSelector: FC<GroupSelectorProps> = ({ groups, selectedGroupId, organism }) => {
     const selectedGroup = groups.find((group) => group.groupId === selectedGroupId);
 
     if (selectedGroup === undefined) {
@@ -19,17 +20,17 @@ export const MySequencesGroupSelector: FC<GroupSelectorProps> = ({ groups, selec
 
     const groupNameElement = (
         <>
-            <DashiconsGroups className='w-6 h-6 inline-block mr-1 -mt-1' />
+            <DashiconsGroups className='w-6 h-6 inline-block mr-1 -mt-1 text-gray-600' />
             <span className='text-gray-700'>{selectedGroup.groupName}</span>
         </>
     );
 
     if (groups.length === 1) {
-        return <div className='mb-1'>{groupNameElement}</div>;
+        return <div className='mb-2 ml-4'>{groupNameElement}</div>;
     }
 
     return (
-        <div className='mb-1'>
+        <div className='mb-2 ml-4'>
             <div className='dropdown'>
                 <div tabIndex={0} role='button' className=''>
                     {groupNameElement} <IwwaArrowDown className='inline-block -mt-1 h-5 w-5' />

website/src/components/Submission/SubmissionPageWrapper.astro

@@ -0,0 +1,43 @@
+---
+import { SubmissionGroupSelector } from './SubmissionGroupSelector';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { type GetGroupsAndCurrentGroupResult } from '../../utils/submissionPages';
+import NeedToLogin from '../common/NeedToLogin.astro';
+
+interface Props {
+    title: string;
+    organism: string;
+    groupsResult: GetGroupsAndCurrentGroupResult;
+}
+
+const { title, groupsResult, organism } = Astro.props;
+---
+
+<BaseLayout title={title}>
+    {
+        groupsResult.match(
+            ({ currentGroup: group, groupsOfUser }) => (
+                <>
+                    <SubmissionGroupSelector
+                        groups={groupsOfUser}
+                        selectedGroupId={group.groupId}
+                        organism={organism}
+                        client:load
+                    />
+                    <h1 class='title'>{title}</h1>
+                    <slot />
+                </>
+            ),
+            ({ type }) => {
+                switch (type) {
+                    case 'not_logged_in':
+                        return <NeedToLogin message='You need to be logged in to submit sequences.' />;
+                    case 'group_not_found':
+                        return <p class='text-red-500'>Group not found</p>;
+                    default:
+                        return <p class='text-red-500'>Unexpected error: Failed to load groups</p>;
+                }
+            },
+        )
+    }
+</BaseLayout>