[PM-30547] Table empty state message (#18752)

apps/web/src/locales/en/messages.json

@@ -38,6 +38,9 @@
   "accessIntelligence": {
     "message": "Access Intelligence"
   },
+  "noApplicationsMatchTheseFilters": {
+    "message": "No applications match these filters"
+  },
   "passwordRisk": {
     "message": "Password Risk"
   },

bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html

@@ -43,5 +43,11 @@
       [checkboxChange]="onCheckboxChange"
       [showAppAtRiskMembers]="showAppAtRiskMembers"
     ></app-table-row-scrollable-m11>
+
+    @if (emptyTableExplanation()) {
+      <div class="tw-flex tw-mt-10 tw-justify-center">
+        <span bitTypography="body2">{{ emptyTableExplanation() }}</span>
+      </div>
+    }
   </div>
 }

bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts

@@ -104,6 +104,7 @@ export class ApplicationsComponent implements OnInit {
       icon: " ",
     },
   ]);
+  protected readonly emptyTableExplanation = signal("");
 
   constructor(
     protected i18nService: I18nService,
@@ -164,6 +165,12 @@ export class ApplicationsComponent implements OnInit {
         this.dataSource.filter = (app) =>
           filterFunction(app) &&
           app.applicationName.toLowerCase().includes(searchText.toLowerCase());
+
+        if (this.dataSource?.filteredData?.length === 0) {
+          this.emptyTableExplanation.set(this.i18nService.t("noApplicationsMatchTheseFilters"));
+        } else {
+          this.emptyTableExplanation.set("");
+        }
       });
   }