Account for all statuses selected edge case

- when selecting all the statuses, now the all option will
  be selected
- update documentation

doc/user/application_security/threat_monitoring/index.md

@@ -221,7 +221,7 @@ to set the status for each alert:
 By default, the list doesn't display resolved or dismissed alerts. To show these alerts, clear the
 checkbox **Hide dismissed alerts**.
 
-![Policy Alert List](img/threat_monitoring_policy_alert_list_v13_9.png)
+![Policy Alert List](img/threat_monitoring_policy_alert_list_v13_11.png)
 
 Clicking an alert's name takes the user to the [alert details page](../../../operations/incident_management/alerts.md#alert-details-page).
 

ee/app/assets/javascripts/threat_monitoring/components/alerts/alert_filters.vue

@@ -65,6 +65,7 @@ export default {
     },
     handleStatusFilter(status) {
       let newFilters;
+
       if (status === this.$options.ALL.key) {
         newFilters = { statuses: [] };
       } else {
@@ -72,6 +73,12 @@ export default {
           ? { statuses: [...this.filters.statuses.filter((s) => s !== status)] }
           : { statuses: [...this.filters.statuses, status] };
       }
+
+      // If all statuses are selected, select the 'All' option
+      if (newFilters.statuses.length === Object.entries(STATUSES).length) {
+        newFilters = { statuses: [] };
+      }
+
       this.handleFilterChange(newFilters);
     },
     isChecked(status) {

ee/spec/frontend/threat_monitoring/components/alerts/alert_filters_spec.js

@@ -81,6 +81,14 @@ describe('AlertFilters component', () => {
       });
     });
 
+    it('Emits an event with no filters on a select of all the filters', () => {
+      const MOST_STATUSES = [...Object.keys(STATUSES)].slice(1);
+      createWrapper({ filters: { statuses: MOST_STATUSES } });
+      clickDropdownItemAtIndex(1);
+      expect(wrapper.emitted('filter-change')).toHaveLength(1);
+      expect(wrapper.emitted('filter-change')[0][0]).toStrictEqual({ statuses: [] });
+    });
+
     it('Checks "All" filter if no statuses are selected', () => {
       createWrapper({ filters: { statuses: [] } });
       expect(findDropdownItemAtIndex(0).props('isChecked')).toBe(true);