Navigation block - enable creation from existing WP Menus (#18869)

* Create Navigation block from existing WP  Menus (interactive rebase merge)

* Update to use CustomSelect control to match Design

* Update labels and add Create from Pages to dropdown

* Update all options to be under the select dropdown

Updates to match new design by moving all UI buttons in the placeholder under the single dropdown menu.

See #18869 (comment)

* DRY up dropdown menu options

* Rename UI vars to be agnostic to Pages or Menus specifically.

* Improve code readability via naming changes

* Updates dropown UI styles to match visual Design

* Removes divider option and replace with CSS created divider

* Fix size jump depending on dropdown selection

* Fix to not allow selection of PLACEHOLDER option as valid dropdown selection.

* Simplify conditionals

Fixes #18869 (comment)

* Move constants outside of Component

Addresses #18869 (comment)

* Update create from Pages e2e spec to match new Design

* Remove unneeded wait command

* Fix avoid Menu Items requests for invalid Menus

If the selected dropdown option isn’t a Menu then we don’t want to try to fetch its menu items from the REST API.

* Fix disable Create button if Menu Items not yet resolved from API

* Fixes e2e tests for Menus specs

* Refactor out process of clicking on Create button

* Fix test checking for empty block creation if menu is empty

* Fix test don’t show dropdown options for Menus if there aren’t any

* Fix create button enable if create from empty is selected

* Fix empty nav populatoin test

* Fix test create pages from Block using new util to create empty nav block

* Update nomenclature for mock matching to “routes” not URLs

* Fix dropdown to use pointer cursor style instead of text

* Fix button not disabled if Pages are available.

* Make placeholder instruction text contextually aware

* Updates e2e test snapshot

* Disable e2e failures due to unrelated state update issue

See #22830

* Update snapshot

* Revert "Disable e2e failures due to unrelated state update issue"

This reverts commit b6f34bb.

* Update to modern syntax for looping

Addresses #18869 (review)

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/e2e-tests/specs/experiments/navigation.test.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/style.scss

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Fix duplicate entities

Error due to rebasd.

Fixes #18869 (comment)

* Fix if conditional to conform to coding standards

* Refactor menu selects to use core shorthand

Addresses #18869 (comment)

* Revert unintended style mod to CustomSelectControl component

Addresses #18869 (comment)

* Fix selectors to use core shorthand

* Remove CustomSelectControl fixes now in upstream

* Consistently name selector props with get prefix when function

Addresses #18869 (comment)

* Rename var to better reflect purpose and avoid ambiguity

Addresses #18869 (comment)

* Update function name to prefix with verb for clarity

Addresses #18869 (comment)

* Update case so that placeholder is a single word

Addresses #18869 (comment)

* Update packages/block-library/src/navigation/create-data-tree.js

Co-authored-by: Daniel Richards <[email protected]>

* Update packages/block-library/src/navigation/create-data-tree.js

Co-authored-by: Daniel Richards <[email protected]>

* Memozie dropdown options to avoid re-renders

Addresses #18869 (comment)

* Rename to disambiguate dropdown term

* Adds @return to docblock

* Normalise selector format

* Avoid setState re-render for same option selection

* Update to show placeholder loading state when requesting pages or menus.

* Fixes loading spinner alignment

* Update to use var to store ref to common state property

* Apply useCallback to utility function

* Apply useCallback to improve perf

* FIx e2e test to wait for dropdown to be present before interaction

Due to loading spinner we now have to wait on the dropdown before interacting.

* Janitorial - fix to single quotes

* Updates dropdown divider to rely on classname over placement

This fix will work once a complementary update has been applied to CustomSelectControl to enable the options to have a custom classname applied.

* Fix double with single quotes

* Update packages/block-library/src/navigation/edit.js

Co-authored-by: Daniel Richards <[email protected]>

* Move fixture to subfolder

Fixes #18869 (comment)

Co-authored-by: Daniel Richards <[email protected]>

packages/block-library/src/navigation/create-data-tree.js

@@ -0,0 +1,39 @@
+/**
+ * Creates a nested, hierarchical tree representation from unstructured data that
+ * has an inherent relationship defined between individual items.
+ *
+ * For example, by default, each element in the dataset should have an `id` and
+ * `parent` property where the `parent` property indicates a relationship between
+ * the current item and another item with a matching `id` properties.
+ *
+ * This is useful for building linked lists of data from flat data structures.
+ *
+ * @param {Array} dataset linked data to be rearranged into a hierarchical tree based on relational fields.
+ * @param {string} id the property which uniquely identifies each entry within the array.
+ * @param {*} relation the property which identifies how the current item is related to other items in the data (if at all).
+ * @return {Array} a nested array of parent/child relationships
+ */
+function createDataTree( dataset, id = 'id', relation = 'parent' ) {
+	const hashTable = Object.create( null );
+	const dataTree = [];
+
+	for ( const data of dataset ) {
+		hashTable[ data[ id ] ] = {
+			...data,
+			children: [],
+		};
+	}
+	for ( const data of dataset ) {
+		if ( data[ relation ] ) {
+			hashTable[ data[ relation ] ].children.push(
+				hashTable[ data[ id ] ]
+			);
+		} else {
+			dataTree.push( hashTable[ data[ id ] ] );
+		}
+	}
+
+	return dataTree;
+}
+
+export default createDataTree;