jest.fn(fn => {
+ fn.cancel = jest.fn();
+ return fn;
+}));
+
+// Mock useSearchDirectories hook to avoid async state updates that cause act() warnings
+const mockSetDirectoryName = jest.fn();
+let mockHookState = {
+ directoryName: '',
+ directories: [],
+ channelDirectories: [],
+ domainDirectories: [],
+ isDir: false,
+ loading: false,
+};
+
+jest.mock('../hooks/customHooks', () => ({
+ ...jest.requireActual('../hooks/customHooks'),
+ useSearchDirectories: (value) => {
+ // Return current mock state - tests control state via setMockHookState
+ return {
+ ...mockHookState,
+ setDirectoryName: (newValue) => {
+ mockHookState.directoryName = newValue;
+ mockSetDirectoryName(newValue);
+ },
+ };
+ },
+}));
+
+describe('DirectorySearch', () => {
+ const mockOnSelect = jest.fn();
+
+ const mockSearchResults = {
+ directories: [
+ {path: 'videos/nature'},
+ {path: 'videos/tech'}
+ ],
+ channelDirectories: [
+ {path: 'videos/channels/news', name: 'News Channel'}
+ ],
+ domainDirectories: [
+ {path: 'archive/example.com', domain: 'example.com'}
+ ],
+ };
+
+ // Helper to reset mock hook state with specific values
+ const setMockHookState = (overrides = {}) => {
+ mockHookState = {
+ directoryName: '',
+ directories: [],
+ channelDirectories: [],
+ domainDirectories: [],
+ isDir: false,
+ loading: false,
+ ...overrides,
+ };
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ // Reset mock hook state with default search results
+ setMockHookState({
+ ...mockSearchResults,
+ isDir: false,
+ });
+ });
+
+ describe('Rendering', () => {
+ it('renders with placeholder text', () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ expect(input).toBeInTheDocument();
+ });
+
+ it('shows initial value when provided', () => {
+ setMockHookState({
+ ...mockSearchResults,
+ directoryName: 'videos/test',
+ });
+
+ render();
+
+ const input = screen.getByDisplayValue('videos/test');
+ expect(input).toBeInTheDocument();
+ });
+
+ it('applies disabled state correctly', () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ expect(input).toBeDisabled();
+ });
+
+ it('displays with required indicator', () => {
+ const {container} = render(
+
+ );
+
+ // Semantic UI doesn't add required attribute to Search input,
+ // but we verify the prop is passed
+ expect(container.querySelector('.ui.search')).toBeInTheDocument();
+ });
+ });
+
+ describe('Search Functionality', () => {
+ it('triggers setDirectoryName on value change', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ await userEvent.type(input, 'videos');
+
+ // Verify setDirectoryName was called (via mocked hook)
+ expect(mockSetDirectoryName).toHaveBeenCalled();
+ // Debounce is mocked, so each character triggers a call
+ // Verify it was called 6 times (one per character in "videos")
+ expect(mockSetDirectoryName.mock.calls.length).toBe(6);
+ });
+
+ it('shows loading indicator when loading state is true', () => {
+ setMockHookState({
+ ...mockSearchResults,
+ loading: true,
+ });
+
+ render();
+
+ const searchContainer = screen.getByPlaceholderText(/search directory names/i)
+ .closest('.ui.search');
+ expect(searchContainer).toHaveClass('loading');
+ });
+
+ it('hides loading indicator when loading state is false', () => {
+ setMockHookState({
+ ...mockSearchResults,
+ loading: false,
+ });
+
+ render();
+
+ const searchContainer = screen.getByPlaceholderText(/search directory names/i)
+ .closest('.ui.search');
+ expect(searchContainer).not.toHaveClass('loading');
+ });
+
+ it('displays categorized results', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ // Click to open dropdown
+ await userEvent.click(input);
+
+ await waitFor(() => {
+ // Should show category names
+ expect(screen.getAllByText(/Directories/i).length).toBeGreaterThan(0);
+ expect(screen.getAllByText(/Channels/i).length).toBeGreaterThan(0);
+ expect(screen.getAllByText(/Domains/i).length).toBeGreaterThan(0);
+ });
+ });
+
+ it('shows "New Directory" when path doesn\'t exist (isDir=false)', async () => {
+ setMockHookState({
+ directories: [],
+ channelDirectories: [],
+ domainDirectories: [],
+ isDir: false,
+ directoryName: 'new/path',
+ });
+
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ await userEvent.click(input);
+
+ await waitFor(() => {
+ expect(screen.getByText(/New Directory/i)).toBeInTheDocument();
+ });
+ });
+
+ it('hides "New Directory" when path exists (isDir=true)', async () => {
+ setMockHookState({
+ directories: [{path: 'videos/nature/wildlife'}],
+ channelDirectories: [],
+ domainDirectories: [],
+ isDir: true,
+ directoryName: 'videos/nature',
+ });
+
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ await userEvent.click(input);
+
+ // "New Directory" should not appear when is_dir=true
+ expect(screen.queryByText(/New Directory/i)).not.toBeInTheDocument();
+ });
+
+ it('debounces rapid typing (verifies setDirectoryName is called)', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+
+ // Type rapidly
+ await userEvent.type(input, 'abc', {delay: 10});
+
+ // Verify setDirectoryName was called
+ expect(mockSetDirectoryName).toHaveBeenCalled();
+ });
+ });
+
+ describe('User Interactions', () => {
+ it('calls onSelect when result is clicked', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ await userEvent.click(input);
+
+ await waitFor(() => {
+ expect(screen.getByText('videos/nature')).toBeInTheDocument();
+ });
+
+ // Click on a result
+ const result = screen.getByText('videos/nature');
+ await userEvent.click(result);
+
+ expect(mockOnSelect).toHaveBeenCalledWith('videos/nature');
+ });
+
+ it('commits typed value on blur when directoryName differs from value', async () => {
+ // Set up mock state where directoryName differs from the prop value
+ // This simulates what happens after user types in the input
+ setMockHookState({
+ ...mockSearchResults,
+ directoryName: 'typed/path', // User has typed this
+ });
+
+ // Render with empty value prop (different from directoryName)
+ const {container} = render();
+
+ // Find the Search component container and trigger blur on it
+ const searchComponent = container.querySelector('.ui.search');
+
+ // Blur the Search component - should trigger onBlur which calls onSelect
+ await act(async () => {
+ // Use fireEvent.blur which better simulates the Semantic UI Search blur behavior
+ const {fireEvent} = require('@testing-library/react');
+ fireEvent.blur(searchComponent);
+ });
+
+ // Should call onSelect with directoryName from hook state
+ expect(mockOnSelect).toHaveBeenCalledWith('typed/path');
+ });
+
+ it('does not call onSelect on blur if value unchanged', async () => {
+ setMockHookState({
+ ...mockSearchResults,
+ directoryName: 'existing/path',
+ });
+
+ render();
+
+ const input = screen.getByDisplayValue('existing/path');
+
+ // Blur without changing value
+ await act(async () => {
+ input.blur();
+ });
+
+ // Should not call onSelect since value didn't change
+ expect(mockOnSelect).not.toHaveBeenCalled();
+ });
+
+ it('disabled state prevents interactions', () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+
+ // Input should be disabled
+ expect(input).toBeDisabled();
+ });
+
+ it('handles rapid selection changes', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ await userEvent.click(input);
+
+ await waitFor(() => {
+ expect(screen.getByText('videos/nature')).toBeInTheDocument();
+ });
+
+ // Click multiple results in succession
+ await userEvent.click(screen.getByText('videos/nature'));
+ await userEvent.click(screen.getByText('videos/tech'));
+
+ // Should call onSelect for each selection
+ expect(mockOnSelect).toHaveBeenCalledWith('videos/nature');
+ expect(mockOnSelect).toHaveBeenCalledWith('videos/tech');
+ });
+ });
+
+ describe('Hook Integration', () => {
+ it('calls setDirectoryName from hook on search change', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ await userEvent.type(input, 'archive');
+
+ expect(mockSetDirectoryName).toHaveBeenCalled();
+ });
+
+ it('displays results from hook state', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ await userEvent.click(input);
+
+ await waitFor(() => {
+ // Should display results from mock hook state
+ expect(screen.getByText('videos/nature')).toBeInTheDocument();
+ expect(screen.getByText('videos/tech')).toBeInTheDocument();
+ expect(screen.getByText('News Channel')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Edge Cases', () => {
+ it('handles null/undefined initial value', () => {
+ setMockHookState({
+ ...mockSearchResults,
+ directoryName: '',
+ });
+
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ expect(input).toHaveValue('');
+ });
+
+ it('clears results display when empty', async () => {
+ setMockHookState({
+ directories: [],
+ channelDirectories: [],
+ domainDirectories: [],
+ isDir: false,
+ directoryName: '',
+ });
+
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+ expect(input).toHaveValue('');
+ });
+
+ it('maintains value when component remounts', () => {
+ setMockHookState({
+ ...mockSearchResults,
+ directoryName: 'videos/test',
+ });
+
+ const {rerender} = render(
+
+ );
+
+ expect(screen.getByDisplayValue('videos/test')).toBeInTheDocument();
+
+ // Remount with same value
+ rerender();
+
+ expect(screen.getByDisplayValue('videos/test')).toBeInTheDocument();
+ });
+
+ it('handles special characters in path', async () => {
+ render();
+
+ const input = screen.getByPlaceholderText(/search directory names/i);
+
+ // Type path with special characters
+ const specialPath = 'videos/test-folder_2024/v1.0';
+ await userEvent.type(input, specialPath);
+
+ expect(mockSetDirectoryName).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/app/src/components/DomainEditPage.test.js b/app/src/components/DomainEditPage.test.js
new file mode 100644
index 000000000..5fd819b88
--- /dev/null
+++ b/app/src/components/DomainEditPage.test.js
@@ -0,0 +1,446 @@
+import React from 'react';
+import {render, renderInDarkMode, screen, waitFor, createTestForm} from '../test-utils';
+import userEvent from '@testing-library/user-event';
+import {DomainEditPage} from './Archive';
+import {createMockDomain, createMockMetadata} from '../test-utils';
+
+// Mock useParams to return domain ID
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useParams: () => ({domainId: '1'}),
+ useNavigate: () => jest.fn(),
+}));
+
+// Mock the useDomain hook
+const mockUseDomain = jest.fn();
+const mockUseCollectionMetadata = jest.fn();
+
+jest.mock('../hooks/customHooks', () => ({
+ ...jest.requireActual('../hooks/customHooks'),
+ useDomain: (...args) => mockUseDomain(...args),
+ useCollectionMetadata: (...args) => mockUseCollectionMetadata(...args),
+}));
+
+// Mock useTitle
+jest.mock('./Common', () => ({
+ ...jest.requireActual('./Common'),
+ useTitle: jest.fn(),
+}));
+
+// Mock CollectionEditForm
+jest.mock('./collections/CollectionEditForm', () => ({
+ CollectionEditForm: ({form, metadata, title, actionButtons}) => (
+
+ {title &&
{title}
}
+ {form?.loading &&
Loading...
}
+ {form?.formData &&
Collection data loaded
}
+ {metadata &&
Metadata loaded
}
+ {actionButtons &&
{actionButtons}
}
+
+
{currentTagName ? 'Modify Tag' : 'Add Tag'}
+
+
+
+
+ onChange(e.target.value ? [e.target.value] : [])}
+ disabled={disabled}
+ />
+
+ ),
+ TagsContext: {
+ _currentValue: {
+ SingleTag: ({name}) => {name}
+ }
+ },
+}));
+
+// Mock the DirectorySearch and DestinationForm components
+jest.mock('./Common', () => ({
+ ...jest.requireActual('./Common'),
+ DirectorySearch: ({value, onSelect, placeholder}) => (
+ onSelect(e.target.value)}
+ placeholder={placeholder}
+ />
+ ),
+ SearchInput: ({placeholder, searchStr, onChange, disabled}) => (
+ onChange(e.target.value)}
+ disabled={disabled}
+ />
+ ),
+ ErrorMessage: ({children}) => {children}
,
+ useTitle: jest.fn(),
+}));
+
+// Mock DestinationForm (used for directory field)
+jest.mock('./Download', () => ({
+ DestinationForm: ({form, label, name}) => (
+
+
+ form.setValue(name, e.target.value)}
+ />
+
+ ),
+}));
+
+// Mock hooks for DomainsPage tests
+const mockUseDomains = jest.fn();
+const mockUseOneQuery = jest.fn(() => ['', jest.fn()]);
+
+jest.mock('../hooks/customHooks', () => ({
+ ...jest.requireActual('../hooks/customHooks'),
+ useDomains: (...args) => mockUseDomains(...args),
+ useOneQuery: (...args) => mockUseOneQuery(...args),
+}));
+
+// Mock CollectionTable for DomainsPage tests
+jest.mock('./collections/CollectionTable', () => ({
+ CollectionTable: ({collections}) => (
+
+
+
+ {collections?.map((domain) => (
+
+ | {domain.domain} |
+
+ {domain.tag_name || 'No tag'}
+ |
+
+ ))}
+
+
+
+
{collections?.length || 0}
+
{searchStr}
+ {collections?.map((domain) => (
+
+ {domain.domain}
+
+
+ ))}
+
{children}
,
+ useTitle: jest.fn(),
+}));
+
+describe('DomainsPage', () => {
+ const {useDomains, useOneQuery} = require('../hooks/customHooks');
+ const {useTitle} = require('./Common');
+ const mockMetadata = createMockMetadata();
+
+ beforeEach(() => {
+ // Reset mocks before each test
+ jest.clearAllMocks();
+
+ // Default mock implementations
+ useTitle.mockImplementation(() => {});
+ useOneQuery.mockReturnValue(['', jest.fn()]);
+ });
+
+ describe('Page Rendering', () => {
+ it('displays domains page without errors', () => {
+ const mockDomains = createMockDomains(3);
+ useDomains.mockReturnValue([mockDomains, 3, mockMetadata]);
+
+ render();
+
+ // Page should render without crashing
+ expect(screen.getByTestId('search-input')).toBeInTheDocument();
+ expect(screen.getByTestId('collection-table')).toBeInTheDocument();
+ });
+
+ it('renders CollectionTable component', () => {
+ const mockDomains = createMockDomains(2);
+ useDomains.mockReturnValue([mockDomains, 2, mockMetadata]);
+
+ render();
+
+ expect(screen.getByTestId('collection-table')).toBeInTheDocument();
+ });
+
+ it('shows search input', () => {
+ const mockDomains = createMockDomains(1);
+ useDomains.mockReturnValue([mockDomains, 1, mockMetadata]);
+
+ render();
+
+ const searchInput = screen.getByTestId('search-input');
+ expect(searchInput).toBeInTheDocument();
+ expect(searchInput).toHaveAttribute('placeholder', 'Domain filter...');
+ });
+ });
+
+ describe('Domain Display', () => {
+ it('shows all domains from API', () => {
+ const mockDomains = createMockDomains(5);
+ useDomains.mockReturnValue([mockDomains, 5, mockMetadata]);
+
+ render();
+
+ // Should render all 5 domains
+ expect(screen.getByTestId('collection-count')).toHaveTextContent('5');
+
+ mockDomains.forEach((domain) => {
+ expect(screen.getByTestId(`domain-${domain.id}`)).toBeInTheDocument();
+ });
+ });
+
+ it('displays domain names', () => {
+ const mockDomains = [
+ {id: 1, domain: 'example1.com', archive_count: 10, size: 1000},
+ {id: 2, domain: 'example2.com', archive_count: 20, size: 2000},
+ {id: 3, domain: 'example3.com', archive_count: 30, size: 3000},
+ ];
+ useDomains.mockReturnValue([mockDomains, 3, mockMetadata]);
+
+ render();
+
+ expect(screen.getByTestId('domain-name-1')).toHaveTextContent('example1.com');
+ expect(screen.getByTestId('domain-name-2')).toHaveTextContent('example2.com');
+ expect(screen.getByTestId('domain-name-3')).toHaveTextContent('example3.com');
+ });
+
+ it('displays Edit buttons in Manage column', () => {
+ const mockDomains = createMockDomains(3);
+ useDomains.mockReturnValue([mockDomains, 3, mockMetadata]);
+
+ render();
+
+ // Each domain should have an Edit button
+ mockDomains.forEach((domain) => {
+ expect(screen.getByTestId(`edit-button-${domain.id}`)).toBeInTheDocument();
+ });
+ });
+
+ it('Edit button has correct styling', () => {
+ const mockDomains = createMockDomains(1);
+ useDomains.mockReturnValue([mockDomains, 1, mockMetadata]);
+
+ render();
+
+ const editButton = screen.getByTestId('edit-button-1');
+ expect(editButton).toHaveClass('ui');
+ expect(editButton).toHaveClass('mini');
+ expect(editButton).toHaveClass('primary');
+ expect(editButton).toHaveClass('button');
+ });
+ });
+
+ describe('Empty and Error States', () => {
+ it('shows "No items yet" message when no domains', () => {
+ // Empty array indicates no domains
+ useDomains.mockReturnValue([[], 0, mockMetadata]);
+
+ render();
+
+ // Should show empty state message
+ expect(screen.getByText(/no domains yet/i)).toBeInTheDocument();
+ expect(screen.getByText(/archive some webpages/i)).toBeInTheDocument();
+
+ // Should not show table
+ expect(screen.queryByTestId('collection-table')).not.toBeInTheDocument();
+ });
+
+ it('shows error message when fetch fails', () => {
+ // undefined indicates error state
+ useDomains.mockReturnValue([undefined, 0, mockMetadata]);
+
+ render();
+
+ // Should show error message
+ expect(screen.getByTestId('error-message')).toBeInTheDocument();
+ expect(screen.getByText(/could not fetch domains/i)).toBeInTheDocument();
+
+ // Should not show table
+ expect(screen.queryByTestId('collection-table')).not.toBeInTheDocument();
+ });
+
+ it('does not show "New Domain" button', () => {
+ const mockDomains = createMockDomains(2);
+ useDomains.mockReturnValue([mockDomains, 2, mockMetadata]);
+
+ render();
+
+ // Domains are auto-created, so there should be no "New" button
+ expect(screen.queryByRole('button', {name: /new/i})).not.toBeInTheDocument();
+ expect(screen.queryByRole('button', {name: /create/i})).not.toBeInTheDocument();
+ expect(screen.queryByRole('button', {name: /add/i})).not.toBeInTheDocument();
+ });
+ });
+
+ describe('Search Integration', () => {
+ it('disables search when no domains', () => {
+ useDomains.mockReturnValue([[], 0, mockMetadata]);
+
+ render();
+
+ const searchInput = screen.getByTestId('search-input');
+ expect(searchInput).toBeDisabled();
+ });
+
+ it('enables search when domains exist', () => {
+ const mockDomains = createMockDomains(3);
+ useDomains.mockReturnValue([mockDomains, 3, mockMetadata]);
+
+ render();
+
+ const searchInput = screen.getByTestId('search-input');
+ expect(searchInput).not.toBeDisabled();
+ });
+
+ it('passes search string to CollectionTable', () => {
+ const mockDomains = createMockDomains(2);
+ useDomains.mockReturnValue([mockDomains, 2, mockMetadata]);
+
+ const mockSetSearchStr = jest.fn();
+ useOneQuery.mockReturnValue(['example', mockSetSearchStr]);
+
+ render();
+
+ // Search string should be passed to table
+ expect(screen.getByTestId('search-filter')).toHaveTextContent('example');
+ });
+ });
+
+ describe('Page Title', () => {
+ it('sets page title correctly', () => {
+ const mockDomains = createMockDomains(1);
+ useDomains.mockReturnValue([mockDomains, 1, mockMetadata]);
+
+ render();
+
+ expect(useTitle).toHaveBeenCalledWith('Archive Domains');
+ });
+ });
+});
diff --git a/app/src/components/Download.test.js b/app/src/components/Download.test.js
new file mode 100644
index 000000000..6c09dbefa
--- /dev/null
+++ b/app/src/components/Download.test.js
@@ -0,0 +1,253 @@
+import React from 'react';
+import {render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {DestinationForm} from './Download';
+import {createTestForm} from '../test-utils';
+
+// Mock DirectorySearch component - simplified to avoid useState/useEffect warnings
+jest.mock('./Common', () => {
+ const React = require('react');
+ return {
+ ...jest.requireActual('./Common'),
+ DirectorySearch: ({value, onSelect, disabled, required, id}) => (
+
+ onSelect(e.target.value)}
+ disabled={disabled}
+ required={required}
+ id={id}
+ />
+
+ ),
+ RequiredAsterisk: () => React.createElement('span', null, '*'),
+ InfoPopup: ({content}) => React.createElement('span', {'data-testid': 'info-popup'}, content),
+ };
+});
+
+describe('DestinationForm', () => {
+ describe('Form Integration', () => {
+ it('renders DirectorySearch with form value', () => {
+ const form = createTestForm(
+ {destination: 'videos/test'},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+ expect(input).toHaveValue('videos/test');
+ });
+
+ it('calls form onChange when directory is selected', async () => {
+ const form = createTestForm(
+ {destination: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+
+ // Type a new directory
+ await userEvent.type(input, 'archive/new');
+
+ // Form data should be updated
+ await waitFor(() => {
+ expect(form.formData.destination).toBe('archive/new');
+ });
+ });
+
+
+ it('displays required indicator when required=true', () => {
+ const form = createTestForm(
+ {destination: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+ expect(input).toHaveAttribute('required');
+ });
+ });
+
+ describe('Props Handling', () => {
+ it('uses custom label when provided', () => {
+ const form = createTestForm(
+ {destination: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ expect(screen.getByText(/custom folder/i)).toBeInTheDocument();
+ });
+
+ it('uses default label when not provided', () => {
+ const form = createTestForm(
+ {destination: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ expect(screen.getByText(/destination/i)).toBeInTheDocument();
+ });
+
+ it('uses custom name/path when provided', () => {
+ const form = createTestForm(
+ {output_dir: 'videos/test'},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render(
+
+ );
+
+ const input = screen.getByTestId('directory-search-input');
+ expect(input).toHaveValue('videos/test');
+ });
+
+ it('shows info popup when infoContent provided', () => {
+ const form = createTestForm(
+ {destination: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render(
+
+ );
+
+ expect(screen.getByText(/this is helpful information/i)).toBeInTheDocument();
+ });
+ });
+
+ describe('useForm Integration', () => {
+ it('gets correct props from form.getCustomProps', () => {
+ const form = createTestForm(
+ {destination: 'videos/initial'},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ const getCustomPropsSpy = jest.spyOn(form, 'getCustomProps');
+
+ render();
+
+ expect(getCustomPropsSpy).toHaveBeenCalledWith({
+ name: 'destination',
+ path: 'destination',
+ required: true
+ });
+ });
+
+ it('updates form data on selection', async () => {
+ const form = createTestForm(
+ {destination: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+
+ // Select a directory
+ await userEvent.type(input, 'videos/new-folder');
+
+ // Form should be updated
+ await waitFor(() => {
+ expect(form.formData.destination).toBe('videos/new-folder');
+ });
+ });
+
+ });
+
+ describe('Edge Cases', () => {
+
+ it('works with nested form paths', () => {
+ const form = createTestForm(
+ {config: {output: {destination: 'videos/nested'}}},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render(
+
+ );
+
+ const input = screen.getByTestId('directory-search-input');
+ expect(input).toHaveValue('videos/nested');
+ });
+
+ it('handles concurrent field updates', async () => {
+ const form = createTestForm(
+ {destination: '', title: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+
+ // Simulate rapid updates
+ await userEvent.type(input, 'videos/a');
+ form.setValue('title', 'Test Title');
+ await userEvent.type(input, 'bc');
+
+ // Destination should have full value
+ await waitFor(() => {
+ expect(form.formData.destination).toBe('videos/abc');
+ });
+
+ // Title should also be set
+ expect(form.formData.title).toBe('Test Title');
+ });
+
+ it('handles empty string as initial value', () => {
+ const form = createTestForm(
+ {destination: ''},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+ expect(input).toHaveValue('');
+ });
+
+ it('handles null as initial value', () => {
+ const form = createTestForm(
+ {destination: null},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+ expect(input).toHaveValue('');
+ });
+
+ it('handles undefined as initial value', () => {
+ const form = createTestForm(
+ {},
+ {overrides: {ready: true, loading: false}}
+ );
+
+ render();
+
+ const input = screen.getByTestId('directory-search-input');
+ expect(input).toHaveValue('');
+ });
+ });
+});
diff --git a/app/src/components/Nav.js b/app/src/components/Nav.js
index b138ea432..5d4fa5462 100644
--- a/app/src/components/Nav.js
+++ b/app/src/components/Nav.js
@@ -186,9 +186,24 @@ export function NavBar() {
/>
}
+ // Upgrade available notification - only show on native (non-Docker) installs
+ let upgradeIcon;
+ if (status?.update_available && !status?.dockerized) {
+ const commitsBehind = status.commits_behind || 0;
+ const branch = status.git_branch || 'unknown';
+ const icon =
+
+ ;
+ upgradeIcon = ;
+ }
+
const icons =
{apiDownIcon}
{processingIcon}
+ {upgradeIcon}
{powerIcon}
{warningIcon}
diff --git a/app/src/components/Vars.js b/app/src/components/Vars.js
index 8a44c5dfd..d07b7b979 100644
--- a/app/src/components/Vars.js
+++ b/app/src/components/Vars.js
@@ -1,6 +1,7 @@
export const API_URI = process.env && process.env.REACT_APP_API_URI ? process.env.REACT_APP_API_URI : `https://${window.location.host}/api`;
export const VIDEOS_API = `${API_URI}/videos`;
export const ARCHIVES_API = `${API_URI}/archive`;
+export const COLLECTIONS_API = `${API_URI}/collections`;
export const OTP_API = `${API_URI}/otp`;
export const ZIM_API = `${API_URI}/zim`;
export const DEFAULT_LIMIT = 20;
diff --git a/app/src/components/admin/Settings.js b/app/src/components/admin/Settings.js
index e89f28902..a47633b13 100644
--- a/app/src/components/admin/Settings.js
+++ b/app/src/components/admin/Settings.js
@@ -1,5 +1,6 @@
import React from "react";
-import {postRestart, postShutdown} from "../../api";
+import {ThemeContext} from "../../contexts/contexts";
+import {checkUpgrade, postRestart, postShutdown, triggerUpgrade} from "../../api";
import {
Button,
Divider,
@@ -30,7 +31,7 @@ import QRCode from "react-qr-code";
import {useConfigs, useDockerized} from "../../hooks/customHooks";
import {toast} from "react-semantic-toasts-2";
import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
-import {SettingsContext} from "../../contexts/contexts";
+import {SettingsContext, StatusContext} from "../../contexts/contexts";
import {ConfigsTable} from "./Configs";
import {semanticUIColorMap} from "../Vars";
@@ -85,6 +86,89 @@ export function ShutdownButton() {
}
+function UpgradeSegment() {
+ const {status, fetchStatus} = React.useContext(StatusContext);
+ const dockerized = useDockerized();
+ const [upgrading, setUpgrading] = React.useState(false);
+ const [checking, setChecking] = React.useState(false);
+
+ const handleCheckUpgrade = async () => {
+ setChecking(true);
+ try {
+ await checkUpgrade(true); // Force a fresh check
+ toast({
+ type: 'info',
+ title: 'Update Check Complete',
+ description: 'Checked for updates from git remote.',
+ time: 3000,
+ });
+ } finally {
+ setChecking(false);
+ await fetchStatus();
+ }
+ };
+
+ const handleUpgrade = async () => {
+ setUpgrading(true);
+ try {
+ const response = await triggerUpgrade();
+ if (response.ok) {
+ // Redirect to maintenance page
+ window.location.href = '/maintenance.html';
+ }
+ } catch (e) {
+ setUpgrading(false);
+ }
+ };
+
+ // Not available in Docker
+ if (dockerized) {
+ return
+
+ Upgrades are not available in Docker environments. Please upgrade your Docker images manually.
+ ;
+ }
+
+ // No update available
+ if (!status?.update_available) {
+ return
+
+ Your WROLPi is up to date.
+ Version: v{status?.version} on branch {status?.git_branch || 'unknown'}
+
+ {checking ? 'Checking...' : 'Check for Updates'}
+
+ ;
+ }
+
+ // Update available
+ return
+
+ Branch: {status?.git_branch}
+ Current commit: {status?.current_commit}
+ Latest commit: {status?.latest_commit}
+ {status?.commits_behind} commit(s) behind
+
+
+ {upgrading ? 'Starting Upgrade...' : 'Upgrade Now'}
+
+ ;
+}
+
export function RestartButton() {
const dockerized = useDockerized();
@@ -529,6 +613,8 @@ export function SettingsPage() {
{configsSegment}
+
+
Show All Hints
diff --git a/app/src/components/collections/CollectionEditForm.js b/app/src/components/collections/CollectionEditForm.js
new file mode 100644
index 000000000..b6ffc0b6f
--- /dev/null
+++ b/app/src/components/collections/CollectionEditForm.js
@@ -0,0 +1,152 @@
+import React from 'react';
+import {Button, Form, Grid, Message, TextArea} from 'semantic-ui-react';
+import {Header, Segment} from '../Theme';
+import {TagsSelector, TagsContext} from '../../Tags';
+import {WROLModeMessage} from '../Common';
+import {DestinationForm} from '../Download';
+import {InputForm} from '../../hooks/useForm';
+
+/**
+ * Reusable form component for editing collections (Domains, Channels, etc).
+ *
+ * @param {Object} form - Form object from useForm hook
+ * @param {Object} metadata - Backend-provided metadata containing fields configuration
+ * @param {Function} onCancel - Optional callback when cancel is clicked
+ * @param {String} title - Page title to display in header
+ * @param {String} wrolModeContent - Content to show in WROL mode message (optional)
+ * @param {React.ReactNode} actionButtons - Optional additional action buttons to display in the button row
+ * @param {String} appliedTagName - Optional tag name to display (similar to ChannelEditPage pattern)
+ */
+export function CollectionEditForm({
+ form,
+ metadata,
+ onCancel,
+ title,
+ wrolModeContent,
+ actionButtons,
+ appliedTagName
+}) {
+ const {SingleTag} = React.useContext(TagsContext);
+ if (!metadata) {
+ return
+ No metadata available
+ ;
+ }
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ form.onSubmit();
+ };
+
+ const renderField = (field) => {
+ const value = form.formData[field.key] || '';
+ const disabled = field.depends_on && !form.formData[field.depends_on];
+
+ switch (field.type) {
+ case 'text':
+ if (field.key === 'directory') {
+ // Use DestinationForm for directory picker
+ return ;
+ }
+ // Use InputForm for regular text fields
+ return ;
+
+ case 'textarea':
+ // Textarea doesn't have a form component, use manual Field
+ const [textareaProps] = form.getCustomProps({name: field.key, path: field.key, required: field.required});
+ return
+
+