From cf59594b236e6c0fc7ff4cb4789f9feaa3a1e95d Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 8 May 2024 12:15:20 +0530 Subject: [PATCH 1/9] Add PluginSearchResult and related changes --- assets/js/components/notifications/index.js | 8 +- assets/js/realtime-notices.js | 94 +++++++++++++++++++++ 2 files changed, 101 insertions(+), 1 deletion(-) diff --git a/assets/js/components/notifications/index.js b/assets/js/components/notifications/index.js index 6d6c0fd..b0470c5 100644 --- a/assets/js/components/notifications/index.js +++ b/assets/js/components/notifications/index.js @@ -102,6 +102,10 @@ const Notifications = ({methods, constants, ...props}) => { // ); var isContextMatch = false; notification.locations.forEach(location => { + if ( location.context === 'wp-plugin-search' ) { + isContextMatch = false; + return; + } if ( location.context === constants.context ) { isContextMatch = true; } @@ -163,16 +167,18 @@ const Notifications = ({methods, constants, ...props}) => { ); } else { + console.log(activeNotifications); return (
{activeNotifications.map(notification => ( - + ))}
); diff --git a/assets/js/realtime-notices.js b/assets/js/realtime-notices.js index 1985840..31a15ef 100644 --- a/assets/js/realtime-notices.js +++ b/assets/js/realtime-notices.js @@ -147,9 +147,89 @@ } + class PluginSearchResult extends RealtimeNotice { + + searchQuery = ''; + storedQuery = ''; + + constructor({id, content, expiration, locations, query}, searchQuery) { + super({id, content, expiration, locations}); + this.searchQuery = searchQuery; + this.storedQuery = query; + } + + shouldShow() { + + let shouldShow = false; + + // Don't show if it already exists + if (document.querySelector('div.plugin-card.newfold-search-results[data-id="' + this.id + '"]') !== null) { + return shouldShow; + } + + const queryTokens = this.searchQuery.split(" "); + + let isQueryMatch = false; + queryTokens.forEach(queryToken => { + if (this.storedQuery.toLowerCase().includes(queryToken.toLowerCase())) { + isQueryMatch = true; + return; + } + }); + + if (!isQueryMatch) { + return shouldShow; + } + + // Check if notice has expired + if (this.expiration > Math.round(Date.now() / 1000)) { + + // Check if any location has the proper context + this.locations.forEach( + ({context, pages}) => { + if ('wp-plugin-search' === context) { + if (Array.isArray(pages) && pages.includes('plugin-install.php')) { + shouldShow = true; + } + if (pages === 'all') { + shouldShow = true; + } + } + } + ); + + } + return shouldShow; + } + + createElement() { + const el = document.createElement('div'); + el.setAttribute('class', 'plugin-card newfold-search-results'); + el.setAttribute('data-id', this.id); + el.innerHTML = this.content; + this.el = el; + return el; + } + + insertElement(el) { + const insertIntoList = () => { + const theList = document.querySelector('#the-list'); + if (theList) { + clearInterval(interval); + theList.insertAdjacentElement('afterbegin', el); + this.addEventListeners(el); + } + }; + + const interval = setInterval(insertIntoList, 100); + } + + } + class PluginSearch { inputHandler = _.debounce(this.onPluginSearch.bind(this), 1000); + searchQuery; static init() { const event = new PluginSearch(); @@ -177,13 +257,27 @@ onPluginSearch(e) { const type = document.getElementById('typeselector').value; const query = document.getElementById('search-plugins').value; + this.searchQuery = query; this.checkForNotices({action: 'plugin_search', data: {type, query}}); } + clearExistingSearchResults() { + var existingElements = document.getElementsByClassName('newfold-search-results'); + var elementsArray = Array.from(existingElements); + elementsArray.forEach(function(element) { + element.remove(); + }); + } + onReceiveNotices(notices) { notices.forEach(notice => { (new RealtimeNotice(notice)).maybeRender(); }); + + this.clearExistingSearchResults(); + notices.forEach(notice => { + (new PluginSearchResult(notice, this.searchQuery)).maybeRender(); + }); } checkForNotices(event) { From 546dcdc3d8d89dd9184b075b99b406c920419d09 Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 8 May 2024 21:08:13 +0530 Subject: [PATCH 2/9] Fix lint errors --- assets/js/components/notifications/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/js/components/notifications/index.js b/assets/js/components/notifications/index.js index b0470c5..c3ff59a 100644 --- a/assets/js/components/notifications/index.js +++ b/assets/js/components/notifications/index.js @@ -167,11 +167,10 @@ const Notifications = ({methods, constants, ...props}) => { ); } else { - console.log(activeNotifications); return (
{activeNotifications.map(notification => ( - Date: Wed, 8 May 2024 21:08:43 +0530 Subject: [PATCH 3/9] Fix lint errors --- assets/js/components/notifications/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/components/notifications/index.js b/assets/js/components/notifications/index.js index c3ff59a..408cadf 100644 --- a/assets/js/components/notifications/index.js +++ b/assets/js/components/notifications/index.js @@ -177,7 +177,6 @@ const Notifications = ({methods, constants, ...props}) => { constants={constants} methods={methods} /> - ))}
); From d54040fdf3b83acd5cead2cd8ecf46123edf9969 Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 22 May 2024 08:01:49 +0530 Subject: [PATCH 4/9] Add regex pattern search --- assets/js/realtime-notices.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/js/realtime-notices.js b/assets/js/realtime-notices.js index 31a15ef..e60b6fc 100644 --- a/assets/js/realtime-notices.js +++ b/assets/js/realtime-notices.js @@ -171,7 +171,8 @@ let isQueryMatch = false; queryTokens.forEach(queryToken => { - if (this.storedQuery.toLowerCase().includes(queryToken.toLowerCase())) { + const regexPattern = new RegExp('^' + this.storedQuery.toLowerCase().replace(/\*/g, '.*') + '$'); + if (regexPattern.test(queryToken.toLowerCase())) { isQueryMatch = true; return; } From 4c2b0b38629acdf3b5174a803ab242e8353446a0 Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 22 May 2024 08:02:38 +0530 Subject: [PATCH 5/9] Add regex pattern search --- assets/js/realtime-notices.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/js/realtime-notices.js b/assets/js/realtime-notices.js index e60b6fc..c14c93e 100644 --- a/assets/js/realtime-notices.js +++ b/assets/js/realtime-notices.js @@ -168,10 +168,9 @@ } const queryTokens = this.searchQuery.split(" "); - + const regexPattern = new RegExp('^' + this.storedQuery.toLowerCase().replace(/\*/g, '.*') + '$'); let isQueryMatch = false; queryTokens.forEach(queryToken => { - const regexPattern = new RegExp('^' + this.storedQuery.toLowerCase().replace(/\*/g, '.*') + '$'); if (regexPattern.test(queryToken.toLowerCase())) { isQueryMatch = true; return; From f7f1573dc0734835f95052e5e88b4d6d8b856070 Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 23 May 2024 16:22:01 +0530 Subject: [PATCH 6/9] Add Theme search results --- assets/js/components/notifications/index.js | 2 +- assets/js/realtime-notices.js | 89 ++++++++++++++++----- includes/AdminNotices.php | 7 +- 3 files changed, 74 insertions(+), 24 deletions(-) diff --git a/assets/js/components/notifications/index.js b/assets/js/components/notifications/index.js index 408cadf..a4c5dec 100644 --- a/assets/js/components/notifications/index.js +++ b/assets/js/components/notifications/index.js @@ -102,7 +102,7 @@ const Notifications = ({methods, constants, ...props}) => { // ); var isContextMatch = false; notification.locations.forEach(location => { - if ( location.context === 'wp-plugin-search' ) { + if ( location.context === 'wp-plugin-search' || location.context === 'wp-theme-search' ) { isContextMatch = false; return; } diff --git a/assets/js/realtime-notices.js b/assets/js/realtime-notices.js index c14c93e..d12efdb 100644 --- a/assets/js/realtime-notices.js +++ b/assets/js/realtime-notices.js @@ -147,15 +147,29 @@ } - class PluginSearchResult extends RealtimeNotice { + class PluginAndThemeSearchResult extends RealtimeNotice { searchQuery = ''; storedQuery = ''; + action; + wpContainerSelector; + cardSelector; - constructor({id, content, expiration, locations, query}, searchQuery) { + constructor({id, content, expiration, locations, query}, searchQuery, action) { super({id, content, expiration, locations}); this.searchQuery = searchQuery; this.storedQuery = query; + this.action = action; + switch (action) { + case 'plugin_search': + this.wpContainerSelector = '#the-list'; + this.cardSelector = 'plugin-card'; + break; + case 'theme_search': + this.wpContainerSelector = 'div.themes.wp-clearfix'; + this.cardSelector = 'theme'; + break; + } } shouldShow() { @@ -163,7 +177,7 @@ let shouldShow = false; // Don't show if it already exists - if (document.querySelector('div.plugin-card.newfold-search-results[data-id="' + this.id + '"]') !== null) { + if (document.querySelector(this.cardSelector + 'div.' + this.cardSelector + '.newfold-search-results[data-id="' + this.id + '"]') !== null) { return shouldShow; } @@ -187,13 +201,27 @@ // Check if any location has the proper context this.locations.forEach( ({context, pages}) => { - if ('wp-plugin-search' === context) { - if (Array.isArray(pages) && pages.includes('plugin-install.php')) { - shouldShow = true; - } - if (pages === 'all') { - shouldShow = true; - } + switch (this.action) { + case 'plugin_search': + if ('wp-plugin-search' === context) { + if (Array.isArray(pages) && pages.includes('plugin-install.php')) { + shouldShow = true; + } + if (pages === 'all') { + shouldShow = true; + } + } + break; + case 'theme_search': + if ('wp-theme-search' === context) { + if (Array.isArray(pages) && pages.includes('theme-install.php')) { + shouldShow = true; + } + if (pages === 'all') { + shouldShow = true; + } + } + break; } } ); @@ -204,7 +232,7 @@ createElement() { const el = document.createElement('div'); - el.setAttribute('class', 'plugin-card newfold-search-results'); + el.setAttribute('class', this.cardSelector+' newfold-search-results'); el.setAttribute('data-id', this.id); el.innerHTML = this.content; this.el = el; @@ -213,7 +241,7 @@ insertElement(el) { const insertIntoList = () => { - const theList = document.querySelector('#the-list'); + const theList = document.querySelector(this.wpContainerSelector); if (theList) { clearInterval(interval); theList.insertAdjacentElement('afterbegin', el); @@ -230,35 +258,52 @@ inputHandler = _.debounce(this.onPluginSearch.bind(this), 1000); searchQuery; + typeSelector = ''; + action; static init() { const event = new PluginSearch(); + switch (newfoldRealtimeData?.screenID) { + case 'plugin-install': + event.searchInputSelector = 'search-plugins'; + event.typeSelector = 'typeselector'; + event.action = 'plugin_search'; + break; + case 'theme-install': + event.searchInputSelector = 'wp-filter-search-input'; + event.action = 'theme_search'; + break; + } event.enable(); } enable() { document - .getElementById('search-plugins') + .getElementById(this.searchInputSelector) .addEventListener('input', this.inputHandler); - document - .getElementById('typeselector') + if (this.typeSelector) { + document + .getElementById(this.typeSelector) .addEventListener('change', this.onPluginSearch.bind(this)); + } } disable() { document - .getElementById('search-plugins') + .getElementById(this.searchInputSelector) .removeEventListener('input', this.inputHandler); - document - .getElementById('typeselector') + if (this.typeSelector) { + document + .getElementById(this.typeSelector) .removeEventListener('change', this.onPluginSearch.bind(this)); + } } onPluginSearch(e) { - const type = document.getElementById('typeselector').value; - const query = document.getElementById('search-plugins').value; + const type = this.typeSelector ? document.getElementById(this.typeSelector).value : ''; + const query = document.getElementById(this.searchInputSelector).value; this.searchQuery = query; - this.checkForNotices({action: 'plugin_search', data: {type, query}}); + this.checkForNotices({action: this.action, data: {type, query}}); } clearExistingSearchResults() { @@ -276,7 +321,7 @@ this.clearExistingSearchResults(); notices.forEach(notice => { - (new PluginSearchResult(notice, this.searchQuery)).maybeRender(); + (new PluginAndThemeSearchResult(notice, this.searchQuery, this.action)).maybeRender(); }); } diff --git a/includes/AdminNotices.php b/includes/AdminNotices.php index c331b41..e9836df 100644 --- a/includes/AdminNotices.php +++ b/includes/AdminNotices.php @@ -87,7 +87,7 @@ public static function adminScripts() { // Handle realtime notifications $screen = get_current_screen(); - if ( 'plugin-install' === $screen->id ) { + if ( 'plugin-install' === $screen->id || 'theme-install' === $screen->id ) { // Enqueue and set local values for realtime script on plugin install page only wp_enqueue_script( 'newfold-plugin-realtime-notices', @@ -96,6 +96,11 @@ public static function adminScripts() { container()->plugin()->version, true ); + + // Localize the script with screen ID + wp_localize_script( 'newfold-plugin-realtime-notices', 'newfoldRealtimeData', array( + 'screenID' => $screen->id, + ) ); } // Enqueue and set local values for dismiss script From a5ef33e44305a05dcd36d9eacf409a38e7094874 Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 11 Jul 2024 14:21:51 +0530 Subject: [PATCH 7/9] Remove non existing branch --- .github/workflows/brand-plugin-test.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/brand-plugin-test.yml b/.github/workflows/brand-plugin-test.yml index 326ac8a..f31d801 100644 --- a/.github/workflows/brand-plugin-test.yml +++ b/.github/workflows/brand-plugin-test.yml @@ -31,7 +31,6 @@ jobs: module-repo: ${{ github.repository }} module-branch: ${{ needs.setup.outputs.branch }} plugin-repo: 'bluehost/bluehost-wordpress-plugin' - plugin-branch: 'add/app-nav-notifications' secrets: inherit hostgator: From 3243ec02dbff9d8775e0e53243631da54faee8fb Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 11 Jul 2024 19:00:39 +0530 Subject: [PATCH 8/9] Change plugin branch in cy tests --- .github/workflows/brand-plugin-test.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/brand-plugin-test.yml b/.github/workflows/brand-plugin-test.yml index f31d801..9d08a55 100644 --- a/.github/workflows/brand-plugin-test.yml +++ b/.github/workflows/brand-plugin-test.yml @@ -31,6 +31,7 @@ jobs: module-repo: ${{ github.repository }} module-branch: ${{ needs.setup.outputs.branch }} plugin-repo: 'bluehost/bluehost-wordpress-plugin' + plugin-branch: 'main' secrets: inherit hostgator: From 27e22246c7c94b015939895a72f2ff2187f08e0f Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 11 Jul 2024 19:06:01 +0530 Subject: [PATCH 9/9] Revert the github workflow changes --- .github/workflows/brand-plugin-test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/brand-plugin-test.yml b/.github/workflows/brand-plugin-test.yml index 9d08a55..326ac8a 100644 --- a/.github/workflows/brand-plugin-test.yml +++ b/.github/workflows/brand-plugin-test.yml @@ -31,7 +31,7 @@ jobs: module-repo: ${{ github.repository }} module-branch: ${{ needs.setup.outputs.branch }} plugin-repo: 'bluehost/bluehost-wordpress-plugin' - plugin-branch: 'main' + plugin-branch: 'add/app-nav-notifications' secrets: inherit hostgator: