From ac78e74ef6c281b08f95721906252c4500a78636 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Wed, 29 Dec 2021 16:32:19 +0800 Subject: [PATCH] OBW: Hide the extensions header when no available plugins in the category (https://github.com/woocommerce/woocommerce-admin/pull/8089) * Hide extension list header if no plugins under the category * Refactor variable naming and add missing hook deps * Add changelogs * Add tests for --- .../fix-8006-hide-header-if-no-plugin | 4 + .../selective-extensions-bundle/index.js | 118 +++++++++++------- .../selective-extensions-bundle/test/index.js | 37 +++++- .../steps/business-details/test/index.js | 11 +- 4 files changed, 121 insertions(+), 49 deletions(-) create mode 100644 plugins/woocommerce-admin/changelogs/fix-8006-hide-header-if-no-plugin diff --git a/plugins/woocommerce-admin/changelogs/fix-8006-hide-header-if-no-plugin b/plugins/woocommerce-admin/changelogs/fix-8006-hide-header-if-no-plugin new file mode 100644 index 00000000000..c5a282c53fb --- /dev/null +++ b/plugins/woocommerce-admin/changelogs/fix-8006-hide-header-if-no-plugin @@ -0,0 +1,4 @@ +Significance: patch +Type: Fix + +Hide the extensions header when no available plugins in the category. #8089 diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js index ce1247d64c2..064d4d60c8e 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js @@ -159,8 +159,44 @@ const BundleExtensionCheckbox = ( { onChange, description, isChecked } ) => { ); }; -const baseValues = { install_extensions: true }; -export const createInitialValues = ( extensions ) => { +export const ExtensionSection = ( { + isResolving, + title, + extensions, + installExtensionOptions, + onCheckboxChange, +} ) => { + if ( isResolving ) { + return ( +
+ +
+ ); + } + + if ( extensions.length === 0 ) { + return null; + } + + return ( +
+
+ { title } +
+ { extensions.map( ( { description, key } ) => ( + + ) ) } +
+ ); +}; + +export const createInstallExtensionOptions = ( extensions = [] ) => { + const defaultInstallExtensionOptions = { install_extensions: true }; return extensions.reduce( ( acc, curr ) => { const plugins = curr.plugins.reduce( ( pluginAcc, { key, selected } ) => { @@ -173,7 +209,7 @@ export const createInitialValues = ( extensions ) => { ...acc, ...plugins, }; - }, baseValues ); + }, defaultInstallExtensionOptions ); }; export const SelectiveExtensionsBundle = ( { @@ -181,7 +217,9 @@ export const SelectiveExtensionsBundle = ( { onSubmit, } ) => { const [ showExtensions, setShowExtensions ] = useState( false ); - const [ values, setValues ] = useState( baseValues ); + const [ installExtensionOptions, setInstallExtensionOptions ] = useState( + createInstallExtensionOptions() + ); const { countryCode, @@ -224,19 +262,20 @@ export const SelectiveExtensionsBundle = ( { } return ALLOWED_PLUGIN_LISTS.includes( list.key ); } ); - }, [ freeExtensions, profileItems ] ); + }, [ freeExtensions, profileItems, countryCode ] ); useEffect( () => { if ( ! isInstallingActivating ) { - const initialValues = createInitialValues( installableExtensions ); - setValues( initialValues ); + setInstallExtensionOptions( + createInstallExtensionOptions( installableExtensions ) + ); } - }, [ installableExtensions ] ); + }, [ installableExtensions, isInstallingActivating ] ); const getCheckboxChangeHandler = ( key ) => { return ( checked ) => { const newState = { - ...values, + ...installExtensionOptions, [ key ]: checked, }; @@ -246,13 +285,13 @@ export const SelectiveExtensionsBundle = ( { if ( allExtensionsDisabled ) { // If all the extensions are disabled then disable the "Install Extensions" checkbox too - setValues( { + setInstallExtensionOptions( { ...newState, install_extensions: false, } ); } else { - setValues( { - ...values, + setInstallExtensionOptions( { + ...installExtensionOptions, [ key ]: checked, install_extensions: true, } ); @@ -269,10 +308,15 @@ export const SelectiveExtensionsBundle = ( {
{ - setValues( - setAllPropsToValue( values, checked ) + setInstallExtensionOptions( + setAllPropsToValue( + installExtensionOptions, + checked + ) ); } } /> @@ -308,41 +352,25 @@ export const SelectiveExtensionsBundle = ( {
{ showExtensions && installableExtensions.map( - ( { plugins, key: sectionKey, title } ) => ( -
- { isResolving ? ( - - ) : ( - <> -
- { title } -
- { plugins.map( - ( { description, key } ) => ( - - ) - ) } - - ) } -
+ ( { plugins, key, title } ) => ( + ) ) }
{ renderBusinessExtensionHelpText( - values, + installExtensionOptions, isInstallingActivating ) } diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js index b3795181a94..fcf58fe38d7 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js @@ -9,7 +9,7 @@ import { pluginNames } from '@woocommerce/data'; /** * Internal dependencies */ -import { SelectiveExtensionsBundle } from '../'; +import { SelectiveExtensionsBundle, ExtensionSection } from '../'; jest.mock( '../../app-illustration', () => ( { AppIllustration: jest.fn().mockReturnValue( '[illustration]' ), @@ -129,4 +129,39 @@ describe( 'Selective extensions bundle', () => { expect( queryByText( 'Google Description' ) ).toBeInTheDocument(); expect( queryByText( 'Random Description' ) ).not.toBeInTheDocument(); } ); + + describe( '', () => { + it( 'should render title and extensions', () => { + const title = 'This is title'; + const { queryByText } = render( + {} } + /> + ); + + expect( queryByText( title ) ).toBeInTheDocument(); + freeExtensions[ 0 ].plugins.forEach( ( { description } ) => { + expect( queryByText( description ) ).toBeInTheDocument(); + } ); + } ); + + it( 'should render not title when no plugins', () => { + const title = 'This is title'; + const { queryByText } = render( + {} } + /> + ); + + expect( queryByText( title ) ).not.toBeInTheDocument(); + } ); + } ); } ); diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js index 7b4798df4a1..f494eb414da 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js @@ -5,7 +5,7 @@ import { filterBusinessExtensions, prepareExtensionTrackingData, } from '../flows/selective-bundle'; -import { createInitialValues } from '../flows/selective-bundle/selective-extensions-bundle'; +import { createInstallExtensionOptions } from '../flows/selective-bundle/selective-extensions-bundle'; describe( 'BusinessDetails', () => { test( 'filtering extensions', () => { @@ -101,7 +101,7 @@ describe( 'BusinessDetails', () => { } ); } ); - describe( 'createInitialValues', () => { + describe( 'createInstallExtensionOptions', () => { test( 'selected by default', () => { const extensions = [ { @@ -125,7 +125,12 @@ describe( 'BusinessDetails', () => { }, ]; - const values = createInitialValues( extensions, 'US', '', [] ); + const values = createInstallExtensionOptions( + extensions, + 'US', + '', + [] + ); expect( values ).toEqual( expect.objectContaining( {