Phase 6.4: DMS-Forms on RHF + Zod

- Dms.tsx folder-create: RHF+Zod (name required) - ShareDialog add-share: RHF+Zod (shareId required, shareType/permission kept as useState) - Error display under each field - Preserved all existing functionality: folder tree, file grid, share links - Added 2 validation tests for ShareDialog (empty shareId, valid submit)
2026-07-24 00:32:00 +02:00
parent c334d02989
commit eb2f37b2bc
3 changed files with 119 additions and 26 deletions
@@ -0,0 +1,69 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+vi.mock('@/api/dms', () => ({
+  shareFile: vi.fn().mockResolvedValue({}),
+  removeShare: vi.fn(),
+}));
+
+vi.mock('@/api/permissions', () => ({
+  fetchFilePermissions: vi.fn().mockResolvedValue([]),
+  grantPermission: vi.fn(),
+  revokePermission: vi.fn(),
+  createShareLink: vi.fn(),
+  revokeShareLink: vi.fn(),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }),
+}));
+
+import { ShareDialog } from '@/components/dms/ShareDialog';
+import { shareFile } from '@/api/dms';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('ShareDialog validation (RHF + Zod)', () => {
+  it('shows validation error when share ID is empty', async () => {
+    render(
+      <ShareDialog
+        open
+        file={{ id: 'f1', name: 'test.pdf', folder_id: null, mime_type: 'application/pdf', size_bytes: 100, created_at: '', updated_at: '', created_by: '' } as any}
+        onClose={vi.fn()}
+        onShared={vi.fn()}
+      />
+    );
+    // Find the submit button inside the add-share form
+    const addShareButtons = screen.getAllByRole('button', { name: /hinzufügen|add share/i });
+    const submitBtn = addShareButtons.find((b) => b.getAttribute('type') === 'submit');
+    expect(submitBtn).toBeTruthy();
+    fireEvent.click(submitBtn!);
+    await waitFor(() => {
+      const errors = screen.getAllByText(/erforderlich|required/i);
+      expect(errors.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('calls shareFile when form is valid', async () => {
+    render(
+      <ShareDialog
+        open
+        file={{ id: 'f1', name: 'test.pdf', folder_id: null, mime_type: 'application/pdf', size_bytes: 100, created_at: '', updated_at: '', created_by: '' } as any}
+        onClose={vi.fn()}
+        onShared={vi.fn()}
+      />
+    );
+    // Fill in share ID - find the input inside the share-add-section
+    const shareSection = screen.getByTestId('share-add-section');
+    const input = shareSection.querySelector('input');
+    expect(input).toBeTruthy();
+    fireEvent.change(input!, { target: { value: 'user-123' } });
+    fireEvent.submit(input!.closest('form')!);
+    await waitFor(() => {
+      expect(shareFile).toHaveBeenCalledWith('f1', expect.objectContaining({ user_id: 'user-123' }));
+    }, { timeout: 3000 });
+  });
+});
@@ -5,6 +5,9 @@

 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Modal } from '@/components/ui/Modal';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -45,12 +48,22 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
  const [loading, setLoading] = useState(false);

  const [shareType, setShareType] = useState<'user' | 'group'>('user');
-  const [shareId, setShareId] = useState('');
  const [sharePermission, setSharePermission] = useState<'read' | 'write'>('read');
  const [linkPassword, setLinkPassword] = useState('');
  const [linkExpiry, setLinkExpiry] = useState('');
  const [submitting, setSubmitting] = useState(false);

+  // ── Share form (RHF + Zod) ──
+  const shareSchema = z.object({
+    shareId: z.string().min(1, 'required'),
+  });
+  type ShareFormData = z.infer<typeof shareSchema>;
+
+  const { register: registerShare, handleSubmit: handleSubmitShare, reset: resetShare, formState: { errors: shareErrors } } = useForm<ShareFormData>({
+    resolver: zodResolver(shareSchema),
+    defaultValues: { shareId: '' },
+  });
+
  const loadData = useCallback(async () => {
    if (!file) return;
    setLoading(true);
@@ -69,18 +82,18 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
    }
  }, [open, file, loadData]);

-  const handleAddShare = useCallback(async () => {
-    if (!file || !shareId) return;
+  const handleAddShare = useCallback(async (data: ShareFormData) => {
+    if (!file) return;
    setSubmitting(true);
    try {
      const payload: { user_id?: string; group_id?: string; permission: 'read' | 'write' } = {
        permission: sharePermission,
      };
-      if (shareType === 'user') payload.user_id = shareId;
-      else payload.group_id = shareId;
+      if (shareType === 'user') payload.user_id = data.shareId;
+      else payload.group_id = data.shareId;
      await shareFile(file.id, payload);
      toast.success(t('dms.shared'));
-      setShareId('');
+      resetShare({ shareId: '' });
      onShared();
      loadData();
    } catch (err) {
@@ -88,7 +101,7 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
      toast.error(msg);
    }
    setSubmitting(false);
-  }, [file, shareId, shareType, sharePermission, toast, t, onShared, loadData]);
+  }, [file, shareType, sharePermission, toast, t, onShared, loadData, resetShare]);

  const handleRemovePermission = useCallback(async (userId: string) => {
    if (!file) return;
@@ -155,6 +168,7 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
        {/* Add share section */}
        <div className="space-y-3" data-testid="share-add-section">
          <h3 className="text-sm font-semibold text-secondary-900">{t('dms.addShare')}</h3>
+          <form onSubmit={handleSubmitShare(handleAddShare)}>
          <div className="flex items-center gap-3 flex-wrap">
            <Select
              label={t('dms.userOrGroup')}
@@ -167,8 +181,8 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
            />
            <Input
              label={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
-              value={shareId}
-              onChange={(e) => setShareId(e.target.value)}
+              {...registerShare('shareId')}
+              error={shareErrors.shareId?.message === 'required' ? t('validation.required') : undefined}
              placeholder={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
            />
            <Select
@@ -182,13 +196,14 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
            />
          </div>
          <Button
-            onClick={handleAddShare}
+            type="submit"
            isLoading={submitting}
-            disabled={!shareId}
            size="sm"
+            className="mt-2"
          >
            {t('dms.addShare')}
          </Button>
+          </form>
        </div>

        {/* Current permissions */}
@@ -7,6 +7,9 @@

 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -69,7 +72,6 @@ export function DmsPage() {
  // Modal state
  const [showUpload, setShowUpload] = useState(false);
  const [showNewFolder, setShowNewFolder] = useState(false);
-  const [newFolderName, setNewFolderName] = useState('');
  const [previewFile, setPreviewFile] = useState<DmsFile | null>(null);
  const [shareFile, setShareFile] = useState<DmsFile | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<DmsFile | null>(null);
@@ -77,6 +79,17 @@ export function DmsPage() {
  const [showBulkMove, setShowBulkMove] = useState(false);
  const [bulkMoveTarget, setBulkMoveTarget] = useState<string>('');

+  // ── Folder create form (RHF + Zod) ──
+  const folderSchema = z.object({
+    name: z.string().min(1, 'required'),
+  });
+  type FolderFormData = z.infer<typeof folderSchema>;
+
+  const { register: registerFolder, handleSubmit: handleSubmitFolder, reset: resetFolder, formState: { errors: folderErrors } } = useForm<FolderFormData>({
+    resolver: zodResolver(folderSchema),
+    defaultValues: { name: '' },
+  });
+
  // Mobile view state
  const [activeView, setActiveView] = useState<'tree' | 'files' | 'details'>('tree');

@@ -236,16 +249,15 @@ export function DmsPage() {
  }, [deleteTarget, selectedFile, toast, t]);

  // Handle create folder
-  const handleCreateFolder = useCallback(async () => {
-    if (!newFolderName.trim()) return;
+  const handleCreateFolder = useCallback(async (data: FolderFormData) => {
    setSubmittingFolder(true);
    try {
      const folder = await createFolder({
-        name: newFolderName.trim(),
+        name: data.name.trim(),
        parent_id: selectedFolderId,
      });
      setFolders((prev) => [...prev, folder]);
-      setNewFolderName('');
+      resetFolder({ name: '' });
      setShowNewFolder(false);
      toast.success(t('dms.createFolder'));
    } catch (err) {
@@ -253,7 +265,7 @@ export function DmsPage() {
      toast.error(msg);
    }
    setSubmittingFolder(false);
-  }, [newFolderName, selectedFolderId, toast, t]);
+  }, [selectedFolderId, toast, t, resetFolder]);

  // Handle upload complete
  const handleUploadComplete = useCallback(() => {
@@ -469,25 +481,22 @@ export function DmsPage() {

      {/* New folder form */}
      {showNewFolder && (
-        <div className="mb-2 p-3 bg-secondary-50 border-b border-secondary-200" data-testid="new-folder-form">
+        <form onSubmit={handleSubmitFolder(handleCreateFolder)} className="mb-2 p-3 bg-secondary-50 border-b border-secondary-200" data-testid="new-folder-form">
          <div className="flex items-center gap-3 max-w-md">
            <Input
              label={t('dms.folderName')}
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
+              {...registerFolder('name')}
+              error={folderErrors.name?.message === 'required' ? t('validation.required') : undefined}
              placeholder={t('dms.folderName')}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') handleCreateFolder();
-              }}
            />
-            <Button size="sm" onClick={handleCreateFolder} isLoading={submittingFolder}>
+            <Button size="sm" type="submit" isLoading={submittingFolder}>
              {t('dms.createFolder')}
            </Button>
-            <Button variant="secondary" size="sm" onClick={() => { setShowNewFolder(false); setNewFolderName(''); }}>
+            <Button variant="secondary" size="sm" type="button" onClick={() => { setShowNewFolder(false); resetFolder({ name: '' }); }}>
              {t('dms.cancel')}
            </Button>
          </div>
-        </div>
+        </form>
      )}

      {/* Upload dropzone */}