Migrate DeleteServerModal to tailwind components

config/test/setupTests.ts

@@ -22,3 +22,12 @@ afterEach(() => {
 HTMLCanvasElement.prototype.getContext = (() => {}) as any;
 (global as any).scrollTo = () => {};
 (global as any).matchMedia = () => ({ matches: false });
+
+HTMLDialogElement.prototype.showModal = function() {
+  this.setAttribute('open', '');
+};
+HTMLDialogElement.prototype.close = function() {
+  this.removeAttribute('open');
+  this.dispatchEvent(new CloseEvent('close'));
+  this.dispatchEvent(new CloseEvent('cancel'));
+};

src/servers/CreateServer.tsx

@@ -1,11 +1,10 @@
 import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { ResultProps } from '@shlinkio/shlink-frontend-kit/tailwind';
-import { Result } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button, Result } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -29,7 +28,7 @@ type CreateServerDeps = {
 };
 
 const ImportResult = ({ variant }: Pick<ResultProps, 'variant'>) => (
-  <div className="mt-3">
+  <div className="tw:mt-4">
     <Result variant={variant}>
       {variant === 'success' && 'Servers properly imported. You can now select one from the list :)'}
       {variant === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
@@ -74,8 +73,8 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
         {!hasServers && (
           <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />
         )}
-        {hasServers && <Button outline onClick={goBack}>Cancel</Button>}
+        {hasServers && <Button variant="secondary" onClick={goBack}>Cancel</Button>}
-        <Button outline color="primary">Create server</Button>
+        <Button type="submit">Create server</Button>
       </ServerForm>
 
       {serversImported && <ImportResult variant="success" />}

src/servers/DeleteServerButton.tsx

@@ -3,6 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import type { ServerWithId } from './data';
@@ -23,6 +25,13 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
 ) => {
   const { DeleteServerModal } = useDependencies(DeleteServerButton);
   const [isModalOpen, , showModal, hideModal] = useToggle();
+  const navigate = useNavigate();
+  const onClose = useCallback((confirmed: boolean) => {
+    hideModal();
+    if (confirmed) {
+      navigate('/');
+    }
+  }, [hideModal, navigate]);
 
   return (
     <>
@@ -31,7 +40,7 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
         <span className={textClassName}>{children ?? 'Remove this server'}</span>
       </button>
 
-      <DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
+      <DeleteServerModal server={server} open={isModalOpen} onClose={onClose} />
     </>
   );
 };

src/servers/DeleteServerModal.tsx

@@ -1,56 +1,40 @@
+import { CardModal } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
-import { useRef } from 'react';
+import { useCallback } from 'react';
-import { useNavigate } from 'react-router';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import type { ServerWithId } from './data';
 
-export interface DeleteServerModalProps {
+export type DeleteServerModalProps = {
   server: ServerWithId;
-  toggle: () => void;
+  onClose: (confirmed: boolean) => void;
-  isOpen: boolean;
+  open: boolean;
-  redirectHome?: boolean;
+};
-}
 
-interface DeleteServerModalConnectProps extends DeleteServerModalProps {
+type DeleteServerModalConnectProps = DeleteServerModalProps & {
   deleteServer: (server: ServerWithId) => void;
-}
+};
-
-export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
-  { server, toggle, isOpen, deleteServer, redirectHome = true },
-) => {
-  const navigate = useNavigate();
-  const doDelete = useRef<boolean>(false);
-  const toggleAndDelete = () => {
-    doDelete.current = true;
-    toggle();
-  };
-  const onClosed = () => {
-    if (!doDelete.current) {
-      return;
-    }
 
+export const DeleteServerModal: FC<DeleteServerModalConnectProps> = ({ server, onClose, open, deleteServer }) => {
+  const onConfirm = useCallback(() => {
     deleteServer(server);
-    if (redirectHome) {
+    onClose(true);
-      navigate('/');
+  }, [deleteServer, onClose, server]);
-    }
-  };
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered onClosed={onClosed}>
+    <CardModal
-      <ModalHeader toggle={toggle} className="text-danger">Remove server</ModalHeader>
+      open={open}
-      <ModalBody>
+      title="Remove server"
-        <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
+      variant="danger"
-        <p>
+      onClose={() => onClose(false)}
-          <i>
+      onConfirm={onConfirm}
-            No data will be deleted, only the access to this server will be removed from this device.
+      confirmText="Delete"
-            You can create it again at any moment.
+    >
-          </i>
+      <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
-        </p>
+      <p>
-      </ModalBody>
+        <i>
-      <ModalFooter>
+          No data will be deleted, only the access to this server will be removed from this device.
-        <Button color="link" onClick={toggle}>Cancel</Button>
+          You can create it again at any moment.
-        <Button color="danger" onClick={toggleAndDelete}>Delete</Button>
+        </i>
-      </ModalFooter>
+      </p>
-    </Modal>
+    </CardModal>
   );
 };

src/servers/ManageServersRowDropdown.tsx

@@ -48,11 +48,11 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
         <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
       </DropdownItem>
       <DropdownItem divider tag="hr" />
-      <DropdownItem className="dropdown-item--danger" onClick={showModal}>
+      <DropdownItem className="tw:text-danger" onClick={showModal}>
         <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
       </DropdownItem>
 
-      <DeleteServerModal redirectHome={false} server={server} isOpen={isModalOpen} toggle={hideModal} />
+      <DeleteServerModal server={server} open={isModalOpen} onClose={hideModal} />
     </RowDropdownBtn>
   );
 };

