Skip to content

Commit f5d0bba

Browse files
kangzjkangzj
authored
Revert "Stats: Clean up the Navigation Improvement feature flag (#103753)" (#103820)
This reverts commit 720dcf4.
1 parent 1089e25 commit f5d0bba

File tree

24 files changed

+555
-120
lines changed

24 files changed

+555
-120
lines changed

‎client/blocks/stats-navigation/index.js

Lines changed: 108 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,34 @@ import QueryJetpackModules from 'calypso/components/data/query-jetpack-modules';
1111
import SectionNav from 'calypso/components/section-nav';
1212
import NavItem from 'calypso/components/section-nav/item';
1313
import NavTabs from 'calypso/components/section-nav/tabs';
14+
import version_compare from 'calypso/lib/version-compare';
15+
import { STATS_FEATURE_PAGE_TRAFFIC } from 'calypso/my-sites/stats/constants';
1416
import useNoticeVisibilityMutation from 'calypso/my-sites/stats/hooks/use-notice-visibility-mutation';
1517
import { useNoticeVisibilityQuery } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
18+
import { shouldGateStats } from 'calypso/my-sites/stats/hooks/use-should-gate-stats';
1619
import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
1720
import isGoogleMyBusinessLocationConnectedSelector from 'calypso/state/selectors/is-google-my-business-location-connected';
1821
import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active';
1922
import isSiteStore from 'calypso/state/selectors/is-site-store';
2023
import siteHasFeature from 'calypso/state/selectors/site-has-feature';
21-
import { getSiteOption, isSimpleSite } from 'calypso/state/sites/selectors';
24+
import {
25+
getJetpackStatsAdminVersion,
26+
getSiteOption,
27+
isSimpleSite,
28+
} from 'calypso/state/sites/selectors';
2229
import getSiteAdminUrl from 'calypso/state/sites/selectors/get-site-admin-url';
2330
import {
2431
updateModuleToggles,
2532
requestModuleToggles,
2633
} from 'calypso/state/stats/module-toggles/actions';
2734
import { getModuleToggles } from 'calypso/state/stats/module-toggles/selectors';
28-
import { navItems as allNavItems, intervals as intervalConstants } from './constants';
35+
import {
36+
AVAILABLE_PAGE_MODULES,
37+
navItems as allNavItems,
38+
intervals as intervalConstants,
39+
} from './constants';
2940
import Intervals from './intervals';
41+
import PageModuleToggler from './page-module-toggler';
3042

3143
import './style.scss';
3244

@@ -166,9 +178,26 @@ class StatsNavigation extends Component {
166178
isLegacy: PropTypes.bool,
167179
adminUrl: PropTypes.string,
168180
showLock: PropTypes.bool,
181+
hideModuleSettings: PropTypes.bool,
169182
delayTooltipPresentation: PropTypes.bool,
170183
};
171184

185+
state = {
186+
// Dismiss the tooltip before the API call is finished.
187+
isPageSettingsTooltipDismissed: !! localStorage.getItem(
188+
'notices_dismissed__traffic_page_settings'
189+
),
190+
};
191+
192+
onTooltipDismiss = () => {
193+
if ( this.state.isPageSettingsTooltipDismissed || ! this.props.showSettingsTooltip ) {
194+
return;
195+
}
196+
this.setState( { isPageSettingsTooltipDismissed: true } );
197+
localStorage.setItem( 'notices_dismissed__traffic_page_settings', 1 );
198+
this.props.mutateNoticeVisbilityAsync().finally( this.props.refetchNotices );
199+
};
200+
172201
isValidItem = ( item ) => {
173202
const {
174203
isGoogleMyBusinessLocationConnected,
@@ -216,15 +245,45 @@ class StatsNavigation extends Component {
216245
}
217246

218247
render() {
219-
const { slug, selectedItem, interval, isLegacy, showLock, siteId, adminUrl } = this.props;
248+
const {
249+
slug,
250+
selectedItem,
251+
interval,
252+
isLegacy,
253+
showSettingsTooltip,
254+
statsAdminVersion,
255+
showLock,
256+
hideModuleSettings,
257+
delayTooltipPresentation,
258+
gatedTrafficPage,
259+
siteId,
260+
isStatsNavigationImprovementEnabled,
261+
pageModuleToggles,
262+
adminUrl,
263+
} = this.props;
264+
const { isPageSettingsTooltipDismissed } = this.state;
220265
const { path } = allNavItems[ selectedItem ];
221266
const slugPath = slug ? `/${ slug }` : '';
222267
const pathTemplate = `${ path }/{{ interval }}${ slugPath }`;
223268

224-
const wrapperClass = clsx( 'stats-navigation', 'stats-navigation--improved', {
269+
const wrapperClass = clsx( 'stats-navigation', {
225270
'stats-navigation--modernized': ! isLegacy,
271+
'stats-navigation--improved': isStatsNavigationImprovementEnabled,
226272
} );
227273

274+
// Module settings for Odyssey are not supported until stats-admin@0.9.0-alpha.
275+
const isModuleSettingsSupported =
276+
! config.isEnabled( 'is_running_in_jetpack_site' ) ||
277+
!! ( statsAdminVersion && version_compare( statsAdminVersion, '0.9.0-alpha', '>=' ) );
278+
279+
const shouldRenderModuleToggler =
280+
isModuleSettingsSupported &&
281+
AVAILABLE_PAGE_MODULES[ this.props.selectedItem ] &&
282+
! hideModuleSettings &&
283+
! gatedTrafficPage;
284+
285+
// @TODO: Add loading status of modules settings to avoid toggling modules before they are loaded.
286+
228287
/** @type {Array<keyof typeof allNavItems>} Array of valid navigation item keys */
229288
const navKeys = Object.keys( allNavItems );
230289
const navItems = navKeys.filter( this.isValidItem ).map( ( key ) => {
@@ -250,22 +309,46 @@ class StatsNavigation extends Component {
250309
return (
251310
<div className={ wrapperClass }>
252311
{ siteId && <QueryJetpackModules siteId={ siteId } /> }
253-
<ComponentSwapper
254-
className="full-width"
255-
breakpoint="<480px"
256-
breakpointActiveComponent={
257-
<SelectNav
258-
navItems={ navItems }
259-
selectedItemName={ selectedItem }
260-
isLegacy={ isLegacy }
261-
interval={ interval }
262-
pathTemplate={ pathTemplate }
263-
/>
264-
}
265-
breakpointInactiveComponent={
266-
<TabNav tabs={ navItems } selectedTabName={ selectedItem } />
267-
}
268-
/>
312+
{ isStatsNavigationImprovementEnabled && (
313+
<ComponentSwapper
314+
className="full-width"
315+
breakpoint="<480px"
316+
breakpointActiveComponent={
317+
<SelectNav
318+
navItems={ navItems }
319+
selectedItemName={ selectedItem }
320+
isLegacy={ isLegacy }
321+
interval={ interval }
322+
pathTemplate={ pathTemplate }
323+
/>
324+
}
325+
breakpointInactiveComponent={
326+
<TabNav tabs={ navItems } selectedTabName={ selectedItem } />
327+
}
328+
/>
329+
) }
330+
{ ! isStatsNavigationImprovementEnabled && (
331+
// TODO: remove following SelectNav after 'stats/navigation-improvement' launch.
332+
<SelectNav
333+
navItems={ navItems }
334+
selectedItemName={ selectedItem }
335+
isLegacy={ isLegacy }
336+
interval={ interval }
337+
pathTemplate={ pathTemplate }
338+
/>
339+
) }
340+
341+
{ ! isStatsNavigationImprovementEnabled && shouldRenderModuleToggler && (
342+
<PageModuleToggler
343+
siteId={ siteId }
344+
selectedItem={ selectedItem }
345+
moduleToggles={ pageModuleToggles }
346+
isTooltipShown={
347+
showSettingsTooltip && ! isPageSettingsTooltipDismissed && ! delayTooltipPresentation
348+
}
349+
onTooltipDismiss={ this.onTooltipDismiss }
350+
/>
351+
) }
269352
</div>
270353
);
271354
}
@@ -306,8 +389,13 @@ export default connect(
306389
isSubscriptionsModuleActive: isJetpackModuleActive( state, siteId, 'subscriptions', true ),
307390
siteId,
308391
pageModuleToggles: getModuleToggles( state, siteId, [ selectedItem ] ),
392+
statsAdminVersion: getJetpackStatsAdminVersion( state, siteId ),
309393
adminUrl: getSiteAdminUrl( state, siteId ),
310394
delayTooltipPresentation: shouldDelayTooltipPresentation( state, siteId ),
395+
gatedTrafficPage:
396+
config.isEnabled( 'stats/paid-wpcom-v3' ) &&
397+
shouldGateStats( state, siteId, STATS_FEATURE_PAGE_TRAFFIC ),
398+
isStatsNavigationImprovementEnabled: config.isEnabled( 'stats/navigation-improvement' ),
311399
};
312400
},
313401
{ requestModuleToggles, updateModuleToggles }

‎client/my-sites/google-my-business/stats/index.js

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1+
import config from '@automattic/calypso-config';
12
import { Button, Gridicon } from '@automattic/components';
3+
import { localizeUrl } from '@automattic/i18n-utils';
24
import { CALYPSO_CONTACT } from '@automattic/urls';
35
import { localize } from 'i18n-calypso';
46
import { get } from 'lodash';
57
import PropTypes from 'prop-types';
68
import { Component } from 'react';
79
import { connect } from 'react-redux';
810
import StatsNavigation from 'calypso/blocks/stats-navigation';
11+
import { navItems } from 'calypso/blocks/stats-navigation/constants';
912
import DocumentHead from 'calypso/components/data/document-head';
1013
import QueryKeyringConnections from 'calypso/components/data/query-keyring-connections';
1114
import QueryKeyringServices from 'calypso/components/data/query-keyring-services';
1215
import QuerySiteKeyrings from 'calypso/components/data/query-site-keyrings';
1316
import { withLocalizedMoment } from 'calypso/components/localized-moment';
17+
import NavigationHeader from 'calypso/components/navigation-header';
1418
import Notice from 'calypso/components/notice';
1519
import NoticeAction from 'calypso/components/notice/notice-action';
1620
import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
@@ -192,6 +196,7 @@ class GoogleMyBusinessStats extends Component {
192196

193197
render() {
194198
const { isLocationVerified, locationData, siteId, siteSlug, translate } = this.props;
199+
const isStatsNavigationImprovementEnabled = config.isEnabled( 'stats/navigation-improvement' );
195200

196201
return (
197202
<Main fullWidthLayout>
@@ -207,7 +212,32 @@ class GoogleMyBusinessStats extends Component {
207212
<QueryKeyringServices />
208213

209214
<div className="stats">
210-
<PageHeader />
215+
{ ! isStatsNavigationImprovementEnabled ? (
216+
<NavigationHeader
217+
className="stats__section-header modernized-header"
218+
title={ translate( 'Jetpack Stats' ) }
219+
subtitle={ translate(
220+
'Integrate your business with Google and get stats on your locations. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
221+
{
222+
components: {
223+
learnMoreLink: (
224+
<a
225+
href={ localizeUrl(
226+
'https://wordpress.com/support/google-my-business-integration/#checking-the-impact-of-your-google-my-business-connection'
227+
) }
228+
target="_blank"
229+
rel="noreferrer noopener"
230+
/>
231+
),
232+
},
233+
}
234+
) }
235+
screenReader={ navItems.googleMyBusiness?.label }
236+
></NavigationHeader>
237+
) : (
238+
<PageHeader />
239+
) }
240+
211241
<StatsNavigation selectedItem="googleMyBusiness" siteId={ siteId } slug={ siteSlug } />
212242

213243
{ ! locationData && (

‎client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import useLocationViewsQuery, {
1111
} from 'calypso/my-sites/stats/hooks/use-location-views-query';
1212
import { useShouldGateStats } from 'calypso/my-sites/stats/hooks/use-should-gate-stats';
1313
import StatsCardUpsell from 'calypso/my-sites/stats/stats-card-upsell';
14+
import DownloadCsv from 'calypso/my-sites/stats/stats-download-csv';
15+
import DownloadCsvUpsell from 'calypso/my-sites/stats/stats-download-csv-upsell';
1416
import StatsListCard from 'calypso/my-sites/stats/stats-list/stats-list-card';
1517
import StatsModulePlaceholder from 'calypso/my-sites/stats/stats-module/placeholder';
1618
import {
@@ -25,7 +27,7 @@ import { normalizers } from 'calypso/state/stats/lists/utils';
2527
import { getSelectedSiteId } from 'calypso/state/ui/selectors';
2628
import EmptyModuleCard from '../../../components/empty-module-card/empty-module-card';
2729
import { LOCATIONS_SUPPORT_URL, JETPACK_SUPPORT_URL_TRAFFIC } from '../../../const';
28-
import { STAT_TYPE_COUNTRY_VIEWS } from '../../../constants';
30+
import { STAT_TYPE_COUNTRY_VIEWS, STATS_FEATURE_DOWNLOAD_CSV } from '../../../constants';
2931
import Geochart from '../../../geochart';
3032
import StatsCardUpdateJetpackVersion from '../../../stats-card-upsell/stats-card-update-jetpack-version';
3133
import StatsCardSkeleton from '../shared/stats-card-skeleton';
@@ -50,6 +52,7 @@ interface StatsModuleLocationsProps extends StatsDefaultModuleProps {
5052

5153
const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
5254
initialGeoMode,
55+
period,
5356
query,
5457
summaryUrl,
5558
summary = false,
@@ -70,6 +73,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
7073
return urlGeoMode && urlGeoMode in GEO_MODES ? urlGeoMode : OPTION_KEYS.COUNTRIES;
7174
}, [ query.geoMode, initialGeoMode ] );
7275

76+
const isStatsNavigationImprovementEnabled = config.isEnabled( 'stats/navigation-improvement' );
7377
const [ countryFilter, setCountryFilter ] = useState< string | null >( null );
7478

7579
// Set the state locally to avoid a page being reloaded by URL changes.
@@ -89,6 +93,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
8993

9094
// Use StatsModule to display paywall upsell.
9195
const shouldGateStatsModule = useShouldGateStats( statType );
96+
const shouldGateDownloads = useShouldGateStats( STATS_FEATURE_DOWNLOAD_CSV );
9297
const shouldGateTab = useShouldGateStats( optionLabels[ selectedOption ].feature );
9398
const shouldGate = shouldGateStatsModule || shouldGateTab;
9499
// Mapping plural to singular form where all other places are using.
@@ -216,7 +221,8 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
216221
};
217222

218223
// Need to keep the old tabs on Traffic page.
219-
const toggleControlComponent = ! summary && (
224+
const toggleControlComponent = ( ! summary ||
225+
! config.isEnabled( 'stats/navigation-improvement' ) ) && (
220226
<>
221227
<SimplifiedSegmentedControl
222228
className="stats-module-locations__tabs"
@@ -288,6 +294,32 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
288294

289295
const locationData = showUpsell ? sampleLocations : data;
290296
const hasLocationData = Array.isArray( locationData ) && locationData.length > 0;
297+
const locationCsvData = hasLocationData
298+
? locationData.map( ( item ) => [
299+
typeof item.label === 'string' ? `"${ item.label.replace( /"/g, '""' ) }"` : item.label,
300+
item.value,
301+
] )
302+
: [];
303+
304+
let downloadCsvElement = null;
305+
if ( ! isStatsNavigationImprovementEnabled ) {
306+
downloadCsvElement = shouldGateDownloads ? (
307+
<DownloadCsvUpsell
308+
className="stats-module-locations__download-csv-upsell"
309+
siteId={ siteId }
310+
borderless
311+
/>
312+
) : (
313+
<DownloadCsv
314+
data={ locationCsvData }
315+
path={ `locations-${ geoMode }` }
316+
period={ period }
317+
query={ query }
318+
skipQuery
319+
statType={ statType }
320+
/>
321+
);
322+
}
291323

292324
const heroElementActions = (
293325
<div className="stats-module-locations__actions">
@@ -300,6 +332,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
300332
tooltip={ divisionsTooltip }
301333
/>
302334
) }
335+
{ downloadCsvElement }
303336
</div>
304337
);
305338

@@ -374,6 +407,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
374407
heroElement={ heroElement }
375408
mainItemLabel={ optionLabels[ selectedOption ]?.headerLabel }
376409
toggleControl={ toggleControlComponent }
410+
downloadCsv={ ! shouldGateTab ? downloadCsvElement : null }
377411
showMore={
378412
summaryUrl
379413
? {

‎client/my-sites/stats/features/modules/stats-utm/stats-module-utm.jsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import config from '@automattic/calypso-config';
12
import page from '@automattic/calypso-router';
23
import { StatsCard } from '@automattic/components';
34
import { localizeUrl } from '@automattic/i18n-utils';
@@ -19,6 +20,7 @@ import UTMBuilder from '../../../stats-module-utm-builder';
1920
import { StatsEmptyActionUTMBuilder } from '../shared';
2021
import StatsCardSkeleton from '../shared/stats-card-skeleton';
2122
import UTMDropdown from './stats-module-utm-dropdown';
23+
import UTMExportButton from './utm-export-button';
2224
import '../../../stats-module/style.scss';
2325
import '../../../stats-list/style.scss';
2426

@@ -51,6 +53,7 @@ const StatsModuleUTM = ( {
5153
const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) );
5254
const translate = useTranslate();
5355
const dispatch = useDispatch();
56+
const isStatsNavigationImprovementEnabled = config.isEnabled( 'stats/navigation-improvement' );
5457
const [ selectedOption, setSelectedOption ] = useState( () => {
5558
const utmQueryParam = context.query[ UTM_QUERY_PARAM ];
5659
return Object.values( OPTION_KEYS ).includes( utmQueryParam )
@@ -235,6 +238,11 @@ const StatsModuleUTM = ( {
235238
titleNodes={ titleNodes }
236239
emptyMessage={ <div>{ moduleStrings.empty }</div> }
237240
metricLabel={ metricLabel }
241+
downloadCsv={
242+
! isStatsNavigationImprovementEnabled ? (
243+
<UTMExportButton data={ data } path={ path } period={ period } />
244+
) : null
245+
}
238246
showMore={
239247
displaySummaryLink && ! summary
240248
? {

0 commit comments

Comments
 (0)