Replace deprecated ErrorMessage component with BannerAlert from the component-library

georgewrmarshall commented 1 year ago

Description

Currently, the extension is using an outdated ErrorMessage component, which needs to be replaced with the new BannerAlert component.

This is a massive undertaking by itself and creating a single PR would be too large. Smaller PRs can be submitted against this issue to ensure easier review and gradual improvements.

Technical Details

Replace instances of ErrorMessage component (ui/components/ui/error-message/error-message.component.js) with BannerAlert component (ui/components/component-library/banner-alert/banner-alert.js)
Component APIs are slightly different so ensure all props have been migrated appropriately

Acceptance Criteria

Instances of ErrorMessage component are completely replaced with the new BannerAlert component
The component APIs are updated to reflect the changes in the new `ErrorMessage`` component and there is no functional changes or visual regression
Each Pull Request (PR) should include no more than 3 files
The code changes should pass Jest tests, linting, and Storybook without any errors.
The PR must include before and after screenshots of the UI to ensure there are no visual regressions.

If the acceptance criteria is not met, PRs may be closed.

Difficulty: Intermediate

Good first issue for: External contributors who are familiar with running the extension locally, have knowledge of React, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in the extension

Outcastoct commented 1 year ago

I was working on filling out signature page for this, ugh lol

lazyfuhrer commented 1 year ago

Assign me @georgewrmarshall

Sah314 commented 1 year ago

If no one is working on this issue, I can start working on it if assigned.

Outcastoct commented 1 year ago

fine with me. go!

lebe24 commented 1 year ago

Pls is the issue closed or assigned

georgewrmarshall commented 1 year ago

Hi all, I appreciate your interest in contributing to MetaMask! This issue represents work that should be broken up into multiple PRs. Therefore, it will not be assigned to a single contributor but rather represent the work of many. Feel free to submit a PR to replace an instance of ErrorMessage with BannerAlert you can find all the instances by searching ErrorMessage in the code base

Screenshot 2023-08-14 at 3 51 36 PM

praveesh91 commented 2 months ago

Hi @georgewrmarshall Let me know if I can be a part of this

georgewrmarshall commented 2 months ago

Hey @praveesh91, thanks for you interest in contributing to MetaMask. It looks like there are 2 instances of the <ErrorMessage /> component left that need to be replaced. Feel free to create a PR for each instance replacement. Remember to meet all acceptance criteria to prevent the PR from being closed.

Screenshot 2024-07-15 at 9 03 42 AM

https://github.com/MetaMask/metamask-extension/blob/7b3450a294a2fe5751726a9c33d6fa0b564f03dd/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.component.js#L320

https://github.com/MetaMask/metamask-extension/blob/7b3450a294a2fe5751726a9c33d6fa0b564f03dd/ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js#L58

praveesh91 commented 2 months ago

Sure @georgewrmarshall , you can assign this issue to me.

georgewrmarshall commented 2 months ago

We leave these types of issues unassigned in case others would like to contribute, as it's intended to be multiple PRs.

MetaMask / metamask-extension