New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[sitecore-jss-react] [Editing Integration] Add support for chrome hydration for Placeholders #1776

Merged

addy-pathania merged 41 commits into feature/editing-integration from feature/jss-1828-editing-integration-placeholder

May 3, 2024

Contributor

addy-pathania commented Apr 18, 2024 •

edited

Loading

This PR follows the Contribution Guide
Changelog updated
Upgrade guide entry added

Description / Motivation

To enable Chrome's hydration process in Pages, we need to modify the JSS Placeholder component in the sitecore-jss-react SDKs. We need to emit shallow chromes and required data for placeholders and renderings.

Introduced a new PlaceholderMetadata component to emit shallow chromes.
Placeholder component now uses sitecoreContext to access editMode: "chromes" | "metadata" property from Layout Service.

Testing Details

Unit Test Added
Manual Test/Other (Please elaborate)

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

addy-pathania added 3 commits

April 17, 2024 19:44


          conditinally emit edit chromes metadata for placeholders, rendering

d933925


          refactor PlaceholderWithMetadata component

24c36ee


          update tests

89d366c

addy-pathania changed the base branch from dev to feature/editing-integration

April 18, 2024 18:48

addy-pathania added 2 commits

April 18, 2024 15:25


          update changelog

fc6f25f


          remove extra lines

983ace9

addy-pathania requested a review from a team

April 18, 2024 19:32


          remove editMode mock data

d89ca37

art-alexeyenko requested changes

View reviewed changes

Contributor

art-alexeyenko left a comment

A good start, and the implementation can be made even better, ensuring we get it as right as possible. I've left some comments for current implementation but perhaps it can go the slightly other way.

Something you can consider for the overall design: we have logic in PlaceholderCommon for the traditional way of rendering components and a bunch of conditions in main Placeholder that calls that logic.
We can use a separate component to add "placeholder" code blocks, or it can be a function in PlaceholderCommon, or (perhaps better) an HOC that wraps placeholders (I think Yavor does something similar for fields in his PR).
HOC that outputs chrome code blocks for components (chrometype: rendering) can also be added and used to wrap components in componentBuilder - ensuring every registered component has code blocks added.

packages/sitecore-jss-react/src/components/Placeholder.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/Placeholder.test.tsx Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Outdated Show resolved Hide resolved

addy-pathania added 2 commits

April 19, 2024 19:01


          update unit test, change code tag chrometype

fd60d80


          remove only

e9ae072

illiakovalenko requested changes

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss/src/layout/models.ts Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Outdated Show resolved Hide resolved

addy-pathania and others added 10 commits

April 22, 2024 15:42


          refactor as per new requirements

12e4926


          Update packages/sitecore-jss/src/layout/models.ts

Co-authored-by: Illia Kovalenko <[email protected]>


          Update packages/sitecore-jss-react/src/components/PlaceholderMetadata…

6449ec7

….tsx

Co-authored-by: Illia Kovalenko <[email protected]>


          Update packages/sitecore-jss-react/src/components/PlaceholderMetadata…

57da890

….tsx

Co-authored-by: Illia Kovalenko <[email protected]>


          Update packages/sitecore-jss-react/src/components/PlaceholderMetadata…

1ef2054

….tsx

Co-authored-by: Illia Kovalenko <[email protected]>


          Update CHANGELOG.md

504d5fd

Co-authored-by: Illia Kovalenko <[email protected]>


          refactor unit test

bbb9efc


          Merge branch 'feature/jss-1828-editing-integration-placeholder' of gi…

db130e3

…thub.com:Sitecore/jss into feature/jss-1828-editing-integration-placeholder


          change naming of props and types

472328b


          add test for placeholder

de00777

addy-pathania requested a review from art-alexeyenko

April 23, 2024 12:45

art-alexeyenko requested changes

View reviewed changes

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Show resolved Hide resolved

art-alexeyenko reviewed

View reviewed changes

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Outdated Show resolved Hide resolved

addy-pathania added 3 commits

April 23, 2024 15:48


          update PlaceholderMetadata to render a component

109e156


          add test for missing component

a81bb95


          merge with feature branch

b1a0c9e

yavorsk reviewed

