Hosting Config: Enable current Cache Clear logic for all users (#73360)

* Enable current Cache Clear logic for all users

* Add tests for the new selector

* Remove Clear Cache confirmation dialog

* Update reason which is no longer correct

* Rename card, refresh copy

* Reduce rate-limit time to one minute

* Fix remaining code style issue

* Fix component name

* Limit was reduced to one minute

* Use sentence case

* Consolidate to one line

* Use `<ExternalLink>` component for fancy icon

* Fix the test descriptions

---------

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

client/lib/url/support.js

@@ -5,6 +5,7 @@ export const ADDING_TITAN_TO_YOUR_SITE = `${ root }/add-email/adding-professiona
 export const AUTO_RENEWAL = `${ root }/manage-purchases/#automatic-renewal`;
 export const CHANGE_NAME_SERVERS = `${ root }/domains/change-name-servers/`;
 export const CHANGE_NAME_SERVERS_FINDING_OUT_NEW_NS = `${ root }/domains/change-name-servers/#find-your-new-name-servers`;
+export const CLEAR_CACHE = `${ root }/clear-your-sites-cache/`;
 export const CONCIERGE_SUPPORT = `${ root }/concierge-support/`;
 export const CONTACT = `${ root }/contact/`;
 export const CALYPSO_CONTACT = '/help/contact';

client/my-sites/hosting/cache-card/index.js

@@ -0,0 +1,80 @@
+import { Button, Card } from '@automattic/components';
+import { localizeUrl } from '@automattic/i18n-utils';
+import { localize } from 'i18n-calypso';
+import { connect } from 'react-redux';
+import CardHeading from 'calypso/components/card-heading';
+import ExternalLink from 'calypso/components/external-link';
+import MaterialIcon from 'calypso/components/material-icon';
+import { CLEAR_CACHE } from 'calypso/lib/url/support';
+import { clearWordPressCache } from 'calypso/state/hosting/actions';
+import getRequest from 'calypso/state/selectors/get-request';
+import { shouldRateLimitAtomicCacheClear } from 'calypso/state/selectors/should-rate-limit-atomic-cache-clear';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+
+import './style.scss';
+
+const CacheCard = ( {
+	disabled,
+	shouldRateLimitCacheClear,
+	clearAtomicWordPressCache,
+	isClearingCache,
+	siteId,
+	translate,
+} ) => {
+	const clearCache = () => {
+		clearAtomicWordPressCache( siteId, 'Manually clearing again.' );
+	};
+
+	const getClearCacheContent = () => {
+		return (
+			<div>
+				<p>
+					{ translate(
+						'Be careful, clearing the cache may make your site unresponsive while it is being rebuilt. {{a}}Learn more about clearing your site’s cache{{/a}}',
+						{
+							components: {
+								a: <ExternalLink icon target="_blank" href={ localizeUrl( CLEAR_CACHE ) } />,
+							},
+						}
+					) }
+				</p>
+				<Button
+					primary
+					onClick={ clearCache }
+					busy={ isClearingCache }
+					disabled={ disabled || isClearingCache || shouldRateLimitCacheClear }
+				>
+					<span>{ translate( 'Clear cache' ) }</span>
+				</Button>
+				{ shouldRateLimitCacheClear && (
+					<p class="form-setting-explanation">
+						{ translate( 'You cleared the cache recently. Please wait a minute and try again.' ) }
+					</p>
+				) }
+			</div>
+		);
+	};
+	//autorenew
+	return (
+		<Card className="cache-card">
+			<MaterialIcon icon="autorenew" size={ 24 } />
+			<CardHeading>{ translate( 'Cache' ) }</CardHeading>
+			{ getClearCacheContent() }
+		</Card>
+	);
+};
+
+export default connect(
+	( state ) => {
+		const siteId = getSelectedSiteId( state );
+
+		return {
+			shouldRateLimitCacheClear: shouldRateLimitAtomicCacheClear( state, siteId ),
+			isClearingCache: getRequest( state, clearWordPressCache( siteId ) )?.isLoading ?? false,
+			siteId,
+		};
+	},
+	{
+		clearAtomicWordPressCache: clearWordPressCache,
+	}
+)( localize( CacheCard ) );

client/my-sites/hosting/main.js

@@ -31,8 +31,8 @@ import siteHasFeature from 'calypso/state/selectors/site-has-feature';
 import { requestSite } from 'calypso/state/sites/actions';
 import { isSiteOnECommerceTrial } from 'calypso/state/sites/plans/selectors';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
+import CacheCard from './cache-card';
 import { HostingUpsellNudge } from './hosting-upsell-nudge';
-import MiscellaneousCard from './miscellaneous-card';
 import PhpMyAdminCard from './phpmyadmin-card';
 import RestorePlanSoftwareCard from './restore-plan-software-card';
 import SFTPCard from './sftp-card';
@@ -184,7 +184,7 @@ class Hosting extends Component {
 								{ isGitHubEnabled && <GitHubCard /> }
 								<WebServerSettingsCard disabled={ isDisabled } />
 								<RestorePlanSoftwareCard disabled={ isDisabled } />
-								<MiscellaneousCard disabled={ isDisabled } />
+								<CacheCard disabled={ isDisabled } />
 								<WebServerLogsCard disabled={ isDisabled } />
 							</Column>
 							<Column type="sidebar">

client/state/selectors/should-rate-limit-atomic-cache-clear.js

@@ -0,0 +1,14 @@
+import 'calypso/state/hosting/init';
+
+const ONE_MINUTE_IN_MILLISECONDS = 60 * 1000;
+
+export function shouldRateLimitAtomicCacheClear( state, siteId ) {
+	const lastCacheCleared = state.atomicHosting?.[ siteId ]?.lastCacheClearTimestamp;
+
+	if ( ! lastCacheCleared ) {
+		return false;
+	}
+
+	const rateLimitTime = new Date().valueOf() - ONE_MINUTE_IN_MILLISECONDS;
+	return lastCacheCleared > rateLimitTime;
+}

client/state/selectors/test/should-rate-limit-atomic-cache-clear.js

@@ -0,0 +1,48 @@
+import { shouldRateLimitAtomicCacheClear } from 'calypso/state/selectors/should-rate-limit-atomic-cache-clear';
+
+const ONE_MINUTE_IN_MILLISECONDS = 60 * 1000;
+const ONE_SECOND = 1000;
+const SITE_ID = 123;
+const TIMESTAMP = 1234567890;
+
+const generateState = ( { timestamp } ) => ( {
+	atomicHosting: {
+		[ SITE_ID ]: {
+			lastCacheClearTimestamp: timestamp,
+		},
+	},
+} );
+
+describe( 'shouldRateLimitAtomicCacheClear', () => {
+	beforeAll( () => {
+		jest.useFakeTimers( 'modern' ).setSystemTime( TIMESTAMP );
+	} );
+
+	afterAll( () => {
+		jest.useRealTimers();
+	} );
+
+	test( 'should return false if there is no stored timestamp', () => {
+		expect( shouldRateLimitAtomicCacheClear( generateState( { timestamp: null } ), SITE_ID ) ).toBe(
+			false
+		);
+	} );
+
+	test( 'should return false if the cache was cleared more than a minute ago', () => {
+		expect(
+			shouldRateLimitAtomicCacheClear(
+				generateState( { timestamp: TIMESTAMP - ONE_MINUTE_IN_MILLISECONDS - ONE_SECOND } ),
+				SITE_ID
+			)
+		).toBe( false );
+	} );
+
+	test( 'should return true if the cache was cleared less than a minute ago', () => {
+		expect(
+			shouldRateLimitAtomicCacheClear(
+				generateState( { timestamp: TIMESTAMP - ONE_MINUTE_IN_MILLISECONDS + ONE_SECOND } ),
+				SITE_ID
+			)
+		).toBe( true );
+	} );
+} );