From cffa2625112c80e9bc2ea024e007650a252ca060 Mon Sep 17 00:00:00 2001
From: Pritam Dhara <46365255+pritam1813@users.noreply.github.com>
Date: Thu, 5 Oct 2023 21:49:06 +0530
Subject: [PATCH] Replaced ActionableMessage  in Advanced Tab (#20900)

## Explanation
- This PR fixes part of
/~https://github.com/MetaMask/metamask-extension/issues/19528
- Replaces instances of `ActionableMessage` with `BannerAlert` in
`ui/pages/settings/advanced-tab/advanced-tab.component.js`
<!--
Thanks for the pull request. Take a moment to answer these questions so
that reviewers have the information they need to properly understand
your changes:

* What is the current state of things and why does it need to change?
* What is the solution your changes offer and how does it work?

Are there any issues, Slack conversations, Zendesk issues, user stories,
etc. reviewers should consult to understand this pull request better?
For instance:

* Fixes #12345
* See: #67890
-->

## Screenshots/Screencaps

<!-- If you're making a change to the UI, make sure to capture a
screenshot or a short video showing off your work! -->

### Before

<!-- How did the UI you changed look before your changes? Drag your
file(s) below this line: -->

![before_success](/~https://github.com/MetaMask/metamask-extension/assets/46365255/624b4da9-0b59-4b83-b564-593b9c1328a8)

![before_danger](/~https://github.com/MetaMask/metamask-extension/assets/46365255/1549b1b7-88e9-4459-b1c1-7d39b2ddfa70)

### After

<!-- How does it look now? Drag your file(s) below this line: -->

![after_success](/~https://github.com/MetaMask/metamask-extension/assets/46365255/41079132-ae02-48e5-afec-98b2fd22925b)

![after_danger](/~https://github.com/MetaMask/metamask-extension/assets/46365255/aeaad47a-9461-4942-bdd1-e9018167c6e5)

## Manual Testing Steps

<!--
How should reviewers and QA manually test your changes? For instance:

- Go to this screen
- Do this
- Then do this
-->
- Create build from this PR
- From Menu go to Settings -> Advanced
- Scroll Down to find **Restore user data** section.
- Try Restoring with proper/corrupted file.
## Pre-merge author checklist

- [x] I've clearly explained:
  - [x] What problem this PR is solving
  - [x] How this problem was solved
  - [x] How reviewers can test my changes
- [ ] Sufficient automated test coverage has been added

## Pre-merge reviewer checklist

- [ ] Manual testing (e.g. pull and build branch, run in browser, test
code being changed)
- [ ] PR is linked to the appropriate GitHub issue
- [ ] **IF** this PR fixes a bug in the release milestone, add this PR
to the release milestone

If further QA is required (e.g. new feature, complex testing steps,
large refactor), add the `Extension QA Board` label.

In this case, a QA Engineer approval will be be required.

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 test/e2e/tests/backup-restore.spec.js         |  2 +-
 .../advanced-tab/advanced-tab.component.js    | 36 +++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/test/e2e/tests/backup-restore.spec.js b/test/e2e/tests/backup-restore.spec.js
index dfba955c62a2..43690cbc1e2b 100644
--- a/test/e2e/tests/backup-restore.spec.js
+++ b/test/e2e/tests/backup-restore.spec.js
@@ -127,7 +127,7 @@ describe('Backup and Restore', function () {
 
         // Dismiss success message
         await driver.waitForSelector({
-          css: '.actionable-message__message',
+          css: '[data-testid="restore-user-data-banner-alert-description"]',
           text: 'Your data has been restored successfully',
         });
         await driver.clickElement({ text: 'Dismiss', tag: 'button' });
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index eeda359ba7ef..a5c6c66f57c0 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -1,6 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Box, BannerAlert } from '../../../components/component-library';
+import {
+  Box,
+  BannerAlert,
+  BannerAlertSeverity,
+} from '../../../components/component-library';
 import ToggleButton from '../../../components/ui/toggle-button';
 import TextField from '../../../components/ui/text-field';
 import Button from '../../../components/ui/button';
@@ -34,7 +38,6 @@ import {
   exportAsFile,
   ExportableContentType,
 } from '../../../helpers/utils/export-utils';
-import ActionableMessage from '../../../components/ui/actionable-message';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 
 const CORRUPT_JSON_FILE = 'CORRUPT_JSON_FILE';
@@ -748,18 +751,23 @@ export default class AdvancedTab extends PureComponent {
             />
           </div>
           {showResultMessage && (
-            <ActionableMessage
-              type={restoreSuccessful ? 'success' : 'danger'}
-              message={restoreMessageToRender}
-              primaryActionV2={{
-                label: t('dismiss'),
-                onClick: () => {
-                  this.setState({
-                    showResultMessage: false,
-                    restoreSuccessful: true,
-                    restoreMessage: null,
-                  });
-                },
+            <BannerAlert
+              severity={
+                restoreSuccessful
+                  ? BannerAlertSeverity.Success
+                  : BannerAlertSeverity.Danger
+              }
+              description={restoreMessageToRender}
+              descriptionProps={{
+                'data-testid': 'restore-user-data-banner-alert-description',
+              }}
+              actionButtonLabel={t('dismiss')}
+              actionButtonOnClick={() => {
+                this.setState({
+                  showResultMessage: false,
+                  restoreSuccessful: true,
+                  restoreMessage: null,
+                });
               }}
             />
           )}