Tweak date displayNames on website

kubernetes/loculus/templates/_common-metadata.tpl

@@ -28,8 +28,10 @@ fields:
     autocomplete: true
   - name: submittedAt
     type: timestamp
+    displayName: Date submitted
   - name: releasedAt
     type: timestamp
+    displayName: Date released
   - name: dataUseTerms
     type: string
     generateIndex: true

website/src/components/SearchPage/SearchForm.tsx

@@ -123,7 +123,9 @@ export const SearchForm: FC<SearchFormProps> = ({
                 if (field.grouped === true) {
                     return (
                         <div key={field.name} className='flex flex-col border p-3 mb-3 rounded-md border-gray-300'>
-                            <h3 className='text-gray-500 text-sm mb-1'>{field.label}</h3>
+                            <h3 className='text-gray-500 text-sm mb-1'>
+                                {field.displayName !== undefined ? field.displayName : field.label}
+                            </h3>
 
                             {field.groupedFields.map((groupedField) => (
                                 <SearchField
@@ -321,6 +323,8 @@ const consolidateGroupedFields = (filters: MetadataFilter[]): (MetadataFilter |
                     groupedFields: [],
                     type: filter.type,
                     grouped: true,
+                    displayName: filter.fieldGroupDisplayName,
+                    label: filter.label,
                     initiallyVisible: filter.initiallyVisible,
                 };
                 fieldList.push(fieldForGroup);

website/src/components/SearchPage/fields/TextField.tsx

@@ -73,6 +73,7 @@ export const TextField = forwardRef<HTMLInputElement | HTMLTextAreaElement, Text
             placeholder: '',
             label: label !== undefined ? label : '',
         };
+        // "left-1" - leave this comment in to ensure tailwind maintains left-1 in the build
         return <FloatingLabel {...inputProps} variant='outlined' type='text' />;
     }
     const refTextArea = ref as ForwardedRef<HTMLTextAreaElement>;

website/src/types/config.ts

@@ -29,6 +29,7 @@ export type MetadataFilter = Metadata & {
     label?: string;
     fieldGroup?: string;
     grouped?: false;
+    fieldGroupDisplayName?: string;
     isVisible?: boolean;
 };
 

website/src/utils/search.ts

@@ -100,13 +100,16 @@ export const getMetadataFilters = (
                 displayName: 'From',
                 filterValue: getSearchParams(`${metadata.name}From`),
                 fieldGroup: metadata.name,
+                fieldGroupDisplayName: metadata.displayName,
             };
+
             const metadataTo = {
                 ...metadata,
                 name: `${metadata.name}To`,
                 displayName: 'To',
                 filterValue: getSearchParams(`${metadata.name}To`),
                 fieldGroup: metadata.name,
+                fieldGroupDisplayName: metadata.displayName,
             };
             return [metadataFrom, metadataTo];
         }

website/tailwind.config.cjs

@@ -15,7 +15,10 @@ const mainTailwindColor = {
 };
 
 module.exports = {
-    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', 'node_modules/flowbite-react/lib/esm/**/*.js'],
+    content: [
+        './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+        'node_modules/flowbite-react/lib/esm/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    ],
     theme: {
         extend: {
             colors: {

website/tests/pages/search/index.spec.ts

@@ -25,7 +25,11 @@ test.describe('The search page', () => {
         const testAccessionVersion = getAccessionVersionString(getTestSequences().testSequenceEntry);
 
         await searchPage.goto();
+        await searchPage.getAccessionField().click();
+        await searchPage.page.waitForTimeout(1000);
         await searchPage.getAccessionField().fill(testAccessionVersion);
+
+        await searchPage.page.waitForTimeout(1000);
         await searchPage.clickSearchButton();
 
         await searchPage.page.waitForURL(
@@ -66,7 +70,10 @@ test.describe('The search page', () => {
         for (let i = 0; i < 1000; i++) {
             query += `\ndoesnotexist${i}`;
         }
+        await searchPage.getAccessionField().click();
+        await searchPage.page.waitForTimeout(100);
         await searchPage.getAccessionField().fill(query);
+        await searchPage.page.waitForTimeout(100);
         await searchPage.clickSearchButton();
 
         const newAccessions = (await searchPage.getTableContent()).map((arr) => arr[0]);
@@ -90,8 +97,14 @@ test.describe('The search page', () => {
         await searchPage.goto();
 
         const testAccessionVersion = getAccessionVersionString(getTestSequences().testSequenceEntry);
+
+        await searchPage.getAccessionField().click();
+
+        await searchPage.page.waitForTimeout(100);
         await searchPage.getAccessionField().fill(testAccessionVersion);
 
+        await searchPage.page.waitForTimeout(100);
+
         await expect(searchPage.getAccessionField()).toHaveValue(testAccessionVersion);
 
         await searchPage.clickResetButton();