Tweak: improve no ML suggestions UX (#13621)

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.html

@@ -2,10 +2,16 @@
   <button type="button" class="btn btn-sm btn-outline-primary" (click)="clickSuggest()" [disabled]="disabled() || loading() || (suggestions() && !aiEnabled())">
     @if (loading()) {
       <div class="spinner-border spinner-border-sm" role="status"></div>
+    } @else if (noSuggestions) {
+      <i-bs width="1.2em" height="1.2em" name="check-circle"></i-bs>
     } @else {
       <i-bs width="1.2em" height="1.2em" name="stars"></i-bs>
     }
-    <span class="d-none d-lg-inline ps-1" i18n>Suggest</span>
+    @if (noSuggestions) {
+      <span class="d-none d-lg-inline ps-1" i18n>No suggestions</span>
+    } @else {
+      <span class="d-none d-lg-inline ps-1" i18n>Suggest</span>
+    }
     @if (totalSuggestions > 0) {
       <span class="badge bg-primary ms-2">{{ totalSuggestions }}</span>
     }
@@ -19,7 +25,7 @@
 
       <div ngbDropdownMenu aria-labelledby="suggestionsDropdown" class="shadow suggestions-dropdown">
         <div class="list-group list-group-flush small pb-0">
-          @if (!suggestions()?.suggested_tags && !suggestions()?.suggested_document_types && !suggestions()?.suggested_correspondents) {
+          @if (totalSuggestions === 0) {
             <div class="list-group-item text-muted fst-italic">
               <small class="text-muted small fst-italic" i18n>No novel suggestions</small>
             </div>

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.spec.ts

@@ -30,6 +30,34 @@ describe('SuggestionsDropdownComponent', () => {
     expect(component.totalSuggestions).toBe(4)
   })
 
+  it('should show when a completed request returned no suggestions', () => {
+    fixture.componentRef.setInput('suggestions', {
+      correspondents: [],
+      tags: [],
+      document_types: [],
+      storage_paths: [],
+      dates: [],
+    })
+    fixture.detectChanges()
+
+    expect(component.noSuggestions).toBeTruthy()
+    expect(fixture.nativeElement.textContent).toContain('No suggestions')
+  })
+
+  it('should not show the empty state before a request or with suggestions', () => {
+    expect(component.noSuggestions).toBeFalsy()
+
+    fixture.componentRef.setInput('suggestions', {
+      correspondents: [],
+      tags: [42],
+      document_types: [],
+      storage_paths: [],
+      dates: [],
+    })
+
+    expect(component.noSuggestions).toBeFalsy()
+  })
+
   it('should emit getSuggestions when clickSuggest is called and suggestions are null', () => {
     jest.spyOn(component.getSuggestions, 'emit')
     fixture.componentRef.setInput('suggestions', null)
@@ -59,5 +87,6 @@ describe('SuggestionsDropdownComponent', () => {
     })
     component.clickSuggest()
     expect(component.dropdown.open).toBeTruthy()
+    expect(fixture.nativeElement.textContent).toContain('No novel suggestions')
   })
 })

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.ts

@@ -61,4 +61,21 @@ export class SuggestionsDropdownComponent {
         this.suggestions()?.suggested_document_types?.length || 0
     )
   }
+
+  get noSuggestions(): boolean {
+    const suggestions = this.suggestions()
+    return (
+      suggestions != null &&
+      !suggestions.title &&
+      !suggestions.tags?.length &&
+      !suggestions.suggested_tags?.length &&
+      !suggestions.correspondents?.length &&
+      !suggestions.suggested_correspondents?.length &&
+      !suggestions.document_types?.length &&
+      !suggestions.suggested_document_types?.length &&
+      !suggestions.storage_paths?.length &&
+      !suggestions.suggested_storage_paths?.length &&
+      !suggestions.dates?.length
+    )
+  }
 }