From a84538554b4fb6028038b469e1ae00d797f68326 Mon Sep 17 00:00:00 2001 From: Joel Thiessen <444632+joelclimbsthings@users.noreply.github.com> Date: Mon, 23 Oct 2023 07:56:49 -0700 Subject: [PATCH] Only initializing background removal with jetpack connection present (#40918) --- ...date-background-removal-elligibility-40917 | 4 + .../src/image-background-removal/index.tsx | 30 +++----- plugins/woo-ai/src/index.js | 73 ------------------- plugins/woo-ai/src/index.ts | 14 ++++ plugins/woo-ai/src/product-category/index.ts | 16 +++- .../woo-ai/src/product-description/index.ts | 13 +++- plugins/woo-ai/src/product-name/index.ts | 13 ++++ .../src/product-short-description/index.ts | 15 +++- plugins/woo-ai/src/utils/index.ts | 1 + .../src/utils/renderWrappedComponent.tsx | 32 ++++++++ 10 files changed, 115 insertions(+), 96 deletions(-) create mode 100644 plugins/woo-ai/changelog/update-background-removal-elligibility-40917 delete mode 100644 plugins/woo-ai/src/index.js create mode 100644 plugins/woo-ai/src/index.ts create mode 100644 plugins/woo-ai/src/utils/renderWrappedComponent.tsx diff --git a/plugins/woo-ai/changelog/update-background-removal-elligibility-40917 b/plugins/woo-ai/changelog/update-background-removal-elligibility-40917 new file mode 100644 index 00000000000..c97274b5390 --- /dev/null +++ b/plugins/woo-ai/changelog/update-background-removal-elligibility-40917 @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak + +Only initializing background removal when JP connection present. diff --git a/plugins/woo-ai/src/image-background-removal/index.tsx b/plugins/woo-ai/src/image-background-removal/index.tsx index 13f39701795..67ea7de1a6b 100644 --- a/plugins/woo-ai/src/image-background-removal/index.tsx +++ b/plugins/woo-ai/src/image-background-removal/index.tsx @@ -1,19 +1,16 @@ -/** - * External dependencies - */ -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore createRoot included for future compatibility -// eslint-disable-next-line @woocommerce/dependency-group -import { render, createRoot } from '@wordpress/element'; - /** * Internal dependencies */ import { BackgroundRemovalLink } from './background-removal-link'; import { getCurrentAttachmentDetails } from './image_utils'; import { FILENAME_APPEND, LINK_CONTAINER_ID } from './constants'; +import { renderWrappedComponent } from '../utils'; + +( () => { + if ( ! window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) { + return; + } -export const init = () => { const _previous = wp.media.view.Attachment.Details.prototype; wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend( @@ -22,17 +19,10 @@ export const init = () => { _previous.initialize.call( this ); setTimeout( () => { - const root = document.body.querySelector( - `#${ LINK_CONTAINER_ID }` + renderWrappedComponent( + BackgroundRemovalLink, + document.body.querySelector( `#${ LINK_CONTAINER_ID }` ) ); - if ( ! root ) { - return; - } - if ( createRoot ) { - createRoot( root ).render( ); - } else { - render( , root ); - } }, 0 ); }, template( view: { id: number } ) { @@ -54,4 +44,4 @@ export const init = () => { }, } ); -}; +} )(); diff --git a/plugins/woo-ai/src/index.js b/plugins/woo-ai/src/index.js deleted file mode 100644 index d4e45d99812..00000000000 --- a/plugins/woo-ai/src/index.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * External dependencies - */ -import { render, createRoot } from '@wordpress/element'; -import { QueryClient, QueryClientProvider } from 'react-query'; - -/** - * Internal dependencies - */ -import { WriteItForMeButtonContainer } from './product-description'; -import { ProductNameSuggestions } from './product-name'; -import { ProductCategorySuggestions } from './product-category'; -import { WriteShortDescriptionButtonContainer } from './product-short-description'; -import setPreferencesPersistence from './utils/preferencesPersistence'; -import { init as initBackgroundRemoval } from './image-background-removal'; - -import './index.scss'; - -// This sets up loading and saving the plugin's preferences. -setPreferencesPersistence(); - -initBackgroundRemoval(); - -const queryClient = new QueryClient(); - -const renderComponent = ( Component, rootElement ) => { - if ( ! rootElement ) { - return; - } - - const WrappedComponent = () => ( - - - - ); - - if ( createRoot ) { - createRoot( rootElement ).render( ); - } else { - render( , rootElement ); - } -}; - -const renderProductCategorySuggestions = () => { - const root = document.createElement( 'div' ); - root.id = 'woocommerce-ai-app-product-category-suggestions'; - - renderComponent( ProductCategorySuggestions, root ); - - // Insert the category suggestions node in the product category meta box. - document.getElementById( 'taxonomy-product_cat' ).append( root ); -}; - -const descriptionButtonRoot = document.getElementById( - 'woocommerce-ai-app-product-gpt-button' -); -const nameSuggestionsRoot = document.getElementById( - 'woocommerce-ai-app-product-name-suggestions' -); - -const shortDescriptionButtonRoot = document.getElementById( - 'woocommerce-ai-app-product-short-description-gpt-button' -); - -if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) { - renderComponent( WriteItForMeButtonContainer, descriptionButtonRoot ); - renderComponent( ProductNameSuggestions, nameSuggestionsRoot ); - renderProductCategorySuggestions(); - renderComponent( - WriteShortDescriptionButtonContainer, - shortDescriptionButtonRoot - ); -} diff --git a/plugins/woo-ai/src/index.ts b/plugins/woo-ai/src/index.ts new file mode 100644 index 00000000000..965a6724e07 --- /dev/null +++ b/plugins/woo-ai/src/index.ts @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import setPreferencesPersistence from './utils/preferencesPersistence'; +import './image-background-removal'; +import './product-description'; +import './product-short-description'; +import './product-name'; +import './product-category'; + +import './index.scss'; + +// This sets up loading and saving the plugin's preferences. +setPreferencesPersistence(); diff --git a/plugins/woo-ai/src/product-category/index.ts b/plugins/woo-ai/src/product-category/index.ts index 54e07d06cd2..d142e375b7d 100644 --- a/plugins/woo-ai/src/product-category/index.ts +++ b/plugins/woo-ai/src/product-category/index.ts @@ -1 +1,15 @@ -export * from './product-category-suggestions'; +/** + * Internal dependencies + */ +import { renderWrappedComponent } from '../utils'; +import { ProductCategorySuggestions } from './product-category-suggestions'; + +if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) { + const root = document.createElement( 'div' ); + root.id = 'woocommerce-ai-app-product-category-suggestions'; + + renderWrappedComponent( ProductCategorySuggestions, root ); + + // Insert the category suggestions node in the product category meta box. + document.getElementById( 'taxonomy-product_cat' )?.append( root ); +} diff --git a/plugins/woo-ai/src/product-description/index.ts b/plugins/woo-ai/src/product-description/index.ts index 05bfdcddaac..ed8141c5f70 100644 --- a/plugins/woo-ai/src/product-description/index.ts +++ b/plugins/woo-ai/src/product-description/index.ts @@ -1 +1,12 @@ -export * from './product-description-button-container'; +/** + * Internal dependencies + */ +import { renderWrappedComponent } from '../utils'; +import { WriteItForMeButtonContainer } from './product-description-button-container'; + +if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) { + renderWrappedComponent( + WriteItForMeButtonContainer, + document.getElementById( 'woocommerce-ai-app-product-gpt-button' ) + ); +} diff --git a/plugins/woo-ai/src/product-name/index.ts b/plugins/woo-ai/src/product-name/index.ts index 5a606670887..6e6abf23a2b 100644 --- a/plugins/woo-ai/src/product-name/index.ts +++ b/plugins/woo-ai/src/product-name/index.ts @@ -1,3 +1,16 @@ +/** + * Internal dependencies + */ +import { renderWrappedComponent } from '../utils'; +import { ProductNameSuggestions } from './product-name-suggestions'; + +if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) { + renderWrappedComponent( + ProductNameSuggestions, + document.getElementById( 'woocommerce-ai-app-product-name-suggestions' ) + ); +} + export * from './product-name-suggestions'; export * from './powered-by-link'; export * from './suggestion-item'; diff --git a/plugins/woo-ai/src/product-short-description/index.ts b/plugins/woo-ai/src/product-short-description/index.ts index eeaabcce9c6..dfa19913027 100644 --- a/plugins/woo-ai/src/product-short-description/index.ts +++ b/plugins/woo-ai/src/product-short-description/index.ts @@ -1 +1,14 @@ -export * from './product-short-description-button-container'; +/** + * Internal dependencies + */ +import { renderWrappedComponent } from '../utils'; +import { WriteShortDescriptionButtonContainer } from './product-short-description-button-container'; + +if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) { + renderWrappedComponent( + WriteShortDescriptionButtonContainer, + document.getElementById( + 'woocommerce-ai-app-product-short-description-gpt-button' + ) + ); +} diff --git a/plugins/woo-ai/src/utils/index.ts b/plugins/woo-ai/src/utils/index.ts index 7c0b0c9727d..9e7a81f9f7c 100644 --- a/plugins/woo-ai/src/utils/index.ts +++ b/plugins/woo-ai/src/utils/index.ts @@ -6,3 +6,4 @@ export * from './tiny-tools'; export * from './productDataInstructionsGenerator'; export * from './categorySelector'; export * from './htmlEntities'; +export * from './renderWrappedComponent'; diff --git a/plugins/woo-ai/src/utils/renderWrappedComponent.tsx b/plugins/woo-ai/src/utils/renderWrappedComponent.tsx new file mode 100644 index 00000000000..2b0d0527ffe --- /dev/null +++ b/plugins/woo-ai/src/utils/renderWrappedComponent.tsx @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import * as elementExports from '@wordpress/element'; +import { QueryClient, QueryClientProvider } from 'react-query'; + +const queryClient = new QueryClient(); + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore Incorrect type definition for createRoot +const { createRoot, render } = elementExports; + +export const renderWrappedComponent = ( + Component: React.ComponentType, + rootElement: HTMLElement | null +) => { + if ( ! rootElement ) { + return; + } + + const WrappedComponent = () => ( + + + + ); + + if ( createRoot ) { + createRoot( rootElement ).render( ); + } else { + render( , rootElement ); + } +};