adding error handling for settings tab

Author: NiranjanaBinoy

ui/ducks/app/app.test.js

@@ -339,4 +339,23 @@ describe('App State', () => {
 
     expect(state.showDataDeletionErrorModal).toStrictEqual(false);
   });
+
+  it('displays error in settings', () => {
+    const state = reduceApp(metamaskState, {
+      type: actions.SHOW_SETTINGS_PAGE_ERROR,
+      payload: 'settings page error',
+    });
+
+    expect(state.errorInSettings).toStrictEqual('settings page error');
+  });
+
+  it('hides error in settings', () => {
+    const displayErrorInSettings = { errorInSettings: 'settings page error' };
+    const oldState = { ...metamaskState, ...displayErrorInSettings };
+    const state = reduceApp(oldState, {
+      type: actions.HIDE_SETTINGS_PAGE_ERROR,
+    });
+
+    expect(state.errorInSettings).toBeNull();
+  });
 });

ui/ducks/app/app.ts

@@ -105,6 +105,7 @@ type AppState = {
   snapsInstallPrivacyWarningShown: boolean;
   isAddingNewNetwork: boolean;
   isMultiRpcOnboarding: boolean;
+  errorInSettings: string | null;
 };
 
 export type AppSliceState = {
@@ -192,6 +193,7 @@ const initialState: AppState = {
   snapsInstallPrivacyWarningShown: false,
   isAddingNewNetwork: false,
   isMultiRpcOnboarding: false,
+  errorInSettings: null,
 };
 
 export default function reduceApp(
@@ -632,6 +634,16 @@ export default function reduceApp(
         ...appState,
         showDataDeletionErrorModal: false,
       };
+    case actionConstants.SHOW_SETTINGS_PAGE_ERROR:
+      return {
+        ...appState,
+        errorInSettings: action.payload,
+      };
+    case actionConstants.HIDE_SETTINGS_PAGE_ERROR:
+      return {
+        ...appState,
+        errorInSettings: null,
+      };
     ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
     case actionConstants.SHOW_KEYRING_SNAP_REMOVAL_RESULT:
       return {
@@ -720,6 +732,27 @@ export function setCustomTokenAmount(payload: string): PayloadAction<string> {
   return { type: actionConstants.SET_CUSTOM_TOKEN_AMOUNT, payload };
 }
 
+/**
+ * An action creator for display a error to the user in various places in the
+ * UI. It will not be cleared until a new warning replaces it or `hideWarning`
+ * is called.
+ *
+ * @param payload - The warning to show.
+ * @returns The action to display the warning.
+ */
+export function displayErrorInSettings(payload: string): PayloadAction<string> {
+  return {
+    type: actionConstants.SHOW_SETTINGS_PAGE_ERROR,
+    payload,
+  };
+}
+
+export function hideErrorInSettings() {
+  return {
+    type: actionConstants.HIDE_SETTINGS_PAGE_ERROR,
+  };
+}
+
 // Selectors
 export function getQrCodeData(state: AppSliceState): {
   type?: string | null;

ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap

@@ -29,6 +29,7 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
         >
           <button
             class="button btn--rounded btn-secondary btn--large"
+            data-testid="advanced-setting-state-logs-button"
           >
             Download state logs
           </button>

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -40,9 +40,10 @@ export default class AdvancedTab extends PureComponent {
     setUseNonceField: PropTypes.func,
     useNonceField: PropTypes.bool,
     setHexDataFeatureFlag: PropTypes.func,
-    displayWarning: PropTypes.func,
+    displayErrorInSettings: PropTypes.func,
+    hideErrorInSettings: PropTypes.func,
     showResetAccountConfirmationModal: PropTypes.func,
-    warning: PropTypes.string,
+    errorInSettings: PropTypes.string,
     sendHexData: PropTypes.bool,
     showFiatInTestnets: PropTypes.bool,
     showTestNetworks: PropTypes.bool,
@@ -80,7 +81,9 @@ export default class AdvancedTab extends PureComponent {
 
   componentDidMount() {
     const { t } = this.context;
+    const { hideErrorInSettings } = this.props;
     handleSettingsRefs(t, t('advanced'), this.settingsRefs);
+    hideErrorInSettings();
   }
 
   async getTextFromFile(file) {
@@ -112,7 +115,7 @@ export default class AdvancedTab extends PureComponent {
 
   renderStateLogs() {
     const { t } = this.context;
-    const { displayWarning } = this.props;
+    const { displayErrorInSettings } = this.props;
 
     return (
       <Box
@@ -133,16 +136,21 @@ export default class AdvancedTab extends PureComponent {
             <Button
               type="secondary"
               large
+              data-testid="advanced-setting-state-logs-button"
               onClick={() => {
-                window.logStateString((err, result) => {
+                window.logStateString(async (err, result) => {
                   if (err) {
-                    displayWarning(t('stateLogError'));
+                    displayErrorInSettings(t('stateLogError'));
                   } else {
-                    exportAsFile(
-                      `${t('stateLogFileName')}.json`,
-                      result,
-                      ExportableContentType.JSON,
-                    );
+                    try {
+                      await exportAsFile(
+                        `${t('stateLogFileName')}.json`,
+                        result,
+                        ExportableContentType.JSON,
+                      );
+                    } catch (error) {
+                      displayErrorInSettings(error.message);
+                    }
                   }
                 });
               }}
@@ -576,11 +584,13 @@ export default class AdvancedTab extends PureComponent {
   }
 
   render() {
-    const { warning } = this.props;
+    const { errorInSettings } = this.props;
     // When adding/removing/editing the order of renders, double-check the order of the settingsRefs. This affects settings-search.js
     return (
       <div className="settings-page__body">
-        {warning ? <div className="settings-tab__error">{warning}</div> : null}
+        {errorInSettings ? (
+          <div className="settings-tab__error">{errorInSettings}</div>
+        ) : null}
         {this.renderStateLogs()}
         {this.renderResetAccount()}
         {this.renderToggleStxOptIn()}

ui/pages/settings/advanced-tab/advanced-tab.component.test.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, waitFor } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import mockState from '../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { exportAsFile } from '../../../helpers/utils/export-utils';
 import AdvancedTab from '.';
 
 const mockSetAutoLockTimeLimit = jest.fn().mockReturnValue({ type: 'TYPE' });
 const mockSetShowTestNetworks = jest.fn();
 const mockSetShowFiatConversionOnTestnetsPreference = jest.fn();
 const mockSetStxPrefEnabled = jest.fn();
+const mockDisplayErrorInSettings = jest.fn();
 
 jest.mock('../../../store/actions.ts', () => {
   return {
@@ -21,6 +23,32 @@ jest.mock('../../../store/actions.ts', () => {
   };
 });
 
+jest.mock('../../../ducks/app/app.ts', () => ({
+  displayErrorInSettings: () => mockDisplayErrorInSettings,
+  hideErrorInSettings: () => jest.fn(),
+}));
+
+jest.mock('../../../helpers/utils/export-utils', () => ({
+  ...jest.requireActual('../../../helpers/utils/export-utils'),
+  exportAsFile: jest
+    .fn()
+    .mockResolvedValueOnce({})
+    .mockImplementationOnce(new Error('state file error')),
+}));
+
+jest.mock('webextension-polyfill', () => ({
+  runtime: {
+    getPlatformInfo: jest.fn().mockResolvedValue('mac'),
+  },
+}));
+
+Object.defineProperty(window, 'stateHooks', {
+  value: {
+    getCleanAppState: () => mockState,
+    getLogs: () => [],
+  },
+});
+
 describe('AdvancedTab Component', () => {
   const mockStore = configureMockStore([thunk])(mockState);
 
@@ -105,4 +133,33 @@ describe('AdvancedTab Component', () => {
       expect(mockSetStxPrefEnabled).toHaveBeenCalled();
     });
   });
+
+  describe('renderStateLogs', () => {
+    it('should render the toggle button for state log download', () => {
+      const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+      const stateLogButton = queryByTestId('advanced-setting-state-logs');
+      expect(stateLogButton).toBeInTheDocument();
+    });
+
+    it('should call exportAsFile when the toggle button is clicked', async () => {
+      const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+      const stateLogButton = queryByTestId(
+        'advanced-setting-state-logs-button',
+      );
+      fireEvent.click(stateLogButton);
+      await waitFor(() => {
+        expect(exportAsFile).toHaveBeenCalledTimes(1);
+      });
+    });
+    it('should call displayErrorInSettings when the state file download fails', async () => {
+      const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+      const stateLogButton = queryByTestId(
+        'advanced-setting-state-logs-button',
+      );
+      fireEvent.click(stateLogButton);
+      await waitFor(() => {
+        expect(mockDisplayErrorInSettings).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
 });

ui/pages/settings/advanced-tab/advanced-tab.container.js

@@ -5,7 +5,6 @@ import { DEFAULT_AUTO_LOCK_TIME_LIMIT } from '../../../../shared/constants/prefe
 import { getPreferences } from '../../../selectors';
 import {
   backupUserData,
-  displayWarning,
   setAutoLockTimeLimit,
   setDismissSeedBackUpReminder,
   setFeatureFlag,
@@ -17,11 +16,15 @@ import {
   showModal,
 } from '../../../store/actions';
 import { getSmartTransactionsPreferenceEnabled } from '../../../../shared/modules/selectors';
+import {
+  displayErrorInSettings,
+  hideErrorInSettings,
+} from '../../../ducks/app/app';
 import AdvancedTab from './advanced-tab.component';
 
 export const mapStateToProps = (state) => {
   const {
-    appState: { warning },
+    appState: { errorInSettings },
     metamask,
   } = state;
   const {
@@ -37,7 +40,7 @@ export const mapStateToProps = (state) => {
   } = getPreferences(state);
 
   return {
-    warning,
+    errorInSettings,
     sendHexData,
     showFiatInTestnets,
     showTestNetworks,
@@ -54,7 +57,9 @@ export const mapDispatchToProps = (dispatch) => {
     backupUserData: () => backupUserData(),
     setHexDataFeatureFlag: (shouldShow) =>
       dispatch(setFeatureFlag('sendHexData', shouldShow)),
-    displayWarning: (warning) => dispatch(displayWarning(warning)),
+    displayErrorInSettings: (errorInSettings) =>
+      dispatch(displayErrorInSettings(errorInSettings)),
+    hideErrorInSettings: () => dispatch(hideErrorInSettings()),
     showResetAccountConfirmationModal: () =>
       dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
     setUseNonceField: (value) => dispatch(setUseNonceField(value)),

ui/pages/settings/advanced-tab/advanced-tab.stories.js

@@ -22,7 +22,8 @@ export default {
     setDismissSeedBackUpReminder: { action: 'setDismissSeedBackUpReminder' },
     setUseNonceField: { action: 'setUseNonceField' },
     setHexDataFeatureFlag: { action: 'setHexDataFeatureFlag' },
-    displayWarning: { action: 'displayWarning' },
+    displayErrorInSettings: { action: 'displayErrorInSettings' },
+    hideErrorInSettings: { action: 'hideErrorInSettings' },
     history: { action: 'history' },
     showResetAccountConfirmationModal: {
       action: 'showResetAccountConfirmationModal',

ui/store/actionConstants.ts

@@ -49,6 +49,8 @@ export const LOCK_METAMASK = 'LOCK_METAMASK';
 // error handling
 export const DISPLAY_WARNING = 'DISPLAY_WARNING';
 export const HIDE_WARNING = 'HIDE_WARNING';
+export const SHOW_SETTINGS_PAGE_ERROR = 'SHOW_SETTINGS_PAGE_ERROR';
+export const HIDE_SETTINGS_PAGE_ERROR = 'HIDE_SETTINGS_PAGE_ERROR';
 export const CAPTURE_SINGLE_EXCEPTION = 'CAPTURE_SINGLE_EXCEPTION';
 // accounts screen
 export const SHOW_ACCOUNTS_PAGE = 'SHOW_ACCOUNTS_PAGE';