View reviewed changes

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Outdated Show resolved Hide resolved

addy-pathania requested a review from yavorsk

April 24, 2024 12:23

addy-pathania added 2 commits

April 24, 2024 18:12


          remove context

5b2a8af


          reset nextjs placeholder

934fe6e

yavorsk approved these changes

View reviewed changes

illiakovalenko requested changes

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

packages/sitecore-jss-nextjs/src/components/Placeholder.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/Placeholder.test.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/test-data/non-ee-data.ts Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Outdated Show resolved Hide resolved

addy-pathania and others added 5 commits

April 25, 2024 17:41


          update changelog

6a86756


          update test data

ee494c1


          change PlaceholderMetadata implmentation

2a15ac2


          Placeholder metadata refactor - wip

364546f


          update tests, refactor Placeholder component

7b9d42d

addy-pathania requested a review from illiakovalenko

April 30, 2024 00:01

addy-pathania and others added 4 commits

April 29, 2024 20:30


          remove redundant data

e1e6330


          update unit test - wip

a77fae6


          move tests to placeholder, refactor placeholder

baa8ff8


          refactor tests

3a3d157

illiakovalenko reviewed

View reviewed changes

packages/sitecore-jss-react/src/components/Placeholder.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-nextjs/src/components/Placeholder.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/test-data/non-ee-data.ts Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/PlaceholderMetadata.test.tsx Outdated Show resolved Hide resolved

packages/sitecore-jss-react/src/components/Placeholder.test.tsx Outdated Show resolved Hide resolved

addy-pathania added doc-ready-to-merge and removed doc-ready-to-merge labels

addy-pathania added 3 commits

May 1, 2024 11:45


          refactor placeholdermetadata component, update tests

6343d4e


          refactor placeholder tests, update jsdoc

b57941c


          update nextjs types

ac4d813

art-alexeyenko reviewed

View reviewed changes

packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Outdated Show resolved Hide resolved


          remove keys from code

3c3b086

art-alexeyenko approved these changes

View reviewed changes

Contributor

art-alexeyenko left a comment

Good work!

Let's figure out the purpose of WithSitecoreContextHocProps type and remove it if needed, and then merge

addy-pathania added 3 commits

May 3, 2024 16:26


          fix nextjs placeholder props

1c25b89


          change deprecated statement

5ad9d0e


          update deprecated 2

25bf498

addy-pathania merged commit 8ba5f36 into feature/editing-integration

1 check passed

addy-pathania deleted the feature/jss-1828-editing-integration-placeholder branch

May 3, 2024 20:46

yavorsk mentioned this pull request

[Editing integration] Merge editing integration feature branch #1802

Merged

8 tasks

