@automattic/launchpad 1.2.3 → 1.2.4

package/dist/types/action-components/share-site-modal/index.d.ts

@@ -6,6 +6,6 @@ interface ShareSiteModalProps {
     site: SiteDetails | null;
     task: Task | null;
 }
-declare const ShareSiteModal: ({ setModalIsOpen, site, task }: ShareSiteModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ShareSiteModal: ({ setModalIsOpen, site, task }: ShareSiteModalProps) => import("react").JSX.Element;
 export default ShareSiteModal;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/action-components/share-site-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/action-components/share-site-modal/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,cAAc,CAAC;AAEtB,UAAU,mBAAmB;IAC5B,cAAc,EAAE,CAAE,MAAM,EAAE,OAAO,KAAM,IAAI,CAAC;IAC5C,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB;AAkHD,QAAA,MAAM,cAAc,GAAK,gCAAgC,mBAAmB,4CA8H3E,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/action-components/share-site-modal/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,cAAc,CAAC;AAEtB,UAAU,mBAAmB;IAC5B,cAAc,EAAE,CAAE,MAAM,EAAE,OAAO,KAAM,IAAI,CAAC;IAC5C,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB;AAkHD,QAAA,MAAM,cAAc,GAAK,gCAAgC,mBAAmB,gCAoH3E,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/types/checklist/index.d.ts

@@ -7,6 +7,6 @@ interface Props {
     children?: ReactElement<ComponentProps<typeof ChecklistItem>> | ReactElement<ComponentProps<typeof ChecklistItem>>[];
 }
 declare const Checklist: FC<Props>;
-export declare const Placeholder: () => import("react/jsx-runtime").JSX.Element;
+export declare const Placeholder: () => import("react").JSX.Element;
 export default Checklist;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/checklist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checklist/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,aAA0D,MAAM,mBAAmB,CAAC;AAC3F,OAAO,cAAc,CAAC;AAEtB,UAAU,KAAK;IACd,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EACN,YAAY,CAAE,cAAc,CAAE,OAAO,aAAa,CAAE,CAAE,GACtD,YAAY,CAAE,cAAc,CAAE,OAAO,aAAa,CAAE,CAAE,EAAE,CAAC;CAC5D;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAE,KAAK,CA6BzB,CAAC;AAEF,eAAO,MAAM,WAAW,+CASvB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checklist/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAChG,OAAO,aAA0D,MAAM,mBAAmB,CAAC;AAC3F,OAAO,cAAc,CAAC;AAEtB,UAAU,KAAK;IACd,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EACN,YAAY,CAAE,cAAc,CAAE,OAAO,aAAa,CAAE,CAAE,GACtD,YAAY,CAAE,cAAc,CAAE,OAAO,aAAa,CAAE,CAAE,EAAE,CAAC;CAC5D;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAE,KAAK,CA6BzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/checklist-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checklist-item/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,cAAc,CAAC;AAEtB,UAAU,KAAK;IACd,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAE,KAAK,CA8I7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAQzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checklist-item/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,cAAc,CAAC;AAEtB,UAAU,KAAK;IACd,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAE,KAAK,CAkJ7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAQzB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/types/launchpad.d.ts

@@ -9,6 +9,6 @@ type LaunchpadProps = {
     onPostFilterTasks?: (tasks: Task[]) => Task[];
     highlightNextAction?: boolean;
 };
-declare const Launchpad: ({ siteSlug, checklistSlug, launchpadContext, onSiteLaunched, onTaskClick, onPostFilterTasks, highlightNextAction, }: LaunchpadProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Launchpad: ({ siteSlug, checklistSlug, launchpadContext, onSiteLaunched, onTaskClick, onPostFilterTasks, highlightNextAction, }: LaunchpadProps) => import("react").JSX.Element | null;
 export default Launchpad;
 //# sourceMappingURL=launchpad.d.ts.map

package/dist/types/launchpad.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"launchpad.d.ts","sourceRoot":"","sources":["../../src/launchpad.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,UAAU,mBAAwD,CAAC;AAEhF,KAAK,cAAc,GAAG;IACrB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,EAAE,CAAC;IAChD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,SAAS,GAAK,qHAQjB,cAAc,mDAkEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"launchpad.d.ts","sourceRoot":"","sources":["../../src/launchpad.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,UAAU,mBAAwD,CAAC;AAEhF,KAAK,cAAc,GAAG;IACrB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,EAAE,CAAC;IAChD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,SAAS,GAAK,qHAQjB,cAAc,uCAkEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/setup-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup-actions.d.ts","sourceRoot":"","sources":["../../src/setup-actions.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAe/D,eAAO,MAAM,oBAAoB,GAAK,0EAOnC,yBAAyB,KAAI,IAAI,EAoJnC,CAAC"}
+{"version":3,"file":"setup-actions.d.ts","sourceRoot":"","sources":["../../src/setup-actions.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAe/D,eAAO,MAAM,oBAAoB,GAAK,0EAOnC,yBAAyB,KAAI,IAAI,EA0JnC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/launchpad",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Launchpad components.",
   "homepage": "https://github.com/Automattic/wp-calypso",
   "license": "GPL-2.0-or-later",
@@ -39,21 +39,18 @@
   },
   "dependencies": {
     "@automattic/calypso-analytics": "^1.1.5",
-    "@automattic/calypso-config": "^1.0.0-alpha.0",
-    "@automattic/components": "^3.0.4",
-    "@automattic/data-stores": "^3.2.1",
-    "@automattic/i18n-utils": "^1.2.4",
+    "@automattic/data-stores": "^3.2.2",
+    "@automattic/i18n-utils": "^1.3.0",
     "@automattic/typography": "^1.0.0",
     "@automattic/viewport": "^1.1.1",
     "@tanstack/react-query": "^5.83.0",
     "@wordpress/base-styles": "^9.1.0",
     "@wordpress/components": "^35.0.0",
     "@wordpress/icons": "^13.3.0",
-    "@wordpress/url": "^4.48.0",
+    "@wordpress/ui": "^0.17.0",
     "clsx": "^2.1.1",
     "social-logos": "^3.1.18",
     "tslib": "^2.8.1",
-    "utility-types": "^3.10.0",
     "wpcom-proxy-request": "^7.0.7"
   },
   "devDependencies": {
@@ -63,7 +60,7 @@
     "@storybook/addon-a11y": "^9.1.20",
     "msw": "^2.1.7",
     "msw-storybook-addon": "2.0.7",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^9.1.20",

package/src/action-components/share-site-modal/index.tsx

@@ -1,5 +1,4 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import { Popover } from '@automattic/components';
 import { updateLaunchpadSettings } from '@automattic/data-stores';
 import { useQueryClient } from '@tanstack/react-query';
 import {
@@ -12,7 +11,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { copy, share, check } from '@wordpress/icons';
-import { useState, useRef, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { SocialLogo } from 'social-logos';
 import type { Task } from '../../types';
 import type { SiteDetails } from '@automattic/data-stores';
@@ -127,7 +126,7 @@ const getShareData = ( site: SiteDetails | null ) => {
 	return {
 		title: siteSlug,
 		text: sprintf(
-			/* translators: siteSlug is the short form of the site URL with the https:// */
+			/* translators: %(siteSlug)s is the short form of the site URL with the https:// */
 			__( 'Please visit my site: %(siteSlug)s', 'launchpad' ),
 			{
 				siteSlug,
@@ -158,7 +157,6 @@ const ShareSiteModal = ( { setModalIsOpen, site, task }: ShareSiteModalProps ) =
 	);
 
 	const [ clipboardCopied, setClipboardCopied ] = useState( false );
-	const clipboardTextEl = useRef( null );
 	const copyHandler = () => {
 		navigator.clipboard.writeText( shareData.url );
 		setClipboardCopied( true );
@@ -204,20 +202,11 @@ const ShareSiteModal = ( { setModalIsOpen, site, task }: ShareSiteModalProps ) =
 		>
 			<VStack className="share-site-modal__modal-content" spacing={ 4 }>
 				<VStack className="share-site-modal__modal-actions" spacing={ 4 }>
-					<Popover
-						className="share-site-modal__popover"
-						isVisible={ clipboardCopied }
-						context={ clipboardTextEl.current }
-						position="top"
-					>
-						{ __( 'Copied to clipboard!', 'launchpad' ) }
-					</Popover>
 					<InputControl
 						className="share-site-modal__modal-input-container"
 						__next40pxDefaultSize
 						value={ shareData.title }
 						label={ __( 'Site URL', 'launchpad' ) }
-						ref={ clipboardTextEl }
 						readOnly
 						hideLabelFromVision
 						suffix={

package/src/action-components/share-site-modal/style.scss

@@ -45,22 +45,3 @@
 		text-decoration: underline;
 	}
 }
-
-.share-site-modal__popover {
-	outline: none;
-	z-index: 100000;
-	.popover__inner {
-		border: 0;
-		box-shadow: none;
-		border-radius: 2px;
-		color: var(--color-text-inverted);
-		background: var(--color-neutral-60);
-		font-size: $font-body-extra-small;
-		padding: 6px 10px;
-		text-align: left;
-	}
-
-	.popover__arrow {
-		display: none;
-	}
-}

package/src/checklist-item/index.tsx

@@ -1,7 +1,7 @@
-import { Badge } from '@automattic/components';
 import { Button, Icon } from '@wordpress/components';
 import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { check, chevronLeft, chevronRight } from '@wordpress/icons';
+import { Badge } from '@wordpress/ui';
 import clsx from 'clsx';
 import type { Task, Expandable } from '../types';
 import type { FC, Key } from 'react';
@@ -137,7 +137,11 @@ const ChecklistItem: FC< Props > = ( {
 						<span className="screen-reader-text">{ getStatusText() }</span>
 						<span aria-hidden="true">{ title }</span>
 					</span>
-					{ task.badge_text ? <Badge type="info-blue">{ task.badge_text }</Badge> : null }
+					{ task.badge_text ? (
+						<Badge className="badge" intent="informational">
+							{ String( task.badge_text ) }
+						</Badge>
+					) : null }
 					{ shouldDisplayTaskCounter && (
 						<span className="checklist-item__counter">
 							{ task.repetition_count }/{ task.target_repetitions }

package/src/setup-actions.ts

@@ -1,7 +1,6 @@
 import { updateLaunchpadSettings } from '@automattic/data-stores';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { isMobile } from '@automattic/viewport';
-import { addQueryArgs } from '@wordpress/url';
 import wpcomRequest from 'wpcom-proxy-request';
 import type { LaunchpadTaskActionsProps, Task } from './types';
 
@@ -38,8 +37,14 @@ export const setUpActionsForTasks = ( {
 		const hasCalypsoPath = task.calypso_path !== undefined;
 
 		if ( uiContext === 'calypso' && hasCalypsoPath ) {
-			if ( task.id === 'drive_traffic' && ! isMobile() && hasCalypsoPath ) {
-				task.calypso_path = addQueryArgs( task.calypso_path, { tour: 'marketingConnectionsTour' } );
+			const { calypso_path } = task;
+			if ( task.id === 'drive_traffic' && ! isMobile() && calypso_path !== undefined ) {
+				// Merge the query via a throwaway base, but keep the original string as the base so
+				// absolute origins survive, then re-append any fragment.
+				const params = new URL( calypso_path, 'http://example.com' ).searchParams;
+				params.set( 'tour', 'marketingConnectionsTour' );
+				const [ baseAndQuery, fragment = '' ] = calypso_path.split( /(#.*)/s );
+				task.calypso_path = `${ baseAndQuery.split( '?' )[ 0 ] }?${ params }${ fragment }`;
 			}
 
 			// Enable task in 'calypso' context

package/src/test/setup-actions.ts

@@ -0,0 +1,44 @@
+/**
+ * @jest-environment jsdom
+ */
+import { setUpActionsForTasks } from '../setup-actions';
+import type { LaunchpadTaskActionsProps } from '../types';
+
+jest.mock( '@automattic/viewport', () => ( { isMobile: jest.fn( () => false ) } ) );
+jest.mock( '@automattic/data-stores', () => ( { updateLaunchpadSettings: jest.fn() } ) );
+
+const runDriveTraffic = ( calypso_path: string ) => {
+	const props: LaunchpadTaskActionsProps = {
+		siteSlug: 'example.wordpress.com',
+		tasks: [ { id: 'drive_traffic', completed: false, disabled: false, calypso_path } ],
+		tracksData: {
+			checklistSlug: 'test',
+			launchpadContext: 'test',
+			recordTracksEvent: jest.fn(),
+			tasklistCompleted: false,
+		},
+		extraActions: {},
+		uiContext: 'calypso',
+	};
+	return setUpActionsForTasks( props )[ 0 ].calypso_path;
+};
+
+describe( 'setUpActionsForTasks: drive_traffic tour query arg', () => {
+	it( 'appends the tour arg to a relative path', () => {
+		expect( runDriveTraffic( '/marketing/connections/example.wordpress.com' ) ).toBe(
+			'/marketing/connections/example.wordpress.com?tour=marketingConnectionsTour'
+		);
+	} );
+
+	it( 'preserves the origin and existing query of an absolute URL', () => {
+		expect( runDriveTraffic( 'https://example.com/wp-admin/admin.php?page=jetpack-social' ) ).toBe(
+			'https://example.com/wp-admin/admin.php?page=jetpack-social&tour=marketingConnectionsTour'
+		);
+	} );
+
+	it( 'keeps the fragment after the query', () => {
+		expect( runDriveTraffic( '/marketing/connections/example.wordpress.com#section' ) ).toBe(
+			'/marketing/connections/example.wordpress.com?tour=marketingConnectionsTour#section'
+		);
+	} );
+} );