Connect Programs filter to data source.

[tomalec]

Changes proposed in this Pull Request:

Create ProgramsReportFilters to use customized ReportsFilter, that will use Date, Programs, and
Compare filters consistently with other wc-admin analytics.
Provide custom autocompleter for programs.

Implements part of #242.

⚠️ Requires wc-admin fixes

• CompareFilter does not forward autocompleter setting to the Search
CompareFilter does not forward autocompleter setting to the Search  woocommerce-admin#6890
• FilterPicker does not forward all props to Search component
  FilterPicker does not forward all props to Search component woocommerce-admin#6062

Screenshots:

Review hints:

Changes to our components are in the first two commits https://github.com/woocommerce/google-listings-and-ads/pull/537/files/16728a6465480a81cc5a599da67fe1fcbebfe931

The others are importing unreleased wc-admin fixes: https://github.com/woocommerce/google-listings-and-ads/pull/537/files/16728a6465480a81cc5a599da67fe1fcbebfe931..feaff0901cb3997a6bda7e99773741e205756208

Detailed test instructions:

1. Go to Programs report page: https://gla1.test/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Freports%2Fprograms
2. Use date and program filter (all, single, compare)
3. Check that params in the address bar URL updates accordingly, and UI looks correct.
4. Check that the autocomplete is populated with actual programs.

To be done in a separate PR:

1. Fix initial state. When you refresh the page or visit URL for the first time with programs chosen, the labels are not shown. This seems to ba another wc-admin issue, as CompareFilter & FilterPicker seems to ignore changing getLabels function (it updates labels, only when params changes)

   

2. When "Freee Listings" are chosen as a "single program", their label is not rendered. Probably because FilterPicker considers the selected option with id==0 the lack of selection.
   

Changelog Note:

[jconroy]

Requires wc-admin fixes

Hey @tomalec just confirming, are you saying we'll need a specific version of wc-admin (that hasn't been released yet?)

If so, and if I understand correctly, I think we'll need to probably come up with our own component with fixes so that we can support them now

[tomalec]

Requires wc-admin fixes

Hey @tomalec just confirming, are you saying we'll need a specific version of wc-admin (that hasn't been released yet?)

Unfortunately, yes :|

WDYT, of adding the copies of those fixed component files to /js/src/wc-admin/components/(filters|filter-picker|compare-filter)/index.js so it would be easier to get rid of them, once the respective fixes are released?

[tomalec]

I added the clones to /js/src/external-components/woocommerce/*.

This adds some noise to this PR's diff, and @woocommerce/experimental dependency adds to build warnings, but I hope it's still reviewable.

npm run start warnings

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 9:24-43
"export 'Navigation' (imported as 'NavigationComponent') was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 10:34-63
"export 'NavigationBackButton' (imported as 'NavigationBackButtonComponent') was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 11:29-53
"export 'NavigationGroup' (imported as 'NavigationGroupComponent') was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 13:28-51
"export 'NavigationItem' (imported as 'NavigationItemComponent') was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 12:28-51
"export 'NavigationMenu' (imported as 'NavigationMenuComponent') was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 14:18-31
"export 'Text' (imported as 'TextComponent') was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 10:67-101
"export '__experimentalNavigationBackButton' was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

WARNING in ./node_modules/@woocommerce/experimental/build-module/index.js 15:21-32
"export 'useSlot' (imported as 'useSlotHook') was not found in '@wordpress/components'
 @ ./js/src/external-components/woocommerce/compare-filter/index.js
 @ ./js/src/external-components/woocommerce/filters/index.js
 @ ./js/src/reports/programs/programs-report-filters.js
 @ ./js/src/reports/programs/index.js
 @ ./js/src/reports/index.js
 @ ./js/src/index.js

[eason9487]

Testing well and LGTM.