Hosting dashboard: Enable sorting for Plan and Status (#94646)

* Enable sorting for Plan and Status. * Add sorting by plan. * Add status sorting. * Fix coming soon status sort. * Make plan property optional. * Use getSiteLaunchStatus.
Automattic · Sep 20, 2024 · 3a76c46 · 3a76c46
1 parent 69ad0ae
commit 3a76c46
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 5 deletions.
diff --git a/client/hosting/sites/components/sites-dashboard.tsx b/client/hosting/sites/components/sites-dashboard.tsx
@@ -74,6 +74,8 @@ const siteSortingKeys = [
 	{ dataView: 'site', sortKey: 'alphabetically' },
 	{ dataView: 'last-publish', sortKey: 'updatedAt' },
 	{ dataView: 'last-interacted', sortKey: 'lastInteractedWith' },
+	{ dataView: 'plan', sortKey: 'plan' },
+	{ dataView: 'status', sortKey: 'status' },
 ];
 
 const DEFAULT_PER_PAGE = 50;

diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx
@@ -135,14 +135,14 @@ const DotcomSitesDataViews = ( {
 					<SitePlan site={ item } userId={ userId } />
 				),
 				enableHiding: false,
-				enableSorting: false,
+				enableSorting: true,
 			},
 			{
 				id: 'status',
 				label: __( 'Status' ),
 				render: ( { item }: { item: SiteExcerptData } ) => <SiteStatus site={ item } />,
 				enableHiding: false,
-				enableSorting: false,
+				enableSorting: true,
 				elements: siteStatusGroups,
 				filterBy: {
 					operators: [ 'is' ],

diff --git a/packages/sites/src/site-type.ts b/packages/sites/src/site-type.ts
@@ -17,4 +17,7 @@ export interface MinimumSite {
 		is_redirect?: boolean;
 		updated_at?: string;
 	};
+	plan?: {
+		product_name_short: string;
+	};
 }
diff --git a/packages/sites/src/use-sites-list-sorting.tsx b/packages/sites/src/use-sites-list-sorting.tsx
@@ -1,23 +1,47 @@
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useMemo } from 'react';
+import { getSiteLaunchStatus } from './site-status';
 import { MinimumSite } from './site-type';
 
 type SiteDetailsForSortingWithOptionalUserInteractions = Pick<
 	MinimumSite,
-	'title' | 'user_interactions' | 'options' | 'is_wpcom_staging_site' | 'ID'
+	| 'title'
+	| 'user_interactions'
+	| 'options'
+	| 'is_wpcom_staging_site'
+	| 'ID'
+	| 'plan'
+	| 'is_deleted'
+	| 'is_coming_soon'
+	| 'is_private'
+	| 'launch_status'
 >;
 
 type SiteDetailsForSortingWithUserInteractions = Pick<
 	MinimumSite,
-	'title' | 'options' | 'is_wpcom_staging_site' | 'ID'
+	| 'title'
+	| 'options'
+	| 'is_wpcom_staging_site'
+	| 'ID'
+	| 'plan'
+	| 'is_deleted'
+	| 'is_coming_soon'
+	| 'is_private'
+	| 'launch_status'
 > &
 	Required< Pick< MinimumSite, 'user_interactions' > >;
 
 export type SiteDetailsForSorting =
 	| SiteDetailsForSortingWithOptionalUserInteractions
 	| SiteDetailsForSortingWithUserInteractions;
 
-const validSortKeys = [ 'lastInteractedWith', 'updatedAt', 'alphabetically' ] as const;
+const validSortKeys = [
+	'lastInteractedWith',
+	'updatedAt',
+	'alphabetically',
+	'plan',
+	'status',
+] as const;
 const validSortOrders = [ 'asc', 'desc' ] as const;
 
 export type SitesSortKey = ( typeof validSortKeys )[ number ];
@@ -52,6 +76,10 @@ export function useSitesListSorting< T extends SiteDetailsForSorting >(
 				return sortSitesAlphabetically( allSites, sortOrder );
 			case 'updatedAt':
 				return sortSitesByLastPublish( allSites, sortOrder );
+			case 'plan':
+				return sortSitesByPlan( allSites, sortOrder );
+			case 'status':
+				return sortSitesByStatus( allSites, sortOrder );
 			default:
 				return allSites;
 		}
@@ -280,6 +308,28 @@ function sortByLastPublish< T extends SiteDetailsForSorting >(
 	return 0;
 }
 
+function sortByPlan< T extends SiteDetailsForSorting >( a: T, b: T, sortOrder: SitesSortOrder ) {
+	const planA = a.plan?.product_name_short;
+	const planB = b.plan?.product_name_short;
+
+	if ( ! planA || ! planB ) {
+		return 0;
+	}
+
+	return sortOrder === 'asc' ? planA.localeCompare( planB ) : planB.localeCompare( planA );
+}
+
+function sortByStatus< T extends SiteDetailsForSorting >( a: T, b: T, sortOrder: SitesSortOrder ) {
+	const statusA = getSiteLaunchStatus( a );
+	const statusB = getSiteLaunchStatus( b );
+
+	if ( ! statusA || ! statusB ) {
+		return 0;
+	}
+
+	return sortOrder === 'asc' ? statusA.localeCompare( statusB ) : statusB.localeCompare( statusA );
+}
+
 function sortSitesAlphabetically< T extends SiteDetailsForSorting >(
 	sites: T[],
 	sortOrder: SitesSortOrder
@@ -294,6 +344,20 @@ function sortSitesByLastPublish< T extends SiteDetailsForSorting >(
 	return [ ...sites ].sort( ( a, b ) => sortByLastPublish( a, b, sortOrder ) );
 }
 
+function sortSitesByPlan< T extends SiteDetailsForSorting >(
+	sites: T[],
+	sortOrder: SitesSortOrder
+): T[] {
+	return [ ...sites ].sort( ( a, b ) => sortByPlan( a, b, sortOrder ) );
+}
+
+function sortSitesByStatus< T extends SiteDetailsForSorting >(
+	sites: T[],
+	sortOrder: SitesSortOrder
+): T[] {
+	return [ ...sites ].sort( ( a, b ) => sortByStatus( a, b, sortOrder ) );
+}
+
 type SitesSortingProps = {
 	sitesSorting: SitesSortOptions;
 	sites: SiteDetailsForSorting[];