Update Text import paths: /institutional #20064

georgewrmarshall · 2023-07-18T00:22:46Z

Explanation

Currently, there are deprecated instances of the Text component that use the JavaScript version of the Box component. This PR updates those deprecated import paths to the new component in the ui/components/institutional folder as well as snapshots

Part of Update deprecated Text import paths #19986

Dependency: Updating Text component to use TS Box #19949

Screenshots/Screencaps

I have added Before/After screencasts to ensure no visual regressions have occurred to components with some significant updates other than snapshot updates in the code comments

Manual Testing Steps

Go to the latest build of storybook in this PR
Check all components don't have visual regressions against the hosted storybook GitHub page

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 · 2023-07-18T00:23:02Z

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.

georgewrmarshall · 2023-07-18T00:34:24Z

ui/components/institutional/compliance-details/compliance-details.js

-import { Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Box, Text } from '../../component-library';
+
 import {
  TextColor,
  TextVariant,


No visual regressions

georgewrmarshall · 2023-07-18T00:39:57Z

ui/components/institutional/compliance-modal/compliance-modal.js

          justifyContent={JustifyContent.spaceBetween}
        >
          <Box
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
            justifyContent={JustifyContent.flexStart}
            alignItems={AlignItems.center}
          >


No visual regressions. Missing image is a build type issue that's not in production

metamaskbot · 2023-07-18T01:05:32Z

Builds ready [bdcb697]

builds: chrome, firefox
builds (beta): chrome
builds (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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1675 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	107	148	134	11	5
		domContentLoaded	1435	1889	1675	120	58
		load	1435	1889	1675	120	58
		domInteractive	1435	1889	1675	120	58

Bundle size diffs

background: 0 bytes
ui: 0 bytes
common: 0 bytes

codecov · 2023-07-18T01:05:41Z

Codecov Report

Merging #20064 (0ceb6a6) into develop (3f3ee63) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop   #20064   +/-   ##
========================================
  Coverage    69.42%   69.42%           
========================================
  Files          990      990           
  Lines        37418    37418           
  Branches     10039    10039           
========================================
  Hits         25976    25976           
  Misses       11442    11442

Impacted Files	Coverage Δ
...itutional/compliance-details/compliance-details.js	`90.48% <ø> (ø)`
...institutional/compliance-modal/compliance-modal.js	`100.00% <ø> (ø)`
...utional/compliance-settings/compliance-settings.js	`100.00% <ø> (ø)`
...nts/institutional/custody-labels/custody-labels.js	`90.00% <ø> (ø)`
...tion/interactive-replacement-token-notification.js	`91.89% <ø> (ø)`
...ponents/institutional/jwt-dropdown/jwt-dropdown.js	`92.31% <ø> (ø)`
...ponents/institutional/jwt-url-form/jwt-url-form.js	`72.73% <ø> (ø)`
...nts/institutional/note-to-trader/note-to-trader.js	`80.00% <ø> (ø)`
...network-notification/wrong-network-notification.js	`100.00% <ø> (ø)`

georgewrmarshall · 2023-07-18T04:38:28Z

ui/components/institutional/compliance-settings/compliance-settings.js

-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
        justifyContent={JustifyContent.center}
      >
        <Box


No visual regression

georgewrmarshall · 2023-07-18T04:39:38Z

ui/components/institutional/custody-labels/custody-labels.js

-import { Label } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Label, Text } from '../../component-library';
+
 import {
  TextTransform,
  BackgroundColor,


No visual regressions

georgewrmarshall · 2023-07-18T04:40:59Z

...nal/interactive-replacement-token-notification/interactive-replacement-token-notification.js

 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';

 const InteractiveReplacementTokenNotification = ({ isVisible }) => {
  const t = useI18nContext();


No visual regressions

georgewrmarshall · 2023-07-18T04:42:33Z

ui/components/institutional/jwt-dropdown/jwt-dropdown.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Dropdown from '../../ui/dropdown';
 import { Color } from '../../../helpers/constants/design-system';
-import { Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Box, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';

 const JwtDropdown = (props) => {


No visual regressions

georgewrmarshall · 2023-07-18T04:45:15Z

ui/components/institutional/jwt-url-form/jwt-url-form.js

@@ -8,8 +8,7 @@ import {
  FlexDirection,
  TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Box, Button } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Box, Button, Text } from '../../component-library';
 import JwtDropdown from '../jwt-dropdown';

 const JwtUrlForm = (props) => {


Small update to secondary button to use correct component API

georgewrmarshall · 2023-07-18T04:46:33Z

ui/components/institutional/note-to-trader/note-to-trader.js

-import { Label } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
-import Box from '../../ui/box';
+import { Label, Box, Text } from '../../component-library';

 const NoteToTrader = (props) => {
  const { placeholder, maxLength, onChange, noteText, labelText } = props;


No visual regressions

georgewrmarshall · 2023-07-18T04:47:51Z

ui/components/institutional/wrong-network-notification/wrong-network-notification.js

      justifyContent={JustifyContent.center}
      alignItems={AlignItems.center}
      padding={[1, 6]}
      backgroundColor={BackgroundColor.errorMuted}
-      width={BLOCK_SIZES.FULL}
+      width={BlockSize.Full}
    >
      <Icon
        name={IconName.Danger}


No visual regressions

metamaskbot · 2023-07-18T05:20:54Z

Builds ready [0ceb6a6]

builds: chrome, firefox
builds (beta): chrome
builds (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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1598 ± 83 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	96	167	127	20	9
		domContentLoaded	1404	2018	1597	173	83
		load	1404	2018	1598	172	83
		domInteractive	1403	2018	1597	173	83

Bundle size diffs

background: 0 bytes
ui: 0 bytes
common: 0 bytes

albertolive

Thank you very much @georgewrmarshall, this is something we wanted to do in the near term. ✅ ✅ 🚢

georgewrmarshall self-assigned this Jul 18, 2023

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

georgewrmarshall mentioned this pull request Jul 18, 2023

Update deprecated Text import paths #19986

Closed

georgewrmarshall force-pushed the part/19986/update-text-import-paths-institutional branch 2 times, most recently from 849754e to bdcb697 Compare July 18, 2023 00:30

georgewrmarshall commented Jul 18, 2023

View reviewed changes

georgewrmarshall added 2 commits July 17, 2023 21:48

Updating Text import paths and deprecated consts

b807174

Update to button

0ceb6a6

georgewrmarshall marked this pull request as ready for review July 18, 2023 04:48

georgewrmarshall requested a review from a team as a code owner July 18, 2023 04:48

georgewrmarshall force-pushed the part/19986/update-text-import-paths-institutional branch from bdcb697 to 0ceb6a6 Compare July 18, 2023 04:48

georgewrmarshall requested review from albertolive and garrettbear July 18, 2023 04:48

albertolive approved these changes Jul 18, 2023

View reviewed changes

NidhiKJha approved these changes Jul 18, 2023

View reviewed changes

zone-live approved these changes Jul 18, 2023

View reviewed changes

georgewrmarshall merged commit e75535d into develop Jul 18, 2023

georgewrmarshall deleted the part/19986/update-text-import-paths-institutional branch July 18, 2023 15:15

github-actions bot locked and limited conversation to collaborators Jul 18, 2023

metamaskbot added the release-10.36.0 Issue or pull request that will be included in release 10.36.0 label Jul 18, 2023

Gudahtt added release-11.1.0 Issue or pull request that will be included in release 11.1.0 and removed release-10.36.0 Issue or pull request that will be included in release 10.36.0 labels Sep 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Text import paths: /institutional #20064

Update Text import paths: /institutional #20064

georgewrmarshall commented Jul 18, 2023

github-actions bot commented Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

metamaskbot commented Jul 18, 2023

codecov bot commented Jul 18, 2023 •

edited

Loading

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

metamaskbot commented Jul 18, 2023

albertolive left a comment

Update Text import paths: /institutional #20064

Update Text import paths: /institutional #20064

Conversation

georgewrmarshall commented Jul 18, 2023

Explanation

Screenshots/Screencaps

Manual Testing Steps

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jul 18, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metamaskbot commented Jul 18, 2023

codecov bot commented Jul 18, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metamaskbot commented Jul 18, 2023

albertolive left a comment

Choose a reason for hiding this comment

codecov bot commented Jul 18, 2023 •

edited

Loading