Upgrade and migrate to HDS v4 by nikomakela · Pull Request #917 · City-of-Helsinki/events-helsinki-monorepo

nikomakela · 2025-11-20T10:57:19Z

HCRC-178

NOTE: A real stable version of HCRC -lib needs to be used instead of canary. It should be installed when the related HCRC -lib changes are merged and published in a stable release. A related PR: City-of-Helsinki/react-helsinki-headless-cms#205.

This pull request encompasses a critical upgrade of the Helsinki Design System (HDS) and Helsinki Component Registry (HCRC) libraries, alongside the complete implementation of the cookie consent feature.

HDS/HCRC Migration Details

The upgrade involved migrating component usage and types across the application to conform with the latest library versions. Key changes include:

Type Migration: Critical migration to new types, particularly in event handling, components, sports, and hobbies modules, following the HDS v4 upgrade.
Style Consistency: Extensive style updates to align search form components (category, date, place, target age group) with HDS styles:
- Set consistent gray placeholder text colors.
- Ensured consistent padding, font size, and border styles for selectors.
- Removed the isSelected indicator from the date selector for consistency.
- Applied necessary theming to the category and event order selectors.
Dependency Management: Hard-set versions for hds-react and upgraded hds-core and hds-design-tokens.
Testing: Updated tests to reflect the new component structures and migrated test utilities (e.g., createLocaleDictBuilder, useAskemContext).

Cookie Consent Implementation

A new, comprehensive cookie consent system was implemented, consolidating all user tracking features.

Core Implementation: Added necessary cookie consent utilities, translations, and context providers.
User Tracking Refactor: Refactored user tracking features to be collected and handled by a dedicated UserTrackingFeatures component/wrapper, decoupling the tracking logic from the BaseApp.
Integration: Integrated the cookie consent modal and banner into the base application, ensuring proper client-side rendering and fixing related Content Security Policy (CSP) rules.
Context Management: Implemented the useConsentSiteSettings hook and refactored prop drilling and context usage (e.g., in the Askem hook) for cleaner data flow.

terovirtanen · 2025-11-20T11:03:10Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:03:34Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:03:44Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr917.dev.hel.ninja 🚀🚀🚀

nikomakela · 2025-11-20T11:08:18Z

A real stable version of HCRC -lib needs to be used instead of canary. It should be installed when the related HCRC -lib changes are merged and published in a stable release. A related PR: City-of-Helsinki/react-helsinki-headless-cms#205.

Use a stable release of HCRC -lib

terovirtanen · 2025-11-20T11:15:40Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:16:26Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:16:45Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:21:55Z

EVENTS-GRAPHQL-PROXY branch is deployed to platta: https://events-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:22:30Z

VENUE-GRAPHQL-PROXY branch is deployed to platta: https://venue-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:24:38Z

HARRASTUKSET-UI branch is deployed to platta: https://harrastukset-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:27:12Z

TAPAHTUMAT-UI branch is deployed to platta: https://tapahtumat-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T11:45:07Z

TestCafe result is failed for https://harrastukset-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-20T11:47:52Z

TestCafe result is failed for https://tapahtumat-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-20T12:28:18Z

LIIKUNTA-UI branch is deployed to platta: https://liikunta-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-20T12:49:23Z

TestCafe result is failed for https://liikunta-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-21T10:22:14Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-21T10:22:50Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-21T10:23:08Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-21T10:31:59Z

HARRASTUKSET-UI branch is deployed to platta: https://harrastukset-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-21T10:32:23Z

VENUE-GRAPHQL-PROXY branch is deployed to platta: https://venue-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-21T10:32:32Z

EVENTS-GRAPHQL-PROXY branch is deployed to platta: https://events-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-21T10:32:58Z

TAPAHTUMAT-UI branch is deployed to platta: https://tapahtumat-pr917.dev.hel.ninja 🚀🚀🚀

nikomakela · 2025-11-21T10:44:42Z

Address sonar issue: https://sonarcloud.io/project/issues?pullRequest=917&open=AZqhA4Yx8ot4z47ZZg48&id=City-of-Helsinki_events-components

karisal-anders · 2025-11-21T10:52:03Z

-                buttonStyles={{ fontSize: 'var(--fontsize-body-m)' }}
+                icon={<IconRead aria-hidden />}
+                noTags
+                visibleOptions={5.97} // use decimal to make scrollable content visible


Would this magic number be good to give a meaningful name and move e.g. to AppConfig or to some constant somewhere else? Now even with the comment having a number like 5.97 is not very understandable. Would 5.98 do? Or 5.96, why is this exactly 5.97 and not e.g. 6? Well, anyway, this could use more clarity IMHO.

Well, it only was a number that made the UI look good. When there is no visible scroll bar in the menu, it tells to user that there are more options available. It should not be in AppConfig, because it's actually a selector specific value. It's not something I would like to configure app wide from apps configuration. I don't know what else add there, when it already says what it is for. It's a property of HDS Select component and description can be found here: https://hds.hel.fi/components/select/code/#component-properties. They give 5.5 as an example, but it didn't work well in our case, because it only showed white space. of the menu option -- Some text needs to be seen as well.

I find this a very trivial thing.

Looking at https://hds.hel.fi/components/select/code/#component-properties helped clarify this a bit. Without the context it was weird. It's still a bit weird, but the default value being 5.5, it seems it is just some magic number that makes the UI look good. Maybe the link you gave could be added for better context, as given that context the "use decimal" is more understandable as they already talk using that:

Use decimals, so a part of the next option is shown.

