Tag: React

Goal: Convert the Bulk Actions drop down menu and the associated apply and apply to all buttons into a React component.

---

Research

SLP_Admin_Locations PHP Class

This class manages the locations table interface.

\SLP_Admin_Locations::createstring_BulkActionsBlock

This method does most of the heavy lifting for the bulk actions drop down.

The bulk actions menu items are built from an array stored in $dropdownItems.

Extending The List Of Dropdown Options

The WordPress filter slp_locations_manage_bulkactions allows external modules to extend the $dropdownItems array.

The slp_locations_manage_bulkactions filter is called by these external modules:

• Experience plugin (slp-experience)
  • via \SLP_Experience_Admin::filter_LocationsBulkAction
    • Does not add ‘extras’ to any drop down item
• Power plugin (sap-power)
  • via \SLP_Power_Admin_Locations::extend_bulk_actions
    • Adds ‘extras’ UI interface:
      • checkbox list for all active location categories for the ‘categorize’ dropdown option
      • input text box for a comma separated list of tags input for the ‘add_tag’ dropdown option
  • via \SLP_Power_Pages_Admin::extend_bulk_actions
    • Does not add ‘extras’ to any drop down item

Generating The Drop Down List HTML String

This is handled PHP generating an HTML string via \SLP_Admin_Helper::createstring_DropDownMenu.

Invoking The Bulk Actions

The selection on the bulk actions menu is executed via a jQuery on ‘click’ action that is attached to two divs posing as buttons.

The button interactions are driven via jQuery hooks that live in wp-content/plugins/store-locator-plus/js/admin-locations-tab.js
The invocation hooks via jQuery on ‘click’ and the methods that are invoked are in the SLP_Locations_table_header “class” in admin-locations-tab.js.

Apply

• Intended to run the action against the locations that have been checked off using the locations table checkboxes which is rendered with PHP and HTML.
• DIV ID #do_action_apply

Apply To All

• Intended to run against ALL locations in the database.
• DIV ID #do_action_apply_to_all

Render Additional Metadata User Interfaces

Some of the items on the drop down menu allow for extra meta data to be set by the user.
This meta data is sent along with the other form data for the locations table to the backend when the Apply or Apply To All buttons are processed via jQuery.

The only two use cases are for:

• User category selection
  • attached to the ‘categorize’ dropdown item
  • shows the div with a checkbox list of categories available to locations when the users selects this dropdown item
  • the categories come from the WordPress taxonomy system using the SLPlus::locationTaxonomy (set to ‘stores’) property to determine the taxonomy label
• User tag input
  • attached to the ‘add_tag’ dropdown item
  • shows a div with an input text box where the user can enter a string of comma separated values

\SLP_Admin_Locations::$settings

The SLP_Admin_Locations class leverages multiple methods from the SLP_Settings class via \SLP_Admin_Locations::$settings to manage the current PHP/HTML/JavaScript heavy implementation. The $settings property and thus SLP_Settings class manages much of the PHP-to-React interfaces.

A primary method of “feeding” variables from WordPress, PHP, and the underlying SQL data is managed via the \SLP_Settings::get_vars_for_react method

---

Development

Pre-Existing Issue

• With the Export, Hosted CSV bulk action and checking the first 5 items, the export worked but the “Location Processing Info” box with the download link cannot be closed from the UI.
  • This should close when clicking outside the box.
  • Consider changing the header in the confirmation modal to the action name, in this case “Export, Hosted CSV”.

Second Turn Review

UI/UX Issues

• LocationsTableHeader component needs some left margin/padding to align with the legacy PHP-derived table output below.
  It should not be flush against the left sidebar menu interface.

• The Apply / Apply To All / Close buttons on the revised Category slide out drawer look awful and needs to follow modern design best practices.
• Redesign the header of the slide out to follow a design like this:

• A clear header box (white on white) with the text “Categorize Locations” instead of “Categories” in place of Settings in this example.
• Use simple icons from MUI Icons with highlighted tool tips on hover (immediate, no wait)
  • CloseOutlinedIcon for close
  • ChecklistOutlinedIcon for Apply
  • FactCheckOutlinedIcon for Apply To All

• In addition, I see the LocationsBulkActions component is using a deprecated property in the Drawer component.
  • PaperProps is deprecated for MUI <Drawer…>

• On the Tag, Add modal add the Apply and Apply To All buttons
  • Change “done” to cancel.
  • Follow the same implementation as the category slide out, fire the underlying “apply” and “apply to all” functions from the main bulk actions form.
  • Apply , Apply To All, and Cancel should all be action buttons on the bottom of the modal.
  • When this modal exits, reset the Bulk Actions drop down back to the default no action “Bulk Actions” selection (first selection) same as when the categorize slide out closes.

---

Initial Turn Review

UI/UX Issues

• Do not need “Bulk Actions” label around the drop down selector AND the word “Bulk Actions” as the first entry in the drop-down menu.
  • If the Bulk Actions in the border around the selector is considered best practices for a Material UI interface, leave that one remove the “Bulk Actions” from the first entry in the drop down menu, otherwise remove the border and “Bulk Actions” label entirely.
• The box containing the <LocationsBulkActions/> component needs some padding above it to provide visual separation from the AdminHeader page title and tab bar (horizontal menu).
• Sort the drop down list of bulk actions alphabetically.
• Change the text from “Stop Featuring Location” to “Feature Location, Stop”
• Change the text from “Feature Location” to “Feature Location, Start”
• Change the text from “Tag” to “Tag, Add”

