Create @woocommerce/admin-layout package #37094

mattsherman · 2023-03-07T02:44:04Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This adds a new package: @woocommerce/admin-layout with the following initial components moved over from woocommerce/client/admin:

WooHeaderItem
WooHeaderNavigationItem
WooHeaderPageTitle
WooFooterItem

More admin layout-specific components will be moved over in the future.

Closes #36721.

How to test the changes in this Pull Request:

Have you followed the Writing high-quality testing instructions guide?

Load this branch and run pnpm install && pnpm run build and make sure everything builds correctly.
Smoke test WCAdmin pages and make sure that the headers and footers appears correctly.
- Headers on all WCAdmin pages
- CES footer on new product editor page.
Open your console and check if window.wc.adminLayout exists with the following components:

WC_FOOTER_SLOT_NAME
WC_HEADER_NAVIGATION_SLOT_NAME
WC_HEADER_PAGE_TITLE_SLOT_NAME
WC_HEADER_SLOT_NAME
WooFooterItem
WooHeaderItem
WooHeaderNavigationItem
WooHeaderPageTitle

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?
Have you included testing instructions?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

codecov · 2023-03-07T16:46:52Z

Codecov Report

Merging #37094 (3843cc2) into trunk (6f8f35b) will increase coverage by 0.0%.
The diff coverage is 100.0%.

Additional details and impacted files

@@           Coverage Diff            @@
##             trunk   #37094   +/-   ##
========================================
  Coverage     46.7%    46.7%           
- Complexity   17188    17190    +2     
========================================
  Files          429      429           
  Lines        64821    64834   +13     
========================================
+ Hits         30251    30275   +24     
+ Misses       34570    34559   -11

Impacted Files	Coverage Δ
plugins/woocommerce/includes/class-wc-tracker.php	`89.8% <100.0%> (+0.1%)`	⬆️
.../includes/import/class-wc-product-csv-importer.php	`75.1% <100.0%> (+0.2%)`	⬆️
...lugins/woocommerce/includes/wc-order-functions.php	`76.4% <100.0%> (+0.1%)`	⬆️
...lugins/woocommerce/includes/wc-stock-functions.php	`78.2% <100.0%> (+0.1%)`	⬆️

... and 6 files with indirect coverage changes

github-actions · 2023-03-07T16:55:39Z

Test Results Summary

Commit SHA: 3843cc2

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 54s
E2E Tests	189	0	0	6	0	195	15m 43s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

nathanss · 2023-03-08T13:11:56Z

packages/js/admin-layout/.npmrc

@@ -0,0 +1 @@
+pacakge-lock=false


nathanss · 2023-03-08T13:20:44Z

packages/js/admin-layout/src/plugins/woo-footer-item/index.tsx

@@ -27,7 +29,10 @@ export const WC_FOOTER_SLOT_NAME = 'woocommerce_footer_item';
 * @param {Array}  param0.children - Node children.
 * @param {Array}  param0.order    - Node order.
 */
