@open-kingdom/shared-frontend-feature-user-management 0.0.2-9

package/src/lib/components/shared/ConfirmDialog.component.spec.tsx

@@ -0,0 +1,45 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ConfirmDialog } from './ConfirmDialog.component';
+
+describe('ConfirmDialog', () => {
+  const defaultProps = {
+    isOpen: true,
+    title: 'Delete User',
+    message: 'Are you sure?',
+    confirmLabel: 'Delete',
+    onConfirm: jest.fn(),
+    onCancel: jest.fn(),
+  };
+
+  it('shows the confirmation message when opened', () => {
+    render(<ConfirmDialog {...defaultProps} />);
+    expect(screen.getByText('Delete User')).toBeInTheDocument();
+    expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+  });
+
+  it('hides the dialog when closed', () => {
+    render(<ConfirmDialog {...defaultProps} isOpen={false} />);
+    expect(screen.queryByText('Delete User')).not.toBeInTheDocument();
+  });
+
+  it('proceeds with the action when confirmed', () => {
+    const onConfirm = jest.fn();
+    render(<ConfirmDialog {...defaultProps} onConfirm={onConfirm} />);
+    fireEvent.click(screen.getByText('Delete'));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels when clicking Cancel', () => {
+    const onCancel = jest.fn();
+    render(<ConfirmDialog {...defaultProps} onCancel={onCancel} />);
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('prevents interaction while the action is in progress', () => {
+    render(<ConfirmDialog {...defaultProps} isLoading={true} />);
+    expect(screen.getByText('Delete')).toBeDisabled();
+    expect(screen.getByText('Cancel')).toBeDisabled();
+  });
+});

package/src/lib/components/shared/ConfirmDialog.component.tsx

@@ -0,0 +1,58 @@
+import { ModalOverlay } from './ModalOverlay.component';
+import { buttonSecondaryStyles, buttonDangerStyles } from '../../styles';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isLoading?: boolean;
+}
+
+export function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  onConfirm,
+  onCancel,
+  isLoading = false,
+}: ConfirmDialogProps) {
+  const titleId = 'confirm-dialog-title';
+
+  return (
+    <ModalOverlay isOpen={isOpen} onClose={onCancel} ariaLabelledBy={titleId}>
+      <h3
+        id={titleId}
+        className="text-lg font-semibold text-neutral-900 dark:text-neutral-100"
+      >
+        {title}
+      </h3>
+      <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+        {message}
+      </p>
+      <div className="mt-6 flex justify-end gap-3">
+        <button
+          type="button"
+          data-testid="confirm-cancel-btn"
+          onClick={onCancel}
+          disabled={isLoading}
+          className={buttonSecondaryStyles}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          data-testid="confirm-btn"
+          onClick={onConfirm}
+          disabled={isLoading}
+          className={buttonDangerStyles}
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </ModalOverlay>
+  );
+}