• When choosing the Categorize bulk action, the side drawer does not render in the div#wpbody HTML element, causing the top portion to be obscured by the div#wpadminbar generated by WordPress.
• When closing the Categorize slide-out the drop down menu should re-select the first entry
  • The issue is after closing categorize the user will need to select a different drop down entry to be able to show categorize again, this creates extra steps to re-draw the categorize slide out.
• Add another pair of buttons to the top of the categorize slide-out for:
  • apply – does the same thing as the bulk action “apply” button
  • apply to all – does the same thing as the bulk action “apply to all” button
  • close the slide out after either slide out button or the slide out close icon is clicked

• The extra meta input for the add_tags drop down entry has a label “comma separated tags” that is hard to read due to the border outline.

• When going to other tabs on the Location page such as Add, Import, or Load, the new LocationsBulkActions component should be hidden, it only applies to the List tab.
  • Eventually the LocationsBulkActions will be within a TabPanel MUI React component driven by the tabs alongside the actual list of locations data table (currently rendered with PHP) and will be managed by the MUI tabs interface.
    • As such it may be prudent to wire this as a standard MUI TabPanel instead of inside a generic Box component and let the AdminHeader sections perform the standard tab-switching built into MUI.

Code Review

\SLP_Settings_manage_locations_table

In \SLP_Settings_manage_locations_table::get_bulk_actions_for_react the filter slp_locations_manage_bulkactions is applied.
One of the filters calls \SLP_Power_Admin_Locations::extend_bulk_actions.
Some of the entries in the returned array from \SLP_Power_Admin_Locations::extend_bulk_actions includes a lot of HTML stored in the ‘extra’ property of some of the array elements (see ‘add_tag’ and ‘categorize’ in \SLP_Power_Admin_Locations::extend_bulk_actions).
The values in the array returned by the filter is then passed through \SLP_Settings_manage_locations_table::normalize_bulk_action_for_react which replaces any ‘extra’ properties with a simple string of ‘tag’ or ‘categories’.
This makes all of the information stored in the ‘extra’ properties defined in \SLP_Power_Admin_Locations::extend_bulk_actions unnecessary.
I have removed the excess overhead from \SLP_Power_Admin_Locations::extend_bulk_actions.
This should have been caught in the code review process.
Creating solutions is great. Leaving behind a mess of unused legacy code that is not longer useful is not great.

---

Initial Turn

The HTML interface that presents the extra options to the user is part of the \SLP_Admin_Locations::createstring_BulkActionsBlock method.
The additional HTML element is stored in the $baExtras variable in the \SLP_Admin_Locations::createstring_BulkActionsBlock method.

$baExtras is built from The List Of Dropdown Options that was extended via the slp_locations_manage_bulkactions filter.

LocationsTableHeader React Component

TypeScript source: wp-content/plugins/store-locator-plus/src/components/locations/LocationsTableHeader.tsx
Part of the store-locator-plus plugin.
New as of Store Locator Plus v2606.30.01

This is where the Bulk Actions will end up being rendered when this task is finished.
Eventually we will add the location filters and search interfaces to the LocationsTableHeader component.

For this task I suggest creating a new component alongside (in the same directory as) the LocationsTableHeader React component named LocationsBulkActions. Render that in place of the existing “<p>Locations Table Header</p>” placeholder in the LocationsTableHeader component.

Setting Up The Dropdown List

Create a local get_vars_for_react method in SLP_Admin_Locations that extends the \SLP_Settings::get_vars_for_react method attached to the SLP_Admin_Locations\settings property.

It should store the bulk actions dropdown options in an array property that is added to the existing var being managed by the get_vars_for_react parent methods. When it reaches this new method in SLP_Admin_Locations\get_vars_for_react, which should call the $this->settings->get_vars_for_react() method first, the general properties available in the array should be:

SLPReact{… shown below}

• SLP
  • apikey
• mainButtons
• MySLP
• nonce
• pageName
• scriptHandle
• sections
• url
  • main_site
  • rest : the base URL for REST requests
  • slp_documentation
    

I suggest adding $vars[‘SLP’][‘bulkActions’] to store the drop down items, extracting that element from the existing architecture in \SLP_Admin_Locations::createstring_BulkActionsBlock.

Setting Up The Additional Metadata User Interfaces

For this element we are dealing with two fairly static components, a category checklist for the ‘categorize’ dropdown option and a text input for tags for the ‘add_tag’ dropdown option.

add_tag additional metadata interface

Since the underlying location tag data properties are always available, there is no need to only render this interface when the Power plugin is active. As such this can be directly added as a modal interface in LocationsBulkActions. The interface should only be shown when the ‘add_tag’ dropdown option is selected.

categorize additional metadata interface

This component should only be shown when the ‘categorize’ drop down is selected.

The list of category checkboxes may be better served being shown in a slide-out drawer attached to the right side of the page.

The context should be a checklist of the available categories from the WordPress taxonomy system for the \SLPlus::locationTaxonomy (‘stores’) taxonomy.
The checklist should honor the hierarchy system of the category list, rendering children indented one level directly underneath their parent entry.

I suggest Axios and a REST endpoint to fetch the category list the first time the ‘categorize’ drop down option is invoked.
Store the response in a state variable to prevent future REST queries during a single user interaction.
Show a loading indicator while fetching the list of categories.