From f42e9fe224fa3fdf718cb178e44dfa18b203efac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Thu, 24 Oct 2024 17:11:17 +0200
Subject: [PATCH] Visualize hierarchy

---
 .../src/dataviews-layouts/table/index.tsx     | 20 +++++++++++++++++++
 .../src/dataviews-layouts/table/style.scss    |  1 +
 packages/dataviews/src/types.ts               |  5 +++++
 .../sidebar-dataviews/default-views.js        |  3 +++
 4 files changed, 29 insertions(+)

diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index 81d856451bfcd..365c996ac0f05 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -43,6 +43,7 @@ interface TableColumnFieldProps< Item > {
 	item: Item;
 	isItemClickable: ( item: Item ) => boolean;
 	onClickItem?: ( item: Item ) => void;
+	level?: number;
 }
 
 interface TableColumnCombinedProps< Item > {
@@ -59,6 +60,7 @@ interface TableColumnProps< Item > {
 	primaryField?: NormalizedField< Item >;
 	fields: NormalizedField< Item >[];
 	item: Item;
+	level?: number;
 	column: string;
 	view: ViewTableType;
 	isItemClickable: ( item: Item ) => boolean;
@@ -68,6 +70,7 @@ interface TableColumnProps< Item > {
 interface TableRowProps< Item > {
 	hasBulkActions: boolean;
 	item: Item;
+	level?: number;
 	actions: Action< Item >[];
 	fields: NormalizedField< Item >[];
 	id: string;
@@ -109,6 +112,7 @@ function TableColumn< Item >( {
 
 function TableColumnField< Item >( {
 	primaryField,
+	level,
 	item,
 	field,
 	isItemClickable,
@@ -131,6 +135,11 @@ function TableColumnField< Item >( {
 				'dataviews-view-table__primary-field': isPrimaryField,
 			} ) }
 		>
+			{ isPrimaryField && level !== undefined && (
+				<span className="dataviews-view-table__level">
+					{ '—'.repeat( level ) }
+				</span>
+			) }
 			<div { ...clickableProps }>
 				<field.render { ...{ item } } />
 			</div>
@@ -159,6 +168,7 @@ function TableColumnCombined< Item >( {
 function TableRow< Item >( {
 	hasBulkActions,
 	item,
+	level,
 	actions,
 	fields,
 	id,
@@ -247,6 +257,7 @@ function TableRow< Item >( {
 							onClickItem={ onClickItem }
 							fields={ fields }
 							item={ item }
+							level={ level }
 							column={ column }
 							view={ view }
 						/>
@@ -273,6 +284,14 @@ function TableRow< Item >( {
 	);
 }
 
+const getItemLevel = ( view: ViewTableType, item: any ) => {
+	if ( ! view.layout?.hierarchical || ! view.layout?.hierarchicalSort ) {
+		return;
+	}
+
+	return item?.level;
+};
+
 function ViewTable< Item >( {
 	actions,
 	data,
@@ -422,6 +441,7 @@ function ViewTable< Item >( {
 							<TableRow
 								key={ getItemId( item ) }
 								item={ item }
+								level={ getItemLevel( view, item ) }
 								hasBulkActions={ hasBulkActions }
 								actions={ actions }
 								fields={ fields }
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 3bbb045c73a9d..2a4a5956d73e5 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -201,6 +201,7 @@
 			}
 		}
 	}
+
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 0bce8b8cf2c08..e4a66d8d0acc7 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -354,6 +354,11 @@ export interface ViewTable extends ViewBase {
 		 * The density of the view.
 		 */
 		density?: Density;
+
+		/**
+		 * The field to visualize hierarchical data.
+		 */
+		hierarchical?: string;
 	};
 }
 
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index 83cdf01fa518c..847550ef7c675 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -30,6 +30,7 @@ export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
 			primaryField: 'title',
+			hierarchical: 'parent',
 			styles: {
 				title: {
 					maxWidth: 300,
@@ -41,12 +42,14 @@ export const defaultLayouts = {
 		layout: {
 			mediaField: 'featured_media',
 			primaryField: 'title',
+			hierarchical: 'parent', // TODO: remove this
 		},
 	},
 	[ LAYOUT_LIST ]: {
 		layout: {
 			primaryField: 'title',
 			mediaField: 'featured_media',
+			hierarchical: 'parent', // TODO: remove this
 		},
 	},
 };