feat(website): deflake group tests by disabling buttons in SSR (#1894)

Resolves #1885 

Also refactor reused isClient hook code into shared function

website/src/components/SearchPage/SearchForm.tsx

@@ -1,7 +1,7 @@
 import CircularProgress from '@mui/material/CircularProgress';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { sentenceCase } from 'change-case';
-import { type FC, type FormEventHandler, useMemo, useState, useCallback, useEffect } from 'react';
+import { type FC, type FormEventHandler, useMemo, useState, useCallback } from 'react';
 
 import { CustomizeModal } from './CustomizeModal.tsx';
 import { AccessionField } from './fields/AccessionField.tsx';
@@ -12,6 +12,7 @@ import { NormalTextField } from './fields/NormalTextField';
 import { PangoLineageField } from './fields/PangoLineageField';
 import { getClientLogger } from '../../clientLogger.ts';
 import { getLapisUrl } from '../../config.ts';
+import useClientFlag from '../../hooks/isClient.ts';
 import { useOffCanvas } from '../../hooks/useOffCanvas';
 import { type ClassOfSearchPageType, navigateToSearchLikePage } from '../../routes/routes.ts';
 import type { AccessionFilter, GroupedMetadataFilter, MetadataFilter, MutationFilter } from '../../types/config.ts';
@@ -61,10 +62,7 @@ export const SearchForm: FC<SearchFormProps> = ({
     const [isLoading, setIsLoading] = useState(false);
     const { isOpen: isMobileOpen, close: closeOnMobile, toggle: toggleMobileOpen } = useOffCanvas();
     const [isCustomizeModalOpen, setIsCustomizeModalOpen] = useState(false);
-    const [isClient, setIsClient] = useState(false);
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
+    const isClient = useClientFlag();
 
     const handleFieldChange = useCallback(
         (metadataName: string, filter: string) => {

website/src/components/SeqSetCitations/SeqSetItemActions.tsx

@@ -1,8 +1,9 @@
-import { type FC, useState, useEffect } from 'react';
+import { type FC, useState } from 'react';
 
 import { ExportSeqSet } from './ExportSeqSet';
 import { SeqSetForm } from './SeqSetForm';
 import { getClientLogger } from '../../clientLogger';
+import useClientFlag from '../../hooks/isClient.ts';
 import { seqSetCitationClientHooks } from '../../services/serviceHooks';
 import type { ClientConfig } from '../../types/runtimeConfig';
 import type { SeqSetRecord, SeqSet } from '../../types/seqSetCitation';
@@ -32,11 +33,7 @@ const SeqSetItemActionsInner: FC<SeqSetItemActionsProps> = ({
     const [editModalVisible, setEditModalVisible] = useState(false);
     const [exportModalVisible, setExportModalVisible] = useState(false);
     const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
-    const [isClient, setIsClient] = useState(false);
-
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
+    const isClient = useClientFlag();
 
     const { mutate: deleteSeqSet } = useDeleteSeqSetAction(
         clientConfig,

website/src/components/SeqSetCitations/SeqSetList.tsx

@@ -1,6 +1,7 @@
 import MUIPagination from '@mui/material/Pagination';
-import { type FC, type MouseEvent, useState, useMemo, useEffect } from 'react';
+import { type FC, type MouseEvent, useState, useMemo } from 'react';
 
+import useClientFlag from '../../hooks/isClient';
 import { routes } from '../../routes/routes';
 import type { SeqSet } from '../../types/seqSetCitation';
 import MdiTriangle from '~icons/mdi/triangle';
@@ -85,13 +86,9 @@ export const SeqSetList: FC<SeqSetListProps> = ({ seqSets, username }) => {
     const [order, setOrder] = useState<Order>('desc');
     const [orderBy, setOrderBy] = useState<keyof SeqSet>('createdAt');
     const [page, setPage] = useState(1);
-    const [isClient, setIsClient] = useState(false);
+    const isClient = useClientFlag();
     const rowsPerPage = 5;
 
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
-
     const handleRequestSort = (_: MouseEvent<unknown>, property: keyof SeqSet) => {
         const isAsc = orderBy === property && order === 'asc';
         setOrder(isAsc ? 'desc' : 'asc');

website/src/components/Submission/DataUploadForm.tsx

@@ -6,6 +6,7 @@ import { type FormEvent, useState, useRef, useEffect, useCallback, type ElementT
 import { DateChangeModal } from './DateChangeModal';
 import { getClientLogger } from '../../clientLogger.ts';
 import DataUseTermsSelector from '../../components/DataUseTerms/DataUseTermsSelector';
+import useClientFlag from '../../hooks/isClient.ts';
 import { routes } from '../../routes/routes.ts';
 import { backendApi } from '../../services/backendApi.ts';
 import { backendClientHooks } from '../../services/serviceHooks.ts';
@@ -143,11 +144,7 @@ const UploadComponent = ({
 }) => {
     const [myFile, rawSetMyFile] = useState<File | null>(null);
     const [isDragOver, setIsDragOver] = useState(false);
-    const [isClient, setIsClient] = useState(false);
-
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
+    const isClient = useClientFlag();
 
     const setMyFile = useCallback(
         (file: File | null) => {
@@ -267,11 +264,7 @@ const InnerDataUploadForm = ({
     const [dataUseTermsType, setDataUseTermsType] = useState<DataUseTermsType>(openDataUseTermsType);
     const [restrictedUntil, setRestrictedUntil] = useState<DateTime>(dateTimeInMonths(6));
 
-    const [isClient, setIsClient] = useState(false);
-
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
+    const isClient = useClientFlag();
 
     const handleLoadExampleData = async () => {
         const { metadataFileContent, revisedMetadataFileContent, sequenceFileContent } = getExampleData(exampleEntries);

website/src/components/User/GroupCreationForm.tsx

@@ -1,6 +1,7 @@
 import { type ComponentProps, type FC, type FormEvent, type PropsWithChildren, useState } from 'react';
 
 import { listOfCountries } from './listOfCountries.ts';
+import useClientFlag from '../../hooks/isClient.ts';
 import { useGroupCreation } from '../../hooks/useGroupOperations.ts';
 import { routes } from '../../routes/routes.ts';
 import { type ClientConfig } from '../../types/runtimeConfig.ts';
@@ -56,6 +57,8 @@ const InnerGroupCreationForm: FC<GroupManagerProps> = ({ clientConfig, accessTok
         }
     };
 
+    const isClient = useClientFlag();
+
     return (
         <div className='p-4 max-w-6xl mx-auto'>
             <h2 className='title'>Create a new group</h2>
@@ -83,7 +86,11 @@ const InnerGroupCreationForm: FC<GroupManagerProps> = ({ clientConfig, accessTok
                     </div>
 
                     <div className='flex justify-end py-8 gap-4 '>
-                        <button type='submit' className='btn btn-primary px-4 py-2 loculusColor text-white rounded'>
+                        <button
+                            type='submit'
+                            className='btn btn-primary px-4 py-2 loculusColor text-white rounded'
+                            disabled={!isClient}
+                        >
                             Create group
                         </button>
                     </div>

website/src/components/User/GroupPage.tsx

@@ -1,5 +1,6 @@
 import { type FC, type FormEvent, useState } from 'react';
 
+import useClientFlag from '../../hooks/isClient.ts';
 import { useGroupPageHooks } from '../../hooks/useGroupOperations.ts';
 import { routes } from '../../routes/routes.ts';
 import type { Address, Group, GroupDetails } from '../../types/backend.ts';
@@ -31,6 +32,8 @@ const InnerGroupPage: FC<GroupPageProps> = ({
 
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
+    const isClient = useClientFlag();
+
     const { groupDetails, removeFromGroup, addUserToGroup } = useGroupPageHooks({
         clientConfig,
         accessToken,
@@ -101,6 +104,7 @@ const InnerGroupPage: FC<GroupPageProps> = ({
                                 });
                             }}
                             className='object-right p-2 loculusColor text-white rounded px-4'
+                            disabled={!isClient}
                         >
                             Leave group
                         </button>
@@ -152,7 +156,11 @@ const InnerGroupPage: FC<GroupPageProps> = ({
                                 className='p-2 border border-gray-300 rounded mr-2'
                                 required
                             />
-                            <button type='submit' className='px-4 py-2 loculusColor text-white rounded'>
+                            <button
+                                type='submit'
+                                className='px-4 py-2 loculusColor text-white rounded'
+                                disabled={!isClient}
+                            >
                                 Add User
                             </button>
                         </div>
@@ -175,6 +183,7 @@ const InnerGroupPage: FC<GroupPageProps> = ({
                                             className='px-2 py-1 loculusColor text-white rounded'
                                             title='Remove user from group'
                                             aria-label={`Remove User ${user.name}`}
+                                            disabled={!isClient}
                                         >
                                             Remove user
                                         </button>

website/src/hooks/isClient.ts

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+
+function useClientFlag() {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    return isClient;
+}
+
+export default useClientFlag;

website/tests/util/throwOnConsole.ts

@@ -7,6 +7,7 @@ const messagesToIgnore = [
     /\[vite\] ready\./, // Astro dev specific warning
     /Download the React DevTools for a better development experience: https:\/\/reactjs\.org\/link\/react-devtools/, // React info, not an error
     /\[astro-island\] Error hydrating .* TypeError: Importing a module script failed\./, // Fires in `astro dev` mode and only on webkit, related to preview apparently
+    /Error while running audit's match function: TypeError: Failed to fetch/, // Astro dev specific
     /downloadable font: kern: Too large subtable/, // firefox only, keycloak only, https://github.com/keycloak/keycloak/issues/29486
     /downloadable font: Table discarded/, // firefox only, keycloak only
     /Target page, context or browser has been closed/, // Playwright specific warning after browser is closed