upload error subscruption + spinnner in the uploading wall

Author: hmoreras

core-web/libs/portlets/dot-plugins/src/lib/dot-plugins-list/dot-plugins-list.component.html

@@ -90,7 +90,10 @@ <h3 class="m-0 text-lg font-medium text-gray-800">
             <div
                 class="flex-1 flex flex-col items-center justify-center gap-4"
                 data-testid="plugins-uploading-state">
-                <i class="pi pi-cloud-upload text-primary text-6xl!" aria-hidden="true"></i>
+                <p-progressSpinner
+                    styleClass="w-16! h-16! [&_svg_circle]:stroke-[var(--p-primary-color)]!"
+                    strokeWidth="4"
+                    ariaLabel="uploading" />
                 <div class="flex flex-col text-center">
                     <h3 class="m-0 text-lg font-medium text-gray-800">
                         {{ 'plugins.uploading.title' | dm }}

core-web/libs/portlets/dot-plugins/src/lib/dot-plugins-list/dot-plugins-list.component.ts

@@ -18,6 +18,7 @@ import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
 import { InputTextModule } from 'primeng/inputtext';
 import { Menu, MenuModule } from 'primeng/menu';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { SkeletonModule } from 'primeng/skeleton';
 import { Table, TableModule } from 'primeng/table';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
@@ -49,6 +50,7 @@ import { DotPluginsUploadComponent } from '../dot-plugins-upload/dot-plugins-upl
         FormsModule,
         MenuModule,
         TableModule,
+        ProgressSpinnerModule,
         SkeletonModule,
         ButtonModule,
         ChipModule,

core-web/libs/portlets/dot-plugins/src/lib/dot-plugins-list/store/dot-plugins-list.store.spec.ts

@@ -11,7 +11,7 @@ import {
     DotOsgiService
 } from '@dotcms/data-access';
 import { DotcmsEventsService } from '@dotcms/dotcms-js';
-import { DotCMSAPIResponse } from '@dotcms/dotcms-models';
+import { DotCMSAPIResponse, DotMessageSeverity } from '@dotcms/dotcms-models';
 
 import { DotPluginsListStore } from './dot-plugins-list.store';
 
@@ -75,6 +75,7 @@ describe('DotPluginsListStore', () => {
 
     const osgiFrameworkRestartSubject = new Subject<void>();
     const osgiBundlesLoadedSubject = new Subject<void>();
+    const osgiUploadFailedSubject = new Subject<void>();
 
     const createService = createServiceFactory({
         service: DotPluginsListStore,
@@ -101,6 +102,8 @@ describe('DotPluginsListStore', () => {
                         return osgiFrameworkRestartSubject.asObservable();
                     if (event === 'OSGI_BUNDLES_LOADED')
                         return osgiBundlesLoadedSubject.asObservable();
+                    if (event === 'OSGI_BUNDLES_UPLOAD_FAILED')
+                        return osgiUploadFailedSubject.asObservable();
                     return of();
                 })
             })
@@ -367,6 +370,25 @@ describe('DotPluginsListStore', () => {
             );
         });
 
+        it('should reset status to loaded on OSGI_BUNDLES_UPLOAD_FAILED', () => {
+            store.uploadBundles([new File(['content'], 'plugin.jar')]);
+            expect(store.status()).toBe('uploading');
+
+            osgiUploadFailedSubject.next();
+
+            expect(store.status()).toBe('loaded');
+        });
+
+        it('should show an error message on OSGI_BUNDLES_UPLOAD_FAILED', () => {
+            const messageDisplayService = spectator.inject(DotMessageDisplayService);
+
+            osgiUploadFailedSubject.next();
+
+            expect(messageDisplayService.push).toHaveBeenCalledWith(
+                expect.objectContaining({ severity: DotMessageSeverity.ERROR })
+            );
+        });
+
         it('should preserve uploading status through the websocket-triggered reload and resolve to loaded', () => {
             jest.spyOn(osgiService, 'getInstalledBundles').mockReturnValue(
                 of(mockDotCMSResponse([] as BundleMap[]))

core-web/libs/portlets/dot-plugins/src/lib/dot-plugins-list/store/dot-plugins-list.store.ts

@@ -16,10 +16,13 @@ import { catchError, debounceTime, delay, take } from 'rxjs/operators';
 import {
     BundleMap,
     DotHttpErrorManagerService,
+    DotMessageDisplayService,
+    DotMessageService,
     DotOsgiService,
     PluginRow
 } from '@dotcms/data-access';
 import { DotcmsEventsService } from '@dotcms/dotcms-js';
+import { DotMessageSeverity, DotMessageType } from '@dotcms/dotcms-models';
 
 /** Delay after OSGi mutating calls before reload; matches backend / websocket timing for bundle state to settle. */
 const OSGI_ACTION_DELAY_MS = 5000;
@@ -249,6 +252,8 @@ export const DotPluginsListStore = signalStore(
         /** Initial full load; listens for OSGi websocket events to update status and refresh data. */
         onInit() {
             const dotcmsEventsService = inject(DotcmsEventsService);
+            const dotMessageDisplayService = inject(DotMessageDisplayService);
+            const dotMessageService = inject(DotMessageService);
             const destroyRef = inject(DestroyRef);
 
             store.loadAll(undefined, true);
@@ -268,6 +273,19 @@ export const DotPluginsListStore = signalStore(
                         store.status() === 'uploading' ? 'uploading' : 'refreshing'
                     )
                 );
+
+            dotcmsEventsService
+                .subscribeTo('OSGI_BUNDLES_UPLOAD_FAILED')
+                .pipe(takeUntilDestroyed(destroyRef))
+                .subscribe(() => {
+                    patchState(store, { status: 'loaded' });
+                    dotMessageDisplayService.push({
+                        life: 5000,
+                        message: dotMessageService.get('plugins.upload.failed'),
+                        severity: DotMessageSeverity.ERROR,
+                        type: DotMessageType.SIMPLE_MESSAGE
+                    });
+                });
         }
     }))
 );

dotCMS/src/main/webapp/WEB-INF/messages/Language.properties

@@ -6613,6 +6613,7 @@ plugins.upload.dropzone.prefix=Drag & drop files or
 plugins.upload.dropzone.suffix=to upload
 plugins.upload.jar-support=We only support JAR files
 plugins.upload.and-n-more=and {0} more
+plugins.upload.failed=Plugin upload failed. Please try again.
 plugins.extra-packages.title=Exported Packages
 plugins.extra-packages.instructions=Paste the list of exported packages (one per line) to be made available to plugins.
 plugins.extra-packages.search.placeholder=Find package\u2026