-export const WooFooterItem: React.FC< { order?: number } > & {
+export const WooFooterItem: React.FC< {
+	children?: React.ReactNode;


Why did children was added here?

In React 18, the children prop is no longer implicitly on FC. So, you have to explicitly define it.

https://www.newline.co/@kchan/what-happened-to-the-fc-types-implicit-children-prop-in-typesreact-v18--38576c59

nathanss · 2023-03-08T13:24:21Z

I couldn't find any issues with smoke tests! All good. Please ping me again when you fix the conflicts and I'll re-review 😄

mattsherman · 2023-03-08T19:59:29Z

@nathanss Ready for re-review, though be aware that we may go with @woocomerce/admin-header and @woocommerce/admin-footer.

…onents for WooFooterItem

…o @woocommerce/admin-layout

mattsherman · 2023-03-09T12:14:17Z

@samueljseay

Output of pnpm syncpack list-matches:

= Version Group 10 =============================================================
✘ @wordpress/a11y is pinned in this version group at wp-6.0
✘ @wordpress/api-fetch is pinned in this version group at wp-6.0
✘ @wordpress/base-styles is pinned in this version group at wp-6.0
✘ @wordpress/browserslist-config is pinned in this version group at wp-6.0
  ^4.1.1 in devDependencies of packages/js/admin-layout/package.json
✘ @wordpress/components is pinned in this version group at wp-6.0
  ^19.5.0 in dependencies of packages/js/admin-layout/package.json
✘ @wordpress/compose is pinned in this version group at wp-6.0
✘ @wordpress/core-data is pinned in this version group at wp-6.0
✘ @wordpress/data is pinned in this version group at wp-6.0
✘ @wordpress/data-controls is pinned in this version group at wp-6.0
✘ @wordpress/date is pinned in this version group at wp-6.0
✘ @wordpress/deprecated is pinned in this version group at wp-6.0
✘ @wordpress/dom is pinned in this version group at wp-6.0
✘ @wordpress/dom-ready is pinned in this version group at wp-6.0
✘ @wordpress/element is pinned in this version group at wp-6.0
  ^4.1.1 in dependencies of packages/js/admin-layout/package.json
✘ @wordpress/hooks is pinned in this version group at wp-6.0
✘ @wordpress/html-entities is pinned in this version group at wp-6.0
✘ @wordpress/i18n is pinned in this version group at wp-6.0
✘ @wordpress/icons is pinned in this version group at wp-6.0
✘ @wordpress/interface is pinned in this version group at wp-6.0
✘ @wordpress/keyboard-shortcuts is pinned in this version group at wp-6.0
✘ @wordpress/keycodes is pinned in this version group at wp-6.0
✘ @wordpress/media-utils is pinned in this version group at wp-6.0
✘ @wordpress/notices is pinned in this version group at wp-6.0
✘ @wordpress/plugins is pinned in this version group at wp-6.0
✘ @wordpress/primitives is pinned in this version group at wp-6.0
✘ @wordpress/rich-text is pinned in this version group at wp-6.0
✘ @wordpress/url is pinned in this version group at wp-6.0
✘ @wordpress/warning is pinned in this version group at wp-6.0

However, running pnpm syncpack fix-mismatches does not fix these up (it did fix up @types/wordpress__components and postcss-loader in fc1dfee.

I'm not sure what's going on!

JamieMason · 2023-03-10T11:31:17Z

However, running pnpm syncpack fix-mismatches does not fix these up (it did fix up @types/wordpress__components and postcss-loader in fc1dfee.

I'm not sure what's going on!

Hey @mattsherman, it might not be this but the long regex in filter could be the cause as that acts as a global filter which overrides everything else in the config – using just the versionGroups and isIgnored might work out as an easier to read approach to controlling which packages you want to run syncpack on and which you don't.

Docs on filter: https://jamiemason.github.io/syncpack/config/filter

mattsherman · 2023-03-15T19:39:24Z

However, running pnpm syncpack fix-mismatches does not fix these up (it did fix up @types/wordpress__components and postcss-loader in fc1dfee.
I'm not sure what's going on!

Hey @mattsherman, it might not be this but the long regex in filter could be the cause as that acts as a global filter which overrides everything else in the config – using just the versionGroups and isIgnored might work out as an easier to read approach to controlling which packages you want to run syncpack on and which you don't.

Docs on filter: https://jamiemason.github.io/syncpack/config/filter

@JamieMason Thanks for the tip using versionGroups and isIgnored (and for syncpack in general!)! I don't think the filter is the issue, as syncpack was correctly noting the mismatches with syncpack list-matches but not fixing them with pnpm syncpack fix-mismatches . Unless the filtering is implemented differently for the listing and the fixing.

@samueljseay That said, given that we have versionGroups, do we really even need the global filter?

mattsherman self-assigned this Mar 7, 2023

github-actions bot added focus: react admin [team:Ghidorah] package: dependency-extraction-webpack-plugin issues related to @woocommerce/dependency-extraction-webpack-plugin plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Mar 7, 2023

mattsherman force-pushed the add/admin-layout-package branch from 6d56947 to a456e75 Compare March 7, 2023 16:24

mattsherman requested a review from a team March 7, 2023 19:53

mattsherman marked this pull request as ready for review March 7, 2023 19:54

nathanss requested changes Mar 8, 2023

View reviewed changes

mattsherman force-pushed the add/admin-layout-package branch from 3e0ae75 to acd5ca8 Compare March 8, 2023 15:51

mattsherman added 17 commits March 8, 2023 20:39

Initial admin-layout package skeleton

bdf4c9c

Changelog files

e7c4a90

Use createOrderedChildren and sortFillsByOrder from @woocommerce/comp…

0c2efb7

…onents for WooFooterItem

Move WooFooterItem to @woocommerce/admin-layout

c8afe4a

Use WooFooterItem from @woocommerce/admin-layout

edc18fd

Suppress errant TS lint errors

8348cc0

Exports for @woocommerce/admin-layout

15369eb

Fill updates and eslint suppression

023e945

Changelogs

ffbf7d1

Remove suppression of tslint errors

0f2d5e1

Fix react and @types/react versions

61655da

Load @woocommerce/admin-layout script and styles

7e3d371

Move WooHeaderItem, WooHeaderNavigationItem, and WooHeaderPageTitle t…

8fb37e7

…o @woocommerce/admin-layout

Regenerate lock file post-rebase

222207e

Remove duplicate import post-rebase

b889684

Add wc-admin-layout to app style dependency

ec38ba8

Fix jest mock of @woocommerce/admin-layout

7df50db

mattsherman added 10 commits March 8, 2023 20:39

Fix spacing.

daf64a0

Export slot names

fcd8440

Fix typo in .npmrc

419cfc8

Update lock file

e39a887

Try updating lock file

b54e006

Update lock file

e5558a8

Update lock file

f9ef4de

Update to latest lock file from trunk

44e4d48

Update lock file

ac56d15

Sync dependencies of @woocommerce/admin-layout

fc1dfee

mattsherman force-pushed the add/admin-layout-package branch from d1a547f to fc1dfee Compare March 9, 2023 12:06

Manually sync @WordPress dependencies

3843cc2

mattsherman requested review from nathanss and a team March 10, 2023 13:08

nathanss approved these changes Mar 10, 2023

View reviewed changes

mattsherman merged commit af24637 into trunk Mar 10, 2023
21 checks passed

mattsherman deleted the add/admin-layout-package branch March 10, 2023 14:58

github-actions bot added this to the 7.6.0 milestone Mar 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create @woocommerce/admin-layout package #37094

Create @woocommerce/admin-layout package #37094

mattsherman commented Mar 7, 2023 •

edited

codecov bot commented Mar 7, 2023 •

edited

github-actions bot commented Mar 7, 2023 •

edited

nathanss Mar 8, 2023

nathanss Mar 8, 2023

mattsherman Mar 8, 2023

nathanss commented Mar 8, 2023

mattsherman commented Mar 8, 2023

mattsherman commented Mar 9, 2023

JamieMason commented Mar 10, 2023

mattsherman commented Mar 15, 2023

		@@ -0,0 +1 @@
		pacakge-lock=false

Create @woocommerce/admin-layout package #37094

Create @woocommerce/admin-layout package #37094

Conversation

mattsherman commented Mar 7, 2023 • edited

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

codecov bot commented Mar 7, 2023 • edited

Codecov Report

github-actions bot commented Mar 7, 2023 • edited

Test Results Summary

nathanss Mar 8, 2023

Choose a reason for hiding this comment

nathanss Mar 8, 2023

Choose a reason for hiding this comment

mattsherman Mar 8, 2023

Choose a reason for hiding this comment

nathanss commented Mar 8, 2023

mattsherman commented Mar 8, 2023

mattsherman commented Mar 9, 2023

JamieMason commented Mar 10, 2023

mattsherman commented Mar 15, 2023

mattsherman commented Mar 7, 2023 •

edited

codecov bot commented Mar 7, 2023 •

edited

github-actions bot commented Mar 7, 2023 •

edited