Sites dashboard - remove default filter and dummy column hack

client/hosting/sites/components/sites-dashboard.tsx

@@ -52,7 +52,7 @@ import { DOTCOM_OVERVIEW, FEATURE_TO_ROUTE_MAP } from './site-preview-pane/const
 import DotcomPreviewPane from './site-preview-pane/dotcom-preview-pane';
 import SitesDashboardHeader from './sites-dashboard-header';
 import DotcomSitesDataViews, { useSiteStatusGroups } from './sites-dataviews';
-import { getSitesPagination, addDummyDataViewPrefix } from './sites-dataviews/utils';
+import { getSitesPagination } from './sites-dataviews/utils';
 import type { SiteDetails } from '@automattic/data-stores';
 
 // todo: we are using A4A styles until we extract them as common styles in the ItemsDashboard component
@@ -77,7 +77,6 @@ const siteSortingKeys = [
 ];
 
 const DEFAULT_PER_PAGE = 50;
-const DEFAULT_STATUS_GROUP = 'all';
 const DEFAULT_SITE_TYPE = 'non-p2';
 
 const SitesDashboard = ( {
@@ -88,7 +87,7 @@ const SitesDashboard = ( {
 		perPage = DEFAULT_PER_PAGE,
 		search,
 		newSiteID,
-		status = DEFAULT_STATUS_GROUP,
+		status,
 		siteType = DEFAULT_SITE_TYPE,
 	},
 	selectedSite,
@@ -160,13 +159,17 @@ const SitesDashboard = ( {
 		perPage,
 		search: search ?? '',
 		fields: getFieldsByBreakpoint( isDesktop ),
-		filters: [
-			{
-				field: addDummyDataViewPrefix( 'status' ),
-				operator: 'is',
-				value: siteStatusGroups.find( ( item ) => item.slug === status )?.value || 1,
-			},
-		],
+		...( status
+			? {
+					filters: [
+						{
+							field: 'status',
+							operator: 'is',
+							value: siteStatusGroups.find( ( item ) => item.slug === status )?.value || 1,
+						},
+					],
+			  }
+			: {} ),
 		selectedItem: selectedSite,
 		type: selectedSite ? DATAVIEWS_LIST : DATAVIEWS_TABLE,
 		layout: {
@@ -260,17 +263,15 @@ const SitesDashboard = ( {
 
 	// Get the status group slug.
 	const statusSlug = useMemo( () => {
-		const statusFilter = dataViewsState.filters?.find(
-			( filter ) => filter.field === addDummyDataViewPrefix( 'status' )
-		);
-		const statusNumber = statusFilter?.value || 1;
-		return ( siteStatusGroups.find( ( status ) => status.value === statusNumber )?.slug ||
-			'all' ) as GroupableSiteLaunchStatuses;
+		const statusFilter = dataViewsState.filters?.find( ( filter ) => filter.field === 'status' );
+		const statusNumber = statusFilter?.value;
+		return siteStatusGroups.find( ( status ) => status.value === statusNumber )
+			?.slug as GroupableSiteLaunchStatuses;
 	}, [ dataViewsState.filters, siteStatusGroups ] );
 
 	// Filter sites list by status group.
 	const { currentStatusGroup } = useSitesListGrouping( allSites, {
-		status: statusSlug,
+		status: statusSlug || 'all',
 		showHidden: true,
 	} );
 
@@ -303,7 +304,7 @@ const SitesDashboard = ( {
 	useEffect( () => {
 		const queryParams = {
 			search: dataViewsState.search?.trim(),
-			status: statusSlug === DEFAULT_STATUS_GROUP ? undefined : statusSlug,
+			status: statusSlug,
 			page: dataViewsState.page && dataViewsState.page > 1 ? dataViewsState.page : undefined,
 			'per-page': dataViewsState.perPage === DEFAULT_PER_PAGE ? undefined : dataViewsState.perPage,
 		};

client/hosting/sites/components/sites-dataviews/index.tsx

@@ -10,7 +10,6 @@ import ActionsField from './dataviews-fields/actions-field';
 import SiteField from './dataviews-fields/site-field';
 import { SiteStats } from './sites-site-stats';
 import { SiteStatus } from './sites-site-status';
-import { addDummyDataViewPrefix } from './utils';
 import type { SiteExcerptData } from '@automattic/sites';
 import type { Field } from '@wordpress/dataviews';
 import type {
@@ -126,11 +125,14 @@ const DotcomSitesDataViews = ( {
 			},
 			{
 				id: 'status',
-				// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
-				label: <span>{ __( 'Status' ) }</span>,
+				label: __( 'Status' ),
 				render: ( { item }: { item: SiteExcerptData } ) => <SiteStatus site={ item } />,
 				enableHiding: false,
 				enableSorting: false,
+				elements: siteStatusGroups,
+				filterBy: {
+					operators: [ 'is' ],
+				},
 			},
 			{
 				id: 'last-publish',
@@ -170,19 +172,6 @@ const DotcomSitesDataViews = ( {
 				enableSorting: true,
 				getValue: () => null,
 			},
-			{
-				id: addDummyDataViewPrefix( 'status' ),
-				label: __( 'Status' ),
-				render: () => null,
-				elements: siteStatusGroups,
-				filterBy: {
-					operators: [ 'is' ],
-					isPrimary: true,
-				},
-				enableHiding: false,
-				enableSorting: false,
-				getValue: () => null,
-			},
 		],
 		[ __, openSitePreviewPane, userId, dataViewsState, setDataViewsState, siteStatusGroups ]
 	);

client/hosting/sites/components/sites-dataviews/utils.ts

@@ -21,10 +21,6 @@ export function getSitesPagination(
 	return { totalItems, totalPages };
 }
 
-export function addDummyDataViewPrefix( dataView: string ) {
-	return `${ DUMMY_DATA_VIEW_PREFIX }${ dataView }`;
-}
-
 export function removeDummyDataViewPrefix( dataView: string ) {
 	return dataView.replace( DUMMY_DATA_VIEW_PREFIX, '' );
 }

client/hosting/sites/controller.tsx

@@ -1,7 +1,4 @@
-import {
-	DEFAULT_SITE_LAUNCH_STATUS_GROUP_VALUE,
-	siteLaunchStatusGroupValues,
-} from '@automattic/sites';
+import { siteLaunchStatusGroupValues } from '@automattic/sites';
 import { Global, css } from '@emotion/react';
 import { removeQueryArgs } from '@wordpress/url';
 import AsyncLoad from 'calypso/components/async-load';
@@ -35,7 +32,6 @@ export function sanitizeQueryParameters( context: PageJSContext, next: () => voi
 	 * in the route.
 	 */
 	if ( context.query.status === undefined ) {
-		context.query.status = DEFAULT_SITE_LAUNCH_STATUS_GROUP_VALUE;
 		return next();
 	}