diff --git a/package.json b/package.json
index eef39f3d4..2c0c5084b 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
     "cypress": "^6.0.0",
     "husky": "^3.0.0",
-    "lint-staged": "^10.0.0",
+    "lint-staged": "^10.2.0",
     "@babel/plugin-transform-modules-commonjs": "^7.16.5"
   },
   "dependencies": {
diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
index 759cd231a..a283e0cbd 100644
--- a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
+++ b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
@@ -61,15 +61,8 @@ export default class AlertsDashboardFlyoutComponent extends Component {
     const { location, monitors, monitor_id } = this.props;
     const monitor = _.get(_.find(monitors, { _id: monitor_id }), '_source');
     const monitorType = _.get(monitor, 'monitor_type', MONITOR_TYPE.QUERY_LEVEL);
-    const {
-      alertState,
-      from,
-      search,
-      severityLevel,
-      size,
-      sortDirection,
-      sortField,
-    } = getURLQueryParams(location);
+    const { alertState, from, search, severityLevel, size, sortDirection, sortField } =
+      getURLQueryParams(location);
 
     this.state = {
       alerts: [],
@@ -93,16 +86,8 @@ export default class AlertsDashboardFlyoutComponent extends Component {
   }
 
   componentDidMount() {
-    const {
-      alertState,
-      page,
-      search,
-      severityLevel,
-      size,
-      sortDirection,
-      sortField,
-      monitorIds,
-    } = this.state;
+    const { alertState, page, search, severityLevel, size, sortDirection, sortField, monitorIds } =
+      this.state;
     this.getAlerts(
       page * size,
       size,
@@ -175,15 +160,8 @@ export default class AlertsDashboardFlyoutComponent extends Component {
 
   getAlerts = async () => {
     this.setState({ loading: true, tabContent: undefined });
-    const {
-      from,
-      search,
-      sortField,
-      sortDirection,
-      severityLevel,
-      alertState,
-      monitorIds,
-    } = this.state;
+    const { from, search, sortField, sortDirection, severityLevel, alertState, monitorIds } =
+      this.state;
 
     const { httpClient, history, notifications, triggerID } = this.props;
 
@@ -201,7 +179,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
     const queryParamsString = queryString.stringify(params);
     history.replace({ ...this.props.location, search: queryParamsString });
 
-    httpClient.get('../api/alerting/alerts', { query: params }).then((resp) => {
+    httpClient.get('../api/alerting/alerts', { query: params })?.then((resp) => {
       if (resp.ok) {
         const { alerts } = resp;
         const filteredAlerts = _.filter(alerts, { trigger_id: triggerID });
@@ -250,16 +228,8 @@ export default class AlertsDashboardFlyoutComponent extends Component {
         .catch((error) => error)
     );
 
-    const {
-      page,
-      size,
-      search,
-      sortField,
-      sortDirection,
-      severityLevel,
-      alertState,
-      monitorIds,
-    } = this.state;
+    const { page, size, search, sortField, sortDirection, severityLevel, alertState, monitorIds } =
+      this.state;
     await this.getAlerts(
       page * size,
       size,
diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.test.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.test.js
index a9332e5b2..2f2a5470c 100644
--- a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.test.js
+++ b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.test.js
@@ -6,6 +6,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import AlertsDashboardFlyoutComponent from './AlertsDashboardFlyoutComponent';
+import { historyMock, httpClientMock } from '../../../../../test/mocks';
 
 describe('AlertsDashboardFlyoutComponent', () => {
   test('renders', () => {
@@ -14,6 +15,8 @@ describe('AlertsDashboardFlyoutComponent', () => {
         location={{ pathname: '/dashboard', search: '' }}
         flyout={{ type: 'message', payload: null }}
         onClose={jest.fn()}
+        history={historyMock}
+        httpClient={httpClientMock}
       />
     );
     expect(wrapper).toMatchSnapshot();
diff --git a/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap b/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
index bca571965..097ed241d 100644
--- a/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
+++ b/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
@@ -96,7 +96,7 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
             }
           }
         >
-          Loading conditions...
+          -
         </p>
       </EuiText>
     </EuiFlexItem>
@@ -128,7 +128,7 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
             Filters
           </strong>
           <p>
-            Loading filters...
+            -
           </p>
         </EuiText>
       </EuiFlexItem>
@@ -141,7 +141,7 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
             Group by
           </strong>
           <p>
-            Loading groups...
+            -
           </p>
         </EuiText>
       </EuiFlexItem>
@@ -231,8 +231,8 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
       isSelectable={true}
       itemId={[Function]}
       items={Array []}
-      loading={true}
-      noItemsMessage="Loading alerts..."
+      loading={false}
+      noItemsMessage="No alerts."
       onChange={[Function]}
       pagination={
         Object {