@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/FileDisplay/FileDisplayContent.test.tsx

@@ -0,0 +1,395 @@
+import React from 'react';
+import { renderWithProviders, screen, userEvent, waitFor } from '../../__tests__/helpers/test-utils';
+import { FileDisplayContent } from './FileDisplayContent';
+import type { FileReference } from '../../types/file-reference';
+import { FileCategory } from '../../types/file-reference';
+
+const minimalFileRef = (overrides: Partial<FileReference> = {}): FileReference =>
+  ({
+    id: 'fr-1',
+    table_name: 'person',
+    record_id: 'rec-1',
+    file_path: 'bucket/path/file.png',
+    organisation_id: 'org-1',
+    is_public: false,
+    file_metadata: { fileName: 'file.png', fileSize: 1024, fileType: 'image/png', category: FileCategory.IMAGES },
+    app_id: 'test-app' as FileReference['app_id'],
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+    ...overrides
+  }) as FileReference;
+
+const baseProps = {
+  isLoading: false,
+  error: null as string | Error | null,
+  fileUrl: null as string | null,
+  fileReference: null as FileReference | null,
+  fileReferences: [] as FileReference[],
+  fileUrls: new Map<string, string>(),
+  fileCount: 0,
+  category: undefined,
+  displayOnly: false,
+  showDelete: false,
+  className: '',
+  organisation_id: undefined as string | undefined,
+};
+
+describe('[component] FileDisplayContent', () => {
+  beforeEach(() => {
+    HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+      this.dispatchEvent(new Event('show', { bubbles: true }));
+    });
+    HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+      this.removeAttribute('open');
+      this.dispatchEvent(new Event('close', { bubbles: true }));
+    });
+  });
+
+  describe('Error branch', () => {
+    it('renders ErrorView with error message and retry when no ErrorComponent', async () => {
+      const clearError = vi.fn();
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          error={new Error('boom')}
+          clearError={clearError}
+        />
+      );
+      expect(screen.getByText(/Error loading file: boom/i)).toBeInTheDocument();
+      const retry = screen.getByRole('button', { name: /Retry loading file/i });
+      await userEvent.click(retry);
+      expect(clearError).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders ErrorView with string error', () => {
+      renderWithProviders(
+        <FileDisplayContent {...baseProps} error="String error" />
+      );
+      expect(screen.getByText(/Error loading file: String error/i)).toBeInTheDocument();
+    });
+
+    it('renders ErrorComponent when provided', () => {
+      const ErrorComponent = ({ error, retry }: { error: Error | string | null; retry?: () => void }) => (
+        <div data-testid="custom-error">
+          Custom: {error instanceof Error ? error.message : String(error)}
+          {retry && <button type="button" onClick={retry}>Retry</button>}
+        </div>
+      );
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          error={new Error('custom')}
+          errorComponent={ErrorComponent}
+        />
+      );
+      expect(screen.getByTestId('custom-error')).toBeInTheDocument();
+      expect(screen.getByText(/Custom: custom/i)).toBeInTheDocument();
+    });
+
+    it('renders fallback figure when showFallback and error', () => {
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          error={new Error('err')}
+          showFallback
+          fallbackText="ERR"
+        />
+      );
+      expect(screen.getByText('ERR')).toBeInTheDocument();
+      expect(screen.queryByText(/Error loading file/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Empty branch', () => {
+    it('renders EmptyView when fileCount === 0 and !isLoading', () => {
+      renderWithProviders(
+        <FileDisplayContent {...baseProps} fileCount={0} />
+      );
+      expect(screen.getByText(/No files found/i)).toBeInTheDocument();
+    });
+
+    it('renders EmptyView with fallback text when showFallback', () => {
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          fileCount={0}
+          showFallback
+          fallbackText="No file"
+        />
+      );
+      expect(screen.getByText('No file')).toBeInTheDocument();
+    });
+
+    it('renders children in empty state', () => {
+      renderWithProviders(
+        <FileDisplayContent {...baseProps} fileCount={0}>
+          <button type="button">Custom</button>
+        </FileDisplayContent>
+      );
+      expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Loading fallback branch', () => {
+    it('renders LoadingFallbackView when isLoading, showFallback, fileCount === 0', () => {
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          isLoading
+          showFallback
+          fileCount={0}
+          fallbackText="Loading…"
+        />
+      );
+      expect(screen.getByText('Loading…')).toBeInTheDocument();
+    });
+  });
+
+  describe('Loading branch', () => {
+    it('renders LoadingView (spinner) when isLoading only', () => {
+      renderWithProviders(
+        <FileDisplayContent {...baseProps} isLoading />
+      );
+      const status = document.querySelector('[role="status"]');
+      expect(status ?? screen.getByTitle('Loading')).toBeTruthy();
+    });
+
+    it('renders custom LoadingComponent when provided', () => {
+      const Loader = () => <div data-testid="custom-loader">Loading...</div>;
+      renderWithProviders(
+        <FileDisplayContent {...baseProps} isLoading loadingComponent={Loader} />
+      );
+      expect(screen.getByTestId('custom-loader')).toBeInTheDocument();
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Single image (displayOnly, image, no delete)', () => {
+    it('renders SingleImageView when displayOnly, image, !showDelete, !enableChildren', async () => {
+      const ref = minimalFileRef({ file_metadata: { ...minimalFileRef().file_metadata, fileType: 'image/png' } });
+      const urls = new Map<string, string>([['fr-1', 'https://example.com/file.png']]);
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          displayOnly
+          fileReference={ref}
+          fileReferences={[ref]}
+          fileCount={1}
+          fileUrl="https://example.com/file.png"
+          fileUrls={urls}
+          showDelete={false}
+          enableChildren={false}
+        />
+      );
+      const img = await screen.findByRole('img', { name: /file\.png/i });
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'https://example.com/file.png');
+    });
+  });
+
+  describe('Single doc link (displayOnly, non-image, stableFileUrl, !showDelete)', () => {
+    it('renders SingleDocumentLinkView with correct href and target', async () => {
+      const ref = minimalFileRef({
+        id: 'fr-pdf',
+        file_metadata: { fileName: 'doc.pdf', fileType: 'application/pdf', category: FileCategory.GENERAL_DOCUMENTS }
+      });
+      const urls = new Map([['fr-pdf', 'https://example.com/doc.pdf']]);
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          displayOnly
+          fileReference={ref}
+          fileReferences={[ref]}
+          fileCount={1}
+          fileUrl="https://example.com/doc.pdf"
+          fileUrls={urls}
+          showDelete={false}
+        />
+      );
+      const link = await screen.findByRole('link', { name: /Open doc\.pdf in new tab/i });
+      expect(link).toHaveAttribute('href', 'https://example.com/doc.pdf');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+  });
+
+  describe('Single file with actions', () => {
+    it('renders SingleFileWithActionsView when category set and fileReference', async () => {
+      const ref = minimalFileRef();
+      const urls = new Map([['fr-1', 'https://example.com/file.png']]);
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          category={FileCategory.IMAGES}
+          fileReference={ref}
+          fileReferences={[ref]}
+          fileCount={1}
+          fileUrl="https://example.com/file.png"
+          fileUrls={urls}
+        />
+      );
+      const img = await screen.findByRole('img', { name: /file\.png/i });
+      expect(img).toBeInTheDocument();
+    });
+
+    it('shows delete button and opens dialog on delete when showDelete and onDelete', async () => {
+      const ref = minimalFileRef();
+      const urls = new Map([['fr-1', 'https://example.com/file.png']]);
+      const onDelete = vi.fn().mockResolvedValue(undefined);
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          category={FileCategory.IMAGES}
+          fileReference={ref}
+          fileReferences={[ref]}
+          fileCount={1}
+          fileUrl="https://example.com/file.png"
+          fileUrls={urls}
+          showDelete
+          onDelete={onDelete}
+        />
+      );
+      const deleteBtn = await screen.findByRole('button', { name: /Delete file/i });
+      await userEvent.click(deleteBtn);
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        expect(screen.getByText('Confirm Delete')).toBeInTheDocument();
+      }, { timeout: 3000 });
+      const confirmBtn = screen.getByRole('button', { name: 'Delete' });
+      await userEvent.click(confirmBtn);
+      await waitFor(() => expect(onDelete).toHaveBeenCalled(), { timeout: 2000 });
+    });
+  });
+
+  describe('Multiple files', () => {
+    it('renders MultipleFilesView with list of files', async () => {
+      const refs = [
+        minimalFileRef({ id: 'f1', file_metadata: { ...minimalFileRef().file_metadata, fileName: 'a.png' } }),
+        minimalFileRef({ id: 'f2', file_metadata: { fileName: 'b.pdf', fileType: 'application/pdf', category: FileCategory.GENERAL_DOCUMENTS } })
+      ];
+      const urls = new Map([
+        ['f1', 'https://example.com/a.png'],
+        ['f2', 'https://example.com/b.pdf']
+      ]);
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          fileReferences={refs}
+          fileCount={2}
+          fileUrls={urls}
+        />
+      );
+      await waitFor(() => {
+        expect(screen.getByText('a.png')).toBeInTheDocument();
+        expect(screen.getByText('b.pdf')).toBeInTheDocument();
+      });
+    });
+
+    it('delete button triggers onDeleteClick and dialog appears when showDelete and onDelete', async () => {
+      const refs = [
+        minimalFileRef({ id: 'f1' }),
+        minimalFileRef({ id: 'f2' })
+      ];
+      const urls = new Map([['f1', 'https://a.com/1.png'], ['f2', 'https://a.com/2.png']]);
+      const onDelete = vi.fn().mockResolvedValue(undefined);
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          fileReferences={refs}
+          fileCount={2}
+          fileUrls={urls}
+          showDelete
+          onDelete={onDelete}
+        />
+      );
+      const deleteBtns = await screen.findAllByRole('button', { name: /Delete file/i });
+      await userEvent.click(deleteBtns[0]);
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      }, { timeout: 3000 });
+      const confirmBtn = screen.getByRole('button', { name: 'Delete' });
+      await userEvent.click(confirmBtn);
+      await waitFor(() => expect(onDelete).toHaveBeenCalled(), { timeout: 2000 });
+    });
+  });
+
+  describe('Delete dialog', () => {
+    it('Cancel closes dialog and does not call onConfirm', async () => {
+      const ref = minimalFileRef();
+      const urls = new Map([['fr-1', 'https://example.com/file.png']]);
+      const onDelete = vi.fn();
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          category={FileCategory.IMAGES}
+          fileReference={ref}
+          fileReferences={[ref]}
+          fileCount={1}
+          fileUrl="https://example.com/file.png"
+          fileUrls={urls}
+          showDelete
+          onDelete={onDelete}
+        />
+      );
+      await userEvent.click(screen.getByRole('button', { name: /Delete file/i }));
+      await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument(), { timeout: 3000 });
+      await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument(), { timeout: 2000 });
+      expect(onDelete).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('onImageError triggers when image fires error in SingleImageView', async () => {
+      const ref = minimalFileRef();
+      const urls = new Map([['fr-1', 'https://example.com/file.png']]);
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          displayOnly
+          fileReference={ref}
+          fileReferences={[ref]}
+          fileCount={1}
+          fileUrl="https://example.com/file.png"
+          fileUrls={urls}
+          showFallback
+          fallbackText="Broken"
+        />
+      );
+      const img = await screen.findByRole('img', { name: /file\.png/i });
+      img.dispatchEvent(new Event('error', { bubbles: true }));
+      await waitFor(() => {
+        expect(screen.getByText('Broken')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Computed fallback text', () => {
+    it('uses fallbackText when provided', () => {
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          fileCount={0}
+          showFallback
+          fallbackText="Custom empty"
+        />
+      );
+      expect(screen.getByText('Custom empty')).toBeInTheDocument();
+    });
+
+    it('uses fallbackSourceText in generateFallbackText when provided', () => {
+      const generateFallbackText = vi.fn((source?: string) => source ?? 'Default');
+      renderWithProviders(
+        <FileDisplayContent
+          {...baseProps}
+          fileCount={0}
+          showFallback
+          fallbackSourceText="Source"
+          generateFallbackText={generateFallbackText}
+        />
+      );
+      expect(generateFallbackText).toHaveBeenCalledWith('Source');
+    });
+  });
+});