I'll think a bit to see if I can come up with a concise comment that explains the why here.

How would you feel about something like this?
// Show next option partially to indicate more is available

terovirtanen · 2025-11-21T10:52:43Z

TestCafe result is failed for https://harrastukset-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-21T10:53:32Z

TestCafe result is failed for https://tapahtumat-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-26T10:21:19Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:31:54Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:37:10Z

HARRASTUKSET-UI branch is deployed to platta: https://harrastukset-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:43:58Z

TAPAHTUMAT-UI branch is deployed to platta: https://tapahtumat-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:45:45Z

EVENTS-GRAPHQL-PROXY branch is deployed to platta: https://events-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:46:45Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:54:08Z

VENUE-GRAPHQL-PROXY branch is deployed to platta: https://venue-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:56:52Z

LIIKUNTA-UI branch is deployed to platta: https://liikunta-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T10:57:27Z

TestCafe result is failed for https://harrastukset-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-26T11:04:17Z

TestCafe result is failed for https://tapahtumat-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-26T11:17:25Z

TestCafe result is failed for https://liikunta-pr917.dev.hel.ninja 😿💢💥💥

HCRC-178

HCRC-178. Update a failing mock that does not affect in test result.

sonarqubecloud · 2025-11-26T12:25:40Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
90.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

sonarqubecloud · 2025-11-26T12:25:41Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
80.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

sonarqubecloud · 2025-11-26T12:26:12Z

Quality Gate failed

Failed conditions
23.8% Coverage on New Code (required ≥ 65%)

See analysis details on SonarQube Cloud

terovirtanen · 2025-11-26T12:28:09Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T12:28:15Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T12:28:17Z

FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T12:36:07Z

EVENTS-GRAPHQL-PROXY branch is deployed to platta: https://events-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T12:36:56Z

VENUE-GRAPHQL-PROXY branch is deployed to platta: https://venue-graphql-proxy-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T12:38:43Z

LIIKUNTA-UI branch is deployed to platta: https://liikunta-pr917.dev.hel.ninja 🚀🚀🚀

sonarqubecloud · 2025-11-26T12:39:05Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
85.6% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

terovirtanen · 2025-11-26T12:39:29Z

TAPAHTUMAT-UI branch is deployed to platta: https://tapahtumat-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T12:41:10Z

HARRASTUKSET-UI branch is deployed to platta: https://harrastukset-pr917.dev.hel.ninja 🚀🚀🚀

terovirtanen · 2025-11-26T12:59:20Z

TestCafe result is failed for https://liikunta-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-26T13:01:50Z

TestCafe result is failed for https://tapahtumat-pr917.dev.hel.ninja 😿💢💥💥

terovirtanen · 2025-11-26T13:02:41Z

TestCafe result is failed for https://harrastukset-pr917.dev.hel.ninja 😿💢💥💥

nikomakela force-pushed the HCRC-178-hds-v4 branch from 061007f to 2b2a5ca Compare November 20, 2025 11:06

nikomakela force-pushed the HCRC-178-hds-v4 branch from 2b2a5ca to 615c5a9 Compare November 20, 2025 11:10

nikomakela requested a review from karisal-anders November 20, 2025 11:13

nikomakela force-pushed the HCRC-178-hds-v4 branch from 615c5a9 to 72ac62f Compare November 21, 2025 10:18

karisal-anders reviewed Nov 21, 2025

View reviewed changes

nikomakela added 2 commits November 26, 2025 14:22

test: fix to selected category options order in URL

9468d42

HCRC-178

test: update failing mock

3c78695

HCRC-178. Update a failing mock that does not affect in test result.

nikomakela merged commit fdccd2d into main Nov 26, 2025
115 of 121 checks passed

nikomakela deleted the HCRC-178-hds-v4 branch November 26, 2025 12:45

Uh oh!

Conversation

nikomakela commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

HDS/HCRC Migration Details

Cookie Consent Implementation

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

nikomakela commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

TestCafe result is failed for https://harrastukset-pr917.dev.hel.ninja 😿💢💥💥

Uh oh!

terovirtanen commented Nov 20, 2025

TestCafe result is failed for https://tapahtumat-pr917.dev.hel.ninja 😿💢💥💥

Uh oh!

terovirtanen commented Nov 20, 2025

Uh oh!

terovirtanen commented Nov 20, 2025

TestCafe result is failed for https://liikunta-pr917.dev.hel.ninja 😿💢💥💥

Uh oh!

terovirtanen commented Nov 21, 2025

Uh oh!

terovirtanen commented Nov 21, 2025

Uh oh!

terovirtanen commented Nov 21, 2025

Uh oh!

terovirtanen commented Nov 21, 2025

Uh oh!

terovirtanen commented Nov 21, 2025

Uh oh!

terovirtanen commented Nov 21, 2025

Uh oh!

terovirtanen commented Nov 21, 2025

Uh oh!

nikomakela commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

karisal-anders Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

nikomakela Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

karisal-anders Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

karisal-anders Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

karisal-anders Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

terovirtanen commented Nov 21, 2025

TestCafe result is failed for https://harrastukset-pr917.dev.hel.ninja 😿💢💥💥

Uh oh!

terovirtanen commented Nov 21, 2025

TestCafe result is failed for https://tapahtumat-pr917.dev.hel.ninja 😿💢💥💥

Uh oh!

nikomakela commented Nov 20, 2025 •

edited

Loading

nikomakela commented Nov 20, 2025 •

edited

Loading

nikomakela commented Nov 21, 2025 •

edited

Loading

nikomakela Nov 21, 2025 •

edited

Loading