Merge branch 'develop' into enhancement/9162-top-device-driving-purch…

…ases-kmw.
google · Oct 22, 2024 · b108dc6 · b108dc6
2 parents 70cf41d + 8a891c4
commit b108dc6
Show file tree

Hide file tree

Showing 393 changed files with 1,065 additions and 356 deletions.
diff --git a/assets/js/components/KeyMetrics/MetricTileNumeric.stories.js b/assets/js/components/KeyMetrics/MetricTileNumeric.stories.js
@@ -71,6 +71,48 @@ ZeroChange.scenario = {
  delay: 250,
 };
 
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+ title: 'New Visitors',
+ metricValue: 0,
+ subText: 'of 0 total visitors',
+ currentValue: 0,
+ previousValue: 0,
+};
+// Since the "Zero" state is similar for all "numeric" KMW tiles, this should be
+// the sole scenario and should not be added to any other "numeric" type KMW components.
+ZeroData.scenario = {
+ label: 'KeyMetrics/MetricTileNumeric/ZeroData',
+ delay: 250,
+};
+
+export const Loading = Template.bind( {} );
+Loading.storyName = 'Loading';
+Loading.args = {
+ title: 'New Visitors',
+ metricValue: 0,
+ subText: 'of 0 total visitors',
+ currentValue: 0,
+ previousValue: 0,
+ loading: true,
+};
+// Since the "Loading" state is the same for all KMW tiles, this is the sole scenario
+// and should not be added to any other generic `MetricTile___` or KMW component.
+Loading.scenario = {
+ label: 'KeyMetrics/MetricTileNumeric/Loading',
+};
+Loading.decorators = [
+ ( Story ) => {
+ // Ensure the animation is paused for VRT tests to correctly capture the loading state.
+ return (
+ <div className="googlesitekit-vrt-animation-paused">
+ <Story />
+ </div>
+ );
+ },
+];
+
 export default {
  title: 'Key Metrics/WidgetTiles/MetricTileNumeric',
  component: MetricTileNumeric,

diff --git a/assets/js/components/KeyMetrics/MetricTileTable.stories.js b/assets/js/components/KeyMetrics/MetricTileTable.stories.js
@@ -104,6 +104,8 @@ ZeroData.args = {
  return <div>No data available</div>;
  },
 };
+// Since the "Zero" state is similar for all "tabular" KMW tiles, this should be
+// the sole scenario and should not be added to any other "table" type KMW components.
 ZeroData.scenario = {
  label: 'KeyMetrics/MetricTileTable/ZeroData',
  delay: 250,

diff --git a/assets/js/components/KeyMetrics/MetricTileText.stories.js b/assets/js/components/KeyMetrics/MetricTileText.stories.js
@@ -71,6 +71,22 @@ ZeroChange.scenario = {
  delay: 250,
 };
 
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+ title: 'Most engaged traffic source',
+ metricValue: '-',
+ subText: '0% of engaged sessions',
+ currentValue: 0,
+ previousValue: 0,
+};
+// Since the "Zero" state is similar for all "textual" KMW tiles, this should be
+// the sole scenario and should not be added to any other "text" type KMW components.
+ZeroData.scenario = {
+ label: 'KeyMetrics/MetricTileText/ZeroData',
+ delay: 250,
+};
+
 export const Loading = Template.bind( {} );
 Loading.storyName = 'Loading';
 Loading.args = {

diff --git a/assets/js/modules/adsense/components/widgets/TopEarningContentWidget.stories.js b/assets/js/modules/adsense/components/widgets/TopEarningContentWidget.stories.js
@@ -163,10 +163,6 @@ ZeroData.args = {
  } );
  },
 };
-ZeroData.scenario = {
- label: 'KeyMetrics/TopEarningContentWidget/ZeroData',
- delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -192,10 +188,6 @@ Error.args = {
  ] );
  },
 };
-Error.scenario = {
- label: 'KeyMetrics/PopularContent/Error',
- delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -221,10 +213,6 @@ InsufficientPermissions.args = {
  ] );
  },
 };
-InsufficientPermissions.scenario = {
- label: 'KeyMetrics/PopularContent/InsufficientPermissions',
- delay: 250,
-};
 
 export const AdSenseNotLinked = Template.bind( {} );
 AdSenseNotLinked.storyName = 'AdSense Not Linked';

