-
Notifications
You must be signed in to change notification settings - Fork 286
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhance/#8138 - Add the Audiences Widget Area happy path view #8672
Conversation
Build files for aab48f8 have been deleted. |
Size Change: +36.6 kB (+2.49%) Total Size: 1.5 MB
ℹ️ View Unchanged
|
Add loaded prop.
Pass loaded prop to AudienceTile.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work here, thank you @hussain-t !
While the code mostly looks good, I'm not able to fully test the behaviour of the tiles as the dashboard immediately crashes as soon as the report requests complete for the audience tiles.
Error
An error occurred while running 'mapSelect': A valid set of dimension names and values is required.
at ContentLinkComponent (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/AudienceTilePagesMetric.js:68:25)
at div
at div
at div
at div
at AudienceTilePagesMetric (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/AudienceTilePagesMetric.js:55:23)
at div
at div
at div
at div
at eval (webpack-internal:///./assets/js/googlesitekit/widgets/components/Widget.js:38:23)
at AudienceTile (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/index.js:73:21)
at div
at div
at div
at eval (webpack-internal:///./assets/js/googlesitekit/widgets/components/Widget.js:38:23)
at AudienceTilesWidget (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget.js:73:21)
at WhenActiveComponent (webpack-internal:///./assets/js/util/when-active.js:58:20)
at WidgetRenderer (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetRenderer.js:61:19)
at div
at Cell (webpack-internal:///./assets/js/material-components/layout/Cell.js:45:25)
at WidgetCellWrapper (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetCellWrapper.js:39:30)
at div
at eval (webpack-internal:///./assets/js/material-components/layout/Row.js:44:24)
at div
at div
at eval (webpack-internal:///./assets/js/material-components/layout/Grid.js:44:24)
at WidgetAreaRenderer (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js:97:19)
at div
at WidgetContextRenderer (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetContextRenderer.js:52:18)
at DashboardMainApp (webpack-internal:///./assets/js/components/DashboardMainApp.js:112:106)
at DashboardEntryPoint (webpack-internal:///./assets/js/components/DashboardEntryPoint.js:47:30)
at RestoreSnapshots (webpack-internal:///./assets/js/components/RestoreSnapshots/index.js:47:23)
at ErrorHandler (webpack-internal:///./assets/js/components/ErrorHandler/index.js:77:81)
at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:42:24)
at Root (webpack-internal:///./assets/js/components/Root/index.js:66:23)
overrideMethod @ console.js:273
useSelect @ index.js:127
ContentLinkComponent @ AudienceTilePagesMetric.js:62
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
onStoreChange @ index.js:160
eval @ index.js:176
eval @ registry.js:76
globalListener @ registry.js:75
eval @ index.js:155
dispatch @ redux.js:306
s @ VM51034:3
eval @ index.js:30
eval @ promise-middleware.js:25
eval @ resolvers-cache-middleware.js:54
_callee$ @ index.js:349
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
setTimeout (async)
_callee2$ @ index.js:338
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
_fulfillSelector @ index.js:366
fulfillSelector @ index.js:306
selectorResolver @ index.js:369
eval @ report.js:395
eval @ report.js:395
selector @ factory.js:21
eval @ index.js:116
runSelector @ index.js:243
eval @ AudienceTilesWidget.js:188
useSelect @ index.js:113
AudienceTilesWidget @ AudienceTilesWidget.js:188
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
onStoreChange @ index.js:160
eval @ index.js:176
eval @ registry.js:76
globalListener @ registry.js:75
eval @ index.js:155
dispatch @ redux.js:306
s @ VM51034:3
eval @ index.js:30
eval @ promise-middleware.js:25
eval @ resolvers-cache-middleware.js:54
dispatch @ redux.js:700
unhandledActionControl @ runtime.js:57
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
Promise.then (async)
eval @ runtime.js:43
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
any @ builtin.js:15
eval @ create.js:47
next @ create.js:46
unhandledActionControl @ runtime.js:58
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
any @ builtin.js:15
eval @ create.js:47
next @ create.js:46
unhandledActionControl @ runtime.js:58
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
iterate @ create.js:51
runtime @ create.js:73
iterator @ builtin.js:90
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
eval @ runtime.js:45
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
iterate @ create.js:51
runtime @ create.js:73
eval @ runtime.js:66
eval @ runtime.js:65
eval @ index.js:33
eval @ promise-middleware.js:25
eval @ resolvers-cache-middleware.js:54
_callee3$ @ index.js:431
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
fulfillResolver @ index.js:393
_callee$ @ index.js:346
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
setTimeout (async)
_callee2$ @ index.js:338
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
_fulfillSelector @ index.js:366
fulfillSelector @ index.js:306
selectorResolver @ index.js:369
eval @ audience-settings.js:258
selector @ factory.js:21
eval @ index.js:116
runSelector @ index.js:243
eval @ AudienceSegmentationSetupSuccessSubtleNotification.js:47
useSelect @ index.js:113
AudienceSegmentationSetupSuccessSubtleNotification @ AudienceSegmentationSetupSuccessSubtleNotification.js:47
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
_callee$ @ index.js:40
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
eval @ index.js:37
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
performSyncWorkOnRoot @ react-dom.development.js:21737
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
onStoreChange @ index.js:160
eval @ index.js:176
eval @ registry.js:76
globalListener @ registry.js:75
eval @ index.js:155
dispatch @ redux.js:306
s @ VM51034:3
eval @ index.js:30
eval @ promise-middleware.js:25
eval @ resolvers-cache-middleware.js:54
dispatch @ redux.js:700
unhandledActionControl @ runtime.js:57
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
Promise.then (async)
eval @ runtime.js:43
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
any @ builtin.js:15
eval @ create.js:47
next @ create.js:46
unhandledActionControl @ runtime.js:58
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
any @ builtin.js:15
eval @ create.js:47
next @ create.js:46
unhandledActionControl @ runtime.js:58
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
iterate @ create.js:51
runtime @ create.js:73
iterator @ builtin.js:90
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
eval @ runtime.js:45
eval @ create.js:47
next @ create.js:46
eval @ create.js:38
iterate @ create.js:51
runtime @ create.js:73
eval @ runtime.js:66
eval @ runtime.js:65
eval @ index.js:33
eval @ promise-middleware.js:25
eval @ resolvers-cache-middleware.js:54
_callee3$ @ index.js:431
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
_fulfillResolver @ index.js:440
fulfillResolver @ index.js:393
_callee$ @ index.js:346
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
setTimeout (async)
_callee2$ @ index.js:338
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
_fulfillSelector @ index.js:366
fulfillSelector @ index.js:306
selectorResolver @ index.js:369
eval @ authentication.js:31
selector @ factory.js:21
eval @ index.js:116
runSelector @ index.js:243
eval @ index.js:28
useSelect @ index.js:113
PermissionsModal @ index.js:28
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
eval @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
_callee$ @ googlesitekit-main-dashboard.js:57
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
Show 287 more frames
Show less
AudienceTilePagesMetric.js:62 An error occurred while running 'mapSelect': A valid set of dimension names and values is required.
at ContentLinkComponent (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/AudienceTilePagesMetric.js:68:25)
at div
at div
at div
at div
at AudienceTilePagesMetric (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/AudienceTilePagesMetric.js:55:23)
at div
at div
at div
at div
at eval (webpack-internal:///./assets/js/googlesitekit/widgets/components/Widget.js:38:23)
at AudienceTile (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/index.js:73:21)
at div
at div
at div
at eval (webpack-internal:///./assets/js/googlesitekit/widgets/components/Widget.js:38:23)
at AudienceTilesWidget (webpack-internal:///./assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget.js:73:21)
at WhenActiveComponent (webpack-internal:///./assets/js/util/when-active.js:58:20)
at WidgetRenderer (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetRenderer.js:61:19)
at div
at Cell (webpack-internal:///./assets/js/material-components/layout/Cell.js:45:25)
at WidgetCellWrapper (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetCellWrapper.js:39:30)
at div
at eval (webpack-internal:///./assets/js/material-components/layout/Row.js:44:24)
at div
at div
at eval (webpack-internal:///./assets/js/material-components/layout/Grid.js:44:24)
at WidgetAreaRenderer (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js:97:19)
at div
at WidgetContextRenderer (webpack-internal:///./assets/js/googlesitekit/widgets/components/WidgetContextRenderer.js:52:18)
at DashboardMainApp (webpack-internal:///./assets/js/components/DashboardMainApp.js:112:106)
at DashboardEntryPoint (webpack-internal:///./assets/js/components/DashboardEntryPoint.js:47:30)
at RestoreSnapshots (webpack-internal:///./assets/js/components/RestoreSnapshots/index.js:47:23)
at ErrorHandler (webpack-internal:///./assets/js/components/ErrorHandler/index.js:77:81)
at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:42:24)
at Root (webpack-internal:///./assets/js/components/Root/index.js:66:23)
This happens most likely because the array formation here adds specific indexes of report rows assuming that the report will include at least 3 rows, but in my case, it doesn't. As a result, the rest of the array items are set as undefined
. I'm using the o*.i*
property.
I don't think this is particularly an issue in your PR, but most likely a regression from a previous issue, as the audience tiles previously relied on mock data instead of real report data.
As discussed, this is now back with you to see if this can be fixed within this PR.
Thanks for raising this, @nfmohit. I've fixed the issue. So that you know, the test failure is not related to this PR. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Excellent work here as usual, thank you @hussain-t!
I have left some minimal feedback across your PR, after addressing which, we should be able to merge this immediately.
Please reach out if you have any questions, thank you!
assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceAreaFooter.js
Outdated
Show resolved
Hide resolved
...lytics-4/components/audience-segmentation/dashboard/AudienceTile/AudienceTileCitiesMetric.js
Outdated
Show resolved
Hide resolved
...alytics-4/components/audience-segmentation/dashboard/AudienceTile/AudienceTilePagesMetric.js
Outdated
Show resolved
Hide resolved
...odules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget.stories.js
Outdated
Show resolved
Hide resolved
...odules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget.stories.js
Outdated
Show resolved
Hide resolved
...Components_AudienceSegmentation_Dashboard_AudienceTilesWidget_Default_0_document_0_small.png
Outdated
Show resolved
Hide resolved
assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, brilliant work, @hussain-t !
Summary
Addresses issue:
Relevant technical choices
PR Author Checklist
Do not alter or remove anything below. The following sections will be managed by moderators only.
Code Reviewer Checklist
Merge Reviewer Checklist