diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 5df3d35d6..b19330425 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -2273,7 +2273,9 @@ "listFoundImages": "List of found images", "listAlreadyImportedImages": "List of already imported images", "allImagesAlreadyImported": "All images already imported", - "onlyAdminCanImport": "Only administrators can import from docker" + "onlyAdminCanImport": "Only administrators can import from docker", + "selectAll": "Select all", + "deselectAll": "Deselect all" }, "provider": { "label": "Provider" diff --git a/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx b/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx index 556322084..268a75a4c 100644 --- a/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx +++ b/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx @@ -19,18 +19,19 @@ import { Title, Tooltip, } from "@mantine/core"; -import type { CheckboxProps } from "@mantine/core"; import type { FormErrors } from "@mantine/form"; import { useDebouncedValue } from "@mantine/hooks"; import { IconAlertTriangleFilled, IconBrandDocker, + IconCopy, + IconCopyCheckFilled, IconEdit, + IconPackageImport, IconPlus, - IconSquare, - IconSquareCheck, IconTrash, IconTriangleFilled, + IconZoomScan, } from "@tabler/icons-react"; import { escapeForRegEx } from "@tiptap/react"; @@ -511,33 +512,37 @@ interface ReleasesRepositoryImport extends ReleasesRepository { interface ImportRepositorySelectProps { repository: ReleasesRepositoryImport; + checked: boolean; integration?: Integration; versionFilterPrecisionOptions: string[]; + disabled: boolean; onImageSelectionChanged?: (isSelected: boolean) => void; } const ImportRepositorySelect = ({ repository, + checked, integration, versionFilterPrecisionOptions, - onImageSelectionChanged, + disabled = false, + onImageSelectionChanged = undefined, }: ImportRepositorySelectProps) => { const tRepository = useScopedI18n("widget.releases.option.repositories"); - const checkBoxProps: CheckboxProps = !onImageSelectionChanged - ? { - disabled: true, - checked: true, - } - : { - onChange: (event) => onImageSelectionChanged(event.currentTarget.checked), - }; return ( - + { + if (onImageSelectionChanged) { + onImageSelectionChanged(!checked); + } + }} label={ - + {repository.identifier} } - {...checkBoxProps} /> {repository.versionFilter && ( @@ -693,7 +697,7 @@ const RepositoryImportModal = createModal(({ innerProps, - }> + }> {tRepository("importRepositories.listFoundImages")} {allImagesImported && ( @@ -704,52 +708,85 @@ const RepositoryImportModal = createModal(({ innerProps, - {!allImagesImported && - importRepositories - .filter((repository) => !repository.alreadyImported) - .map((repository) => { - const integration = repository.providerIntegrationId - ? innerProps.integrations[repository.providerIntegrationId] - : undefined; + {!allImagesImported && ( + + + + + - return ( - - isSelected - ? setSelectedImages([...selectedImages, repository]) - : setSelectedImages(selectedImages.filter((img) => img !== repository)) - } - /> - ); - })} + + + {importRepositories + .filter((repository) => !repository.alreadyImported) + .map((repository) => { + const integration = repository.providerIntegrationId + ? innerProps.integrations[repository.providerIntegrationId] + : undefined; + + return ( + + isSelected + ? setSelectedImages([...selectedImages, repository]) + : setSelectedImages(selectedImages.filter((img) => img !== repository)) + } + /> + ); + })} + + )} - }> + }> {tRepository("importRepositories.listAlreadyImportedImages")} - {anyImagesImported && - importRepositories - .filter((repository) => repository.alreadyImported) - .map((repository) => { - const integration = repository.providerIntegrationId - ? innerProps.integrations[repository.providerIntegrationId] - : undefined; + {anyImagesImported && ( + + {importRepositories + .filter((repository) => repository.alreadyImported) + .map((repository) => { + const integration = repository.providerIntegrationId + ? innerProps.integrations[repository.providerIntegrationId] + : undefined; - return ( - - ); - })} + return ( + + ); + })} + + )}