yavorsk added a commit that referenced this pull request


          [Editing integration] Merge editing integration feature branch (#1802)

f24581e

* [sitecore-jss-react] [sitecore-jss-nextjs] Add support for chrome's hydration for fields (#1773)

* render field metadata for Text field component; introduce field metadata component - wip

* rename FieldMetadata module, add unit test for Text component, add comments

* add field metadata component to Date, Image and File field components; include unit tests

* add field metadata component to link and richtext field components, include unit tests

* update FieldMetadata interfaces to prevent build errors in sitecore-jss-nextjs; component update

* export fieldmetadata component and interfaces from sitecore-jss-react

* add metadata component for nextjs link field component; include unit test

* add field metadata component to nextimage component; small fix in link field component

* unit tests for FieldMetadata

* update unit test

* introduce getFieldMetadataMarkup function and used in the field components; add unit test

* update changelog

* react - use higher order component to wrap metadata around field components

* update nextjs components to use metadata wrapper hoc; aadjust unit tests

* adjust unit tests and fix File component

* adjust image field tests; include check for media property in metadata wrapper

* some types updates

* some unit tests adjustments and metadata wrapper component update

* some FieldMetadata related renamings

* add unit test for RichText nextjs component

* update changelog

* update changelog pull request

* some type updates

* reenable file tests

* update function description

Co-authored-by: Illia Kovalenko <[email protected]>

* minor variable renaming

Co-authored-by: Illia Kovalenko <[email protected]>

* remove unnecessary commented line

* remove unnecessary undefined check

* move FieldMetada interfaces to base package; extract metadata proptypes

* move FieldMetadata under enchancments

* added some descriptions

* move and rename FieldMetadata to layout submodule of base package

* rename FieldMetadata component

* add tsdoc description for fieldmetadata component

* conditionally forwardRef in fieldMetadata

* two separate withFieldMetadata functions based on if used with forwardRef

* single withFieldMetadata function with forwardref parameter

* update with metadata unit test to test the whole structure of markup

* withMetadata refactoring wip

* Adjusted withFieldMetadata generic type

* update unit test

* wip - refactor field metadata hoc

* Updates

* Updated unit tests, simplified types

* Update

* Expose withFieldMetadata as a part of nextjs sdk

* Updated PropTypes

* Removed extra asserts

* remove media property from propTypes

---------

Co-authored-by: Illia Kovalenko <[email protected]>
Co-authored-by: illiakovalenko <[email protected]>

* [sitecore-jss-react] [Editing Integration] Add support for chrome hydration for Placeholders (#1776)

* conditinally emit edit chromes metadata for placeholders, rendering

* refactor PlaceholderWithMetadata component

* update tests

* update changelog

* remove extra lines

* remove editMode mock data

* update unit test, change code tag chrometype

* remove only

* refactor as per new requirements

* Update packages/sitecore-jss/src/layout/models.ts

Co-authored-by: Illia Kovalenko <[email protected]>

* Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx

Co-authored-by: Illia Kovalenko <[email protected]>

* Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx

Co-authored-by: Illia Kovalenko <[email protected]>

* Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx

Co-authored-by: Illia Kovalenko <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Illia Kovalenko <[email protected]>

* refactor unit test

* change naming of props and types

* add test for placeholder

* update PlaceholderMetadata to render a component

* add test for missing component

* fix nextjs placeholder

* remove context

* reset nextjs placeholder

* update changelog

* update test data

* change PlaceholderMetadata implmentation

* Placeholder metadata refactor - wip

* update tests, refactor Placeholder component

* remove redundant data

* update unit test - wip

* move tests to placeholder, refactor placeholder

* refactor tests

* refactor placeholdermetadata component, update tests

* refactor placeholder tests, update jsdoc

* update nextjs types

* remove keys from code

* fix nextjs placeholder props

* change deprecated statement

* update deprecated 2

---------

Co-authored-by: Illia Kovalenko <[email protected]>
Co-authored-by: yavorsk <[email protected]>

* [templates/nextjs-sxa] SXA components has been reworked with supporting metadata (#1788)

* [templates/nextjs-sxa] SXA components has been reworked with supporting metadata approach

---------

Co-authored-by: Ruslan Matkovsky <[email protected]>

* [Editing Integration] Placeholder chromes hydration (Update - Part 2) (#1792)

* fix unit tests, update upgrade guide

* update changelog

* update missing component test

* remove only

* update changelog, upgrade guide

* remove only

* Update CHANGELOG.md

Co-authored-by: Illia Kovalenko <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Illia Kovalenko <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Illia Kovalenko <[email protected]>

* refactor placeholder tests

* update changelog

---------

Co-authored-by: Illia Kovalenko <[email protected]>

* [sitecore-jss-react] [sitecore-jss-nextjs] Reconciled withSitecoreContext and Placeholder types (#1797)

* [sitecore-jss-react] [sitecore-jss-nextjs] Reconciled withSitecoreContext and Placeholder types

* Reuse default _editable_ value in withFieldMetadata component

* Updated CHANGELOG

* Updated props param

* Remove extra type

* Remove generic in Styleguide-Layout-Tabs

* [Editing Integration] Render clientScripts / clientData (#1800)

* [Editing Integration] Render clientScripts / clientData

* Updated upgrade guide, changelog

---------

Co-authored-by: Illia Kovalenko <[email protected]>
Co-authored-by: illiakovalenko <[email protected]>
Co-authored-by: Addy Pathania <[email protected]>
Co-authored-by: Ruslan Matkovskyi <[email protected]>
Co-authored-by: Ruslan Matkovsky <[email protected]>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet