Reapply Live Search module Commits

[del15881]

Description

This commit marks the Initial PWA LiveSearch Package, after conversion of the Referenced Repository (https://github.com/adobe/storefront-product-listing-page).

Currently It only has the feature to add Live Search Results to Category and Search Results Landing pages.

It currently is missing the Search Autocomplete AKA Search Popover feature.

The commit to work requires the Magento_LiveSearchGraphQlPwa module to be installed on Adobe Commerce Backend.
This module is currently available only for internal use.

Once installed the Live Search to be initialised on PLP and SRLP , it requires changes in local-intercept.js file of PWA Studio.

Example (local-intercept.js) :

`
const { Targetables } = require('@magento/pwa-buildpack');

function localIntercept(targets) {

const liveSearchTargetables = Targetables.using(targets);

//Search Bar settings
const VeniaSearchBar = liveSearchTargetables.reactComponent(
    '@magento/venia-ui/lib/components/SearchBar/searchBar.js'
);
const LiveSearchBar = VeniaSearchBar.addImport(
    "import LiveSearchPopoverLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchPopoverLoader'"
);
VeniaSearchBar.replaceJSX(
    '<Form autoComplete="off" className={classes.form} initialValues={initialValues} onSubmit={handleSubmit} >',
    `<${LiveSearchBar} />`
);

//searchPage settings
const VeniaSearchPage = liveSearchTargetables.reactComponent(
    '@magento/venia-ui/lib/components/SearchPage/searchPage.js'
);

const LiveSearchPage = VeniaSearchPage.addImport(
    "import LiveSearchSRLPLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchSRLPLoader'"
);

VeniaSearchPage.insertBeforeJSX(
    'div className={classes.sidebar}',
    `<${LiveSearchPage} />`
);

VeniaSearchPage.removeJSX('div className={classes.sidebar}');
VeniaSearchPage.removeJSX('div className={classes.searchContent}');

//category page settings
const VeniaCategoryPage = liveSearchTargetables.reactComponent(
    '@magento/venia-ui/lib/RootComponents/Category/categoryContent.js'
);

VeniaCategoryPage.removeJSX('<StoreTitle />');
VeniaCategoryPage.removeJSX('div className={classes.contentWrapper}');

const VeniaCategoryPageRoot = liveSearchTargetables.reactComponent(
    '@magento/venia-ui/lib/RootComponents/Category/category.js'
);

const LiveCategoryContentRoot = VeniaCategoryPageRoot.addImport(
    "import LiveSearchPLPLoader from '@magento/venia-pwa-live-search/src/containers/LiveSearchPLPLoader'"
);

VeniaCategoryPageRoot.insertAfterJSX(
    'CategoryContent categoryId={uid} classes={classes} data={categoryData} isLoading={loading} pageControl={pageControl} sortProps={sortProps} pageSize={pageSize}',
    `<${LiveCategoryContentRoot} categoryId={uid} />`
);

}

module.exports = localIntercept;
`

TODO: Describe your changes in detail here.

Related Issue

Closes #PWA-3301.

Acceptance

Verification Stakeholders

Specification

Verification Steps

Test scenario(s) for direct fix/feature

Test scenario(s) for any existing impacted features/areas

Test scenario(s) for any Magento Backend Supported Configurations

Is Browser/Device testing needed?

Any ad-hoc/edge case scenarios that need to be considered?

Screenshots / Screen Captures (if appropriate)

Breaking Changes (if any)

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

[pwa-studio-bot]

	Fails
🚫	node failed.

Log

Error: Error: Cannot find module './.lighthouseci/assertion-results.json'
Require stack:
- dangerfile.lighthouse.js
- /usr/local/share/.config/yarn/global/node_modules/danger/distribution/runner/runners/inline.js
- /usr/local/share/.config/yarn/global/node_modules/danger/distribution/commands/danger-runner.js

ERROR ON TASK: lighthouseTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results-f016bbb2.json

Generated by 🚫 dangerJS against 8814fd0

[pwa-studio-bot]

	Fails
🚫	node failed.

Log

ERROR ON TASK: cypressTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against 8814fd0

[pwa-studio-bot]

	Fails
🚫	node failed.

Log

ERROR ON TASK: cypressTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against 8814fd0

[pwa-studio-bot]

	Fails
🚫	Missing information in PR. Please fill out the "Description" section.

	Warnings
⚠️	Found the word "TODO" in the PR description. Just letting you know incase you forgot :)

	Messages
📖	Associated JIRA tickets: PWA-3301.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

If your PR is missing information, check against the original template here. At a minimum you must have the section headers from the template and provide some information in each section.

Generated by 🚫 dangerJS against 8814fd0