Merge trunk

Automattic · Jun 12, 2024 · 85ff515 · 85ff515
2 parents 9b3b938 + ab15580
commit 85ff515
Show file tree

Hide file tree

Showing 17 changed files with 324 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
 	"author": "Automattic Inc.",
 	"private": true,
 	"productName": "Studio",
-	"version": "1.0.4-beta1",
+	"version": "1.0.4-beta2",
 	"description": "Local WordPress development environment using Playgrounds",
 	"license": "GPL-2.0-or-later",
 	"main": ".webpack/main",
@@ -115,6 +115,7 @@
 		"hpagent": "1.2.0",
 		"react-markdown": "^9.0.1",
 		"semver": "^7.6.0",
+		"sudo-prompt": "^9.2.1",
 		"unzipper": "0.10.11",
 		"wpcom": "^5.4.2",
 		"yargs": "17.7.2"

diff --git a/src/__mocks__/electron.ts b/src/__mocks__/electron.ts
@@ -1,6 +1,7 @@
 export const ipcMain = {
 	emit: jest.fn(),
 	on: jest.fn(),
+	handle: jest.fn(),
 };
 
 export const app = {
@@ -16,6 +17,7 @@ export const app = {
 	setAppLogsPath: jest.fn(),
 	setAsDefaultProtocolClient: jest.fn(),
 	enableSandbox: jest.fn(),
+	getSystemLocale: jest.fn(),
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -50,3 +52,12 @@ export const autoUpdater = {
 	setFeedURL: jest.fn(),
 	on: jest.fn(),
 };
+
+export const session = {
+	defaultSession: {
+		setPermissionRequestHandler: jest.fn(),
+		webRequest: {
+			onHeadersReceived: jest.fn(),
+		},
+	},
+};
diff --git a/src/about-menu/about-menu.html b/src/about-menu/about-menu.html
@@ -78,24 +78,19 @@
 <body> 
   <div>  
     <img src="./studio-app-icon.png" alt="Studio App Icon" width="64" height="64">
-        <p class="studio-name">Studio by WordPress.com</p>
-        <p class="version">Version <span id="version"></span></p>
+        <p class="studio-name" id="studio-by-wpcom">Studio by WordPress.com</p>
+        <p class="version"><span id="version-text">Version x.y.z</span></p>
         <p class="links">
           <a href="https://github.com/Automattic/studio" target="_blank">GitHub</a>
           <span class="separator">&middot;</span>
-          <a href="https://github.com/Automattic/studio/issues/new/choose" target="_blank">Share Feedback</a>
+          <a id="share-feedback" href="https://github.com/Automattic/studio/issues/new/choose" target="_blank">Share Feedback</a>
         </p>
   </div>
-    <script>
-        // Access the version from the injected JavaScript
-        const version = document.getElementById('version');
-        version.innerText = window.appVersion; 
-    </script>
   <div class="info">
-    <p>Demo sites powered by<br><a href="https://wordpress.com/hosting/?utm_source=studio&utm_medium=referral&utm_campaign=about_screen" target="_blank">WordPress.com hosting ↗</a></p>
+    <p><span id="demo-sites">Demo sites powered by</span><br><a href="https://wordpress.com/hosting/?utm_source=studio&utm_medium=referral&utm_campaign=about_screen" target="_blank">WordPress.com hosting ↗</a></p>
   </div>
   <div class="info">
-    <p>Local sites powered by<br><a href="https://wordpress.org/playground/" target="_blank">WordPress Playground ↗</a></p>
+    <p><span id="local-sites">Local sites powered by</span><br><a href="https://wordpress.org/playground/" target="_blank">WordPress Playground ↗</a></p>
   </div>
 </body>
 </html>
diff --git a/src/about-menu/open-about-menu.ts b/src/about-menu/open-about-menu.ts
@@ -1,5 +1,7 @@
 import { BrowserWindow, app, shell } from 'electron';
 import path from 'path';
+import * as Sentry from '@sentry/electron/renderer';
+import { sprintf, __ } from '@wordpress/i18n';
 import { ABOUT_WINDOW_HEIGHT, ABOUT_WINDOW_WIDTH } from '../constants';
 
 let aboutWindow: BrowserWindow | null = null;
@@ -35,17 +37,31 @@ export function openAboutWindow() {
 	// Read package.json and pass version to about window
 	const packageJson = app.getVersion();
 
+	function escapeSingleQuotes( str: string ) {
+		return str.replace( /'/g, "\\'" );
+	}
+
 	aboutWindow.webContents.on( 'dom-ready', () => {
 		if ( aboutWindow ) {
-			// Inject version into the about window's HTML
-			aboutWindow.webContents
-				.executeJavaScript( `document.getElementById('version').innerText = '${ packageJson }'` )
-				.catch( ( err ) => {
-					console.error( 'Error executing JavaScript:', err );
-				} );
+			const versionText = sprintf( __( 'Version %s' ), packageJson );
+			const studioByWpcomText = escapeSingleQuotes( __( 'Studio by WordPress.com' ) );
+			const shareFeedbackText = escapeSingleQuotes( __( 'Share Feedback' ) );
+			const demoSitesText = escapeSingleQuotes( __( 'Demo sites powered by' ) );
+			const localSitesText = escapeSingleQuotes( __( 'Local sites powered by' ) );
+
+			const script = `
+				document.getElementById('studio-by-wpcom').innerText = '${ studioByWpcomText }';
+				document.getElementById('version-text').innerText = '${ versionText }';
+				document.getElementById('share-feedback').innerText = '${ shareFeedbackText }';
+				document.getElementById('demo-sites').innerText = '${ demoSitesText }';
+				document.getElementById('local-sites').innerText = '${ localSitesText }';
+			`;
+			aboutWindow.webContents.executeJavaScript( script ).catch( ( err ) => {
+				Sentry.captureException( err );
+				console.error( 'Error executing JavaScript:', err );
+			} );
 		}
 	} );
-
 	aboutWindow.on( 'closed', () => {
 		aboutWindow = null;
 	} );

diff --git a/src/components/content-tab-assistant.tsx b/src/components/content-tab-assistant.tsx
@@ -180,7 +180,7 @@ export const Message = ( {
 						{ children }
 					</code>
 				</div>
-				<div className="p-3 mt-1 flex justify-start items-center">
+				<div className="p-3 pt-1 flex justify-start items-center">
 					<ActionButton
 						primaryLabel={ __( 'Copy' ) }
 						secondaryLabel={ __( 'Copied' ) }
@@ -209,7 +209,7 @@ export const Message = ( {
 				) }
 			</>
 		) : (
-			<div className="p-3">
+			<div className="inline-block">
 				<code className={ className } { ...props }>
 					{ children }
 				</code>
@@ -218,11 +218,17 @@ export const Message = ( {
 	};
 
 	return (
-		<div className={ cx( 'flex mt-4', isUser ? 'justify-end' : 'justify-start', className ) }>
+		<div
+			className={ cx(
+				'flex mt-4',
+				isUser ? 'justify-end md:ml-24' : 'justify-start md:mr-24',
+				className
+			) }
+		>
 			<div
 				className={ cx(
-					'inline-block p-3 rounded-sm border border-gray-300 lg:max-w-[70%] select-text whitespace-pre-wrap',
-					! isUser && 'bg-white'
+					'inline-block p-3 rounded border border-gray-300 lg:max-w-[70%] select-text',
+					! isUser ? 'bg-white' : 'bg-white/45'
 				) }
 			>
 				{ typeof children === 'string' ? (

diff --git a/src/components/onboarding.tsx b/src/components/onboarding.tsx
@@ -72,6 +72,14 @@ export default function Onboarding() {
 	const handleSubmit = useCallback(
 		async ( event: FormEvent ) => {
 			event.preventDefault();
+
+			// Prompt the user to enable optimizations on Windows
+			try {
+				await getIpcApi().promptWindowsSpeedUpSites( { skipIfAlreadyPrompted: true } );
+			} catch ( error ) {
+				console.error( error );
+			}
+
 			try {
 				await handleAddSiteClick();
 				speak( siteAddedMessage );

diff --git a/src/index.css b/src/index.css
@@ -87,82 +87,120 @@ blockquote {
 	width: 100%;
 }
 
+/* Assistant messages */
 .assistant-markdown {
-	line-height: 1.6;
+	line-height: 1.4;
 	word-wrap: break-word;
 }
 
+.assistant-markdown a {
+	color: #3858E9;
+}
+
+.assistant-markdown a:hover,
+.assistant-markdown a:focus {
+	color: #2145E6;
+	text-decoration: underline;
+}
+
 .assistant-markdown blockquote {
-	font-weight: bold;
-	margin: 1rem 0;
+	background-color: theme( 'colors.a8c-gray.0' );
+	border-radius: 2px;
+	margin: 0 0 1rem;
 	padding: 0.5rem 1rem;
 }
 
+.assistant-markdown blockquote > blockquote {
+	background-color: theme( 'colors.a8c-gray.5' );
+	margin: 0;
+}
+
+.assistant-markdown p {
+	margin: 0 0 1rem;
+}
+
 .assistant-markdown code {
-	background-color: #f8f8f2;
+	background-color: theme( 'colors.a8c-gray.0' );
 	color: #1D2327;
 	font-family: 'Courier New', Courier, monospace;
 	font-size: 13px;
 	padding: 0.25rem;
 	white-space: pre-wrap;
+	border-radius: 2px;
 }
 
 .assistant-markdown pre {
-	background-color: #1D2327;
+	background-color: theme( 'colors.a8c-gray.90' );
 	border-radius: 5px;
-	margin: 0.5rem 0;
+	margin: 0 0 1rem 0;
 	overflow-x: auto;
 }
 
 .assistant-markdown pre code {
 	background-color: transparent;
-	color: #f8f8f2;
+	color: theme( 'colors.a8c-gray.0' );
 	padding: 0;
 }
 
+.assistant-markdown h1,
+.assistant-markdown h2,
+.assistant-markdown h3,
+.assistant-markdown h4,
+.assistant-markdown h5,
+.assistant-markdown h6 {
+	margin: 1rem 0 .5rem 0;
+}
+
 .assistant-markdown h1 {
-	font-size: 1.5rem;
-	font-weight: bold;
+	font-size: 1.2rem;
+	font-weight: 500;
 }
 
 .assistant-markdown h2 {
-	font-size: 1.25rem;
-	font-weight: bold;
+	font-size: 1.1rem;
+	font-weight: 600;
 }
 
 .assistant-markdown h3 {
-	font-size: 1.125rem;
-	font-weight: bold;
-}
-
-.assistant-markdown h4 {
 	font-size: 1rem;
 	font-weight: bold;
 }
 
-.assistant-markdown h5 {
-	font-size: 0.875rem;
-	font-weight: bold;
-}
-
+.assistant-markdown h4,
+.assistant-markdown h5,
 .assistant-markdown h6 {
-	font-size: 0.85rem;
+	font-size: 0.875rem;
 	font-weight: bold;
 }
 
 .assistant-markdown hr {
 	border: none;
+	border-top: 1px solid theme( 'colors.a8c-gray.5' );
 	margin: 1rem 0;
 }
 
 .assistant-markdown ol {
 	list-style-type: decimal;
-	margin: 1rem 0;
+	margin: 0 0 1rem;
 	padding-left: 1.5rem;
 }
 
 .assistant-markdown ul {
 	list-style-type: disc;
-	margin: 1rem 0;
+	margin: 0 0 1rem;
 	padding-left: 1.5rem;
-}
+}
+
+.assistant-markdown li {
+	margin-bottom: 0.25rem;
+}
+.assistant-markdown li:last-child {
+	margin-bottom: 0;
+}
+
+.assistant-markdown pre:last-child,
+.assistant-markdown p:last-child,
+.assistant-markdown ol:last-child,
+.assistant-markdown ul:last-child {
+	margin-bottom: 0;
+}