[UI] Add Architecture Filter to Mirroring Configuration

interface MirroringFormState {
    // ... existing fields ...
    architectureFilter: string[];
}

const useMirroringForm = () => {
    const [formState, setFormState] = useState<MirroringFormState>({
        // ... existing defaults ...
        architectureFilter: [],
    });

    const setArchitectureFilter = (archs: string[]) => {
        setFormState(prev => ({
            ...prev,
            architectureFilter: archs,
        }));
    };

    return {
        // ... existing return values ...
        architectureFilter: formState.architectureFilter,
        setArchitectureFilter,
    };
};

export interface MirrorConfig {
    // ... existing fields ...
    architecture_filter?: string[];
}

export interface UpdateMirrorRequest {
    // ... existing fields ...
    architecture_filter?: string[];
}

import React from 'react';
import {
    FormGroup,
    Select,
    SelectOption,
    SelectVariant,
    Chip,
    ChipGroup,
} from '@patternfly/react-core';

const AVAILABLE_ARCHITECTURES = [
    { value: 'amd64', label: 'AMD64 (x86_64)' },
    { value: 'arm64', label: 'ARM64 (aarch64)' },
    { value: 'ppc64le', label: 'PowerPC 64 LE' },
    { value: 's390x', label: 'IBM Z (s390x)' },
    { value: '386', label: 'i386/i686' },
    { value: 'riscv64', label: 'RISC-V 64' },
];

interface ArchitectureFilterProps {
    selectedArchitectures: string[];
    onChange: (archs: string[]) => void;
    isDisabled?: boolean;
}

export const ArchitectureFilter: React.FC<ArchitectureFilterProps> = ({
    selectedArchitectures,
    onChange,
    isDisabled = false,
}) => {
    const [isOpen, setIsOpen] = React.useState(false);

    const onSelect = (event: any, selection: string) => {
        if (selectedArchitectures.includes(selection)) {
            onChange(selectedArchitectures.filter(arch => arch !== selection));
        } else {
            onChange([...selectedArchitectures, selection]);
        }
    };

    const clearAll = () => {
        onChange([]);
    };

    return (
        <FormGroup
            label="Architecture Filter"
            fieldId="architecture-filter"
            helperText={
                selectedArchitectures.length === 0
                    ? "All architectures will be mirrored. Select specific architectures to reduce storage usage."
                    : `Only selected architectures will be mirrored. ${selectedArchitectures.length} selected.`
            }
        >
            <Select
                variant={SelectVariant.typeaheadMulti}
                typeAheadAriaLabel="Select architectures"
                onToggle={() => setIsOpen(!isOpen)}
                onSelect={onSelect}
                onClear={clearAll}
                selections={selectedArchitectures}
                isOpen={isOpen}
                aria-labelledby="architecture-filter"
                placeholderText="All architectures"
                isDisabled={isDisabled}
            >
                {AVAILABLE_ARCHITECTURES.map(arch => (
                    <SelectOption key={arch.value} value={arch.value}>
                        {arch.label}
                    </SelectOption>
                ))}
            </Select>
        </FormGroup>
    );
};

import { ArchitectureFilter } from './ArchitectureFilter';

export const MirroringConfiguration: React.FC<Props> = ({ ... }) => {
    const {
        architectureFilter,
        setArchitectureFilter,
        // ... other form values
    } = useMirroringForm();

    return (
        <Form>
            {/* ... existing form fields ... */}

            <ArchitectureFilter
                selectedArchitectures={architectureFilter}
                onChange={setArchitectureFilter}
                isDisabled={!isEnabled}
            />

            {/* ... rest of form ... */}
        </Form>
    );
};

const handleSave = async () => {
    const mirrorConfig: UpdateMirrorRequest = {
        // ... existing fields ...
        architecture_filter: architectureFilter.length > 0 ? architectureFilter : null,
    };

    await updateMirror(org, repo, mirrorConfig);
};

describe('ArchitectureFilter', () => {
    it('renders with no selection', () => {
        // Verify placeholder text "All architectures"
    });

    it('allows selecting multiple architectures', () => {
        // Select amd64, then arm64
        // Verify both are in selectedArchitectures
    });

    it('allows deselecting architectures', () => {
        // Start with amd64 selected
        // Click amd64 again to deselect
        // Verify empty selection
    });

    it('clears all selections', () => {
        // Start with multiple selections
        // Click clear button
        // Verify empty selection
    });

    it('is disabled when isDisabled is true', () => {
        // Verify select is not interactive
    });

    it('displays helper text for empty selection', () => {
        // Verify "All architectures will be mirrored" text
    });

    it('displays helper text with count for selection', () => {
        // Select 2 architectures
        // Verify "2 selected" in helper text
    });
});

describe('Mirroring Architecture Filter', () => {
    it('saves architecture filter with mirror config', () => {
        // Navigate to mirror settings
        // Select architectures
        // Save
        // Verify saved via API
    });

    it('loads existing architecture filter on edit', () => {
        // Create mirror with filter via API
        // Navigate to mirror settings
        // Verify correct architectures are selected
    });
});