@open-kingdom/shared-frontend-feature-user-management 0.0.2-13 → 0.0.2-16

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

@@ -1,216 +0,0 @@
-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 });
-    });
-  });
-});

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

@@ -1,153 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import type { ColDef, ICellRendererParams } from 'ag-grid-community';
-import {
-  useUsersControllerFindAllQuery,
-  useUsersControllerDeleteMutation,
-} from '@open-kingdom/shared-frontend-data-access-api-client';
-import { showSuccessNotification } from '@open-kingdom/shared-frontend-data-access-notifications';
-import {
-  DataGrid,
-  type DataGridTheme,
-} from '@open-kingdom/shared-frontend-ui-datagrid';
-import { useTheme } from '@open-kingdom/shared-frontend-ui-theme';
-import { ConfirmDialog } from '../shared/ConfirmDialog.component';
-import { RoleBadge } from '../shared/RoleBadge.component';
-import { InviteUserModal } from '../invitations';
-import { buttonPrimaryStyles } from '../../styles';
-import type { User } from '../../types';
-
-interface UserListProps {
-  currentUserId?: number;
-}
-
-export function UserList({ currentUserId }: UserListProps) {
-  const dispatch = useDispatch();
-  const { theme, mode } = useTheme();
-  const { data, isLoading, error, refetch } = useUsersControllerFindAllQuery();
-  const [deleteUser, { isLoading: isDeleting }] =
-    useUsersControllerDeleteMutation();
-
-  const [showInviteModal, setShowInviteModal] = useState(false);
-  const [userToDelete, setUserToDelete] = useState<User | null>(null);
-
-  const users = (data as User[] | undefined) ?? [];
-
-  const handleDeleteConfirm = useCallback(async () => {
-    if (!userToDelete) return;
-    try {
-      await deleteUser({ id: userToDelete.id }).unwrap();
-      dispatch(showSuccessNotification('User deleted successfully'));
-    } catch {
-      // Error notification handled by RTK error middleware
-    } finally {
-      setUserToDelete(null);
-    }
-  }, [userToDelete, deleteUser, dispatch]);
-
-  const columnDefs = useMemo<ColDef<User>[]>(
-    () => [
-      { field: 'email', headerName: 'Email', flex: 2 },
-      {
-        headerName: 'Name',
-        flex: 2,
-        valueGetter: (params) => {
-          const { firstName, lastName } = params.data ?? {};
-          return [firstName, lastName].filter(Boolean).join(' ') || '—';
-        },
-      },
-      {
-        field: 'role',
-        headerName: 'Role',
-        flex: 1,
-        cellRenderer: (params: ICellRendererParams<User>) =>
-          params.data ? <RoleBadge role={params.data.role} /> : null,
-      },
-      {
-        headerName: 'Actions',
-        flex: 1,
-        sortable: false,
-        filter: false,
-        cellRenderer: (params: ICellRendererParams<User>) => {
-          if (!params.data) return null;
-          const isSelf = params.data.id === currentUserId;
-          return (
-            <button
-              onClick={() => params.data && setUserToDelete(params.data)}
-              disabled={isSelf}
-              title={isSelf ? 'Cannot delete your own account' : 'Delete user'}
-              className="rounded px-2 py-1 text-xs font-medium text-error-600 transition-colors hover:bg-error-50 disabled:cursor-not-allowed disabled:opacity-40 dark:text-error-400 dark:hover:bg-error-900/20"
-            >
-              Delete
-            </button>
-          );
-        },
-      },
-    ],
-    [currentUserId]
-  );
-
-  if (error) {
-    return (
-      <div
-        data-testid="users-error"
-        className="rounded-lg bg-error-50 p-6 text-center dark:bg-error-900/20"
-        role="alert"
-      >
-        <p className="text-error-700 dark:text-error-300">
-          Failed to load users.
-        </p>
-        <button
-          data-testid="users-retry-btn"
-          onClick={refetch}
-          className="mt-2 text-sm font-medium text-primary-600 hover:underline dark:text-primary-400"
-        >
-          Try again
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <div className="mb-4 flex items-center justify-between">
-        <h2
-          data-testid="users-heading"
-          className="text-xl font-semibold text-neutral-900 dark:text-neutral-100"
-        >
-          Users
-        </h2>
-        <button
-          data-testid="invite-user-btn"
-          onClick={() => setShowInviteModal(true)}
-          className={buttonPrimaryStyles}
-        >
-          Invite User
-        </button>
-      </div>
-
-      <DataGrid
-        rowData={users}
-        columnDefs={columnDefs}
-        mode={mode}
-        theme={theme as DataGridTheme}
-        loading={isLoading}
-      />
-
-      <InviteUserModal
-        isOpen={showInviteModal}
-        onClose={() => setShowInviteModal(false)}
-      />
-
-      <ConfirmDialog
-        isOpen={!!userToDelete}
-        title="Delete User"
-        message={`Are you sure you want to delete ${userToDelete?.email}? This action cannot be undone.`}
-        confirmLabel={isDeleting ? 'Deleting...' : 'Delete'}
-        onConfirm={handleDeleteConfirm}
-        onCancel={() => setUserToDelete(null)}
-        isLoading={isDeleting}
-      />
-    </div>
-  );
-}

package/src/lib/styles.ts

@@ -1,19 +0,0 @@
-export const inputStyles =
-  'w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100';
-
-export const labelStyles =
-  'block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1';
-
-export const cardStyles =
-  'max-w-md mx-auto mt-8 p-6 bg-white dark:bg-neutral-800 rounded-lg shadow-lg';
-
-export const bodyTextStyles = 'text-neutral-600 dark:text-neutral-400';
-
-const buttonBaseStyles =
-  'rounded-md px-4 py-2 text-sm font-medium transition-colors';
-
-export const buttonPrimaryStyles = `${buttonBaseStyles} bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50`;
-
-export const buttonSecondaryStyles = `${buttonBaseStyles} border border-neutral-300 text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-700`;
-
-export const buttonDangerStyles = `${buttonBaseStyles} bg-error-500 text-white hover:bg-error-600 disabled:opacity-50`;

package/src/lib/types.ts

@@ -1,9 +0,0 @@
-export type Role = 'guest' | 'user' | 'admin';
-
-export interface User {
-  id: number;
-  email: string;
-  firstName: string | null;
-  lastName: string | null;
-  role: Role;
-}

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../../../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,47 +0,0 @@
-{
-  "extends": "../../../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "vite/client"
-    ],
-    "rootDir": "src",
-    "jsx": "react-jsx",
-    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
-    "lib": ["dom", "dom.iterable", "es2022"]
-  },
-  "exclude": [
-    "out-tsc",
-    "dist",
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx",
-    "jest.config.ts",
-    "jest.config.cts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
-  "references": [
-    {
-      "path": "../ui-theme/tsconfig.lib.json"
-    },
-    {
-      "path": "../ui-datagrid/tsconfig.lib.json"
-    },
-    {
-      "path": "../data-access-notifications/tsconfig.lib.json"
-    },
-    {
-      "path": "../data-access-api-client/tsconfig.lib.json"
-    }
-  ]
-}

package/tsconfig.spec.json

@@ -1,27 +0,0 @@
-{
-  "extends": "../../../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/jest",
-    "lib": ["es2022", "dom"],
-    "jsx": "react-jsx",
-    "types": ["jest", "node"]
-  },
-  "include": [
-    "jest.config.ts",
-    "jest.config.cts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}

package/vite.config.mts

@@ -1,58 +0,0 @@
-/// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import * as path from 'path';
-
-export default defineConfig(() => ({
-  root: import.meta.dirname,
-  cacheDir:
-    '../../../../node_modules/.vite/libs/shared/frontend/feature-user-management',
-  plugins: [
-    react(),
-    dts({
-      entryRoot: 'src',
-      tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),
-    }),
-  ],
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [],
-  // },
-  // Configuration for building your library.
-  // See: https://vite.dev/guide/build.html#library-mode
-  build: {
-    outDir: './dist',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: '@open-kingdom/feature-user-management',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ['es' as const],
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: [
-        'react',
-        'react-dom',
-        'react/jsx-runtime',
-        'react-redux',
-        '@reduxjs/toolkit',
-        'react-hook-form',
-        /^@hookform\/resolvers\/.*/,
-        'zod',
-        'ag-grid-community',
-        /^ag-grid-community\/.*/,
-        '@react-hookz/web',
-        /^@open-kingdom\/.*/,
-      ],
-    },
-  },
-}));