Add edit page stub and routing

website/src/components/User/GroupPage.tsx

@@ -30,6 +30,7 @@ const InnerGroupPage: FC<GroupPageProps> = ({
     userGroups,
 }) => {
     const groupName = prefetchedGroupDetails.group.groupName;
+    const groupId = prefetchedGroupDetails.group.groupId;
     const [newUserName, setNewUserName] = useState<string>('');
 
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
@@ -100,7 +101,7 @@ const InnerGroupPage: FC<GroupPageProps> = ({
                             <button
                                 className='object-right p-2 loculusColor text-white rounded px-4 mr-2'
                                 onClick={() => {
-                                    console.log("TODO");
+                                    window.location.href = routes.editGroupPage(groupId);
                                 }}
                             >
                                 Edit group

website/src/pages/group/[groupId]/edit.astro

@@ -0,0 +1,57 @@
+---
+import { GroupPage } from '../../../components/User/GroupPage';
+import ErrorBox from '../../../components/common/ErrorBox.tsx';
+import NeedToLogin from '../../../components/common/NeedToLogin.astro';
+import { getRuntimeConfig } from '../../../config';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import { GroupManagementClient } from '../../../services/groupManagementClient';
+import { getAccessToken } from '../../../utils/getAccessToken';
+
+
+const session = Astro.locals.session!;
+const accessToken = getAccessToken(session)!;
+const username = session.user?.username ?? '';
+const groupId = parseInt(Astro.params.groupId!, 10);
+const clientConfig = getRuntimeConfig().public;
+
+if (isNaN(groupId)) {
+    return new Response(undefined, {
+        status: 404,
+    });
+}
+
+const groupManagementClient = GroupManagementClient.create();
+const groupDetailsResult = await groupManagementClient.getGroupDetails(accessToken, groupId);
+const userGroupsResponse = await groupManagementClient.getGroupsOfUser(accessToken);
+const userGroups = userGroupsResponse.match(
+    (groups) => groups,
+    () => [],
+);
+---
+
+<BaseLayout
+    title={groupDetailsResult.match(
+        (groupDetails) => groupDetails.group.groupName,
+        () => 'Group error',
+    )}
+>
+    {
+        !accessToken ? (
+            <NeedToLogin message='You need to be logged in to edit this group.' />
+        ) : (
+            groupDetailsResult.match(
+                (groupDetails) => (
+                    <GroupPage
+                        prefetchedGroupDetails={groupDetails}
+                        accessToken={accessToken}
+                        clientConfig={clientConfig}
+                        username={username}
+                        userGroups={userGroups}
+                        client:load
+                    />
+                ),
+                () => <ErrorBox>Failed to fetch group details, sorry for the inconvenience!</ErrorBox>,
+            )
+        )
+    }
+</BaseLayout>

website/src/routes/routes.ts

@@ -47,6 +47,7 @@ export const routes = {
         return organism === undefined ? userPagePath : withOrganism(organism, userPagePath);
     },
     groupOverviewPage: (groupId: number) => `/group/${groupId}`,
+    editGroupPage: (groupId: number) => `/group/${groupId}/edit`,
     userSequenceReviewPage: (organism: string, groupId: number) =>
         SubmissionRouteUtils.toUrl({ name: 'review', organism, groupId }),
     versionPage: (accession: string) => `/seq/${accession}/versions`,