@strapi/upload 5.53.0 → 5.55.0

package/dist/admin/components/UploadProgressDialog.js

@@ -0,0 +1,700 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var api = require('../services/api.js');
+var hooks = require('../store/hooks.js');
+var uploadProgress = require('../store/uploadProgress.js');
+var translations = require('../utils/translations.js');
+var Drawer = require('./Drawer.js');
+var TruncatedText = require('./TruncatedText.js');
+
+/* -------------------------------------------------------------------------------------------------
+ * DialogHeader
+ * -----------------------------------------------------------------------------------------------*/ const HeaderStatusMessage = ({ title, subtitle, metadataSubtitle })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "flex-start",
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        paddingBottom: 1,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Title, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "omega",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Description, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    textColor: "neutral600",
+                    children: subtitle
+                })
+            }),
+            metadataSubtitle && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: metadataSubtitle
+            })
+        ]
+    });
+};
+const HeaderStatusIcon = styledComponents.styled(designSystem.Flex)`
+  align-self: stretch;
+  padding: ${({ theme })=>theme.spaces[3]};
+  border-radius: ${({ theme })=>`${theme.borderRadius} 0 0 ${theme.borderRadius}`};
+
+  > svg {
+    height: 24px;
+    width: 24px;
+  }
+`;
+const HeaderStatusWrapper = styledComponents.styled(designSystem.Flex)`
+  align-items: center;
+`;
+const HeaderStatus = ({ status, progress, totalFiles, successfulCount, errorCount, metadataProgress, isGeneratingMetadata, metadataOutcome })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    // Completion is upload-driven, so the terminal header can appear while metadata is
+    // still generating — the subtitle keeps ticking underneath until it settles.
+    //
+    // Gated on work actually being in flight rather than on `progress < 100`: in a
+    // sequential batch the percentage touches 100% between files, which would blink the
+    // subtitle out and back in on every upload.
+    //
+    // Once the phase settles the line is not dropped but replaced with the outcome, so the
+    // header keeps confirming what happened instead of silently losing the message.
+    const metadataSubtitle = (()=>{
+        if (metadataProgress !== null && isGeneratingMetadata) {
+            return formatMessage({
+                id: translations.getTranslationKey('upload.progress.generatingMetadata.withCount'),
+                defaultMessage: 'Generating metadata with AI ({percentage}%)'
+            }, {
+                percentage: metadataProgress
+            });
+        }
+        if (metadataOutcome === null) {
+            return undefined;
+        }
+        // Only `generated` rows had metadata written, so only they can be reported as a
+        // success. With none, there is nothing to confirm — an all-skipped batch of
+        // non-images would otherwise read as "generated on 0 files". Per-row sublines
+        // already spell out skipped and failed outcomes.
+        if (metadataOutcome.generated === 0) {
+            return undefined;
+        }
+        if (metadataOutcome.failed > 0) {
+            return formatMessage({
+                id: translations.getTranslationKey('upload.progress.metadataGenerated.withFailures'),
+                defaultMessage: '{generatedCount} generated, {failedCount} failed'
+            }, {
+                generatedCount: metadataOutcome.generated,
+                failedCount: metadataOutcome.failed
+            });
+        }
+        return formatMessage({
+            id: translations.getTranslationKey('upload.progress.metadataGenerated.withCount'),
+            defaultMessage: '{count, plural, one {Metadata successfully generated on # file} other {Metadata successfully generated on # files}}'
+        }, {
+            count: metadataOutcome.generated
+        });
+    })();
+    if (status === 'error') {
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "danger200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {
+                        fill: "danger700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.failed'),
+                        defaultMessage: 'Upload failed'
+                    }),
+                    subtitle: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.failed.subtitle'),
+                        defaultMessage: 'Please try to upload files again'
+                    })
+                })
+            ]
+        });
+    }
+    if (status === 'success') {
+        const subtitle = errorCount > 0 ? formatMessage({
+            id: translations.getTranslationKey('upload.progress.success.subtitle.withErrors'),
+            defaultMessage: '{successCount} uploaded, {errorCount} failed'
+        }, {
+            successCount: successfulCount,
+            errorCount
+        }) : formatMessage({
+            id: translations.getTranslationKey('upload.progress.success.subtitle'),
+            defaultMessage: '{count} files uploaded successfully'
+        }, {
+            count: successfulCount
+        });
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "success200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {
+                        fill: "success700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.success'),
+                        defaultMessage: 'Upload successful!'
+                    }),
+                    subtitle: subtitle,
+                    metadataSubtitle: metadataSubtitle
+                })
+            ]
+        });
+    }
+    if (status === 'canceled') {
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "neutral200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.MinusCircle, {
+                        fill: "neutral700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.canceled'),
+                        defaultMessage: 'Upload canceled'
+                    }),
+                    subtitle: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.canceled.subtitle'),
+                        defaultMessage: 'Some files were not uploaded'
+                    }),
+                    metadataSubtitle: metadataSubtitle
+                })
+            ]
+        });
+    }
+    if (status === 'uploading') {
+        // Two separate strings so a locale can position (or omit) the percentage itself.
+        const title = progress === null ? formatMessage({
+            id: translations.getTranslationKey('upload.progress.uploading.indeterminate'),
+            defaultMessage: 'Uploading {total, plural, one {# item} other {# items}}'
+        }, {
+            total: totalFiles
+        }) : formatMessage({
+            id: translations.getTranslationKey('upload.progress.uploading.withCount'),
+            defaultMessage: 'Uploading {total, plural, one {# item} other {# items}} ({percentage}%)'
+        }, {
+            total: totalFiles,
+            percentage: Math.round(progress)
+        });
+        return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusIcon, {
+                    background: "primary200",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Upload, {
+                        fill: "primary700"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(HeaderStatusMessage, {
+                    title: title,
+                    metadataSubtitle: metadataSubtitle
+                })
+            ]
+        });
+    }
+    return null;
+};
+const HeaderIconButton = styledComponents.styled(designSystem.IconButton)`
+  &:hover {
+    background: transparent;
+  }
+`;
+const ChevronWrapper = styledComponents.styled.span`
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+  transform: ${({ $isMinimized })=>$isMinimized ? 'rotate(180deg)' : 'rotate(0deg)'};
+`;
+const HEADER_COLOR_MAP = {
+    uploading: {
+        background: 'primary100'
+    },
+    canceled: {
+        background: 'neutral100'
+    },
+    success: {
+        background: 'success100'
+    },
+    error: {
+        background: 'danger100'
+    }
+};
+const DialogHeader = ({ handleClose })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { isMinimized, files, uploadId, totalFiles } = hooks.useTypedSelector((state)=>state.uploadProgress);
+    const aggregateProgress = hooks.useTypedSelector(uploadProgress.selectAggregateProgress);
+    const reportsByteProgress = hooks.useTypedSelector(uploadProgress.selectReportsByteProgress);
+    const countBasedProgress = hooks.useTypedSelector(uploadProgress.selectCountBasedProgress);
+    // Byte-weighted when the flow streams bytes (direct-file), else count-based (settled/total).
+    // Both return `null` for an indeterminate header when there's nothing to show yet.
+    const progress = reportsByteProgress ? aggregateProgress : countBasedProgress;
+    const metadataProgress = hooks.useTypedSelector(uploadProgress.selectMetadataProgress);
+    const isGeneratingMetadata = hooks.useTypedSelector(uploadProgress.selectIsGeneratingMetadata);
+    const metadataOutcome = hooks.useTypedSelector(uploadProgress.selectMetadataOutcome);
+    const dispatch = hooks.useTypedDispatch();
+    const [retryCancelledFiles] = api.useRetryCancelledFilesMutation();
+    // The batch is complete once every file has reached a terminal state. Byte-weighted
+    // progress can't be used here because errored/cancelled rows never reach 100%.
+    const isComplete = files.length > 0 && files.every((f)=>f.status === 'complete' || f.status === 'error' || f.status === 'cancelled');
+    const isAllUploaded = isComplete;
+    const isAllErrored = isComplete && files.every((f)=>f.status === 'error');
+    const hasCancelledFiles = files.some((f)=>f.status === 'cancelled');
+    const successfulCount = files.filter((f)=>f.status === 'complete').length;
+    const errorCount = files.filter((f)=>f.status === 'error').length;
+    // Success includes partial success (some files succeeded, even if some failed)
+    const isSuccess = isComplete && successfulCount > 0 && !hasCancelledFiles;
+    const status = (()=>{
+        if (isAllErrored) return 'error';
+        if (isSuccess) return 'success';
+        if (hasCancelledFiles) return 'canceled';
+        return 'uploading';
+    })();
+    const handleCancel = ()=>{
+        api.abortUpload(uploadId);
+        dispatch(uploadProgress.cancelUpload());
+    };
+    const handleRetry = async ()=>{
+        try {
+            await retryCancelledFiles().unwrap();
+        } catch  {
+        // Error is already dispatched to store from the API queryFn
+        }
+    };
+    const handleToggleMinimize = ()=>{
+        dispatch(uploadProgress.toggleMinimize());
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        background: HEADER_COLOR_MAP[status].background,
+        justifyContent: "space-between",
+        margin: 1,
+        hasRadius: true,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(HeaderStatus, {
+                status: status,
+                progress: progress,
+                totalFiles: totalFiles,
+                successfulCount: successfulCount,
+                errorCount: errorCount,
+                metadataProgress: metadataProgress,
+                isGeneratingMetadata: isGeneratingMetadata,
+                metadataOutcome: metadataOutcome
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 1,
+                children: [
+                    !isAllUploaded && /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                        onClick: handleCancel,
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('upload.progress.cancel'),
+                            defaultMessage: 'Cancel all'
+                        })
+                    }),
+                    hasCancelledFiles && /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                        onClick: handleRetry,
+                        fontWeight: "bold",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('upload.progress.retry'),
+                            defaultMessage: 'Retry'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(HeaderIconButton, {
+                        onClick: handleToggleMinimize,
+                        label: formatMessage({
+                            id: translations.getTranslationKey(isMinimized ? 'upload.progress.maximize' : 'upload.progress.minimize'),
+                            defaultMessage: isMinimized ? 'Maximize' : 'Minimize'
+                        }),
+                        variant: "ghost",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(ChevronWrapper, {
+                            $isMinimized: isMinimized,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {})
+                        })
+                    }),
+                    isComplete && /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.CloseButton, {
+                        onClose: handleClose,
+                        label: formatMessage({
+                            id: translations.getTranslationKey('upload.progress.close'),
+                            defaultMessage: 'Close'
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * UploadProgressDialog
+ * -----------------------------------------------------------------------------------------------*/ const ProgressTrack = styledComponents.styled.div`
+  width: 100%;
+  height: ${({ theme })=>theme.spaces[1]};
+  background-color: ${({ theme })=>theme.colors.neutral200};
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const ProgressIndicator = styledComponents.styled.div`
+  height: 100%;
+  width: ${({ $percent })=>$percent}%;
+  background-color: ${({ theme })=>theme.colors.primary700};
+  border-radius: 4px;
+  transition: width 0.15s linear;
+`;
+const DeterminateBar = ({ percent })=>{
+    const clamped = Math.min(100, Math.max(0, Math.round(percent)));
+    return /*#__PURE__*/ jsxRuntime.jsx(ProgressTrack, {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": clamped,
+        children: /*#__PURE__*/ jsxRuntime.jsx(ProgressIndicator, {
+            $percent: clamped
+        })
+    });
+};
+const INDETERMINATE_INDICATOR_WIDTH = 40;
+/**
+ * `translateX` percentages resolve against the *indicator's* own width, not the track's.
+ * So -100% is exactly "fully off the left edge" regardless of the width above, and the
+ * end offset converts a full track width into those same own-width units. Both ends sit
+ * flush off-track, which keeps entry and exit symmetric — a smaller start offset would
+ * make the bar pop in already partly visible.
+ */ const indeterminateSlide = styledComponents.keyframes`
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(${100 / INDETERMINATE_INDICATOR_WIDTH * 100}%);
+  }
+`;
+const IndeterminateIndicator = styledComponents.styled.div`
+  height: 100%;
+  width: ${INDETERMINATE_INDICATOR_WIDTH}%;
+  background-color: ${({ theme })=>theme.colors.primary700};
+  border-radius: 4px;
+  /* Linear, not an eased curve: the DS easings decelerate to a stop, which on a loop
+     reads as a stall at the wrap point. Constant speed is what makes it read as a sweep. */
+  animation: ${indeterminateSlide} 1.2s linear infinite;
+
+  /* A perpetually moving bar is a vestibular trigger; fall back to a static track fill. */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    width: 100%;
+    opacity: 0.5;
+  }
+`;
+/**
+ * Progress bar for work whose completion fraction is genuinely unknowable, rather
+ * than merely unknown-yet: the AI metadata endpoint answers in one go, and the URL
+ * flow can't report bytes until the server has fetched the file and knows its size.
+ *
+ * Deliberately omits `aria-valuenow` — that absence is precisely how ARIA conveys
+ * an indeterminate progressbar, so assistive tech announces "busy" instead of "0%".
+ */ const IndeterminateBar = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(ProgressTrack, {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: /*#__PURE__*/ jsxRuntime.jsx(IndeterminateIndicator, {})
+    });
+};
+/**
+ * Without a floor of zero the row is as wide as its longest filename, which
+ * pushes past the panel and gives the dialog a second, horizontal scrollbar
+ * instead of truncating.
+ *
+ * The floor belongs to the name alone: the icon carries its size in SVG
+ * attributes, which flex is free to override, so letting it shrink squashes it
+ * against a long name instead of truncating the name.
+ */ const FileRowName = styledComponents.styled(designSystem.Flex)`
+  min-width: 0;
+
+  > :first-child {
+    flex-shrink: 0;
+  }
+
+  > :last-child {
+    min-width: 0;
+  }
+`;
+const FileRow = ({ icon, fileName, children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        justifyContent: "center",
+        gap: 1,
+        width: "100%",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(FileRowName, {
+                gap: 2,
+                children: [
+                    icon,
+                    /*#__PURE__*/ jsxRuntime.jsx(TruncatedText.TruncatedText, {
+                        variant: "omega",
+                        fontWeight: "semiBold",
+                        children: fileName
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+};
+/**
+ * Icon + subline for a successfully uploaded row, keyed by its metadata phase.
+ * `'none'` covers rows that never entered the phase — AI metadata disabled — and
+ * renders exactly as before this feature existed. Non-images do enter the phase and
+ * land on `skipped`.
+ *
+ * `skipped` uses a neutral `Information` icon, deliberately distinct from
+ * generated/failed/cancelled — skipping is an expected outcome for a non-image, not a
+ * problem to flag.
+ */ const COMPLETED_ROW_PRESENTATION = {
+    none: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CheckCircle, {
+            fill: "success500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.uploaded'),
+            defaultMessage: 'Uploaded'
+        }
+    },
+    generating: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.Sparkle, {
+            fill: "primary600"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.generatingMetadata'),
+            defaultMessage: 'Uploaded • Generating metadata…'
+        }
+    },
+    generated: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CheckCircle, {
+            fill: "success500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.metadataGenerated'),
+            defaultMessage: 'Uploaded • Metadata generated'
+        }
+    },
+    skipped: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.Information, {
+            fill: "neutral500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.metadataSkipped'),
+            defaultMessage: 'Upload complete • Metadata generation skipped'
+        }
+    },
+    failed: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.WarningCircle, {
+            fill: "warning500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.metadataFailed'),
+            defaultMessage: 'Upload complete • Metadata generation failed'
+        }
+    }
+};
+const FileRowRenderer = ({ file })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isError = file.status === 'error';
+    const isCurrentFile = file.status === 'uploading';
+    const isCompleted = file.status === 'complete';
+    const isCancelled = file.status === 'cancelled';
+    const isQueued = file.status === 'pending';
+    if (isQueued) {
+        // No bar: there is nothing to report yet, and an indeterminate bar would read
+        // as "in progress" on a file the pool has not picked up.
+        return /*#__PURE__*/ jsxRuntime.jsx(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.Clock, {
+                fill: "neutral600"
+            }),
+            fileName: file.name,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: translations.getTranslationKey('upload.progress.file.queued'),
+                    defaultMessage: 'Queued'
+                })
+            })
+        });
+    }
+    if (isCurrentFile) {
+        // Determinate only once bytes are actually being reported — a known `size` is not
+        // enough. Both flows can report bytes, but neither always does:
+        //  - the direct-file flow streams real byte counts from XHR;
+        //  - the URL flow streams `file:progress` SSE frames while the server fetches the
+        //    remote file, but only when the remote sent a usable Content-Length. Without one
+        //    there is no denominator, nothing is dispatched, and `uploadedBytes` stays 0.
+        // Keying off `size` alone froze such rows at a determinate 0% for the entire upload;
+        // keying off reported bytes keeps them animating until there is a fraction to show.
+        // Back to indeterminate once every byte is in: the server is still working (the URL
+        // flow's provider upload, the direct flow awaiting its response), not stuck at 100%.
+        const hasReportedProgress = file.size > 0 && file.uploadedBytes > 0 && file.uploadedBytes < file.size;
+        return /*#__PURE__*/ jsxRuntime.jsxs(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowsCounterClockwise, {
+                fill: "secondary600"
+            }),
+            fileName: file.name,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: translations.getTranslationKey('upload.progress.file.uploading'),
+                        defaultMessage: 'Uploading...'
+                    })
+                }),
+                hasReportedProgress ? /*#__PURE__*/ jsxRuntime.jsx(DeterminateBar, {
+                    percent: file.uploadedBytes / file.size * 100
+                }) : /*#__PURE__*/ jsxRuntime.jsx(IndeterminateBar, {})
+            ]
+        });
+    }
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CrossCircle, {
+                fill: "danger500"
+            }),
+            fileName: file.name,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: file.error ? /**
+               * The server may return a machine-readable code (e.g. `FileTooBig` from the
+               * body middleware) or an already human-readable sentence (e.g. the upload
+               * plugin's size-limit message). Translate the former, fall back to the latter.
+               */ formatMessage({
+                    id: translations.getTranslationKey(`apiError.${file.error}`),
+                    defaultMessage: file.error
+                }) : formatMessage({
+                    id: translations.getTranslationKey('upload.generic-error'),
+                    defaultMessage: 'An error occurred while uploading the file.'
+                })
+            })
+        });
+    }
+    if (isCancelled) {
+        return /*#__PURE__*/ jsxRuntime.jsx(FileRow, {
+            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.MinusCircle, {
+                fill: "neutral600"
+            }),
+            fileName: file.name,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: translations.getTranslationKey('upload.progress.file.canceled'),
+                    defaultMessage: 'Canceled'
+                })
+            })
+        });
+    }
+    if (isCompleted) {
+        // The upload succeeded; the metadata phase (if any) drives both the icon and the
+        // subline from here on — a metadata failure shows a warning, not an upload error.
+        const { icon, message } = COMPLETED_ROW_PRESENTATION[file.metadataStatus ?? 'none'];
+        return /*#__PURE__*/ jsxRuntime.jsxs(FileRow, {
+            icon: icon,
+            fileName: file.name,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    textColor: "neutral600",
+                    children: formatMessage(message)
+                }),
+                file.metadataStatus === 'generating' && /*#__PURE__*/ jsxRuntime.jsx(IndeterminateBar, {})
+            ]
+        });
+    }
+    return null;
+};
+const CompletedFilesList = styledComponents.styled(designSystem.Flex)`
+  flex-direction: column;
+  gap: ${({ theme })=>theme.spaces[2]};
+  width: 100%;
+`;
+const UploadProgressDialog = ()=>{
+    const dispatch = hooks.useTypedDispatch();
+    const { isVisible, isMinimized, files } = hooks.useTypedSelector((state)=>state.uploadProgress);
+    // With concurrent uploads several files are `uploading` at once — render every
+    // in-flight row, not just the first (a `find` here dated to the strictly
+    // sequential era and hid all but the lowest-index worker's row).
+    const uploadingFiles = files.filter((f)=>f.status === 'uploading');
+    // Everything the pool has not reached yet. Listed in queue order, which is the
+    // order `files` is already in, so a row's position tells the user where it sits.
+    const queuedFiles = files.filter((f)=>f.status === 'pending');
+    const completedFiles = files.filter((f)=>f.status === 'complete' || f.status === 'error' || f.status === 'cancelled').sort((a, b)=>{
+        // Sort priority: error > cancelled > complete
+        const priority = {
+            error: 0,
+            cancelled: 1,
+            complete: 2,
+            uploading: 3,
+            pending: 4
+        };
+        return priority[a.status] - priority[b.status];
+    });
+    const handleClose = ()=>{
+        dispatch(uploadProgress.closeUploadProgress());
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Root, {
+        isVisible: isVisible,
+        onClose: handleClose,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(Drawer.Drawer.Body, {
+            animationDirection: "up",
+            width: "41.6rem",
+            maxHeight: "34.2rem",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(DialogHeader, {
+                    handleClose: handleClose
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.ScrollableContent, {
+                    isContentExpanded: !isMinimized,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        direction: "column",
+                        alignItems: "stretch",
+                        gap: 4,
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                        children: [
+                            uploadingFiles.map((file)=>/*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
+                                    file: file
+                                }, file.index)),
+                            queuedFiles.map((file)=>/*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
+                                    file: file
+                                }, file.index)),
+                            completedFiles.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(CompletedFilesList, {
+                                children: completedFiles.map((file)=>/*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
+                                        file: file
+                                    }, file.index))
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.UploadProgressDialog = UploadProgressDialog;
+//# sourceMappingURL=UploadProgressDialog.js.map