test/__helpers__/TestModalWrapper.tsx

@@ -1,14 +1,16 @@
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC, ReactElement } from 'react';
+import { useCallback, useState } from 'react';
 
-interface RenderModalArgs {
+export type RenderModalArgs = {
-  isOpen: boolean;
+  open: boolean;
-  toggle: () => void;
+  onClose: () => void;
-}
+};
 
 export const TestModalWrapper: FC<{ renderModal: (args: RenderModalArgs) => ReactElement }> = (
   { renderModal },
 ) => {
-  const [isOpen, toggle] = useToggle(true);
+  const [open, setOpen] = useState(true);
-  return renderModal({ isOpen, toggle });
+  const onClose = useCallback(() => setOpen(false), []);
+
+  return renderModal({ open, onClose });
 };

test/servers/DeleteServerButton.test.tsx

@@ -1,18 +1,28 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { createMemoryHistory } from 'history';
 import type { ReactNode } from 'react';
+import { Router } from 'react-router';
 import { DeleteServerButtonFactory } from '../../src/servers/DeleteServerButton';
 import type { DeleteServerModalProps } from '../../src/servers/DeleteServerModal';
+import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DeleteServerButton />', () => {
   const DeleteServerButton = DeleteServerButtonFactory(fromPartial({
-    DeleteServerModal: ({ isOpen }: DeleteServerModalProps) => <>DeleteServerModal {isOpen ? '[Open]' : '[Closed]'}</>,
+    DeleteServerModal: (props: DeleteServerModalProps) => <DeleteServerModal {...props} deleteServer={vi.fn()} />,
   }));
-  const setUp = (children?: ReactNode) => renderWithEvents(
+  const setUp = (children?: ReactNode) => {
-    <DeleteServerButton server={fromPartial({})} textClassName="button">{children}</DeleteServerButton>,
+    const history = createMemoryHistory({ initialEntries: ['/foo'] });
-  );
+    const result = renderWithEvents(
+      <Router location={history.location} navigator={history}>
+        <DeleteServerButton server={fromPartial({})} textClassName="button">{children}</DeleteServerButton>
+      </Router>,
+    );
+
+    return { history, ...result };
+  };
 
   it('passes a11y checks', () => checkAccessibility(setUp('Delete me')));
 
@@ -28,14 +38,21 @@ describe('<DeleteServerButton />', () => {
   });
 
   it('displays modal when button is clicked', async () => {
-    const { user, container } = setUp();
+    const { user } = setUp();
 
-    expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Closed/);
+    expect(screen.queryByText(/Are you sure you want to remove/)).not.toBeInTheDocument();
-    expect(screen.getByText(/DeleteServerModal/)).not.toHaveTextContent(/Open/);
+    await user.click(screen.getByText('Remove this server'));
-    if (container.firstElementChild) {
+    expect(screen.getByText(/Are you sure you want to remove/)).toBeInTheDocument();
-      await user.click(container.firstElementChild);
+  });
-    }
 
-    await waitFor(() => expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Open/));
+  it('navigates to home when deletion is confirmed', async () => {
+    const { user, history } = setUp();
+
+    // Open modal
+    await user.click(screen.getByText('Remove this server'));
+
+    expect(history.location.pathname).toEqual('/foo');
+    await user.click(screen.getByRole('button', { name: 'Delete' }));
+    expect(history.location.pathname).toEqual('/');
   });
 });

