Update to Headless UI 2

assets/js/common/Accordion/Accordion.jsx

@@ -1,6 +1,11 @@
 import React, { isValidElement } from 'react';
 
-import { Disclosure, Transition } from '@headlessui/react';
+import {
+  Disclosure,
+  DisclosurePanel,
+  DisclosureButton,
+  Transition,
+} from '@headlessui/react';
 import { EOS_KEYBOARD_ARROW_DOWN } from 'eos-icons-react';
 
 import classNames from 'classnames';
@@ -16,7 +21,7 @@ function Accordion({
   children,
 }) {
   const disclosurePanel = (
-    <Disclosure.Panel aria-label="accordion-panel">{children}</Disclosure.Panel>
+    <DisclosurePanel aria-label="accordion-panel">{children}</DisclosurePanel>
   );
   const isHeaderAnElement = isValidElement(header);
   return (
@@ -31,7 +36,7 @@ function Accordion({
     >
       {({ open }) => (
         <>
-          <Disclosure.Button
+          <DisclosureButton
             aria-label="accordion-header"
             as="div"
             className={classNames(
@@ -58,18 +63,12 @@ function Accordion({
                 />
               </div>
             )}
-          </Disclosure.Button>
+          </DisclosureButton>
           {withTransition ? (
-            <Transition
-              aria-label="accordion-transition-panel"
-              enter="transition duration-100 ease-out"
-              enterFrom="transform opacity-0"
-              enterTo="transform opacity-100"
-              leave="transition duration-100 ease-out"
-              leaveFrom="transform opacity-100"
-              leaveTo="transform opacity-0"
-            >
-              {disclosurePanel}
+            <Transition aria-label="accordion-transition-panel">
+              <div className="transition opacity-100 duration-100 ease-out data-[closed]:opacity-0">
+                {disclosurePanel}
+              </div>
             </Transition>
           ) : (
             disclosurePanel

assets/js/common/ApiKeySettingsModal/ApiKeySettingsModal.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { faker } from '@faker-js/faker';
 import {
@@ -91,10 +91,10 @@ describe('ApiKeySettingsModal', () => {
 
       await user.type(screen.getByRole('spinbutton'), '20');
 
+      await user.click(screen.getByRole('button', { name: 'months' }));
       await user.click(screen.getByRole('button', { name: 'months' }));
 
-      await user.click(screen.getByRole('button', { name: 'Generate' }));
-
+      await user.click(await waitFor(() => screen.findByText('Generate')));
       await user.click(screen.getByRole('button', { name: 'Generate' }));
 
       const [{ apiKeyExpiration: generatedApiKeyExpiration }] =

assets/js/common/Modal/Modal.jsx

@@ -1,65 +1,34 @@
-import React, { Fragment, useRef } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react';
 import classNames from 'classnames';
+import React from 'react';
 
 function Modal({ children, open, onClose, title, className }) {
-  const refContent = useRef(null);
-
   return (
-    <Transition appear show={open} as={Fragment}>
-      <Dialog
-        initialFocus={refContent}
-        as="div"
-        className="fixed inset-0 z-50 overflow-y-auto"
-        onClose={onClose}
-      >
-        <div ref={refContent} className="min-h-screen px-4 text-center">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-white/60 backdrop-blur-sm" />
-          </Transition.Child>
-
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span
-            className="inline-block h-screen align-middle"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <div
-              className={classNames(
-                'inline-block w-full max-w-7xl p-6 my-8 text-left align-middle transition-all transform bg-white shadow-lg rounded-lg',
-                className
-              )}
-            >
-              <Dialog.Title
-                as="h3"
-                className="text-xl font-semibold leading-6 text-gray-900"
-              >
-                {title}
-              </Dialog.Title>
-              <div className="mt-2">{children}</div>
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition>
+    <Dialog open={open} onClose={onClose} className="relative z-50">
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-white/60 backdrop-blur-sm duration-300 ease-out data-[closed]:opacity-0"
+      />
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <DialogPanel
+          transition
+          className={classNames(
+            'max-w-lg space-y-4 bg-white p-12 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0',
+            className
+          )}
+        >
+          <DialogTitle className="text-xl font-semibold leading-6 text-gray-900">
+            {title}
+          </DialogTitle>
+          <div className="mt-2">{children}</div>
+        </DialogPanel>
+      </div>
+    </Dialog>
   );
 }
 

assets/js/common/TimeSeriesLineChart/TimeSeriesLineChart.test.jsx

@@ -4,6 +4,10 @@ import { render } from '@testing-library/react';
 import TimeSeriesLineChart from './TimeSeriesLineChart';
 import '@testing-library/jest-dom';
 
+jest.mock('react-chartjs-2', () => ({
+  Line: () => <canvas />,
+}));
+
 describe('TimeSeriesLineChart component', () => {
   it('should raise an error if the datasets are more then 5', () => {
     const datasets = [
@@ -92,7 +96,6 @@ describe('TimeSeriesLineChart component', () => {
       </div>
     );
 
-    const canvas = container.querySelector('canvas');
-    expect(canvas).toBeDefined();
+    expect(container.querySelector('canvas')).toBeDefined();
   });
 });

assets/js/pages/ChecksCatalog/CheckItem.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 
@@ -67,6 +67,8 @@ describe('ChecksCatalog CheckItem component', () => {
     await user.click(checkDiv);
     expect(screen.getByText(check.remediation)).toBeVisible();
     await user.click(checkDiv);
-    expect(screen.queryByText(check.remediation)).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByText(check.remediation)).not.toBeInTheDocument()
+    );
   });
 });

assets/js/pages/ChecksCatalog/ChecksCatalog.test.jsx

@@ -122,12 +122,12 @@ describe('ChecksCatalog ChecksCatalog component', () => {
       await user.click(screen.getByText(filter));
 
       expect(
-        screen.getByText(expectDisabled, { exact: false }).closest('li')
+        screen.getByText(expectDisabled, { exact: false }).closest('div')
       ).toHaveAttribute('aria-disabled', 'true');
 
       const expectItemEnabled = (itemExpectedEnabled) =>
         expect(
-          screen.getByText(itemExpectedEnabled).closest('li')
+          screen.getByText(itemExpectedEnabled).closest('div')
         ).not.toHaveAttribute('aria-disabled');
 
       if (expectEnabled) {

assets/js/pages/SettingsPage/SettingsPage.jsx

@@ -131,31 +131,25 @@ function SettingsPage() {
                   Get your key here 👇 and use it to register your first agents,
                   or to add new ones.
                 </p>
-                <Transition
-                  show={Boolean(apiKey)}
-                  enter="transition duration-100 ease-out"
-                  enterFrom="transform opacity-0"
-                  enterTo="transform opacity-100"
-                  leave="transition duration-100 ease-out"
-                  leaveFrom="transform opacity-100"
-                  leaveTo="transform opacity-0"
-                >
-                  {hasApiKey ? (
-                    <div className="flex">
-                      <ApiKeyBox apiKey={apiKey} className="!w-11/12" />
-                      <CopyButton content={apiKey} />
-                    </div>
-                  ) : (
-                    <span>
-                      We were unable to provide you the API key you need 😱
-                      <br />
-                      Contact support for help!
-                    </span>
-                  )}
+                <Transition show={Boolean(apiKey)}>
+                  <div className="transition duration-100 ease-out data-[closed]:opacity-0">
+                    {hasApiKey ? (
+                      <div className="flex">
+                        <ApiKeyBox apiKey={apiKey} className="!w-11/12" />
+                        <CopyButton content={apiKey} />
+                      </div>
+                    ) : (
+                      <span>
+                        We were unable to provide you the API key you need 😱
+                        <br />
+                        Contact support for help!
+                      </span>
+                    )}
 
-                  {apiKey && (
-                    <ApiKeyExpireInfo apiKeyExpiration={apiKeyExpiration} />
-                  )}
+                    {apiKey && (
+                      <ApiKeyExpireInfo apiKeyExpiration={apiKeyExpiration} />
+                    )}
+                  </div>
                 </Transition>
               </div>
             </div>

assets/js/pages/Users/UserForm.test.jsx

@@ -301,10 +301,11 @@ describe('UserForm', () => {
 
     await user.click(screen.getByText('Disabled'));
 
-    expect(screen.getAllByText('Enabled')[1].closest('li')).toHaveAttribute(
+    expect(screen.getAllByText('Enabled')[1].closest('div')).toHaveAttribute(
       'aria-disabled',
       'true'
     );
+
     expect(mockOnSave).not.toHaveBeenCalled();
   });
 

assets/js/pages/Users/Users.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { screen, render } from '@testing-library/react';
+import { screen, render, waitFor } from '@testing-library/react';
 import { adminUser, userFactory } from '@lib/test-utils/factories/users';
 import { renderWithRouter } from '@lib/test-utils';
 import { userEvent } from '@testing-library/user-event';
@@ -44,6 +44,7 @@ describe('Users', () => {
       enabled: true,
       created_at: creationTime[0],
     });
+
     const user = userFactory.build({
       enabled: false,
       created_at: creationTime[1],
@@ -90,10 +91,10 @@ describe('Users', () => {
     expect(screen.getAllByText(user.username)[1]).toBeVisible();
 
     const cancelButton = screen.getByRole('button', { name: /Cancel/i });
-    const modalTitel = screen.getByText(modalHeader);
-    expect(modalTitel).toBeInTheDocument();
+    const modalTitle = screen.getByText(modalHeader);
+    expect(modalTitle).toBeInTheDocument();
     await userEvent.click(cancelButton);
-    expect(modalTitel).not.toBeInTheDocument();
+    await waitFor(() => expect(modalTitle).not.toBeInTheDocument());
   });
 
   describe('Single sign on', () => {