package/src/components/FileDisplay/FileDisplayContent.tsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import type { FileReference, FileCategory } from '../../types/file-reference';
+import { getFallbackClasses, defaultGenerateFallbackText } from './fallbackUtils';
+import { FileDisplayErrorView } from './FileDisplayErrorView';
+import { FileDisplayEmptyView } from './FileDisplayEmptyView';
+import { FileDisplayLoadingFallbackView } from './FileDisplayLoadingFallbackView';
+import { FileDisplayLoadingView } from './FileDisplayLoadingView';
+import { FileDisplaySingleImageView } from './FileDisplaySingleImageView';
+import { FileDisplaySingleDocumentLinkView } from './FileDisplaySingleDocumentLinkView';
+import { FileDisplaySingleFileWithActionsView } from './FileDisplaySingleFileWithActionsView';
+import { FileDisplayMultipleFilesView } from './FileDisplayMultipleFilesView';
+import { FileDisplayDeleteConfirmDialog } from './FileDisplayDeleteConfirmDialog';
+
+export interface FileDisplayContentProps {
+  isLoading: boolean;
+  error: string | Error | null;
+  fileUrl: string | null;
+  fileReference: FileReference | null;
+  fileReferences: FileReference[];
+  fileUrls: Map<string, string>;
+  fileCount: number;
+  category: FileCategory | undefined;
+  displayOnly: boolean;
+  showDelete: boolean;
+  className: string;
+  imgClassName?: string;
+  children?: React.ReactNode;
+  onDelete?: () => Promise<void>;
+  clearError?: () => void;
+  organisation_id: string | undefined;
+  loadingComponent?: React.ComponentType;
+  errorComponent?: React.ComponentType<{ error: Error | string | null; retry?: () => void }>;
+  showFallback?: boolean;
+  generateFallbackText?: (fileName?: string) => string;
+  fallbackText?: string;
+  fallbackSourceText?: string;
+  fallbackSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  enableChildren?: boolean;
+  showMetadata?: boolean;
+}
+
+const FileDisplayContent = React.memo(function FileDisplayContent({
+  isLoading,
+  error,
+  fileUrl,
+  fileReference,
+  fileReferences,
+  fileUrls,
+  fileCount,
+  category,
+  displayOnly,
+  showDelete,
+  className,
+  imgClassName,
+  children,
+  onDelete,
+  clearError,
+  organisation_id: _organisation_id,
+  loadingComponent: LoadingComponent,
+  errorComponent: ErrorComponent,
+  showFallback = false,
+  generateFallbackText = defaultGenerateFallbackText,
+  fallbackText,
+  fallbackSourceText,
+  fallbackSize = 'md',
+  enableChildren = false,
+  showMetadata = true
+}: FileDisplayContentProps) {
+  const [imageError, setImageError] = useState(false);
+  const [internalFileUrls, setInternalFileUrls] = useState<Map<string, string>>(new Map(fileUrls));
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const fileReferencesRef = useRef<FileReference[]>([]);
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  const currentSrcRef = useRef<string | null>(null);
+  const isImageLoadingRef = useRef(false);
+
+  const stableFileUrl = useMemo(() => fileUrl, [fileUrl]);
+
+  const handleImageLoadStart = useCallback(() => {
+    isImageLoadingRef.current = true;
+    if (stableFileUrl) currentSrcRef.current = stableFileUrl;
+  }, [stableFileUrl]);
+
+  const handleImageLoad = useCallback(() => {
+    isImageLoadingRef.current = false;
+    if (stableFileUrl) currentSrcRef.current = stableFileUrl;
+  }, [stableFileUrl]);
+
+  const computedFallbackText = useMemo(() => {
+    if (fallbackText) return fallbackText;
+    const sourceText = fallbackSourceText ?? fileReference?.file_metadata?.fileName;
+    return generateFallbackText(sourceText);
+  }, [fallbackText, fallbackSourceText, fileReference, generateFallbackText]);
+
+  const fallbackClasses = useMemo(() => getFallbackClasses(fallbackSize), [fallbackSize]);
+
+  useEffect(() => {
+    const currentIds = fileReferences.map(f => f.id).join(',');
+    const prevIds = fileReferencesRef.current.map(f => f.id).join(',');
+    if (currentIds !== prevIds) fileReferencesRef.current = fileReferences;
+    setInternalFileUrls(new Map(fileUrls));
+  }, [fileReferences, fileUrls]);
+
+  const handleDeleteClick = useCallback(() => setDeleteDialogOpen(true), []);
+  const handleDeleteConfirm = useCallback(async () => {
+    setDeleteDialogOpen(false);
+    try {
+      if (onDelete) await onDelete();
+      setImageError(false);
+    } catch {
+      setImageError(false);
+    }
+  }, [onDelete]);
+  const handleImageError = useCallback(() => setImageError(true), []);
+
+  if (error) {
+    return (
+      <FileDisplayErrorView
+        error={error}
+        className={className}
+        fallbackClasses={fallbackClasses}
+        fallbackSize={fallbackSize || 'md'}
+        fallbackText={computedFallbackText}
+        showFallback={showFallback}
+        clearError={clearError}
+        ErrorComponent={ErrorComponent}
+      />
+    );
+  }
+
+  if (fileCount === 0 && !isLoading) {
+    return (
+      <FileDisplayEmptyView
+        className={className}
+        fallbackClasses={fallbackClasses}
+        fallbackText={computedFallbackText}
+        showFallback={showFallback}
+        children={children}
+      />
+    );
+  }
+
+  if (isLoading && showFallback && fileCount === 0) {
+    return (
+      <FileDisplayLoadingFallbackView
+        className={className}
+        fallbackClasses={fallbackClasses}
+        fallbackText={computedFallbackText}
+        children={children}
+      />
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <FileDisplayLoadingView className={className} LoadingComponent={LoadingComponent} />
+    );
+  }
+
+  if ((category || displayOnly) && fileReference) {
+    const isImage = fileReference.file_metadata.fileType?.startsWith('image/');
+
+    if (displayOnly && isImage && !showDelete && !enableChildren) {
+      return (
+        <FileDisplaySingleImageView
+          fileReference={fileReference}
+          stableFileUrl={stableFileUrl}
+          imageError={imageError}
+          showFallback={showFallback}
+          className={className}
+          imgClassName={imgClassName}
+          fallbackClasses={fallbackClasses}
+          fallbackText={computedFallbackText}
+          onImageError={handleImageError}
+          onImageLoadStart={handleImageLoadStart}
+          onImageLoad={handleImageLoad}
+          imgRef={imgRef}
+        />
+      );
+    }
+
+    if (displayOnly && !isImage && stableFileUrl && !showDelete) {
+      return (
+        <FileDisplaySingleDocumentLinkView
+          fileReference={fileReference}
+          stableFileUrl={stableFileUrl}
+          className={className}
+          showMetadata={showMetadata}
+        />
+      );
+    }
+
+    return (
+      <FileDisplaySingleFileWithActionsView
+        fileReference={fileReference}
+        isImage={isImage}
+        stableFileUrl={stableFileUrl}
+        imageError={imageError}
+        showFallback={showFallback}
+        showDelete={showDelete}
+        showMetadata={showMetadata}
+        className={className}
+        imgClassName={imgClassName}
+        fallbackClasses={fallbackClasses}
+        fallbackText={computedFallbackText}
+        children={children}
+        deleteDialogOpen={deleteDialogOpen}
+        onDeleteDialogOpenChange={setDeleteDialogOpen}
+        onDeleteClick={handleDeleteClick}
+        onDeleteConfirm={handleDeleteConfirm}
+        onImageError={handleImageError}
+      />
+    );
+  }
+
+  return (
+    <>
+      <FileDisplayMultipleFilesView
+        fileReferences={fileReferences}
+        internalFileUrls={internalFileUrls}
+        showDelete={showDelete}
+        showMetadata={showMetadata}
+        className={className}
+        imgClassName={imgClassName}
+        children={children}
+        onDeleteClick={handleDeleteClick}
+        onDelete={onDelete}
+        onImageError={handleImageError}
+      />
+      {showDelete && onDelete && (
+        <FileDisplayDeleteConfirmDialog
+          open={deleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
+          onConfirm={handleDeleteConfirm}
+          onCancel={() => setDeleteDialogOpen(false)}
+        />
+      )}
+    </>
+  );
+});
+
+export { FileDisplayContent };