feat(dashboards): collections create/edit UI

website/src/components/collections/create/CollectionCreate.tsx

@@ -0,0 +1,53 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { getBackendServiceForClientside } from '../../../backendApi/backendService.ts';
+import { withQueryProvider } from '../../../backendApi/withQueryProvider.tsx';
+import { getClientLogger } from '../../../clientLogger.ts';
+import type { DashboardsConfig } from '../../../config.ts';
+import type { Organism } from '../../../types/Organism.ts';
+import { Page } from '../../../types/pages.ts';
+import { getErrorLogMessage } from '../../../util/getErrorLogMessage.ts';
+import { CollectionForm, type CollectionFormValues } from '../form/CollectionForm.tsx';
+
+export const CollectionCreate = withQueryProvider(CollectionCreateInner);
+
+const logger = getClientLogger('CollectionCreate');
+
+function CollectionCreateInner({ organism, config }: { organism: Organism; config: DashboardsConfig }) {
+    const createMutation = useMutation({
+        mutationFn: (values: CollectionFormValues) =>
+            getBackendServiceForClientside().postCollection({
+                collection: {
+                    name: values.name,
+                    organism,
+                    description: values.description || undefined,
+                    variants: values.variants,
+                },
+            }),
+        onSuccess: () => {
+            window.location.href = Page.collectionsForOrganism(organism);
+        },
+        onError: (err) => {
+            logger.error(`Failed to create collection: ${getErrorLogMessage(err)}`);
+        },
+    });
+
+    return (
+        <div className='pb-6'>
+            <CollectionForm
+                onSubmit={(values) => createMutation.mutate(values)}
+                isSubmitting={createMutation.isPending}
+                isSuccess={createMutation.isSuccess}
+                successMessage='Collection created.'
+                submitLabel='Create collection'
+                organism={organism}
+                config={config}
+            />
+            {createMutation.isError && (
+                <div className='alert alert-error mt-4'>
+                    Failed to create collection: {getErrorLogMessage(createMutation.error)}
+                </div>
+            )}
+        </div>
+    );
+}

website/src/components/collections/detail/CollectionDetail.tsx

@@ -26,10 +26,12 @@ function CollectionDetailInner({
     organism,
     collection,
     lapisConfig,
+    isOwner,
 }: {
     organism: Organism;
     collection: Collection;
     lapisConfig: LapisConfig;
+    isOwner: boolean;
 }) {
     const organismName = organismConfig[organism].label;
     const dateFrom30 = dayjs().subtract(30, 'day').format('YYYY-MM-DD');
@@ -38,10 +40,20 @@ function CollectionDetailInner({
     return (
         <div className='flex flex-col gap-4'>
             <div>
-                <PageHeadline>
-                    <span className='mr-2 font-normal text-gray-400'>#{collection.id}</span>
-                    {collection.name}
-                </PageHeadline>
+                <div className='flex items-start justify-between gap-4'>
+                    <PageHeadline>
+                        <span className='mr-2 font-normal text-gray-400'>#{collection.id}</span>
+                        {collection.name}
+                    </PageHeadline>
+                    {isOwner && (
+                        <a
+                            href={Page.editCollection(organism, String(collection.id))}
+                            className='btn btn-sm mt-1 shrink-0'
+                        >
+                            Edit
+                        </a>
+                    )}
+                </div>
                 {collection.description !== null && <p className='mt-1 text-gray-500'>{collection.description}</p>}
                 <p className='mt-1 text-sm text-gray-500'>
                     {organismName} collection owned by {collection.ownedBy}