Issue #86

- Use messages YAML files for display of messages instead of hard-coded messages

Author: schramm-joboo

src/RemoteContentAssets/Presentation/Resources/assets/controllers/remote_asset_browser_controller.ts

@@ -22,6 +22,13 @@ export default class extends Controller {
         windowSize: { type: Number, default: 20 },
         addToChatLabel: { type: String, default: "Add to chat" },
         openInNewTabLabel: { type: String, default: "Open in new tab" },
+        uploadProcessingLabel: { type: String, default: "New images are being processed..." },
+        refreshPromptLabel: { type: String, default: "New images are available. Refresh the asset list now?" },
+        uploadProcessingDelayedErrorLabel: {
+            type: String,
+            default: "Upload completed. New images are still processing. Please try again shortly.",
+        },
+        uploadPartialFailureLabel: { type: String, default: "%errorCount% of %total% uploads failed." },
         // Upload configuration (optional - if not set, upload is disabled)
         uploadUrl: { type: String, default: "" },
         uploadCsrfToken: { type: String, default: "" },
@@ -49,6 +56,10 @@ export default class extends Controller {
     declare readonly windowSizeValue: number;
     declare readonly addToChatLabelValue: string;
     declare readonly openInNewTabLabelValue: string;
+    declare readonly uploadProcessingLabelValue: string;
+    declare readonly refreshPromptLabelValue: string;
+    declare readonly uploadProcessingDelayedErrorLabelValue: string;
+    declare readonly uploadPartialFailureLabelValue: string;
     declare readonly uploadUrlValue: string;
     declare readonly uploadCsrfTokenValue: string;
     declare readonly workspaceIdValue: string;
@@ -253,14 +264,14 @@ export default class extends Controller {
             if (waitSucceeded) {
                 this.markRefreshAvailable();
             } else {
-                this.showUploadError("Upload completed. New images are still processing. Please try again shortly.");
+                this.showUploadError(this.uploadProcessingDelayedErrorLabelValue);
             }
         }
 
         if (errorCount > 0 && successCount === 0) {
-            this.showUploadError("Upload failed. Please try again.");
+            this.showUploadError(this.getUploadErrorFallbackLabel());
         } else if (errorCount > 0) {
-            this.showUploadError(`${errorCount} of ${total} uploads failed.`);
+            this.showUploadError(this.formatUploadPartialFailureLabel(errorCount, total));
         }
 
         this.isUploading = false;
@@ -539,8 +550,8 @@ export default class extends Controller {
         if (this.hasUploadProcessingMessageTarget) {
             this.uploadProcessingMessageTarget.textContent =
                 this.uploadProcessingMode === "refreshPrompt"
-                    ? "Neue Bilder sind verfügbar. Bildliste jetzt aktualisieren?"
-                    : "Neue Bilder werden verarbeitet...";
+                    ? this.refreshPromptLabelValue
+                    : this.uploadProcessingLabelValue;
         }
 
         if (this.hasUploadRefreshActionsTarget) {
@@ -554,6 +565,22 @@ export default class extends Controller {
         setTimeout(() => this.showUploadStatus("none"), 3000);
     }
 
+    private formatUploadPartialFailureLabel(errorCount: number, total: number): string {
+        return this.uploadPartialFailureLabelValue
+            .replaceAll("%errorCount%", String(errorCount))
+            .replaceAll("%total%", String(total));
+    }
+
+    private getUploadErrorFallbackLabel(): string {
+        if (this.hasUploadErrorTarget) {
+            const textEl = this.uploadErrorTarget.querySelector("[data-error-text]");
+            if (textEl && textEl.textContent !== null && textEl.textContent !== "") {
+                return textEl.textContent;
+            }
+        }
+        return "Upload failed. Please try again.";
+    }
+
     private normalizeManifestData(data: { urls?: string[]; revision?: string }): { urls: string[]; revision: string } {
         const urls = data.urls ?? [];
         const revision = data.revision ?? this.computeManifestRevision(urls);

src/RemoteContentAssets/Presentation/Resources/templates/remote_asset_area.twig

@@ -6,6 +6,10 @@
              windowSize: remoteAssetBrowserWindowSize,
              addToChatLabel: 'remote_content_assets.browser_add_to_chat'|trans,
              openInNewTabLabel: 'remote_content_assets.browser_open_in_new_tab'|trans,
+             uploadProcessingLabel: 'remote_content_assets.browser_upload_processing'|trans,
+             refreshPromptLabel: 'remote_content_assets.browser_refresh_prompt'|trans,
+             uploadProcessingDelayedErrorLabel: 'remote_content_assets.browser_upload_processing_delayed'|trans,
+             uploadPartialFailureLabel: 'remote_content_assets.browser_upload_partial_failure'|trans,
              uploadUrl: project.hasS3UploadConfigured() ? path('remote_content_assets.presentation.upload', { projectId: project.id }) : '',
              uploadCsrfToken: project.hasS3UploadConfigured() ? csrf_token('remote_asset_upload') : '',
              workspaceId: workspace.id
@@ -57,18 +61,18 @@
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
-                    <span {{ stimulus_target('remote-asset-browser', 'uploadProcessingMessage') }}>Neue Bilder werden verarbeitet...</span>
+                    <span {{ stimulus_target('remote-asset-browser', 'uploadProcessingMessage') }}>{{ 'remote_content_assets.browser_upload_processing'|trans }}</span>
                     <div {{ stimulus_target('remote-asset-browser', 'uploadRefreshActions') }}
                          class="hidden ml-2 flex items-center gap-2">
                         <button type="button"
                                 {{ stimulus_action('remote-asset-browser', 'confirmRefresh', 'click') }}
                                 class="px-2 py-1 rounded bg-primary-600 text-white text-xs hover:bg-primary-700 focus:outline-none focus:ring-1 focus:ring-primary-500">
-                            Ja
+                            {{ 'remote_content_assets.browser_refresh_yes'|trans }}
                         </button>
                         <button type="button"
                                 {{ stimulus_action('remote-asset-browser', 'dismissRefresh', 'click') }}
                                 class="px-2 py-1 rounded border border-dark-300 dark:border-dark-600 text-dark-700 dark:text-dark-200 text-xs hover:bg-dark-100 dark:hover:bg-dark-700">
-                            Nein
+                            {{ 'remote_content_assets.browser_refresh_no'|trans }}
                         </button>
                     </div>
                 </div>

tests/frontend/unit/RemoteContentAssets/remote_asset_browser_controller.test.ts

@@ -586,6 +586,10 @@ describe("RemoteAssetBrowserController", () => {
                      data-remote-asset-browser-upload-url-value="/api/projects/test-id/remote-assets/upload"
                      data-remote-asset-browser-upload-csrf-token-value="csrf-token-123"
                      data-remote-asset-browser-workspace-id-value="workspace-123"
+                     data-remote-asset-browser-upload-processing-label-value="New images are being processed..."
+                     data-remote-asset-browser-refresh-prompt-label-value="New images are available. Refresh the asset list now?"
+                     data-remote-asset-browser-upload-processing-delayed-error-label-value="Upload completed. New images are still processing. Please try again shortly."
+                     data-remote-asset-browser-upload-partial-failure-label-value="%errorCount% of %total% uploads failed."
                      data-remote-asset-browser-window-size-value="50">
                     <input type="text"
                            data-remote-asset-browser-target="search"
@@ -1109,6 +1113,10 @@ describe("RemoteAssetBrowserController", () => {
                      data-remote-asset-browser-upload-url-value="/api/projects/test-id/remote-assets/upload"
                      data-remote-asset-browser-upload-csrf-token-value="csrf-token-123"
                      data-remote-asset-browser-workspace-id-value="workspace-123"
+                     data-remote-asset-browser-upload-processing-label-value="New images are being processed..."
+                     data-remote-asset-browser-refresh-prompt-label-value="New images are available. Refresh the asset list now?"
+                     data-remote-asset-browser-upload-processing-delayed-error-label-value="Upload completed. New images are still processing. Please try again shortly."
+                     data-remote-asset-browser-upload-partial-failure-label-value="%errorCount% of %total% uploads failed."
                      data-remote-asset-browser-window-size-value="50">
                     <div data-remote-asset-browser-target="dropzone"
                          data-action="click->remote-asset-browser#openFileDialog"

translations/messages.de.yaml

@@ -465,8 +465,14 @@ remote_content_assets:
     browser_upload_dropzone: "Bilder hierher ziehen oder klicken"
     browser_upload_hint: "Mehrere Dateien möglich. JPEG, PNG, GIF, WebP, SVG, AVIF (max. 10MB)"
     browser_uploading: "Wird hochgeladen..."
-    browser_upload_success: "Upload abgeschlossen. Asset-Liste wird aktualisiert..."
+    browser_upload_success: "Upload abgeschlossen."
     browser_upload_error: "Upload fehlgeschlagen. Bitte erneut versuchen."
+    browser_upload_processing: "Neue Bilder werden verarbeitet..."
+    browser_refresh_prompt: "Neue Bilder sind verfügbar. Bildliste jetzt aktualisieren?"
+    browser_refresh_yes: "Ja"
+    browser_refresh_no: "Nein"
+    browser_upload_processing_delayed: "Upload abgeschlossen. Neue Bilder werden noch verarbeitet. Bitte versuchen Sie es in Kürze erneut."
+    browser_upload_partial_failure: "%errorCount% von %total% Uploads fehlgeschlagen."
 
 # PhotoBuilder vertical
 photo_builder:

translations/messages.en.yaml

@@ -465,8 +465,14 @@ remote_content_assets:
     browser_upload_dropzone: "Drop images here or click to upload"
     browser_upload_hint: "Multiple files supported. JPEG, PNG, GIF, WebP, SVG, AVIF (max 10MB)"
     browser_uploading: "Uploading..."
-    browser_upload_success: "Upload complete. Refreshing asset list..."
+    browser_upload_success: "Upload complete."
     browser_upload_error: "Upload failed. Please try again."
+    browser_upload_processing: "New images are being processed..."
+    browser_refresh_prompt: "New images are available. Refresh the asset list now?"
+    browser_refresh_yes: "Yes"
+    browser_refresh_no: "No"
+    browser_upload_processing_delayed: "Upload completed. New images are still processing. Please try again shortly."
+    browser_upload_partial_failure: "%errorCount% of %total% uploads failed."
 
 # PhotoBuilder vertical
 photo_builder: