chore(deps): bump @headlessui/react from 1.7.19 to 2.1.1 in /website (#…

…2200) * chore(deps): bump @headlessui/react from 1.7.19 to 2.1.1 in /website Bumps [@headlessui/react](https://github.com/tailwindlabs/headlessui/tree/HEAD/packages/@headlessui-react) from 1.7.19 to 2.1.1. - [Release notes](https://github.com/tailwindlabs/headlessui/releases) - [Changelog](https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-react/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/headlessui/commits/@headlessui/[email protected]/packages/@headlessui-react) --- updated-dependencies: - dependency-name: "@headlessui/react" dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * chore(website): migrate headless ui to use DialogPanel instead of Dialog.Overlay See https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v1.6.0 for migration guide * chore(website): address Combobox nullable breaking change for headless-ui v2 see tailwindlabs/headlessui#3064 * chore(website): appease typescript for headlessui v2 upgrade for nullable combobox Headlessui v2 makes it necessary to handle null input for combobox. See tailwindlabs/headlessui#3064 * chore(website): address headlessui v2 deprecation warnings due to renamings * chore(website): use focus instead of deprecated active, headlessui v2 migration see https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0#user-content-upgrading-from-v1 * chore(website): mock ResizeObserver, neccesary for headlessui v2 see tailwindlabs/headlessui#3268 * Use new `immediate` feature of headlessui v2 * Fix flaky test by waiting for modal to be removed * fix failing test by using userEvent.click instead of fireEvent.click * chore: address warnings/lints --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cornelius Roemer <[email protected]>
loculus-project · Jun 30, 2024 · fa46446 · fa46446
1 parent 8614ab0
commit fa46446
Show file tree

Hide file tree

Showing 20 changed files with 194 additions and 93 deletions.
diff --git a/website/commitlint.config.js b/website/commitlint.config.js
@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+export default { extends: ['@commitlint/config-conventional'] };
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -23,7 +23,7 @@
         "@astrojs/mdx": "^3.1.2",
         "@astrojs/node": "^8.3.2",
         "@emotion/react": "^11.11.4",
-        "@headlessui/react": "^1.7.19",
+        "@headlessui/react": "^2.1.1",
         "@mui/material": "~5.14.20",
         "@mui/x-date-pickers": "^6.19.7",
         "@svgr/core": "^8.1.0",
@@ -90,6 +90,7 @@
         "msw": "^2.3.1",
         "prettier": "3.3.2",
         "prettier-plugin-astro": "^0.14.0",
+        "resize-observer-polyfill": "^1.5.1",
         "sass": "^1.77.6",
         "tailwindcss": "^3.4.4",
         "typescript": "^5.5.2",

diff --git a/website/src/components/Navigation/DocsMenu.tsx b/website/src/components/Navigation/DocsMenu.tsx
@@ -1,4 +1,4 @@
-import { Disclosure } from '@headlessui/react';
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import type { MDXInstance } from 'astro';
 import React from 'react';
 
@@ -53,17 +53,17 @@ const DocsMenu: React.FC<DocsMenuProps> = ({ docsPages, currentPageUrl }) => {
                     <div className='flex items-center justify-between px-4 py-3 bg-gray-100'>
                         <div className='text-lg font-semibold text-primary-600'>Documentation</div>
                         <div className='sm:hidden'>
-                            <Disclosure.Button className='text-primary-600 hover:text-primary-800 focus:outline-none'>
+                            <DisclosureButton className='text-primary-600 hover:text-primary-800 focus:outline-none'>
                                 {open ? (
                                     <XIcon className='w-6 h-6' aria-hidden='true' />
                                 ) : (
                                     <MenuIcon className='w-6 h-6' aria-hidden='true' />
                                 )}
-                            </Disclosure.Button>
+                            </DisclosureButton>
                         </div>
                     </div>
 
-                    <Disclosure.Panel className='sm:hidden'>
+                    <DisclosurePanel className='sm:hidden'>
                         <ul className='list-none m-0 p-0'>
                             {Object.entries(groupedPages).map(([dir, pages]) => (
                                 <li key={dir} className='border-b border-gray-200 last:border-0'>
@@ -87,7 +87,7 @@ const DocsMenu: React.FC<DocsMenuProps> = ({ docsPages, currentPageUrl }) => {
                                 </li>
                             ))}
                         </ul>
-                    </Disclosure.Panel>
+                    </DisclosurePanel>
 
                     <div className='hidden sm:block'>
                         <ul className='list-none m-0 p-0'>

diff --git a/website/src/components/ReviewPage/ReviewPage.tsx b/website/src/components/ReviewPage/ReviewPage.tsx
@@ -1,4 +1,4 @@
-import { Menu } from '@headlessui/react';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import Pagination from '@mui/material/Pagination';
 import { type ChangeEvent, type FC, useState } from 'react';
 
@@ -220,15 +220,15 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
         <div className='flex justify-end items-center gap-3 mt-auto '>
             {finishedCount > 0 && (
                 <Menu as='div' className=' inline-block text-left'>
-                    <Menu.Button className='border rounded-md p-1 bg-primary-600 text-white px-2'>
+                    <MenuButton className='border rounded-md p-1 bg-primary-600 text-white px-2'>
                         <BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
                         Discard sequences
                         <IwwaArrowDown className='inline-block ml-1 w-3 h-3 -mt-0.5' />
-                    </Menu.Button>
-                    <Menu.Items className='origin-top-right absolute z-50 bg-white'>
+                    </MenuButton>
+                    <MenuItems className='origin-top-right absolute z-50 bg-white'>
                         <div className='py-1'>
                             {errorCount > 0 && showErrors && (
-                                <Menu.Item>
+                                <MenuItem>
                                     <button
                                         className={menuItemClassName}
                                         onClick={() =>
@@ -247,9 +247,9 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
                                         <BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
                                         Discard {errorCount} sequence{errorCount > 1 ? 's' : ''} with errors
                                     </button>
-                                </Menu.Item>
+                                </MenuItem>
                             )}
-                            <Menu.Item>
+                            <MenuItem>
                                 <button
                                     className={menuItemClassName}
                                     onClick={() =>
@@ -267,9 +267,9 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
                                     <BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
                                     Discard all {finishedCount} processed sequences
                                 </button>
-                            </Menu.Item>
+                            </MenuItem>
                         </div>
-                    </Menu.Items>
+                    </MenuItems>
                 </Menu>
             )}
             {processedCount > 0 && (

diff --git a/website/src/components/SearchPage/CustomizeModal.tsx b/website/src/components/SearchPage/CustomizeModal.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react';
 
 const titleCaseWords = (str: string) => {
     return str
@@ -52,16 +52,16 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
         <Transition appear show={isCustomizeModalOpen}>
             <Dialog as='div' className='fixed inset-0 z-50 overflow-y-auto' onClose={toggleCustomizeModal}>
                 <div className='min-h-screen px-4 text-center'>
-                    <Dialog.Overlay className='fixed inset-0 bg-black opacity-30' />
+                    <div className='fixed inset-0 bg-black opacity-30' />
 
                     <span className='inline-block h-screen align-middle' aria-hidden='true'>
                         &#8203;
                     </span>
 
-                    <div className='inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl text-sm'>
-                        <Dialog.Title as='h3' className='text-lg font-medium leading-6 text-gray-900'>
+                    <DialogPanel className='inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl text-sm'>
+                        <DialogTitle as='h3' className='text-lg font-medium leading-6 text-gray-900'>
                             Customize {titleCaseWords(thingToCustomize)}s
-                        </Dialog.Title>
+                        </DialogTitle>
 
                         <div className='mt-4 text-gray-700 text-sm'>Toggle the visibility of {thingToCustomize}s</div>
 
@@ -91,7 +91,7 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
                                 Close
                             </button>
                         </div>
-                    </div>
+                    </DialogPanel>
                 </div>
             </Dialog>
         </Transition>

diff --git a/website/src/components/SearchPage/DownloadDialog/ActiveDownloadFilters.tsx b/website/src/components/SearchPage/DownloadDialog/ActiveDownloadFilters.tsx
@@ -11,10 +11,9 @@ export const ActiveDownloadFilters: FC<ActiveDownloadFiltersProps> = ({ lapisSea
     let filterValues = Object.entries(lapisSearchParameters)
         .filter((vals) => vals[1] !== undefined && vals[1] !== '')
         .filter(([name, val]) => !(Object.keys(hiddenFieldValues).includes(name) && hiddenFieldValues[name] === val))
-        .map(([name, filterValue]) => ({ name, filterValue }));
+        .map(([name, filterValue]) => ({ name, filterValue: filterValue !== null ? filterValue : '' }));
 
     filterValues = filterValues.filter(({ filterValue }) => filterValue.length > 0);
-
     if (filterValues.length === 0) {
         return null;
     }

diff --git a/website/src/components/SearchPage/SearchFullUI.spec.tsx b/website/src/components/SearchPage/SearchFullUI.spec.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -225,6 +225,7 @@ describe('SearchFullUI', () => {
         await userEvent.click(field1Checkbox);
         const closeButton = await screen.findByRole('button', { name: 'Close' });
         await userEvent.click(closeButton);
+        await waitForElementToBeRemoved(() => screen.queryByText('Toggle the visibility of search fields'));
         expect(screen.queryByLabelText('Field 1')).not.toBeInTheDocument();
     });
 

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -15,7 +15,13 @@ import { getLapisUrl } from '../../config.ts';
 import { lapisClientHooks } from '../../services/serviceHooks.ts';
 import { pageSize } from '../../settings';
 import type { Group } from '../../types/backend.ts';
-import { type MetadataFilter, type Schema, type GroupedMetadataFilter, type FieldValues } from '../../types/config.ts';
+import {
+    type MetadataFilter,
+    type Schema,
+    type GroupedMetadataFilter,
+    type FieldValues,
+    type SetAFieldValue,
+} from '../../types/config.ts';
 import { type OrderBy } from '../../types/lapis.ts';
 import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes.ts';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
@@ -160,7 +166,7 @@ export const InnerSearchFullUI = ({
         return values;
     }, [state, hiddenFieldValues]);
 
-    const setAFieldValue = (fieldName: string, value: string | number) => {
+    const setAFieldValue: SetAFieldValue = (fieldName, value) => {
         setState((prev: any) => {
             const newState = {
                 ...prev,