package/src/lib/components/shared/FormField.component.spec.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { FormField } from './FormField.component';
+
+describe('FormField', () => {
+  it('displays the field label', () => {
+    render(
+      <FormField label="Email" htmlFor="email">
+        <input id="email" type="email" />
+      </FormField>
+    );
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+  });
+
+  it('marks required fields with an asterisk', () => {
+    render(
+      <FormField label="Email" htmlFor="email" required>
+        <input id="email" type="email" />
+      </FormField>
+    );
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  it('does not mark optional fields', () => {
+    render(
+      <FormField label="Name" htmlFor="name">
+        <input id="name" type="text" />
+      </FormField>
+    );
+    expect(screen.queryByText('*')).not.toBeInTheDocument();
+  });
+
+  it('shows an error message when validation fails', () => {
+    render(
+      <FormField label="Email" htmlFor="email" error="Invalid email">
+        <input id="email" type="email" />
+      </FormField>
+    );
+    expect(screen.getByText('Invalid email')).toBeInTheDocument();
+  });
+
+  it('hides the error message when the field is valid', () => {
+    render(
+      <FormField label="Email" htmlFor="email">
+        <input id="email" type="email" />
+      </FormField>
+    );
+    expect(screen.queryByText('Invalid email')).not.toBeInTheDocument();
+  });
+});

package/src/lib/components/shared/FormField.component.tsx

@@ -0,0 +1,34 @@
+import { labelStyles } from '../../styles';
+
+interface FormFieldProps {
+  label: string;
+  htmlFor: string;
+  required?: boolean;
+  error?: string;
+  children: React.ReactNode;
+}
+
+export function FormField({
+  label,
+  htmlFor,
+  required,
+  error,
+  children,
+}: FormFieldProps) {
+  return (
+    <div>
+      <label htmlFor={htmlFor} className={labelStyles}>
+        {label} {required && <span className="text-error-500">*</span>}
+      </label>
+      {children}
+      {error && (
+        <p
+          data-testid="field-error"
+          className="mt-1 text-sm text-error-600 dark:text-error-400"
+        >
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/lib/components/shared/ModalOverlay.component.spec.tsx

@@ -0,0 +1,81 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ModalOverlay } from './ModalOverlay.component';
+
+describe('ModalOverlay', () => {
+  it('shows the content when opened', () => {
+    render(
+      <ModalOverlay
+        isOpen={true}
+        onClose={jest.fn()}
+        ariaLabelledBy="test-title"
+      >
+        <p>Modal Content</p>
+      </ModalOverlay>
+    );
+    expect(screen.getByText('Modal Content')).toBeInTheDocument();
+  });
+
+  it('hides the content when closed', () => {
+    render(
+      <ModalOverlay
+        isOpen={false}
+        onClose={jest.fn()}
+        ariaLabelledBy="test-title"
+      >
+        <p>Modal Content</p>
+      </ModalOverlay>
+    );
+    expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
+  });
+
+  it('is announced as a dialog for screen readers', () => {
+    render(
+      <ModalOverlay
+        isOpen={true}
+        onClose={jest.fn()}
+        ariaLabelledBy="test-title"
+      >
+        <p>Content</p>
+      </ModalOverlay>
+    );
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+    expect(dialog).toHaveAttribute('aria-labelledby', 'test-title');
+  });
+
+  it('closes when pressing Escape', () => {
+    const onClose = jest.fn();
+    render(
+      <ModalOverlay isOpen={true} onClose={onClose} ariaLabelledBy="test-title">
+        <p>Content</p>
+      </ModalOverlay>
+    );
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('closes when clicking outside', () => {
+    const onClose = jest.fn();
+    render(
+      <ModalOverlay isOpen={true} onClose={onClose} ariaLabelledBy="test-title">
+        <p>Content</p>
+      </ModalOverlay>
+    );
+    const backdrop = screen.getByRole('dialog').parentElement;
+    expect(backdrop).toBeTruthy();
+    fireEvent.click(backdrop as HTMLElement);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('stays open when clicking inside', () => {
+    const onClose = jest.fn();
+    render(
+      <ModalOverlay isOpen={true} onClose={onClose} ariaLabelledBy="test-title">
+        <p>Content</p>
+      </ModalOverlay>
+    );
+    fireEvent.click(screen.getByText('Content'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});

package/src/lib/components/shared/ModalOverlay.component.tsx

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { useKeyboardEvent } from '@react-hookz/web';
+
+interface ModalOverlayProps {
+  isOpen: boolean;
+  onClose: () => void;
+  ariaLabelledBy: string;
+  children: React.ReactNode;
+}
+
+export function ModalOverlay({
+  isOpen,
+  onClose,
+  ariaLabelledBy,
+  children,
+}: ModalOverlayProps) {
+  useKeyboardEvent('Escape', () => {
+    if (isOpen) onClose();
+  });
+
+  const dialogRef = useCallback((node: HTMLDivElement | null) => {
+    node?.focus();
+  }, []);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={onClose}
+    >
+      <div
+        ref={dialogRef}
+        className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl dark:bg-neutral-800"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={ariaLabelledBy}
+        tabIndex={-1}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/lib/components/shared/RoleBadge.component.spec.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { RoleBadge } from './RoleBadge.component';
+
+describe('RoleBadge', () => {
+  it('displays "Admin" for admin users', () => {
+    render(<RoleBadge role="admin" />);
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('displays "User" for regular users', () => {
+    render(<RoleBadge role="user" />);
+    expect(screen.getByText('User')).toBeInTheDocument();
+  });
+
+  it('displays "Guest" for guest users', () => {
+    render(<RoleBadge role="guest" />);
+    expect(screen.getByText('Guest')).toBeInTheDocument();
+  });
+});

package/src/lib/components/shared/RoleBadge.component.tsx

@@ -0,0 +1,25 @@
+import type { Role } from '../../types';
+
+const roleStyles: Record<Role, string> = {
+  admin:
+    'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+  user: 'bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300',
+  guest:
+    'bg-neutral-100 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300',
+};
+
+interface RoleBadgeProps {
+  role: Role;
+}
+
+export function RoleBadge({ role }: RoleBadgeProps) {
+  if (!role) return null;
+  const label = role.charAt(0).toUpperCase() + role.slice(1);
+  return (
+    <span
+      className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${roleStyles[role]}`}
+    >
+      {label}
+    </span>
+  );
+}

package/src/lib/components/shared/StatusCard.component.spec.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { StatusCard } from './StatusCard.component';
+
+describe('StatusCard', () => {
+  it('shows a loading message', () => {
+    render(<StatusCard variant="loading" message="Loading..." />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('announces errors to screen readers', () => {
+    render(
+      <StatusCard
+        variant="error"
+        title="Error"
+        message="Something went wrong"
+      />
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('shows a success message', () => {
+    render(<StatusCard variant="success" title="Done" message="All good" />);
+    expect(screen.getByText('Done')).toBeInTheDocument();
+    expect(screen.getByText('All good')).toBeInTheDocument();
+  });
+
+  it('displays additional content like links', () => {
+    render(
+      <StatusCard variant="success" title="Done" message="All good">
+        <a href="/login">Go to login</a>
+      </StatusCard>
+    );
+    expect(screen.getByText('Go to login')).toBeInTheDocument();
+  });
+
+  it('shows only the message when no title is given', () => {
+    render(<StatusCard variant="error" message="Something went wrong" />);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+});

package/src/lib/components/shared/StatusCard.component.tsx

@@ -0,0 +1,47 @@
+import { cardStyles, bodyTextStyles } from '../../styles';
+
+type StatusVariant = 'loading' | 'error' | 'success';
+
+interface StatusCardProps {
+  variant: StatusVariant;
+  title?: string;
+  message: string;
+  children?: React.ReactNode;
+}
+
+const headingStyles: Record<Exclude<StatusVariant, 'loading'>, string> = {
+  error: 'text-xl font-bold text-error-700 dark:text-error-400',
+  success: 'text-xl font-bold text-success-700 dark:text-success-400',
+};
+
+export function StatusCard({
+  variant,
+  title,
+  message,
+  children,
+}: StatusCardProps) {
+  if (variant === 'loading') {
+    return (
+      <div className={cardStyles}>
+        <p className={`text-center ${bodyTextStyles}`}>{message}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cardStyles}
+      role={variant === 'error' ? 'alert' : undefined}
+    >
+      {title && (
+        <h2 data-testid="status-card-title" className={headingStyles[variant]}>
+          {title}
+        </h2>
+      )}
+      <p data-testid="status-card-message" className={`mt-2 ${bodyTextStyles}`}>
+        {message}
+      </p>
+      {children}
+    </div>
+  );
+}

package/src/lib/components/users/UserList.component.spec.tsx

@@ -0,0 +1,216 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import type { ColDef } from 'ag-grid-community';
+import { UserList } from './UserList.component';
+
+const mockFindAllQuery = jest.fn();
+const mockDeleteUser = jest.fn();
+
+jest.mock('@open-kingdom/shared-frontend-data-access-api-client', () => ({
+  useUsersControllerFindAllQuery: () => mockFindAllQuery(),
+  useUsersControllerDeleteMutation: () => [
+    mockDeleteUser,
+    { isLoading: false },
+  ],
+  useInvitationsControllerInviteMutation: () => [
+    jest.fn(),
+    { isLoading: false, error: null },
+  ],
+}));
+
+jest.mock('@open-kingdom/shared-frontend-data-access-notifications', () => ({
+  showSuccessNotification: jest.fn((msg: string) => ({
+    type: 'notify',
+    payload: msg,
+  })),
+}));
+
+jest.mock('@open-kingdom/shared-frontend-ui-theme', () => ({
+  __esModule: true,
+  useTheme: () => ({ theme: {}, mode: 'light' }),
+}));
+
+let capturedColumnDefs: ColDef[] = [];
+jest.mock('@open-kingdom/shared-frontend-ui-datagrid', () => ({
+  __esModule: true,
+  DataGrid: ({
+    rowData,
+    loading,
+    columnDefs,
+  }: {
+    rowData: Record<string, unknown>[];
+    loading: boolean;
+    columnDefs: ColDef[];
+  }) => {
+    capturedColumnDefs = columnDefs;
+    const rows = rowData ?? [];
+    return (
+      <div data-testid="data-grid">
+        {loading && <span>Loading...</span>}
+        {!loading &&
+          rows.map((row, i) => (
+            <div key={i} data-testid="grid-row">
+              {columnDefs.map((col, j) => {
+                const value = col.valueGetter
+                  ? (col.valueGetter as CallableFunction)({ data: row })
+                  : (row as Record<string, unknown>)[col.field as string];
+                const rendered = col.cellRenderer
+                  ? (col.cellRenderer as CallableFunction)({ data: row })
+                  : value;
+                return <span key={j}>{rendered}</span>;
+              })}
+            </div>
+          ))}
+      </div>
+    );
+  },
+}));
+
+jest.mock('../shared/ConfirmDialog.component', () => ({
+  __esModule: true,
+  ConfirmDialog: ({
+    isOpen,
+    title,
+    onConfirm,
+    onCancel,
+  }: {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    confirmLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    isLoading: boolean;
+  }) =>
+    isOpen ? (
+      <div data-testid="confirm-dialog">
+        <span>{title}</span>
+        <button onClick={onConfirm}>Confirm</button>
+        <button onClick={onCancel}>Cancel</button>
+      </div>
+    ) : null,
+}));
+
+jest.mock('../shared/RoleBadge.component', () => ({
+  __esModule: true,
+  RoleBadge: ({ role }: { role: string }) => (
+    <span data-testid="role-badge">{role}</span>
+  ),
+}));
+
+jest.mock('../invitations', () => ({
+  __esModule: true,
+  InviteUserModal: () => null,
+}));
+
+const store = configureStore({ reducer: {} });
+
+function renderWithProviders(ui: React.ReactElement) {
+  return render(<Provider store={store}>{ui}</Provider>);
+}
+
+const mockUsers = [
+  {
+    id: 1,
+    email: 'admin@test.com',
+    firstName: 'Admin',
+    lastName: 'User',
+    role: 'admin',
+  },
+  {
+    id: 2,
+    email: 'guest@test.com',
+    firstName: null,
+    lastName: null,
+    role: 'guest',
+  },
+];
+
+describe('UserList', () => {
+  beforeEach(() => {
+    mockDeleteUser.mockReset();
+    mockDeleteUser.mockReturnValue({ unwrap: () => Promise.resolve() });
+    capturedColumnDefs = [];
+  });
+
+  it('shows a loading indicator while fetching users', () => {
+    mockFindAllQuery.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      error: null,
+      refetch: jest.fn(),
+    });
+    renderWithProviders(<UserList />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('shows the user list with an invite button', () => {
+    mockFindAllQuery.mockReturnValue({
+      data: mockUsers,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    });
+    renderWithProviders(<UserList />);
+    expect(screen.getByText('Users')).toBeInTheDocument();
+    expect(screen.getByText('Invite User')).toBeInTheDocument();
+  });
+
+  it('shows an error with a retry option when loading fails', () => {
+    mockFindAllQuery.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: { status: 500 },
+      refetch: jest.fn(),
+    });
+    renderWithProviders(<UserList />);
+    expect(screen.getByText('Failed to load users.')).toBeInTheDocument();
+    expect(screen.getByText('Try again')).toBeInTheDocument();
+  });
+
+  it('retries loading users when clicking "Try again"', () => {
+    const refetch = jest.fn();
+    mockFindAllQuery.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: { status: 500 },
+      refetch,
+    });
+    renderWithProviders(<UserList />);
+    fireEvent.click(screen.getByText('Try again'));
+    expect(refetch).toHaveBeenCalled();
+  });
+
+  it('asks for confirmation before deleting a user', async () => {
+    mockFindAllQuery.mockReturnValue({
+      data: mockUsers,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    });
+    renderWithProviders(<UserList currentUserId={1} />);
+
+    const actionsCol = capturedColumnDefs.find(
+      (c) => c.headerName === 'Actions'
+    );
+    const { container } = render(
+      <Provider store={store}>
+        {(actionsCol?.cellRenderer as CallableFunction)({ data: mockUsers[1] })}
+      </Provider>
+    );
+    const deleteBtn = container.querySelector('button');
+    expect(deleteBtn).toBeTruthy();
+    fireEvent.click(deleteBtn as HTMLElement);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('Confirm'));
+    await waitFor(() => {
+      expect(mockDeleteUser).toHaveBeenCalledWith({ id: 2 });
+    });
+  });
+});