diff --git a/...cs-4/components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.js b/...cs-4/components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.js
@@ -93,7 +93,7 @@ export default function AudienceTile( {
  );
  const isAudiencePartialData = useInViewSelect(
  ( select ) => {
- if ( isSiteKitAudience ) {
+ if ( isSiteKitAudience || isPropertyPartialData === undefined ) {
  return false;
  }
 
@@ -108,11 +108,18 @@ export default function AudienceTile( {
  [ isPropertyPartialData, isSiteKitAudience, audienceResourceName ]
  );
  const isTopContentPartialData = useInViewSelect(
- ( select ) =>
- ! isAudiencePartialData &&
- select( MODULES_ANALYTICS_4 ).isCustomDimensionPartialData(
- 'googlesitekit_post_type'
- ),
+ ( select ) => {
+ if ( isPropertyPartialData === undefined ) {
+ return false;
+ }
+
+ return (
+ ! isAudiencePartialData &&
+ select( MODULES_ANALYTICS_4 ).isCustomDimensionPartialData(
+ 'googlesitekit_post_type'
+ )
+ );
+ },
  [ isAudiencePartialData ]
  );
 

diff --git a/...ponents/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.stories.js b/...ponents/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.stories.js
@@ -246,6 +246,10 @@ AudiencePartialData.args = {
  .dispatch( MODULES_ANALYTICS_4 )
  .receiveIsGatheringData( false );
 
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ propertyID: '12345',
+ } );
+
  const { startDate } = registry.select( CORE_USER ).getDateRangeDates( {
  offsetDays: DATE_RANGE_OFFSET,
  } );
@@ -261,7 +265,9 @@ AudiencePartialData.args = {
  [ audienceResourceName ]: dataAvailabilityDate,
  },
  customDimension: {},
- property: {},
+ property: {
+ 12345: 20201218,
+ },
  } );
  },
 };
@@ -280,6 +286,10 @@ TopContentPartialData.args = {
  .dispatch( MODULES_ANALYTICS_4 )
  .receiveIsGatheringData( false );
 
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ propertyID: '12345',
+ } );
+
  const { startDate } = registry.select( CORE_USER ).getDateRangeDates( {
  offsetDays: DATE_RANGE_OFFSET,
  } );
@@ -295,7 +305,9 @@ TopContentPartialData.args = {
  customDimension: {
  googlesitekit_post_type: dataAvailabilityDate,
  },
- property: {},
+ property: {
+ 12345: 20201218,
+ },
  } );
  },
 };

diff --git a/...components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.test.js b/...components/audience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/index.test.js
@@ -176,14 +176,20 @@ describe( 'AudienceTile', () => {
  .dispatch( MODULES_ANALYTICS_4 )
  .receiveIsGatheringData( false );
 
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ propertyID: '12345',
+ } );
+
  registry
  .dispatch( MODULES_ANALYTICS_4 )
  .receiveResourceDataAvailabilityDates( {
  audience: {
  [ audienceResourceName ]: 20201220,
  },
  customDimension: {},
- property: {},
+ property: {
+ 12345: 20201218,
+ },
  } );
  } );
 
@@ -198,6 +204,27 @@ describe( 'AudienceTile', () => {
  expect( container ).toMatchSnapshot();
  } );
 
