Feature/add no results message to assistant (#5166)

* Add no results message

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a message to the assistant if no results have been found
 - Added the category title to the settings dialog to customize the rule thresholds of the _X-ray_ page (experimental)
 
 ### Changed

libs/ui/src/lib/assistant/assistant.html

@@ -38,87 +38,100 @@
     </div>
     @if (searchFormControl.value) {
       <div class="overflow-auto py-2 result-container">
-        @if (searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks) {
-          <div class="mb-2">
-            <div class="font-weight-bold px-3 text-muted title" i18n>
-              Quick Links
-            </div>
-            @for (
-              searchResultItem of searchResults.quickLinks;
-              track searchResultItem
-            ) {
-              <gf-assistant-list-item
-                [item]="searchResultItem"
-                (clicked)="onCloseAssistant()"
-              />
-            }
-            @if (isLoading.quickLinks) {
-              <ngx-skeleton-loader
-                animation="pulse"
-                class="mx-3"
-                [theme]="{
-                  height: '1.5rem',
-                  width: '100%'
-                }"
-              />
-            }
-          </div>
-        }
-        @if (searchResults?.holdings?.length !== 0 || isLoading.holdings) {
-          <div>
-            <div class="font-weight-bold px-3 text-muted title" i18n>
-              Holdings
-            </div>
-            @for (
-              searchResultItem of searchResults.holdings;
-              track searchResultItem
-            ) {
-              <gf-assistant-list-item
-                [item]="searchResultItem"
-                (clicked)="onCloseAssistant()"
-              />
-            }
-            @if (isLoading.holdings) {
-              <ngx-skeleton-loader
-                animation="pulse"
-                class="mx-3"
-                [theme]="{
-                  height: '1.5rem',
-                  width: '100%'
-                }"
-              />
-            }
-          </div>
-        }
         @if (
-          hasPermissionToAccessAdminControl &&
+          !isLoading.assetProfiles &&
-          (searchResults?.assetProfiles?.length !== 0 ||
+          !isLoading.holdings &&
-            isLoading.assetProfiles)
+          !isLoading.quickLinks &&
+          searchResults.assetProfiles?.length === 0 &&
+          searchResults.holdings?.length === 0 &&
+          searchResults.quickLinks?.length === 0
         ) {
-          <div class="mt-2">
+          <div class="px-3 py-1 text-muted" i18n>No results found...</div>
-            <div class="font-weight-bold px-3 text-muted title" i18n>
+        } @else {
-              Asset Profiles
+          @if (
+            isLoading.quickLinks || searchResults?.quickLinks?.length !== 0
+          ) {
+            <div class="mb-2">
+              <div class="font-weight-bold px-3 text-muted title" i18n>
+                Quick Links
+              </div>
+              @for (
+                searchResultItem of searchResults.quickLinks;
+                track searchResultItem
+              ) {
+                <gf-assistant-list-item
+                  [item]="searchResultItem"
+                  (clicked)="onCloseAssistant()"
+                />
+              }
+              @if (isLoading.quickLinks) {
+                <ngx-skeleton-loader
+                  animation="pulse"
+                  class="mx-3"
+                  [theme]="{
+                    height: '1.5rem',
+                    width: '100%'
+                  }"
+                />
+              }
             </div>
-            @for (
+          }
-              searchResultItem of searchResults.assetProfiles;
+          @if (isLoading.holdings || searchResults?.holdings?.length !== 0) {
-              track searchResultItem
+            <div>
-            ) {
+              <div class="font-weight-bold px-3 text-muted title" i18n>
-              <gf-assistant-list-item
+                Holdings
-                [item]="searchResultItem"
+              </div>
-                (clicked)="onCloseAssistant()"
+              @for (
-              />
+                searchResultItem of searchResults.holdings;
-            }
+                track searchResultItem
-            @if (isLoading.assetProfiles) {
+              ) {
-              <ngx-skeleton-loader
+                <gf-assistant-list-item
-                animation="pulse"
+                  [item]="searchResultItem"
-                class="mx-3"
+                  (clicked)="onCloseAssistant()"
-                [theme]="{
+                />
-                  height: '1.5rem',
+              }
-                  width: '100%'
+              @if (isLoading.holdings) {
-                }"
+                <ngx-skeleton-loader
-              />
+                  animation="pulse"
-            }
+                  class="mx-3"
-          </div>
+                  [theme]="{
+                    height: '1.5rem',
+                    width: '100%'
+                  }"
+                />
+              }
+            </div>
+          }
+          @if (
+            hasPermissionToAccessAdminControl &&
+            (isLoading.assetProfiles ||
+              searchResults?.assetProfiles?.length !== 0)
+          ) {
+            <div class="mt-2">
+              <div class="font-weight-bold px-3 text-muted title" i18n>
+                Asset Profiles
+              </div>
+              @for (
+                searchResultItem of searchResults.assetProfiles;
+                track searchResultItem
+              ) {
+                <gf-assistant-list-item
+                  [item]="searchResultItem"
+                  (clicked)="onCloseAssistant()"
+                />
+              }
+              @if (isLoading.assetProfiles) {
+                <ngx-skeleton-loader
+                  animation="pulse"
+                  class="mx-3"
+                  [theme]="{
+                    height: '1.5rem',
+                    width: '100%'
+                  }"
+                />
+              }
+            </div>
+          }
         }
       </div>
     }