refactor: replace deprecated mixins with Text component in qr-code-view #25637

devin-ai-integration · 2024-07-02T16:07:21Z

Description

This pull request replaces deprecated mixins @include H1 - @include H9 in the SCSS file with the Text component in the qr-code-view component. The changes include updating the SCSS file to remove the deprecated mixins and modifying the JavaScript file to use the Text component with appropriate properties.

Devin Run Link : https://preview.devin.ai/devin/8158744e0716415fb64b023769e4ffab

Related issues

Partially Fixes: #20496

Manual testing steps

Go to the latest build of storybook in this PR
Verify that the QrCodeView component renders correctly without any visual issues
Ensure that the Text component is used instead of the deprecated mixins

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

This Devin run was requested by Devin.

…message

github-actions · 2024-07-02T16:07:34Z

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.

metamaskbot · 2024-07-02T16:35:37Z

Builds ready [9b26550]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (164 ± 178 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	173	108	25	12
		domContentLoaded	10	105	37	24	12
		load	47	1772	164	370	178
		domInteractive	10	105	37	24	12

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 343 Bytes (0.00%)
common: 0 Bytes (0.00%)

codecov · 2024-07-02T16:35:47Z

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 69.93%. Comparing base (182f609) to head (3b7361c).

Files	Patch %	Lines
ui/components/ui/qr-code-view/qr-code-view.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #25637   +/-   ##
========================================
  Coverage    69.93%   69.93%           
========================================
  Files         1409     1409           
  Lines        49786    49786           
  Branches     13769    13769           
========================================
  Hits         34817    34817           
  Misses       14969    14969

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2024-07-02T17:35:48Z

Builds ready [7ceca07]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (194 ± 192 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	70	166	95	24	11
		domContentLoaded	9	61	25	14	7
		load	43	1415	194	400	192
		domInteractive	9	61	25	14	7

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 343 Bytes (0.00%)
common: 0 Bytes (0.00%)

georgewrmarshall

Made some suggestions. Can we also add a storybook js story to ui/components/ui/qr-code-view/qr-code-view.stories.jscalled MessageArray and take before and after screenshots of that story to add to the PR

MessageArray.args = {
  Qr: {
    message: ['message', 'array'],
    data: 'data',
  },
  warning: <div>warning</div>,
};

ui/components/ui/qr-code-view/index.scss

ui/components/ui/qr-code-view/qr-code-view.tsx

georgewrmarshall

LGTM

sonarcloud · 2024-07-26T23:35:33Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

metamaskbot · 2024-07-27T00:03:04Z

Builds ready [3b7361c]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (324 ± 293 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	65	239	108	43	21
		domContentLoaded	9	122	31	24	12
		load	40	1865	324	611	293
		domInteractive	9	121	31	24	12

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 311 Bytes (0.00%)
common: 0 Bytes (0.00%)

devin-ai-integration bot added 2 commits July 2, 2024 15:03

refactor(qr-code-view): Replace div with Text component for qr-code__…

0cda282

…message

refactor: replace deprecated mixins with Text component in qr-code-view

9b26550

devin-ai-integration bot added the external-contributor label Jul 2, 2024

devin-ai-integration bot added 3 commits July 2, 2024 16:45

Fixed lint

1fbe01f

Merge remote-tracking branch 'origin/develop' into devin/mixin-uSI

1bb0949

Replaced deprecated mixins

7ceca07

georgewrmarshall added the team-design-system All issues relating to design system in Extension label Jul 15, 2024

georgewrmarshall requested a review from a team July 15, 2024 17:39

garrettbear previously approved these changes Jul 17, 2024

View reviewed changes

georgewrmarshall requested changes Jul 24, 2024

View reviewed changes

ui/components/ui/qr-code-view/index.scss Show resolved Hide resolved

ui/components/ui/qr-code-view/qr-code-view.tsx Outdated Show resolved Hide resolved

georgewrmarshall added team-ai AI team (for the Devin AI bot) and removed external-contributor labels Jul 25, 2024

Remove data-testid attribute from Text component in qr-code-view.tsx

25290f4

devin-ai-integration bot dismissed garrettbear’s stale review via 25290f4 July 26, 2024 20:29

georgewrmarshall approved these changes Jul 26, 2024

View reviewed changes

georgewrmarshall requested a review from garrettbear July 26, 2024 21:01

georgewrmarshall marked this pull request as ready for review July 26, 2024 21:45

georgewrmarshall requested a review from a team as a code owner July 26, 2024 21:45

Merge branch 'develop' into devin/mixin-uSI

3b7361c

garrettbear approved these changes Jul 30, 2024

View reviewed changes

garrettbear merged commit 649a793 into develop Jul 30, 2024
76 checks passed

garrettbear deleted the devin/mixin-uSI branch July 30, 2024 16:37

github-actions bot locked and limited conversation to collaborators Jul 30, 2024

metamaskbot added the release-12.4.0 Issue or pull request that will be included in release 12.4.0 label Jul 30, 2024

gauthierpetetin added release-12.3.0 Issue or pull request that will be included in release 12.3.0 and removed release-12.4.0 Issue or pull request that will be included in release 12.4.0 labels Sep 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: replace deprecated mixins with Text component in qr-code-view #25637

refactor: replace deprecated mixins with Text component in qr-code-view #25637

devin-ai-integration bot commented Jul 2, 2024 •

edited by github-actions bot

Loading

github-actions bot commented Jul 2, 2024

metamaskbot commented Jul 2, 2024

codecov bot commented Jul 2, 2024 •

edited

Loading

metamaskbot commented Jul 2, 2024

georgewrmarshall left a comment

georgewrmarshall left a comment

sonarcloud bot commented Jul 26, 2024

metamaskbot commented Jul 27, 2024

refactor: replace deprecated mixins with Text component in qr-code-view #25637

refactor: replace deprecated mixins with Text component in qr-code-view #25637

Conversation

devin-ai-integration bot commented Jul 2, 2024 • edited by github-actions bot Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jul 2, 2024

metamaskbot commented Jul 2, 2024

codecov bot commented Jul 2, 2024 • edited Loading

Codecov Report

metamaskbot commented Jul 2, 2024

georgewrmarshall left a comment

Choose a reason for hiding this comment

georgewrmarshall left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Jul 26, 2024

Quality Gate passed

metamaskbot commented Jul 27, 2024

devin-ai-integration bot commented Jul 2, 2024 •

edited by github-actions bot

Loading

codecov bot commented Jul 2, 2024 •

edited

Loading