Skip to content

Commit

Permalink
Merge branch 'develop' into enhancement/9135-selection-panel-8-select…
Browse files Browse the repository at this point in the history
…ion.
  • Loading branch information
tofumatt committed Oct 9, 2024
2 parents 877e3bd + 14f36cc commit a2a949c
Show file tree
Hide file tree
Showing 234 changed files with 4,431 additions and 642 deletions.
11 changes: 11 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,17 @@
"off"
]
}
},
{
"files": [
"webpack/*",
"**/__factories__/*",
"*.stories.js",
"*.test.js"
],
"rules": {
"sitekit/no-direct-date": "off"
}
}
],
"plugins": [
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/e2e-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ jobs:
wp_version: ['latest', 'nightly']
include:
- amp_version: '1.5.5'
wp_version: '5.2.16'
wp_version: '5.2.21'
env:
AMP_VERSION: ${{ matrix.amp_version }}
WP_VERSION: ${{ matrix.wp_version }}
Expand Down
32 changes: 25 additions & 7 deletions .github/workflows/zips.yml
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,6 @@ on:
description: Release version
required: false
default: ''
dry_run:
type: boolean
description: Run the publishing process without committing.
required: false
default: false

concurrency:
group: zips-${{ github.event_name }}-${{ github.ref }}
Expand Down Expand Up @@ -223,6 +218,31 @@ jobs:
edit-mode: replace
body: Build files for ${{ github.event.pull_request.head.sha }} have been deleted.

dryrun-publish-to-wporg:
name: '[DRY RUN] Publish to WordPress.org'
runs-on: ubuntu-latest
# environment: do not define to omit SVN credentials + deployment protection rules for this dry-run.
if: github.event_name == 'workflow_dispatch' && ( github.ref_type == 'tag' || inputs.release_version != '' )
needs: build-zips
timeout-minutes: 20
steps:
- uses: actions/download-artifact@v4
with:
name: zip-files
path: /tmp
- name: Extract
run: |
unzip /tmp/google-site-kit.zip
- uses: 10up/[email protected]
with:
dry-run: true
env:
BUILD_DIR: ./google-site-kit
SLUG: google-site-kit
SVN_PASSWORD: no-op-password
SVN_USERNAME: no-op-username
VERSION: ${{ inputs.release_version }}

publish-to-wporg:
name: Publish to WordPress.org
runs-on: ubuntu-latest
Expand All @@ -239,8 +259,6 @@ jobs:
run: |
unzip /tmp/google-site-kit.zip
- uses: 10up/[email protected]
with:
dry-run: ${{ inputs.dry_run }}
env:
BUILD_DIR: ./google-site-kit
SLUG: google-site-kit
Expand Down
9 changes: 8 additions & 1 deletion .storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,14 @@ export const decorators = [
}

return (
<WithTestRegistry features={ features } route={ route }>
<WithTestRegistry
features={ features }
route={ route }
// Expose registry as global for tinkering.
callback={ ( registry ) => {
global.registry = registry;
} }
>
<Story />
</WithTestRegistry>
);
Expand Down
4 changes: 4 additions & 0 deletions assets/js/components/GoogleChart/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@ export default function GoogleChart( props ) {

// Only use markers if the date is within the current date range.
const dateMarkersInRange = dateMarkers.filter( ( dateMarker ) => {
// Valid use of `new Date()` with an argument.
// eslint-disable-next-line sitekit/no-direct-date
return isDateWithinRange( new Date( dateMarker.date ) );
} );

Expand All @@ -260,6 +262,8 @@ export default function GoogleChart( props ) {

// Add the dotted line and tooltip for each date marker.
dateMarkersInRange.forEach( ( dateMarker, index ) => {
// Valid use of `new Date()` with an argument.
// eslint-disable-next-line sitekit/no-direct-date
const dateFromMarker = new Date( dateMarker.date );

const chartLine = document.getElementById(
Expand Down
3 changes: 3 additions & 0 deletions assets/js/components/Header.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
provideModules,
provideUserAuthentication,
provideUserInfo,
waitForTimeouts,
} from '../../../tests/js/test-utils';
import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../googlesitekit/constants';
import { CORE_USER } from '../googlesitekit/datastore/user/constants';
Expand Down Expand Up @@ -82,5 +83,7 @@ describe( 'Header', () => {
expect( container.firstChild ).toHaveClass(
'googlesitekit-header--has-subheader'
);

await act( () => waitForTimeouts( 30 ) );
} );
} );
5 changes: 4 additions & 1 deletion assets/js/components/KeyMetrics/ChangeMetricsLink.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
provideUserAuthentication,
} from '../../../../tests/js/utils';
import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
import { KM_ANALYTICS_NEW_VISITORS } from '../../googlesitekit/datastore/user/constants';
import ChangeMetricsLink from './ChangeMetricsLink';

function Template() {
Expand All @@ -43,7 +44,9 @@ export default {
( Story ) => {
const setupRegistry = ( registry ) => {
provideUserAuthentication( registry );
provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
provideKeyMetrics( registry, {
widgetSlugs: [ KM_ANALYTICS_NEW_VISITORS ],
} );
};

return (
Expand Down
21 changes: 16 additions & 5 deletions assets/js/components/KeyMetrics/ChangeMetricsLink.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
} from '../../../../tests/js/mock-survey-endpoints';
import { CORE_UI } from '../../googlesitekit/datastore/ui/constants';
import { KEY_METRICS_SELECTION_PANEL_OPENED_KEY } from './constants';
import { KM_ANALYTICS_LEAST_ENGAGING_PAGES } from '../../googlesitekit/datastore/user/constants';
import ChangeMetricsLink from './ChangeMetricsLink';

describe( 'ChangeMetricsLink', () => {
Expand Down Expand Up @@ -74,17 +75,23 @@ describe( 'ChangeMetricsLink', () => {
} );

it( 'should render a button to change metrics', () => {
provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
provideKeyMetrics( registry, {
widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
} );

const { queryByRole } = render( <ChangeMetricsLink />, { registry } );
const { queryByRole } = render( <ChangeMetricsLink />, {
registry,
} );

const button = queryByRole( 'button' );
expect( button ).toBeInTheDocument();
expect( button ).toHaveTextContent( 'Change metrics' );
} );

it( 'should set UI store key correctly when button is clicked', () => {
provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
provideKeyMetrics( registry, {
widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
} );

registry
.dispatch( CORE_UI )
Expand All @@ -104,7 +111,9 @@ describe( 'ChangeMetricsLink', () => {
} );

it( 'should trigger a survey when viewed', async () => {
provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
provideKeyMetrics( registry, {
widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
} );
provideSiteInfo( registry, { keyMetricsSetupCompletedBy: 1 } );
mockSurveyEndpoints();

Expand All @@ -120,7 +129,9 @@ describe( 'ChangeMetricsLink', () => {
} );

it( 'should trigger two surveys when the key metrics setup is completed by current user', async () => {
provideKeyMetrics( registry, { widgetSlugs: [ 'metricA' ] } );
provideKeyMetrics( registry, {
widgetSlugs: [ KM_ANALYTICS_LEAST_ENGAGING_PAGES ],
} );
provideSiteInfo( registry, { keyMetricsSetupCompletedBy: 1 } );
provideUserInfo( registry, { id: 1 } );
fetchMock.post( surveyTriggerEndpoint, {
Expand Down
60 changes: 51 additions & 9 deletions assets/js/components/KeyMetrics/KeyMetricsCTAContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { useIntersection } from 'react-use';
import { useWindowWidth } from '@react-hook/window-size/throttled';

/**
* WordPress dependencies
Expand All @@ -34,11 +35,18 @@ import { useEffect, useRef, useState } from '@wordpress/element';
import { useSelect, useDispatch } from 'googlesitekit-data';
import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
import { BREAKPOINT_SMALL, useBreakpoint } from '../../hooks/useBreakpoint';
import {
useBreakpoint,
BREAKPOINT_TABLET,
BREAKPOINT_SMALL,
} from '../../hooks/useBreakpoint';
import { WEEK_IN_SECONDS, trackEvent } from '../../util';
import useViewContext from '../../hooks/useViewContext';
import { Cell, Grid, Row } from '../../material-components';
import GhostCardsSVG from './GhostCards';
import KeyMetricsSetupDesktopSVG from './KeyMetricsSetupDesktopSVG';
import KeyMetricsSetupSmallDesktopSVG from './KeyMetricsSetupSmallDesktopSVG';
import KeyMetricsSetupTabletSVG from './KeyMetricsSetupTabletSVG';
import KeyMetricsSetupMobileSVG from './KeyMetricsSetupMobileSVG';

export default function KeyMetricsCTAContent( {
className,
Expand All @@ -49,8 +57,27 @@ export default function KeyMetricsCTAContent( {
} ) {
const trackingRef = useRef();
const breakpoint = useBreakpoint();
const onlyWidth = useWindowWidth();
const viewContext = useViewContext();
const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
let isTabletBreakpoint =
breakpoint === BREAKPOINT_TABLET && onlyWidth < 960;
// onlyWidth is used directly here since BREAKPOINT_XLARGE only
// accounts for screens that are over 1280px and current layout graphic should
// show on the screens starting from size of 1280px and over.
const isDesktopBreakpoint = onlyWidth >= 1280;
// Also here, BREAKPOINT_DESKTOP accounts for screens over 960, in this particular case
// graphic should be shown on screens starting from 960px.
let isSmallDesktopBreakpoint = onlyWidth >= 960 && onlyWidth < 1280;

if ( ! ga4Connected ) {
// When 4 metrics were selected and then GA4 was disconnected
// the full width disconnected banner can display desktop layout
// graphic, since it has very short text.
isTabletBreakpoint =
breakpoint === BREAKPOINT_TABLET && onlyWidth < 800;
isSmallDesktopBreakpoint = onlyWidth >= 800 && onlyWidth < 1280;
}

const intersectionEntry = useIntersection( trackingRef, {
threshold: 0.25,
Expand Down Expand Up @@ -99,30 +126,45 @@ export default function KeyMetricsCTAContent( {
>
<Grid>
<Row>
<Cell smSize={ 6 } mdSize={ 5 } lgSize={ 6 }>
<Cell
smSize={ 5 }
mdSize={ 6 }
lgSize={ 5 }
className="googlesitekit-widget-key-metrics-content__wrapper"
>
<div className="googlesitekit-widget-key-metrics-text__wrapper">
<h3 className="googlesitekit-publisher-win__title">
{ title }
</h3>
<p>{ description }</p>
</div>
<div className="googlesitekit-widget-key-metrics-actions__wrapper">
{ actions }
</div>
{ isTabletBreakpoint && (
<Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
<KeyMetricsSetupTabletSVG />
</Cell>
) }
{ isMobileBreakpoint && (
<Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
<GhostCardsSVG />
<KeyMetricsSetupMobileSVG />
</Cell>
) }
<div className="googlesitekit-widget-key-metrics-actions__wrapper">
{ actions }
</div>
</Cell>
{ ! isMobileBreakpoint && (
{ isSmallDesktopBreakpoint && (
<Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
<KeyMetricsSetupSmallDesktopSVG />
</Cell>
) }
{ isDesktopBreakpoint && (
<Cell
className="googlesitekit-widget-key-metrics-svg__wrapper"
smSize={ 6 }
mdSize={ 3 }
lgSize={ 6 }
>
<GhostCardsSVG />
<KeyMetricsSetupDesktopSVG />
</Cell>
) }
</Row>
Expand Down
22 changes: 19 additions & 3 deletions assets/js/components/KeyMetrics/KeyMetricsCTAFooter.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,28 @@ import { __ } from '@wordpress/i18n';
import { Cell, Row } from '../../material-components';
import Link from '../Link';

export default function KeyMetricsCTAFooter( { onActionClick = () => {} } ) {
export default function KeyMetricsCTAFooter( {
onActionClick = () => {},
showDismiss,
} ) {
return (
<Row className="googlesitekit-widget-key-metrics-footer">
<Cell size={ 12 }>
<Cell
size={ 12 }
className="googlesitekit-widget-key-metrics-footer__cta-wrapper"
>
{ ! showDismiss && (
<p>
{ __(
'Intereseted in specific metrics?',
'google-site-kit'
) }
</p>
) }
<Link onClick={ onActionClick }>
{ __( 'Maybe later', 'google-site-kit' ) }
{ showDismiss
? __( 'Maybe later', 'google-site-kit' )
: __( 'Select your own metrics', 'google-site-kit' ) }
</Link>
</Cell>
</Row>
Expand Down
12 changes: 11 additions & 1 deletion assets/js/components/KeyMetrics/KeyMetricsNewBadge.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,12 @@ import { __ } from '@wordpress/i18n';
import { useSelect } from 'googlesitekit-data';
import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
import Badge from '../Badge';
import { isFeatureEnabled } from '../../features';

export default function KeyMetricsNewBadge() {
const conversionReportingEnabled = isFeatureEnabled(
'conversionReporting'
);
// This is necessary to conditionally render the badge
// as this component is used in a context where `select` is not in scope.
const isKeyMetricsSetupNew = useSelect( ( select ) =>
Expand All @@ -50,7 +54,13 @@ export default function KeyMetricsNewBadge() {
}
}, [ initialKeyMetricsSetupCompleted, isKeyMetricsSetupCompleted ] );

if ( ! isNew ) {
// In new ACR design "New" badge is shown only initially before
// KMW is setup, afterwards, "New" badge is not visible anymore.
if ( conversionReportingEnabled && isKeyMetricsSetupCompleted ) {
return null;
}

if ( ! isNew && ! conversionReportingEnabled ) {
return null;
}

Expand Down
Loading

0 comments on commit a2a949c

Please sign in to comment.