[Console] Improve error message when localStorage quota is reached (#…

…93779) (#94283)

* identify quota related errors and show error message

* * refactor isQuoteExceeded => isQuotaExceeded
* implement logic for call error notification once
* implement test to check that error notification is only called
  once

* refactor quota exceeded error checker

* copy update

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/console/public/application/hooks/use_send_current_request_to_es/use_send_current_request_to_es.test.tsx

@@ -94,4 +94,28 @@ describe('useSendCurrentRequestToES', () => {
       title: 'Unknown Request Error',
     });
   });
+
+  it('notifies the user about save to history errors once only', async () => {
+    // Set up mocks
+    (sendRequestToES as jest.Mock).mockReturnValue(
+      [{ request: {} }, { request: {} }] /* two responses to save history */
+    );
+    (mockContextValue.services.settings.toJSON as jest.Mock).mockReturnValue({});
+    (mockContextValue.services.history.addToHistory as jest.Mock).mockImplementation(() => {
+      // Mock throwing
+      throw new Error('cannot save!');
+    });
+    (editorRegistry.getInputEditor as jest.Mock).mockImplementation(() => ({
+      getRequestsInRange: () => ['test', 'test'],
+    }));
+
+    const { result } = renderHook(() => useSendCurrentRequestToES(), { wrapper: contexts });
+    await act(() => result.current());
+
+    expect(dispatch).toHaveBeenCalledTimes(2);
+
+    expect(mockContextValue.services.history.addToHistory).toHaveBeenCalledTimes(2);
+    // It only called notification once
+    expect(mockContextValue.services.notifications.toasts.addError).toHaveBeenCalledTimes(1);
+  });
 });

src/plugins/console/public/application/hooks/use_send_current_request_to_es/use_send_current_request_to_es.ts

@@ -8,6 +8,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { useCallback } from 'react';
+import { isQuotaExceededError } from '../../../services/history';
 import { instance as registry } from '../../contexts/editor_context/editor_registry';
 import { useRequestActionContext, useServicesContext } from '../../contexts';
 import { sendRequestToES } from './send_request_to_es';
@@ -44,18 +45,38 @@ export const useSendCurrentRequestToES = () => {
 
       const results = await sendRequestToES({ requests });
 
+      let saveToHistoryError: undefined | Error;
+
       results.forEach(({ request: { path, method, data } }) => {
         try {
           history.addToHistory(path, method, data);
         } catch (e) {
-          // Best effort, but notify the user.
-          notifications.toasts.addError(e, {
-            title: i18n.translate('console.notification.error.couldNotSaveRequestTitle', {
-              defaultMessage: 'Could not save request to history.',
+          // Grab only the first error
+          if (!saveToHistoryError) {
+            saveToHistoryError = e;
+          }
+        }
+      });
+
+      if (saveToHistoryError) {
+        const errorTitle = i18n.translate('console.notification.error.couldNotSaveRequestTitle', {
+          defaultMessage: 'Could not save request to Console history.',
+        });
+        if (isQuotaExceededError(saveToHistoryError)) {
+          notifications.toasts.addError(saveToHistoryError, {
+            title: errorTitle,
+            toastMessage: i18n.translate('console.notification.error.historyQuotaReachedMessage', {
+              defaultMessage:
+                'Request history is full. Clear the Console history to save new requests.',
             }),
           });
+        } else {
+          // Best effort, but still notify the user.
+          notifications.toasts.addError(saveToHistoryError, {
+            title: errorTitle,
+          });
         }
-      });
+      }
 
       const { polling } = settings.toJSON();
       if (polling) {

src/plugins/console/public/services/history.ts

@@ -9,6 +9,10 @@
 import { BehaviorSubject } from 'rxjs';
 import { Storage } from './index';
 
+const MAX_NUMBER_OF_HISTORY_ITEMS = 100;
+
+export const isQuotaExceededError = (e: Error): boolean => e.name === 'QuotaExceededError';
+
 export class History {
   constructor(private readonly storage: Storage) {}
 
@@ -38,7 +42,7 @@ export class History {
 
   addToHistory(endpoint: string, method: string, data: any) {
     const keys = this.getHistoryKeys();
-    keys.splice(0, 500); // only maintain most recent X;
+    keys.splice(0, MAX_NUMBER_OF_HISTORY_ITEMS); // only maintain most recent X;
     keys.forEach((key) => {
       this.storage.delete(key);
     });