Skip to content

Commit

Permalink
Domains: Improve all domains management performance (#81421)
Browse files Browse the repository at this point in the history 
* Remove `site` dependency + add `isLightVersion` prop to all domains component

* Render row's notice conditionally

* Sort ascending by default

* Remove all auto-renew references

* Fix loading conditions and conditional domain-only renders

* Use `isLightVersion` to determine conditional renders for "All domains" domain row

* Use nullish coalescing operator for site title/slug

Co-authored-by: Ramy Nasr <ramy.nasr@automattic.com>

* Fix unit tests

---------

Co-authored-by: Ramy Nasr <ramy.nasr@automattic.com>
  • Loading branch information
@rafaelgallani @ramynasr
rafaelgallani and ramynasr authored Sep 8, 2023
1 parent 1c713ee commit f13aca4
Show file tree
Hide file tree
Showing 10 changed files with 239 additions and 178 deletions.
278 changes: 164 additions & 114 deletions client/my-sites/domains/domain-management/list/all-domains.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import {
getUserPurchases,
hasLoadedUserPurchasesFromServer,
} from 'calypso/state/purchases/selectors';
import canCurrentUserForSites from 'calypso/state/selectors/can-current-user-for-sites';
import { getCurrentRoute } from 'calypso/state/selectors/get-current-route';
import getSites from 'calypso/state/selectors/get-sites';
import isRequestingAllDomains from 'calypso/state/selectors/is-requesting-all-domains';
Expand Down Expand Up @@ -139,14 +138,13 @@ class AllDomains extends Component {
};

handleDomainItemClick = ( domain ) => {
const { sites, currentRoute } = this.props;
const site = sites[ domain.blogId ];
const { currentRoute } = this.props;

if ( this.props.isContactEmailEditContext ) {
return;
}

page( getDomainManagementPath( domain.name, domain.type, site.slug, currentRoute ) );
page( getDomainManagementPath( domain.name, domain.type, domain.blogId, currentRoute ) );
};

handleDomainItemToggle = ( domain, selected ) => {
Expand All @@ -166,8 +164,12 @@ class AllDomains extends Component {
};

isLoading() {
const { domainsList, requestingFlatDomains, hasAllSitesLoaded } = this.props;
return ! hasAllSitesLoaded || ( requestingFlatDomains && domainsList.length === 0 );
const { domainsList, requestingFlatDomains, hasAllSitesLoaded, isLightVersion } = this.props;
return (
( isLightVersion ? ! hasAllSitesLoaded : true ) &&
requestingFlatDomains &&
domainsList.length === 0
);
}

isRequestingSiteDomains() {
Expand Down Expand Up @@ -274,6 +276,7 @@ class AllDomains extends Component {
isContactEmailEditContext,
translate,
dispatch,
isLightVersion,
} = this.props;

const { isSavingContactInfo } = this.state;
Expand All @@ -295,103 +298,154 @@ class AllDomains extends Component {
);
}

const domainsTableColumns = [
{
name: 'domain',
label: translate( 'Domain' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [ getSimpleSortFunctionBy( 'domain' ) ],
},
{
name: 'site',
label: translate( 'Site' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [
( first, second, sortOrder ) => {
// sort all domain olny sites after/before the other sites
const firstSite = sites[ first?.blogId ];
const secondSite = sites[ second?.blogId ];

if ( firstSite?.options?.is_domain_only && secondSite?.options?.is_domain_only ) {
return 0;
}

if ( firstSite?.options?.is_domain_only ) {
return 1 * sortOrder;
}

if ( secondSite?.options?.is_domain_only ) {
return -1 * sortOrder;
}

return 0;
const domainsTableColumns = ! isLightVersion
? [
{
name: 'domain',
label: translate( 'Domain' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [ getSimpleSortFunctionBy( 'domain' ) ],
},
( first, second, sortOrder ) => {
const firstSite = sites[ first?.blogId ];
const secondSite = sites[ second?.blogId ];
{
name: 'site',
label: translate( 'Site' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [
( first, second, sortOrder ) => {
// sort all domain olny sites after/before the other sites

if ( first.isDomainOnlySite && second.isDomainOnlySite ) {
return 0;
}

if ( first.isDomainOnlySite ) {
return 1 * sortOrder;
}

if ( second.isDomainOnlySite ) {
return -1 * sortOrder;
}

return 0;
},
( first, second, sortOrder ) => {
const firstTitle = first.siteTitle || first.siteSlug;
const secondTitle = second.siteTitle || second.siteSlug;

const firstTitle = firstSite?.title || firstSite?.slug;
const secondTitle = secondSite?.title || secondSite?.slug;
return firstTitle.localeCompare( secondTitle ) * sortOrder;
},
getSimpleSortFunctionBy( 'domain' ),
],
},
{
name: 'status',
label: translate( 'Status' ),
isSortable: true,
initialSortOrder: -1,
supportsOrderSwitching: true,
sortFunctions: [
( first, second, sortOrder ) => {
const { listStatusWeight: firstStatusWeight } = resolveDomainStatus(
first,
null,
translate,
dispatch,
{
getMappingErrors: true,
}
);
const { listStatusWeight: secondStatusWeight } = resolveDomainStatus(
second,
null,
translate,
dispatch,
{
getMappingErrors: true,
}
);
return ( ( firstStatusWeight ?? 0 ) - ( secondStatusWeight ?? 0 ) ) * sortOrder;
},
getReverseSimpleSortFunctionBy( 'domain' ),
],
bubble: countDomainsInOrangeStatus(
domains.map( ( domain ) =>
resolveDomainStatus( domain, null, translate, dispatch, {
getMappingErrors: true,
siteSlug: domain.siteSlug,
} )
)
),
},
{
name: 'registered-until',
label: translate( 'Registered until' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [
getSimpleSortFunctionBy( 'expiry' ),
getSimpleSortFunctionBy( 'domain' ),
],
},
{ name: 'action', label: translate( 'Actions' ) },
]
: [
{
name: 'domain',
label: translate( 'Domain' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [ getSimpleSortFunctionBy( 'domain' ) ],
},
{
name: 'site',
label: translate( 'Site' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [
( first, second, sortOrder ) => {
// sort all domain olny sites after/before the other sites
if ( first.isDomainOnlySite && second.isDomainOnlySite ) {
return 0;
}

if ( first.isDomainOnlySite ) {
return 1 * sortOrder;
}

if ( second.isDomainOnlySite ) {
return -1 * sortOrder;
}

return 0;
},
( first, second, sortOrder ) => {
const firstTitle = first.siteTitle || first.siteSlug;
const secondTitle = second.siteTitle || second.siteSlug;

return firstTitle.localeCompare( secondTitle ) * sortOrder;
return firstTitle.localeCompare( secondTitle ) * sortOrder;
},
getSimpleSortFunctionBy( 'domain' ),
],
},
getSimpleSortFunctionBy( 'domain' ),
],
},
{
name: 'status',
label: translate( 'Status' ),
isSortable: true,
initialSortOrder: -1,
supportsOrderSwitching: true,
sortFunctions: [
( first, second, sortOrder ) => {
const { listStatusWeight: firstStatusWeight } = resolveDomainStatus(
first,
null,
translate,
dispatch,
{
getMappingErrors: true,
}
);
const { listStatusWeight: secondStatusWeight } = resolveDomainStatus(
second,
null,
translate,
dispatch,
{
getMappingErrors: true,
}
);
return ( ( firstStatusWeight ?? 0 ) - ( secondStatusWeight ?? 0 ) ) * sortOrder;
{
name: 'registered-until',
label: translate( 'Registered until' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [
getSimpleSortFunctionBy( 'expiry' ),
getSimpleSortFunctionBy( 'domain' ),
],
},
getReverseSimpleSortFunctionBy( 'domain' ),
],
bubble: countDomainsInOrangeStatus(
domains.map( ( domain ) =>
resolveDomainStatus( domain, null, translate, dispatch, {
getMappingErrors: true,
siteSlug: sites[ domain.blogId ].slug,
} )
)
),
},
{
name: 'registered-until',
label: translate( 'Registered until' ),
isSortable: true,
initialSortOrder: 1,
supportsOrderSwitching: true,
sortFunctions: [ getSimpleSortFunctionBy( 'expiry' ), getSimpleSortFunctionBy( 'domain' ) ],
},
{ name: 'auto-renew', label: translate( 'Auto-renew' ) },
{ name: 'action', label: translate( 'Actions' ) },
];
];

if ( isContactEmailEditContext ) {
const areAllCheckboxesChecked = Object.entries( this.state.selectedDomains ).every(
Expand Down Expand Up @@ -429,6 +483,7 @@ class AllDomains extends Component {
requestingSiteDomains={ requestingSiteDomains }
hasLoadedPurchases={ hasLoadedUserPurchases }
isSavingContactInfo={ isSavingContactInfo }
isLightVersion={ isLightVersion }
/>
</>
);
Expand Down Expand Up @@ -575,8 +630,7 @@ class AllDomains extends Component {
}

filteredDomains() {
const { filteredDomainsList, domainsList, canManageSitesMap, isContactEmailEditContext } =
this.props;
const { filteredDomainsList, domainsList, isContactEmailEditContext } = this.props;
if ( ! domainsList ) {
return [];
}
Expand All @@ -586,9 +640,7 @@ class AllDomains extends Component {
}

// filter on sites we can manage, that aren't `wpcom` type
return domainsList.filter(
( domain ) => domain.type !== domainTypes.WPCOM && canManageSitesMap[ domain.blogId ]
);
return domainsList.filter( ( domain ) => domain.type !== domainTypes.WPCOM );
}

renderDomainTableFilterButton() {
Expand Down Expand Up @@ -629,8 +681,8 @@ class AllDomains extends Component {
key="breadcrumb_button_2"
selectedFilter={ selectedFilter }
filterOptions={ filterOptions }
isLoading={ this.isLoadingDomainDetails() }
disabled={ this.isLoadingDomainDetails() }
isLoading={ this.isLoading() }
disabled={ this.isLoading() }
/>
);
}
Expand Down Expand Up @@ -728,8 +780,6 @@ const getSitesById = ( state ) => {

const getFilteredDomainsList = ( state, context ) => {
const action = parse( context.querystring )?.action;
const sites = getSitesById( state );
const canManageSitesMap = canCurrentUserForSites( state, Object.keys( sites ), 'manage_options' );
const domainsList = getFlatDomainsList( state );
const domainsDetails = getAllDomains( state );

Expand All @@ -756,29 +806,29 @@ const getFilteredDomainsList = ( state, context ) => {
} );

default:
return domainsList.filter(
( domain ) => domain.type !== domainTypes.WPCOM && canManageSitesMap[ domain.blogId ]
);
return domainsList.filter( ( domain ) => domain.type !== domainTypes.WPCOM );
}
};

export default connect( ( state, { context } ) => {
const sites = getSitesById( state );
const action = parse( context.querystring )?.action;
const filteredDomainsList = getFilteredDomainsList( state, context );
const requestingFlatDomains = isRequestingAllDomains( state );

return {
action,
canManageSitesMap: canCurrentUserForSites( state, Object.keys( sites ), 'manage_options' ),
currentRoute: getCurrentRoute( state ),
domainsList: getFlatDomainsList( state ),
domainsDetails: getAllDomains( state ),
filteredDomainsList: getFilteredDomainsList( state, context ),
filteredDomainsList,
hasAllSitesLoaded: hasAllSitesList( state ),
isContactEmailEditContext: ListAllActions.editContactEmail === action,
purchases: getUserPurchases( state ) || [],
hasLoadedUserPurchases: hasLoadedUserPurchasesFromServer( state ),
requestingFlatDomains: isRequestingAllDomains( state ),
requestingFlatDomains,
requestingSiteDomains: getAllRequestingSiteDomains( state ),
sites,
sites: requestingFlatDomains || filteredDomainsList.length > 100 ? {} : sites,
isLightVersion: filteredDomainsList.length > 100,
};
} )( localize( AllDomains ) );
Loading

0 comments on commit f13aca4

Please sign in to comment.