release: features and fixes

preda-bogdan · web-flow · commit 83d73b208314 · 2022-11-03T13:14:53.000+02:00
- Feat Map for Restrict Content plugin
- Feat Allow SVG during import
- Feat Added performance features step
- Fix plugin removal reliability
- Fix the Import template button language in Elementor
diff --git a/assets/src/Components/CustomTooltip.js b/assets/src/Components/CustomTooltip.js
@@ -1,24 +1,20 @@
-import { Button, Icon } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { info } from '@wordpress/icons';
+import { Icon, info } from '@wordpress/icons';
 
 import classnames from 'classnames';
 
-const CustomTooltip = ( { children, className } ) => {
+const CustomTooltip = ( { children, className, toLeft = false } ) => {
 	const tooltipClassNames = classnames( [ className, 'tiob-tooltip-wrap' ] );
 
+	const ttStyle = toLeft ? { right: 0, left: 'unset' } : {};
+
 	return (
 		<div className={ tooltipClassNames }>
-			<Button
-				onClick={ ( e ) => {
-					e.preventDefault();
-				} }
-				className="tiob-tooltip-toggle"
-				icon={ info }
-				isLink
-				isSmall
-			/>
-			<div className="tiob-tooltip-content">{ children }</div>
+			<div className="tiob-tooltip-toggle">
+				<Icon icon={ info } size={ 24 } />
+				<div className="tiob-tooltip-content" style={ ttStyle }>
+					{ children }
+				</div>
+			</div>
 		</div>
 	);
 };
diff --git a/assets/src/Components/ImportModal.js b/assets/src/Components/ImportModal.js
@@ -1,13 +1,13 @@
 /*global tiobDash*/
 /* eslint-disable no-console */
 import {
+	activateTheme,
 	cleanupImport,
 	importContent,
 	importMods,
 	importWidgets,
 	installPlugins,
 	installTheme,
-	activateTheme,
 } from '../utils/site-import';
 import { get } from '../utils/rest';
 import { trailingSlashIt } from '../utils/common';
@@ -17,19 +17,24 @@ import classnames from 'classnames';
 import ImportModalError from './ImportModalError';
 import ImportModalMock from './ImportModalMock';
 import CustomTooltip from './CustomTooltip';
-import { useState, useEffect } from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
+
+import {
+	createInterpolateElement,
+	useEffect,
+	useState,
+} from '@wordpress/element';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 
 import {
 	Button,
 	Icon,
-	ToggleControl,
 	Modal,
 	Panel,
 	PanelBody,
 	PanelRow,
+	ToggleControl,
 } from '@wordpress/components';
 
 const ImportModal = ( {
@@ -45,9 +50,14 @@ const ImportModal = ( {
 		customizer: true,
 		widgets: true,
 		cleanup: false,
+		performanceAddon: true,
 		theme_install: themeData !== false,
 	} );
+
 	const [ themeInstallProgress, setThemeInstallProgress ] = useState( false );
+	const [ performanceAddonProgress, setPerformanceAddonProgress ] = useState(
+		false
+	);
 	const [ cleanupProgress, setCleanupProgress ] = useState( false );
 	const [ pluginsProgress, setPluginsProgress ] = useState( false );
 	const [ contentProgress, setContentProgress ] = useState( false );
@@ -56,7 +66,7 @@ const ImportModal = ( {
 	const [ frontPageID, setFrontPageID ] = useState( null );
 	const [ currentStep, setCurrentStep ] = useState( null );
 	const [ importing, setImporting ] = useState( false );
-	const [ pluginOptions, setPluginOptions ] = useState( null );
+	const [ pluginOptions, setPluginOptions ] = useState( {} );
 	const [ error, setError ] = useState( null );
 	const [ importData, setImportData ] = useState( null );
 	const [ fetching, setFetching ] = useState( true );
@@ -211,6 +221,44 @@ const ImportModal = ( {
 					'templates-patterns-collection'
 				),
 			},
+			performanceAddon: {
+				title: __(
+					'Enable performance features for my site',
+					'templates-patterns-collection'
+				),
+				icon: 'dashboard',
+				tooltip: createInterpolateElement(
+					__(
+						sprintf(
+							// translators: %s is Optimole plugin name.
+							'Optimize and speed up your site with our trusted addon, <a><span>%s</span><icon/></a>. It’s free.',
+							'Optimole'
+						),
+						'templates-patterns-collection'
+					),
+					{
+						a: (
+							<a
+								href="https://wordpress.org/plugins/optimole-wp/"
+								target={ '_blank' }
+								style={ {
+									textDecoration: 'none',
+									display: 'inline-flex',
+									alignItems: 'center',
+								} }
+							/>
+						),
+						icon: (
+							<Icon
+								size={ 10 }
+								icon="external"
+								style={ { marginLeft: 0 } }
+							/>
+						),
+						span: <div />,
+					}
+				),
+			},
 		};
 
 		if ( isCleanupAllowed === 'yes' ) {
@@ -255,7 +303,11 @@ const ImportModal = ( {
 							<Icon icon={ icon } />
 							<span>{ title }</span>
 							{ tooltip && (
-								<CustomTooltip>{ tooltip }</CustomTooltip>
+								<CustomTooltip
+									toLeft={ id === 'performanceAddon' }
+								>
+									{ tooltip }
+								</CustomTooltip>
 							) }
 							{ id !== 'theme_install' && (
 								<div className="toggle-wrapper">
@@ -285,6 +337,10 @@ const ImportModal = ( {
 			...( importData.mandatory_plugins || {} ),
 		};
 
+		if ( Object.keys( allPlugins ).length < 1 ) {
+			return null;
+		}
+
 		const toggleOpen = () => {
 			setPluginsOpened( ! pluginsOpened );
 		};
@@ -417,7 +473,7 @@ const ImportModal = ( {
 
 	function runImportPlugins() {
 		// console.clear();
-		if ( ! pluginOptions ) {
+		if ( ! pluginOptions && ! general.performanceAddon ) {
 			console.log( '[S] Plugins.' );
 			runImportContent();
 			return false;
@@ -502,7 +558,7 @@ const ImportModal = ( {
 	function runImportWidgets() {
 		if ( ! general.widgets ) {
 			console.log( '[S] Widgets.' );
-			importDone();
+			runPerformanceAddonInstall();
 			return false;
 		}
 		setCurrentStep( 'widgets' );
@@ -515,12 +571,35 @@ const ImportModal = ( {
 				}
 				console.log( '[D] Widgets.' );
 				setWidgetsProgress( 'done' );
-				importDone();
+				runPerformanceAddonInstall();
 			} )
 			.catch( ( incomingError ) =>
 				handleError( incomingError, 'widgets' )
 			);
 	}
+	function runPerformanceAddonInstall() {
+		if ( ! general.performanceAddon ) {
+			console.log( '[S] Performance Addon.' );
+			importDone();
+			return false;
+		}
+		setCurrentStep( 'performanceAddon' );
+		console.log( '[P] Performance Addon.' );
+
+		installPlugins( { 'optimole-wp': true } )
+			.then( ( response ) => {
+				if ( ! response.success ) {
+					handleError( response, 'performanceAddon' );
+					return false;
+				}
+				console.log( '[D] Performance Addon.' );
+				setPerformanceAddonProgress( 'done' );
+				importDone();
+			} )
+			.catch( ( incomingError ) =>
+				handleError( incomingError, 'performanceAddon' )
+			);
+	}
 
 	function importDone() {
 		setCurrentStep( 'done' );
@@ -566,6 +645,10 @@ const ImportModal = ( {
 				'Something went wrong while importing the widgets.',
 				'templates-patterns-collection'
 			),
+			performanceAddon: __(
+				'Something went wrong while installing the performance addon.',
+				'templates-patterns-collection'
+			),
 		};
 
 		switch ( step ) {
@@ -584,6 +667,9 @@ const ImportModal = ( {
 			case 'widgets':
 				setWidgetsProgress( 'error' );
 				break;
+			case 'performanceAddon':
+				setPerformanceAddonProgress( 'error' );
+				break;
 		}
 		setError(
 			incomingError.data
@@ -660,6 +746,7 @@ const ImportModal = ( {
 											content: contentProgress,
 											customizer: customizerProgress,
 											widgets: widgetsProgress,
+											performanceAddon: performanceAddonProgress,
 										} }
 										currentStep={ currentStep }
 										willDo={ general }
diff --git a/assets/src/Components/ImportStepper.js b/assets/src/Components/ImportStepper.js
@@ -2,6 +2,7 @@ import classnames from 'classnames';
 
 import { __ } from '@wordpress/i18n';
 import { Dashicon } from '@wordpress/components';
+
 const ImportStepper = ( { currentStep, progress, willDo } ) => {
 	const stepsMap = {
 		cleanup: {
@@ -43,6 +44,14 @@ const ImportStepper = ( { currentStep, progress, willDo } ) => {
 			status: progress.widgets,
 			willDo: willDo.widgets,
 		},
+		performanceAddon: {
+			label: __(
+				'Installing Performance Features',
+				'templates-patterns-collection'
+			),
+			status: progress.performanceAddon,
+			willDo: willDo.performanceAddon,
+		},
 	};
 
 	return (
diff --git a/assets/src/scss/_custom-tooltip.scss b/assets/src/scss/_custom-tooltip.scss
@@ -1,30 +1,37 @@
 .tiob-tooltip-wrap {
-	position: relative;
-	display: flex;
-	align-items: center;
-	margin-left: 10px;
+  margin-left: 10px;
 
-	.tiob-tooltip-toggle {
-		&:hover, &:focus {
-			outline: none;
-			box-shadow: none;
-			+ .tiob-tooltip-content {
-				opacity: 1;
-				pointer-events: all;
-				z-index: 1;
-			}
-		}
-	}
+  .tiob-tooltip-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    > svg {
+      fill: $blue;
+    }
+
+    &:hover, &:focus {
+      outline: none;
+      box-shadow: none;
+
+      .tiob-tooltip-content {
+        opacity: 1;
+        pointer-events: all;
+      }
+    }
+  }
 }
 
 .tiob-tooltip-content {
-	top: 100%;
-	left: 0;
-	position: absolute;
-	min-width: 300px;
-	background: #fff;
-	box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
-	padding: 10px;
-	pointer-events: none;
-	opacity: 0;
+  font-size: 13px;
+  top: 100%;
+  left: 0;
+  position: absolute;
+  min-width: 300px;
+  background: #fff;
+  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
+  padding: 10px;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
 }
diff --git a/assets/src/scss/_import-modal.scss b/assets/src/scss/_import-modal.scss
@@ -272,11 +272,6 @@ $base-index: 100000;
 			font-size: 17px;
 			font-weight: 700;
 			line-height: 30px;
-
-			svg {
-				width: 30px;
-				height: 30px;
-			}
 		}
 	}
 
diff --git a/e2e-tests/cypress/integration/dashboard.spec.ts b/e2e-tests/cypress/integration/dashboard.spec.ts
@@ -164,7 +164,7 @@ describe('Importer Works', function () {
       );
     });
 
-    cy.get('.ob-import-modal').find('button').contains('Import entire site').click();
+    cy.get('.ob-import-modal').wait(1000).find('button').contains('Import entire site').click();
 
     cy.wait('@installPlugins', { timeout: 20000 }).then((req) => {
       expect(req.response.statusCode).to.equal(200);
diff --git a/elementor/src/import.js b/elementor/src/import.js
@@ -65,11 +65,11 @@ const placeholder = document.getElementById( 'tmpl-elementor-add-section' );
 
 if ( placeholder ) {
 	const text = placeholder.textContent;
+	const regex = /(<div class="[^"]*?elementor-add-section-drag-title[^"]*?">(.|\n)*?<\/div>)/gm;
 	placeholder.textContent = text.replace(
+		regex,
 		// eslint-disable-next-line prettier/prettier
-		'<div class=\"elementor-add-section-drag-title\">Drag widget here</div>',
-		// eslint-disable-next-line prettier/prettier
-		`<div class="elementor-add-section-area-button elementor-templates-cloud-button" title="${ window.tiTpc.library.libraryButton }"><svg width="100" height="100" viewBox="10 10 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" class="tpc-template-cloud-icon" role="img" aria-hidden="true" focusable="false"><path d="M95.0264 100H4.97356C2.22797 100 0 97.772 0 95.0264V4.97356C0 2.22797 2.22797 0 4.97356 0H95.0264C97.772 0 100 2.22797 100 4.97356V95.0264C100 97.772 97.772 100 95.0264 100Z" fill="#0366D6"></path><path d="M82.6941 86.7448V30.8205V18.4653H70.3502H14.4146L26.7584 30.8205H70.3502V74.401L82.6941 86.7448Z" fill="white"></path><path d="M42.2416 58.9291L42.2528 71.183L53.2352 82.1653L53.1902 47.9806L18.9941 47.9355L29.9765 58.9066L42.2416 58.9291Z" fill="white" style=""></path></svg></div> <div class=\"elementor-add-section-drag-title\">Drag widget here</div>`
+		`<div class="elementor-add-section-area-button elementor-templates-cloud-button" title="${ window.tiTpc.library.libraryButton }"><svg width="100" height="100" viewBox="10 10 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" class="tpc-template-cloud-icon" role="img" aria-hidden="true" focusable="false"><path d="M95.0264 100H4.97356C2.22797 100 0 97.772 0 95.0264V4.97356C0 2.22797 2.22797 0 4.97356 0H95.0264C97.772 0 100 2.22797 100 4.97356V95.0264C100 97.772 97.772 100 95.0264 100Z" fill="#0366D6"></path><path d="M82.6941 86.7448V30.8205V18.4653H70.3502H14.4146L26.7584 30.8205H70.3502V74.401L82.6941 86.7448Z" fill="white"></path><path d="M42.2416 58.9291L42.2528 71.183L53.2352 82.1653L53.1902 47.9806L18.9941 47.9355L29.9765 58.9066L42.2416 58.9291Z" fill="white" style=""></path></svg></div> $1`
 	);
 }
 
diff --git a/includes/Importers/Cleanup/Manager.php b/includes/Importers/Cleanup/Manager.php
diff --git a/includes/Importers/Plugin_Importer.php b/includes/Importers/Plugin_Importer.php
diff --git a/includes/Importers/WP/WP_Import.php b/includes/Importers/WP/WP_Import.php

Original file line number	Diff line number	Diff line change
`@@ -272,11 +272,6 @@ $base-index: 100000;`
`272`	`272`	`font-size: 17px;`
`273`	`273`	`font-weight: 700;`
`274`	`274`	`line-height: 30px;`
`275`		`-`
`276`		`- svg {`
`277`		`- width: 30px;`
`278`		`- height: 30px;`
`279`		`- }`
`280`	`275`	`}`
`281`	`276`	`}`
`282`	`277`