fix: delay fetching of analytics counts until after journey loads

[tataihono]

This pull request includes changes to the AnalyticsItem and ResponsesItem components in the apps/journeys-admin project. The main focus is on improving the user interface by adding visitor counts to the toolbar items and updating test cases accordingly.

Enhancements to Toolbar Items:

• apps/journeys-admin/src/components/Editor/Toolbar/Items/Item/Item.tsx: Added count and countLabel properties to the Item component to display visitor counts. Updated the rendering logic to include these properties for icon-button variants. [1] [2] [3] [4]

Updates to AnalyticsItem:

• apps/journeys-admin/src/components/Editor/Toolbar/Items/AnalyticsItem/AnalyticsItem.tsx: Switched from useQuery to useLazyQuery for fetching visitor data and added useEffect to load data when the journey ID changes. Updated the component to use the new count and countLabel properties. [1] [2] [3]
• apps/journeys-admin/src/components/Editor/Toolbar/Items/AnalyticsItem/AnalyticsItem.spec.tsx: Updated test cases to reflect changes in the AnalyticsItem component, including the new visitor count display and the icon-button variant. [1] [2]

Updates to ResponsesItem:

• apps/journeys-admin/src/components/Editor/Toolbar/Items/ResponsesItem/ResponsesItem.tsx: Added a variant prop to allow different button styles and updated the component to use the new count and countLabel properties. [1] [2] [3] [4]
• apps/journeys-admin/src/components/Editor/Toolbar/Items/ResponsesItem/ResponsesItem.spec.tsx: Updated test cases to reflect changes in the ResponsesItem component, including the new visitor count display and the icon-button variant. [1] [2]

Storybook Updates:

• apps/journeys-admin/src/components/Editor/Toolbar/Items/Item/Item.stories.tsx: Added a new story for IconButtonWithCountItem to demonstrate the new count and countLabel properties.
• apps/journeys-admin/src/components/Editor/Toolbar/Items/ResponsesItem/ResponsesItem.stories.tsx: Updated the story to use the icon-button variant.

These changes enhance the user interface by providing more informative toolbar items and ensuring the components are well-tested.

[linear[bot]]

ENG-1181 analytics being fetched before journey loads

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 89.14%. Comparing base (cf2f1f2) to head (40fc88e). Report is 5 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #3665 +/- ## ========================================== - Coverage 93.93% 89.14% -4.79% ========================================== Files 311 915 +604 Lines 5640 15563 +9923 Branches 744 2039 +1295 ========================================== + Hits 5298 13874 +8576 - Misses 272 1489 +1217 - Partials 70 200 +130 ``` | [Flag](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | Coverage Δ | | |---|---|---| | [apps.api-analytics](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `?` | | | [apps.api-journeys](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `95.88% <ø> (ø)` | | | [apps.api-languages](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `?` | | | [apps.api-media](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `?` | | | [apps.journeys](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `45.84% <ø> (?)` | | | [apps.journeys-admin](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `80.17% <100.00%> (?)` | | | [apps.watch](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `63.06% <ø> (?)` | | | [libs.journeys.ui](https://app.codecov.io/gh/JesusFilm/core/pull/3665/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `85.69% <ø> (?)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
videos-admin	✅ Ready	videos-admin preview	Thu Oct 17 01:33:00 UTC 2024

[github-actions[bot]]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
watch	✅ Ready	watch preview	Thu Oct 17 01:34:25 UTC 2024

[github-actions[bot]]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys	✅ Ready	journeys preview	Thu Oct 17 01:33:21 UTC 2024

[github-actions[bot]]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys-admin	✅ Ready	journeys-admin preview	Thu Oct 17 01:34:22 UTC 2024