+ describe( 'Partial data badge', () => {
+ it( 'should not display partial data badge for tile or top content metrics when property is in partial state', () => {
+ registry
+ .dispatch( MODULES_ANALYTICS_4 )
+ .receiveIsGatheringData( true );
+
+ const { container } = render(
+ <WidgetWithComponentProps { ...props } />,
+ {
+ registry,
+ }
+ );
+
+ expect(
+ container.querySelector(
+ '.googlesitekit-audience-segmentation-partial-data-badge'
+ )
+ ).toBeNull();
+ } );
+ } );
+
  describe( 'AudienceErrorModal', () => {
  it( 'should show the OAuth error modal when the required scopes are not granted', () => {
  provideSiteInfo( registry, {

diff --git a/...ents/audience-segmentation/dashboard/AudienceTilesWidget/__snapshots__/index.test.js.snap b/...ents/audience-segmentation/dashboard/AudienceTilesWidget/__snapshots__/index.test.js.snap
@@ -66,16 +66,11 @@ exports[`AudienceTilesWidget should not render audiences that are not available
  class="googlesitekit-widget__body"
  >
  <div
- class="googlesitekit-audience-segmentation-tile googlesitekit-audience-segmentation-tile--partial-data"
+ class="googlesitekit-audience-segmentation-tile"
  >
  <div
  class="googlesitekit-audience-segmentation-tile__metrics"
  >
- <span
- class="googlesitekit-audience-segmentation-partial-data-notice"
- >
- Still collecting full data for this timeframe, partial data is displayed for this group
- </span>
  <div
  class="googlesitekit-audience-segmentation-tile-metric"
  >
@@ -352,6 +347,11 @@ exports[`AudienceTilesWidget should not render audiences that are not available
  42
  </div>
  </div>
+ <span
+ class="googlesitekit-audience-segmentation-partial-data-notice"
+ >
+ Still collecting full data for this timeframe, partial data is displayed for this metric
+ </span>
  </div>
  </div>
  </div>
@@ -1005,16 +1005,11 @@ exports[`AudienceTilesWidget should render when all configured audiences are mat
  class="googlesitekit-widget__body"
  >
  <div
- class="googlesitekit-audience-segmentation-tile googlesitekit-audience-segmentation-tile--partial-data"
+ class="googlesitekit-audience-segmentation-tile"
  >
  <div
  class="googlesitekit-audience-segmentation-tile__metrics"
  >
- <span
- class="googlesitekit-audience-segmentation-partial-data-notice"
- >
- Still collecting full data for this timeframe, partial data is displayed for this group
- </span>
  <div
  class="googlesitekit-audience-segmentation-tile-metric"
  >
@@ -1291,6 +1286,11 @@ exports[`AudienceTilesWidget should render when all configured audiences are mat
  42
  </div>
  </div>
+ <span
+ class="googlesitekit-audience-segmentation-partial-data-notice"
+ >
+ Still collecting full data for this timeframe, partial data is displayed for this metric
+ </span>
  </div>
  </div>
  </div>
@@ -1370,16 +1370,11 @@ exports[`AudienceTilesWidget should render when configured audience is matching
  class="googlesitekit-widget__body"
  >
  <div
- class="googlesitekit-audience-segmentation-tile googlesitekit-audience-segmentation-tile--partial-data"
+ class="googlesitekit-audience-segmentation-tile"
  >
  <div
  class="googlesitekit-audience-segmentation-tile__metrics"
  >
- <span
- class="googlesitekit-audience-segmentation-partial-data-notice"
- >
- Still collecting full data for this timeframe, partial data is displayed for this group
- </span>
  <div
  class="googlesitekit-audience-segmentation-tile-metric"
  >
@@ -1656,6 +1651,11 @@ exports[`AudienceTilesWidget should render when configured audience is matching
  42
  </div>
  </div>
+ <span
+ class="googlesitekit-audience-segmentation-partial-data-notice"
+ >
+ Still collecting full data for this timeframe, partial data is displayed for this metric
+ </span>
  </div>
  </div>
  </div>

diff --git a/...alytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/index.stories.js b/...alytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/index.stories.js
@@ -449,6 +449,10 @@ DefaultAudiencesPartialData.args = {
  getPreviousDate( startDate, -1 ).replace( /-/g, '' )
  );
 
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ propertyID: '12345',
+ } );
+
  registry
  .dispatch( MODULES_ANALYTICS_4 )
  .receiveResourceDataAvailabilityDates( {
@@ -457,7 +461,9 @@ DefaultAudiencesPartialData.args = {
  'properties/12345/audiences/2': dataAvailabilityDate,
  },
  customDimension: {},
- property: {},
+ property: {
+ 12345: 20200101,
+ },
  } );
  },
 };
@@ -483,6 +489,10 @@ SiteKitAudiencesPartialData.args = {
  getPreviousDate( startDate, -1 ).replace( /-/g, '' )
  );
 
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ propertyID: '12345',
+ } );
+
  registry
  .dispatch( MODULES_ANALYTICS_4 )
  .receiveResourceDataAvailabilityDates( {
@@ -491,7 +501,9 @@ SiteKitAudiencesPartialData.args = {
  'properties/12345/audiences/4': dataAvailabilityDate,
  },
  customDimension: {},
- property: {},
+ property: {
+ 12345: 20200101,
+ },
  } );
 
  availableAudiences

diff --git a/.../analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/index.test.js b/.../analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/index.test.js
@@ -241,6 +241,9 @@ describe( 'AudienceTilesWidget', () => {
  registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
  availableCustomDimensions: [ 'googlesitekit_post_type' ],
  } );
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ propertyID: '12345',
+ } );
  registry
  .dispatch( MODULES_ANALYTICS_4 )
  .receiveResourceDataAvailabilityDates( {
@@ -249,7 +252,9 @@ describe( 'AudienceTilesWidget', () => {
  return acc;
  }, {} ),
  customDimension: {},
- property: {},
+ property: {
+ 12345: 20201218,
+ },
  } );
  } );