Part of #18714 and #17670: Changes to nfts-detection-notice.js

[dhruvv173]

Explanation

This PR is a part of #18714 and #17670
Replaced Typography with Text component and deprecated Typography consts with enums for the file: nfts-detection-notice.js

• ui/components/app/nfts-detection-notice/nfts-detection-notice.js

Screenshots/Screencaps

Before

After

Manual Testing Steps

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[dhruvv173]

Hey @georgewrmarshall
Please review this PR. The nfts-detection-notice.js does not exist on Storybook so I couldnt attach the before/after screenshots.
Thanks!

Edit: 2 of my PRs today are failing are failing Label PR test due to (Resource not accessible by integration) error, otherwise everything works fine.

[georgewrmarshall]

Hey @dhruvv173, code is looking good but could you please add some before/ after screenshots to ensure that there are no visual regressions as outlined in the acceptance criteria for the issue. Thanks!

[georgewrmarshall]

Hey @georgewrmarshall Please review this PR. The nfts-detection-notice.js does not exist on Storybook so I couldnt attach the before/after screenshots. Thanks!

Edit: 2 of my PRs today are failing are failing Label PR test due to (Resource not accessible by integration) error, otherwise everything works fine.

You can create a story if you like. Documentation here: https://metamask.github.io/metamask-storybook/?path=/story/getting-started-documentation-guidelines--page#creating-a-story

No need for arg types or MDX docs

import React from 'react';
import NftsDetectionNotice from '.';

export default {
  title: 'Components/App/NftsDetectionNotice',
};

export const DefaultStory = () => <NftsDetectionNotice />;

DefaultStory.storyName = 'Default';

Will render

[georgewrmarshall]

Hey @dhruvv173, I've added a story so we can do a visual check. It LGTM! Thanks for your contribution

[dhruvv173]

Hey @dhruvv173, I've added a story so we can do a visual check. It LGTM! Thanks for your contribution

Hey @georgewrmarshall, I have added the before/after screenshots. The before screenshot is taken from the story which was built by you and the after one is from my local build. As you have added a new file is there a need to re-run the PR from my side?
Thanks!

[georgewrmarshall]

I think what you've done here is add 2 screenshots of the "After" changes. What you would need to do is create the story on the develop branch and take a screenshot there. No need to update this PR the code is good to go.

[dhruvv173]

I think what you've done here is add 2 screenshots of the "After" changes. What you would need to do is create the story on the develop branch and take a screenshot there. No need to update this PR the code is good to go.

Should I create a new fork, add the code for story there, run yarn storybook and then add the screenshots?
Sorry for the inconvenience caused :/

[georgewrmarshall]

@dhruvv173 yes that sounds right. It should be off of the develop branch

[dhruvv173]

@dhruvv173 yes that sounds right. It should be off of the develop branch

Updated it, could you please check it once?

[dhruvv173]

Hey @georgewrmarshall
I was working on file named gas-timing.component, replaced Typography with Text, added the new enums and created a story as it does not exist already but it does not load anything (refer the image below)

added the story file below

or is it because the snapshot of gas-timing.component.test.js.snap has just one <div /> tag ?

I also tried updating the screenshot with yarn jest ui/components/app/gas-timing --updateSnapshot command but that didnt work either.
Could you please check this once?
Thank you!

[georgewrmarshall]

Hey @dhruvv173, you have to pass the component the write data either through props or mock redux state using the decorator and provider.

[dhruvv173]

Hey @dhruvv173, you have to pass the component the write data either through props or mock redux state using the decorator and provider.

Okay I'll do that and submit a PR.
Could you please check this #19115 once when possible?
Thanks!