Fix: Rename structure with ai is visible when user disabled ai featur…

…es [ED-15606] (elementor#28610)

Co-authored-by: ElementorBot <[email protected]>

assets/dev/js/editor/regions/navigator/layout.js

@@ -15,16 +15,19 @@ export default class extends Marionette.LayoutView {
 			toggleButtonIcon: '#elementor-navigator__toggle-all i',
 			toggleButtonA11yText: '#elementor-navigator__toggle-all span',
 			closeButton: '#elementor-navigator__close',
-			aiTitlesButton: '#elementor-navigator__ai-titles',
 		};
 	}
 
+	behaviors() {
+		const behaviors = {};
+		return elementor.hooks.applyFilters( 'navigator/layout/behaviors', behaviors, this );
+	}
+
 	events() {
 		return {
 			'click @ui.toggleButton': 'toggleElements',
 			'click @ui.closeButton': 'onCloseButtonClick',
 			'keyup @ui.closeButton': 'onCloseButtonKeyPress',
-			'click @ui.aiTitlesButton': 'aiTitleClickHandler',
 		};
 	}
 
@@ -34,18 +37,6 @@ export default class extends Marionette.LayoutView {
 		};
 	}
 
-	aiTitleClickHandler() {
-		window.location.hash = 'welcome-ai-return-to-ai-titles';
-		window.addEventListener( 'hashchange', this.handleHashChange.bind( this ) );
-	}
-
-	handleHashChange() {
-		if ( elementorCommon.config.library_connect?.is_connected && window.location.hash.includes( 'ai-titles' ) ) {
-			window.location.hash = '';
-			window.location.reload();
-		}
-	}
-
 	toggleElements() {
 		const state = 'expand' === this.ui.toggleButton.data( 'elementor-action' ),
 			a11yText = state ? __( 'Collapse all elements', 'elementor' ) : __( 'Expand all elements', 'elementor' ),
@@ -79,9 +70,6 @@ export default class extends Marionette.LayoutView {
 	}
 
 	onShow() {
-		if ( elementorCommon.config.library_connect?.is_connected ) {
-			this.ui.aiTitlesButton.remove();
-		}
 		this.elements.show( new ElementView( {
 			model: elementor.elementsModel,
 		} ) );

includes/editor-templates/navigator.php

@@ -36,9 +36,6 @@
 			<i class="eicon-expand" aria-hidden="true"></i>
 			<span class="elementor-screen-only"><?php esc_html__( 'Expand all elements', 'elementor' ); ?></span>
 		</button>
-		<button id="elementor-navigator__ai-titles">
-			<i class="eicon-ai"></i>
-		</button>
 		<h2 id="elementor-navigator__header__title"><?php
 			echo $is_app_bar_active
 				? esc_html__( 'Structure', 'elementor' )

modules/ai/assets/js/editor/integration/navigator/apply-ai-titles-to-navigator-behaviour.js

@@ -0,0 +1,51 @@
+var ApplyAiTitlesNavigatorBehavior;
+ApplyAiTitlesNavigatorBehavior = Marionette.Behavior.extend( {
+	ui: {
+		aiTitlesButton: '#elementor-navigator__ai-titles',
+	},
+
+	events: {
+		'click @ui.aiTitlesButton': 'aiTitleClickHandler',
+	},
+
+	initialize() {
+		try {
+			this.getTemplate();
+		} catch ( e ) {
+			this.hasTemplate = false;
+		}
+	},
+
+	getTemplate() {
+		const $button = jQuery( '<button>', {
+			id: 'elementor-navigator__ai-titles',
+		} );
+		$button.html( '<i class="eicon-ai"></i>' );
+		return $button[ 0 ].outerHTML;
+	},
+
+	aiTitleClickHandler() {
+		window.location.hash = 'welcome-ai-return-to-ai-titles';
+		window.addEventListener( 'hashchange', this.handleHashChange.bind( this ) );
+	},
+
+	handleHashChange() {
+		if ( elementorCommon.config.library_connect?.is_connected && window.location.hash.includes( 'ai-titles' ) ) {
+			window.location.hash = '';
+			window.location.reload();
+		}
+	},
+
+	onShow() {
+		if ( elementorCommon.config.library_connect?.is_connected ) {
+			this.ui.aiTitlesButton.remove();
+		} else {
+			const $targetElement = this.view.$el.find( '#elementor-navigator__toggle-all' );
+
+			if ( $targetElement.length ) {
+				$targetElement.after( this.getTemplate() );
+			}
+		}
+	},
+} );
+export default ApplyAiTitlesNavigatorBehavior;

modules/ai/assets/js/editor/module.js

@@ -7,6 +7,7 @@ import { AiGetStartedConnect } from './ai-get-started-connect';
 import { getUiConfig } from './utils/editor-integration';
 import { getRemoteFrontendConfig } from './api';
 import { getUniqueId } from './context/requests-ids';
+import ApplyAiTitlesNavigatorBehavior from './integration/navigator/apply-ai-titles-to-navigator-behaviour';
 
 setTimeout( async () => {
 	if ( '1' !== window.ElementorAiConfig?.is_get_started ) {
@@ -42,6 +43,8 @@ setTimeout( async () => {
 export default class Module extends elementorModules.editor.utils.Module {
 	onElementorInit() {
 		elementor.hooks.addFilter( 'controls/base/behaviors', this.registerControlBehavior.bind( this ) );
+		elementor.hooks.addFilter( 'navigator/layout/behaviors', this.registerNavigatorBehavior.bind( this ) );
+
 		window.addEventListener( 'hashchange', function( e ) {
 			if ( e.newURL.includes( 'welcome-ai' ) ) {
 				const source = e.newURL.includes( 'welcome-ai-whats-new' ) ? 'whats-new' : 'connect';
@@ -70,6 +73,13 @@ export default class Module extends elementorModules.editor.utils.Module {
 			}
 		} );
 	}
+
+	registerNavigatorBehavior( behaviors ) {
+		behaviors.ai = {
+			behaviorClass: ApplyAiTitlesNavigatorBehavior,
+		};
+		return behaviors;
+	}
 	registerControlBehavior( behaviors, view ) {
 		const aiOptions = view.options.model.get( 'ai' );