Merge branch 'develop'.

assets/js/components/Badge.js

@@ -22,14 +22,23 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-const Badge = ( { label, className, hasLeftSpacing = false } ) => (
-	<span
-		className={ classnames( 'googlesitekit-badge', className, {
-			'googlesitekit-badge--has-left-spacing': hasLeftSpacing,
-		} ) }
-	>
-		{ label }
-	</span>
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+const Badge = forwardRef(
+	( { label, className, hasLeftSpacing = false, ...rest }, ref ) => (
+		<span
+			ref={ ref }
+			{ ...rest }
+			className={ classnames( 'googlesitekit-badge', className, {
+				'googlesitekit-badge--has-left-spacing': hasLeftSpacing,
+			} ) }
+		>
+			{ label }
+		</span>
+	)
 );
 
 Badge.displayName = 'Badge';

assets/js/components/DashboardMainApp.js

@@ -24,7 +24,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
+import { useMount } from 'react-use';
 
 /**
  * Internal dependencies
@@ -46,6 +47,7 @@ import DateRangeSelector from './DateRangeSelector';
 import HelpMenu from './help/HelpMenu';
 import BannerNotifications from './notifications/BannerNotifications';
 import SurveyViewTrigger from './surveys/SurveyViewTrigger';
+import CurrentSurveyPortal from './surveys/CurrentSurveyPortal';
 import ScrollEffect from './ScrollEffect';
 import {
 	ANCHOR_ID_CONTENT,
@@ -60,11 +62,18 @@ import { useFeature } from '../hooks/useFeature';
 import useViewOnly from '../hooks/useViewOnly';
 const { useSelect } = Data;
 
-function DashboardMainApp() {
+export default function DashboardMainApp() {
+	const [ showSurveyPortal, setShowSurveyPortal ] = useState( false );
+
 	const dashboardSharingEnabled = useFeature( 'dashboardSharing' );
 	const userInputEnabled = useFeature( 'userInput' );
 	const viewOnlyDashboard = useViewOnly();
 
+	useMount( () => {
+		// Render the current survey portal in 5 seconds after the initial rendering.
+		setTimeout( () => setShowSurveyPortal( true ), 5000 );
+	} );
+
 	const viewableModules = useSelect( ( select ) => {
 		if ( ! viewOnlyDashboard ) {
 			return null;
@@ -195,8 +204,8 @@ function DashboardMainApp() {
 				triggerID="view_dashboard"
 				ttl={ DAY_IN_SECONDS }
 			/>
+
+			{ showSurveyPortal && <CurrentSurveyPortal /> }
 		</Fragment>
 	);
 }
-
-export default DashboardMainApp;

assets/js/components/DataBlock/index.js

@@ -53,6 +53,7 @@ const DataBlock = ( {
 	invertChangeColor = false,
 	gatheringData = false,
 	gatheringDataNoticeStyle = NOTICE_STYLE.DEFAULT,
+	badge,
 } ) => {
 	const handleClick = useCallback( () => {
 		if ( ! gatheringData && handleStatSelection ) {
@@ -106,6 +107,7 @@ const DataBlock = ( {
 					"
 				>
 					{ title }
+					{ badge }
 				</h3>
 
 				{ ! gatheringData && (
@@ -163,6 +165,7 @@ DataBlock.propTypes = {
 	invertChangeColor: PropTypes.bool,
 	gatheringData: PropTypes.bool,
 	gatheringDataNoticeStyle: PropTypes.oneOf( Object.values( NOTICE_STYLE ) ),
+	badge: PropTypes.node,
 };
 
 export default DataBlock;

assets/js/components/NewBadge.js

@@ -0,0 +1,70 @@
+/**
+ * NewBadge component.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Tooltip } from 'googlesitekit-components';
+import Badge from './Badge';
+import Link from './Link';
+
+function NewBadge( { tooltipTitle, learnMoreLink, forceOpen } ) {
+	return (
+		<Tooltip
+			tooltipClassName="googlesitekit-new-badge__tooltip"
+			title={
+				<Fragment>
+					{ tooltipTitle }
+					<br />
+					<Link href={ learnMoreLink } external>
+						{ __( 'Learn more', 'google-site-kit' ) }
+					</Link>
+				</Fragment>
+			}
+			placement="top"
+			enterTouchDelay={ 0 }
+			leaveTouchDelay={ 5000 }
+			interactive
+			open={ forceOpen }
+		>
+			<Badge
+				className="googlesitekit-new-badge"
+				label={ __( 'New', 'google-site-kit' ) }
+			/>
+		</Tooltip>
+	);
+}
+
+NewBadge.propTypes = {
+	tooltipTitle: PropTypes.string.isRequired,
+	learnMoreLink: PropTypes.string.isRequired,
+	forceOpen: PropTypes.bool,
+};
+
+export default NewBadge;

assets/js/components/NewBadge.stories.js

@@ -0,0 +1,70 @@
+/**
+ * NewBadge Component Stories.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import NewBadge from './NewBadge';
+
+const Template = ( args ) => <NewBadge { ...args } />;
+
+export const NewBadgeDefault = Template.bind( {} );
+NewBadgeDefault.storyName = 'Default';
+NewBadgeDefault.args = {
+	tooltipTitle: 'This is a tooltip title',
+	learnMoreLink: 'https://www.google.com',
+};
+
+export const NewBadgeLongTitle = Template.bind( {} );
+NewBadgeLongTitle.storyName = 'Long Title';
+NewBadgeLongTitle.args = {
+	tooltipTitle:
+		'This is a tooltip title that is very long and will wrap to multiple lines. This should still display as a single paragraph and the link will be displayed under the title.',
+	learnMoreLink: 'https://www.google.com',
+};
+
+export const NewBadgeForceOpen = Template.bind( {} );
+NewBadgeForceOpen.storyName = 'Force Open';
+NewBadgeForceOpen.args = {
+	tooltipTitle:
+		'This is a tooltip that is forced to be open all the time using the forceOpen prop. This is useful for testing the tooltip in Storybook.',
+	learnMoreLink: 'https://www.google.com',
+	forceOpen: true,
+};
+NewBadgeForceOpen.scenario = {
+	label: 'Global/NewBadge',
+};
+
+export default {
+	title: 'Components/NewBadge',
+	component: NewBadge,
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'flex-end',
+					height: '200px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};

assets/js/components/ReportTable.js

@@ -77,6 +77,7 @@ export default function ReportTable( {
 									primary,
 									hideOnMobile,
 									className: columnClassName,
+									badge,
 								},
 								colIndex
 							) => (
@@ -94,6 +95,7 @@ export default function ReportTable( {
 									key={ `googlesitekit-table__head-row-${ colIndex }` }
 								>
 									{ title }
+									{ badge }
 								</th>
 							)
 						) }
@@ -191,6 +193,7 @@ ReportTable.propTypes = {
 			field: PropTypes.string,
 			hideOnMobile: PropTypes.bool,
 			Component: PropTypes.componentType,
+			badge: PropTypes.node,
 		} )
 	).isRequired,
 	className: PropTypes.string,

assets/js/components/ReportTable.stories.js

@@ -29,6 +29,7 @@ import {
 	provideModuleRegistrations,
 	WithTestRegistry,
 } from '../../../tests/js/utils';
+import NewBadge from './NewBadge';
 
 const Template = ( args ) => <ReportTable { ...args } />;
 
@@ -92,6 +93,32 @@ ReportTableGatheringData.args = {
 	gatheringData: true,
 };
 
+export const ReportTableWithNewBadge = Template.bind( {} );
+ReportTableWithNewBadge.storyName = 'With New Badge';
+ReportTableWithNewBadge.args = {
+	rows: [],
+	columns: [
+		{
+			title: 'Title 1',
+			field: 'title1',
+		},
+		{
+			title: 'Title 2',
+			field: 'title2',
+			badge: (
+				<NewBadge
+					tooltipTitle="Tooltip title for the badge in the table header."
+					learnMoreLink="#"
+				/>
+			),
+		},
+		{
+			title: 'Title 3',
+			field: 'title3',
+		},
+	],
+};
+
 export default {
 	title: 'Components/ReportTable',
 	component: ReportTable,

assets/js/components/Root/index.js

@@ -44,7 +44,6 @@ import { enabledFeatures } from '../../features';
 import PermissionsModal from '../PermissionsModal';
 import RestoreSnapshots from '../RestoreSnapshots';
 import { FeatureToursDesktop } from '../FeatureToursDesktop';
-import CurrentSurveyPortal from '../surveys/CurrentSurveyPortal';
 import { Provider as ViewContextProvider } from './ViewContextContext';
 import InViewProvider from '../InViewProvider';
 import { isSiteKitScreen } from '../../util/is-site-kit-screen';
@@ -78,7 +77,6 @@ export default function Root( { children, registry, viewContext = null } ) {
 										{ viewContext && (
 											<FeatureToursDesktop />
 										) }
-										<CurrentSurveyPortal />
 									</RestoreSnapshots>
 									{ isSiteKitScreen( viewContext ) && (
 										<PermissionsModal />