Hosting Dashboard: Add Settings Database (#103663)

Author: taipeicoder

client/dashboard/app/router.tsx

@@ -152,6 +152,17 @@ const siteSettingsSubscriptionGiftingRoute = createRoute( {
 	)
 );
 
+const siteSettingsDatabaseRoute = createRoute( {
+	getParentRoute: () => siteRoute,
+	path: 'settings/database',
+} ).lazy( () =>
+	import( '../sites/settings-database' ).then( ( d ) =>
+		createLazyRoute( 'site-settings-database' )( {
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
+		} )
+	)
+);
+
 const siteSettingsWordPressRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: 'settings/wordpress',
@@ -345,6 +356,7 @@ const createRouteTree = ( config: AppConfig ) => {
 				siteSettingsRoute,
 				siteSettingsSiteVisibilityRoute,
 				siteSettingsSubscriptionGiftingRoute,
+				siteSettingsDatabaseRoute,
 				siteSettingsWordPressRoute,
 				siteSettingsTransferSiteRoute,
 			] )

client/dashboard/data/index.ts

@@ -14,6 +14,7 @@ import type {
 	BasicMetricsData,
 	SiteSettings,
 	UrlPerformanceInsights,
+	PhpMyAdminToken,
 } from './types';
 
 export const fetchProfile = async (): Promise< Profile > => {
@@ -371,3 +372,10 @@ export const fetchPerformanceInsights = async (
 		{ url, advance: '1', hash: token }
 	);
 };
+
+export const fetchPhpMyAdminToken = async ( siteIdOrSlug: string ): Promise< PhpMyAdminToken > => {
+	return wpcom.req.post( {
+		path: `/sites/${ siteIdOrSlug }/hosting/pma/token`,
+		apiNamespace: 'wpcom/v2',
+	} );
+};

client/dashboard/data/types.ts

@@ -169,3 +169,7 @@ export interface UrlPerformanceInsights {
 		status: string;
 	};
 }
+
+export interface PhpMyAdminToken {
+	token: string;
+}

client/dashboard/sites/settings-database/index.tsx

@@ -0,0 +1,93 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Button,
+	Card,
+	CardBody,
+	Notice,
+} from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from 'react';
+import { siteQuery } from '../../app/queries';
+import PageLayout from '../../components/page-layout';
+import { fetchPhpMyAdminToken } from '../../data';
+import SettingsPageHeader from '../settings-page-header';
+import type { Site } from '../../data/types';
+
+export function canOpenPhpMyAdmin( site: Site ) {
+	return site.is_wpcom_atomic;
+}
+
+export default function SiteDatabaseSettings( { siteSlug }: { siteSlug: string } ) {
+	const { data: site } = useQuery( siteQuery( siteSlug ) );
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const [ isFetchingToken, setIsFetchingToken ] = useState( false );
+
+	if ( ! site || ! canOpenPhpMyAdmin( site ) ) {
+		return null;
+	}
+
+	const handleOpenPhpMyAdmin = async () => {
+		setIsFetchingToken( true );
+
+		try {
+			const { token } = await fetchPhpMyAdminToken( siteSlug );
+			if ( ! token ) {
+				throw new Error( 'No token found' );
+			}
+
+			window.open( `https://wordpress.com/pma-login?token=${ token }` );
+		} catch {
+			createErrorNotice( __( 'Failed to fetch phpMyAdmin token.' ), { type: 'snackbar' } );
+		}
+
+		setIsFetchingToken( false );
+	};
+
+	return (
+		<PageLayout
+			size="small"
+			header={
+				<SettingsPageHeader
+					title={ __( 'Database' ) }
+					description={ __(
+						'For the tech-savvy, manage your database with phpMyAdmin and run a wide range of operations with MySQL.'
+					) }
+				/>
+			}
+		>
+			<Card>
+				<CardBody>
+					<VStack spacing={ 4 }>
+						<VStack spacing={ 2 }>
+							<Text size="15px" weight={ 500 } lineHeight="20px">
+								phpMyAdmin
+							</Text>
+							<Text variant="muted" lineHeight="20px">
+								{ __(
+									'phpMyAdmin is a free open source software tool that allows you to administer your site’s MySQL database over the Web.'
+								) }
+							</Text>
+						</VStack>
+						<VStack>
+							<Notice isDismissible={ false }>
+								{ __(
+									'Managing a database can be tricky and it’s not necessary for your site to function.'
+								) }
+							</Notice>
+						</VStack>
+						<HStack justify="flex-start" expanded={ false } as="span">
+							<Button variant="primary" isBusy={ isFetchingToken } onClick={ handleOpenPhpMyAdmin }>
+								{ __( 'Open phpMyAdmin ↗' ) }
+							</Button>
+						</HStack>
+					</VStack>
+				</CardBody>
+			</Card>
+		</PageLayout>
+	);
+}

client/dashboard/sites/settings-database/summary.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { blockTable } from '@wordpress/icons';
+import RouterLinkSummaryButton from '../../components/router-link-summary-button';
+import { canOpenPhpMyAdmin } from './index';
+import type { Site } from '../../data/types';
+
+export default function DatabaseSettingsSummary( { site }: { site: Site } ) {
+	if ( ! canOpenPhpMyAdmin( site ) ) {
+		return null;
+	}
+
+	return (
+		<RouterLinkSummaryButton
+			to={ `/sites/${ site.slug }/settings/database` }
+			title={ __( 'Database' ) }
+			density="medium"
+			decoration={ <Icon icon={ blockTable } /> }
+		/>
+	);
+}

client/dashboard/sites/settings/index.tsx

@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
 import { siteQuery, siteSettingsQuery } from '../../app/queries';
 import { PageHeader } from '../../components/page-header';
 import PageLayout from '../../components/page-layout';
+import DatabaseSettingsSummary from '../settings-database/summary';
 import SiteVisibilitySettingsSummary from '../settings-site-visibility/summary';
 import SubscriptionGiftingSettingsSummary from '../settings-subscription-gifting/summary';
 import WordPressSettingsSummary from '../settings-wordpress/summary';
@@ -34,6 +35,7 @@ export default function SiteSettings( { siteSlug }: { siteSlug: string } ) {
 			<Heading>{ __( 'Server' ) }</Heading>
 			<Card>
 				<VStack>
+					<DatabaseSettingsSummary site={ site } />
 					<WordPressSettingsSummary site={ site } />
 				</VStack>
 			</Card>