test/servers/DeleteServerModal.test.tsx

@@ -1,7 +1,5 @@
-import { act, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
@@ -10,36 +8,29 @@ import { TestModalWrapper } from '../__helpers__/TestModalWrapper';
 describe('<DeleteServerModal />', () => {
   const deleteServerMock = vi.fn();
   const serverName = 'the_server_name';
-  const setUp = async () => {
+  const setUp = () => renderWithEvents(
-    const history = createMemoryHistory({ initialEntries: ['/foo'] });
+    <TestModalWrapper
-    const result = await act(() => renderWithEvents(
+      renderModal={(args) => (
-      <Router location={history.location} navigator={history}>
+        <DeleteServerModal
-        <TestModalWrapper
+          {...args}
-          renderModal={(args) => (
+          server={fromPartial({ name: serverName })}
-            <DeleteServerModal
+          deleteServer={deleteServerMock}
-              {...args}
-              server={fromPartial({ name: serverName })}
-              deleteServer={deleteServerMock}
-            />
-          )}
         />
-      </Router>,
+      )}
-    ));
+    />,
-
+  );
-    return { history, ...result };
-  };
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
-  it('renders a modal window', async () => {
+  it('renders a modal window', () => {
-    await setUp();
+    setUp();
 
     expect(screen.getByRole('dialog')).toBeInTheDocument();
     expect(screen.getByRole('heading')).toHaveTextContent('Remove server');
   });
 
-  it('displays the name of the server as part of the content', async () => {
+  it('displays the name of the server as part of the content', () => {
-    await setUp();
+    setUp();
 
     expect(screen.getByText(/^Are you sure you want to remove/)).toBeInTheDocument();
     expect(screen.getByText(serverName)).toBeInTheDocument();
@@ -47,25 +38,20 @@ describe('<DeleteServerModal />', () => {
 
   it.each([
     [() => screen.getByRole('button', { name: 'Cancel' })],
-    [() => screen.getByLabelText('Close')],
+    [() => screen.getByLabelText('Close dialog')],
   ])('toggles when clicking cancel button', async (getButton) => {
-    const { user, history } = await setUp();
+    const { user } = setUp();
 
-    expect(history.location.pathname).toEqual('/foo');
     await user.click(getButton());
-
     expect(deleteServerMock).not.toHaveBeenCalled();
-    expect(history.location.pathname).toEqual('/foo'); // No navigation happens, keeping initial pathname
   });
 
   it('deletes server when clicking accept button', async () => {
-    const { user, history } = await setUp();
+    const { user } = setUp();
 
     expect(deleteServerMock).not.toHaveBeenCalled();
-    expect(history.location.pathname).toEqual('/foo');
     await user.click(screen.getByRole('button', { name: 'Delete' }));
 
     await waitFor(() => expect(deleteServerMock).toHaveBeenCalledTimes(1));
-    await waitFor(() => expect(history.location.pathname).toEqual('/'));
   });
 });

test/servers/ManageServersRowDropdown.test.tsx

@@ -9,8 +9,8 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ManageServersRowDropdown />', () => {
   const ManageServersRowDropdown = ManageServersRowDropdownFactory(fromPartial({
-    DeleteServerModal: ({ isOpen }: { isOpen: boolean }) => (
+    DeleteServerModal: ({ open }: { open: boolean }) => (
-      <span>DeleteServerModal {isOpen ? '[OPEN]' : '[CLOSED]'}</span>
+      <span>DeleteServerModal {open ? '[OPEN]' : '[CLOSED]'}</span>
     ),
   }));
   const setAutoConnect = vi.fn();

test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap

@@ -114,7 +114,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
         tabindex="-1"
       />
       <button
-        class="dropdown-item--danger dropdown-item"
+        class="tw:text-danger dropdown-item"
         role="menuitem"
         tabindex="0"
         type="button"
@@ -259,7 +259,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
         tabindex="-1"
       />
       <button
-        class="dropdown-item--danger dropdown-item"
+        class="tw:text-danger dropdown-item"
         role="menuitem"
         tabindex="0"
         type="button"

vite.config.ts

@@ -26,6 +26,10 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    watch: {
+      // Do not watch test files or generated files, avoiding the dev server to constantly reload when not needed
+      ignored: ['**/.idea/**', '**/.git/**', '**/build/**', '**/coverage/**', '**/test/**'],
+    },
   },
   base: !homepage ? undefined : homepage, // Not using just homepage because empty string should be discarded