From 4d67a52beb2b29f77932c9b70ede5bf741bb0cd2 Mon Sep 17 00:00:00 2001 From: Jarkko Pesonen <435495+jrkkp@users.noreply.github.com> Date: Tue, 23 Jan 2024 17:13:28 +0200 Subject: [PATCH 1/4] SHARED:YKI:AKR:OTR:VKT(Frontend) cookie banner for VKT and OTR Also z-index fixed in shared --- frontend/packages/akr/package.json | 2 +- frontend/packages/otr/package.json | 2 +- .../otr/public/i18n/en-GB/translation.json | 6 ++++++ .../otr/public/i18n/fi-FI/translation.json | 6 ++++++ .../otr/public/i18n/sv-SE/translation.json | 6 ++++++ .../otr/src/components/layouts/Header.tsx | 18 ++++++++++++++++++ frontend/packages/shared/CHANGELOG.MD | 6 ++++++ frontend/packages/shared/package.json | 2 +- .../components/CookieBanner/CookieBanner.tsx | 2 +- frontend/packages/vkt/package.json | 2 +- .../packages/vkt/public/i18n/fi-FI/common.json | 6 ++++++ .../packages/vkt/public/i18n/sv-SE/common.json | 6 ++++++ .../vkt/src/components/layouts/Header.tsx | 15 +++++++++++++++ .../PublicEnrollmentControlButtons.tsx | 2 +- .../vkt/src/redux/reducers/publicEnrollment.ts | 2 +- .../vkt/src/redux/sagas/publicEnrollment.ts | 4 ++-- frontend/packages/yki/package.json | 2 +- 17 files changed, 79 insertions(+), 10 deletions(-) diff --git a/frontend/packages/akr/package.json b/frontend/packages/akr/package.json index 57016f1fe..bacbc109a 100644 --- a/frontend/packages/akr/package.json +++ b/frontend/packages/akr/package.json @@ -22,6 +22,6 @@ "akr:tslint": "yarn g:tsc --pretty --noEmit" }, "dependencies": { - "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.3" + "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.4" } } diff --git a/frontend/packages/otr/package.json b/frontend/packages/otr/package.json index 6f8fe0ae4..a430d648a 100644 --- a/frontend/packages/otr/package.json +++ b/frontend/packages/otr/package.json @@ -25,6 +25,6 @@ "otr:tslint": "yarn g:tsc --pretty --noEmit" }, "dependencies": { - "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.3" + "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.4" } } diff --git a/frontend/packages/otr/public/i18n/en-GB/translation.json b/frontend/packages/otr/public/i18n/en-GB/translation.json index ab79b626f..18dc6600f 100644 --- a/frontend/packages/otr/public/i18n/en-GB/translation.json +++ b/frontend/packages/otr/public/i18n/en-GB/translation.json @@ -322,6 +322,12 @@ "title": null }, "homepage": { + "cookieBanner": { + "buttonAriaLabel": "Close the notification about cookies", + "buttonText": "Close", + "description": "This web site uses mandatory cookies to be functional.", + "title": "Information about cookies" + }, "description": "The Finnish National Agency for Education maintains a register of legal interpreters, into which the legal interpreters approved by the Legal Interpreters’ Registration Board are entered. You can use the search engine to find an interpreter by name, language pair or operating area. The public register of legal interpreters contains only the details of those interpreters who have given the permission to publish their details online.", "filters": { "title": "Search for a legal interpreter" diff --git a/frontend/packages/otr/public/i18n/fi-FI/translation.json b/frontend/packages/otr/public/i18n/fi-FI/translation.json index e53273a5f..226e89048 100644 --- a/frontend/packages/otr/public/i18n/fi-FI/translation.json +++ b/frontend/packages/otr/public/i18n/fi-FI/translation.json @@ -323,6 +323,12 @@ "title": "Lisää oikeustulkki" }, "homepage": { + "cookieBanner": { + "buttonAriaLabel": "Sulje evästetiedot", + "buttonText": "Sulje", + "description": "Tämä sivusto käyttää välttämättömiä evästeitä toimiakseen.", + "title": "Tietoa sivuston evästeistä" + }, "description": "Opetushallitus ylläpitää oikeustulkkirekisteriä, johon Oikeustulkkirekisterilautakunnan hyväksymät oikeustulkit merkitään. Hakukoneella voit hakea tulkkia joko nimen, kieliparin tai toiminta-alueen mukaan. Julkinen oikeustulkkirekisteri sisältää tiedot vain niistä tulkeista, jotka ovat antaneet luvan tietojensa julkaisemiseen verkossa.", "filters": { "title": "Etsi oikeustulkkia" diff --git a/frontend/packages/otr/public/i18n/sv-SE/translation.json b/frontend/packages/otr/public/i18n/sv-SE/translation.json index 78b74f252..0c7e70d7a 100644 --- a/frontend/packages/otr/public/i18n/sv-SE/translation.json +++ b/frontend/packages/otr/public/i18n/sv-SE/translation.json @@ -322,6 +322,12 @@ "title": null }, "homepage": { + "cookieBanner": { + "buttonAriaLabel": "Stäng informationrutan om kakor", + "buttonText": "Stäng", + "description": "Den här webbplatsen använder nödvändiga kakor för att fungera", + "title": "Information om kakor" + }, "description": "Utbildningsstyrelsen upprätthåller ett register över rättstolkar, där rättstolkar som har godkänts av Nämnden för registret över rättstolkar registreras. Med sökmotorn kan du söka en tolk på namn eller enligt språkpar eller verksamhetsområde. I det offentliga registret över rättstolkar finns endast uppgifter om de tolkar som har gett sitt samtycke till att deras uppgifter publiceras på webben.", "filters": { "title": "Sök en rättstolk" diff --git a/frontend/packages/otr/src/components/layouts/Header.tsx b/frontend/packages/otr/src/components/layouts/Header.tsx index 4ae2ddd2f..d45aa187b 100644 --- a/frontend/packages/otr/src/components/layouts/Header.tsx +++ b/frontend/packages/otr/src/components/layouts/Header.tsx @@ -1,10 +1,12 @@ import { AppBar, Toolbar } from '@mui/material'; import { Link } from 'react-router-dom'; import { + CookieBanner, LangSelector, OPHClerkLogo, OPHLogoViewer, SkipLink, + Text, } from 'shared/components'; import { AppLanguage, Direction } from 'shared/enums'; import { useWindowProperties } from 'shared/hooks'; @@ -25,6 +27,9 @@ export const Header = (): JSX.Element => { const { t } = useAppTranslation({ keyPrefix: 'otr.component.header', }); + const { t: cookieTranslation } = useAppTranslation({ + keyPrefix: 'otr.pages.homepage.cookieBanner', + }); const translateCommon = useCommonTranslation(); const [finnish, swedish, english] = getSupportedLangs(); @@ -92,6 +97,19 @@ export const Header = (): JSX.Element => { + {!isClerkUI && ( + + + {cookieTranslation('description')} + + + )} ); }; diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD index b5df6241b..82bdb768e 100644 --- a/frontend/packages/shared/CHANGELOG.MD +++ b/frontend/packages/shared/CHANGELOG.MD @@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [Released] +## [1.10.4] - 2024-01-23 + +### Changed + +- Cookie banner z-index fix + ## [1.10.3] - 2023-11-24 ### Changed diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json index 0805edede..1f2840db2 100644 --- a/frontend/packages/shared/package.json +++ b/frontend/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared", - "version": "1.10.3", + "version": "1.10.4", "description": "Shared Frontend Package", "exports": { "./components": "./src/components/index.tsx", diff --git a/frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx b/frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx index aac96f4e5..384ab79e2 100644 --- a/frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx +++ b/frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx @@ -56,7 +56,7 @@ export const CookieBanner: FC> = ({ maxWidth: '100%', margin: 0, borderRadius: 0, - zIndex: 2, + zIndex: 3, }} >
{ + {!isClerkUI && ( + + + {translateCommon('cookieBanner.description')} + + + )} ); }; diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx index 1b5e6a406..37538c9ff 100644 --- a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx +++ b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx @@ -152,7 +152,7 @@ export const PublicEnrollmentControlButtons = ({ loadPublicEnrollmentUpdate({ enrollment, examEventId, - }) + }), ); } else { dispatch( diff --git a/frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts b/frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts index 44b140e11..a5e3f84a0 100644 --- a/frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts +++ b/frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts @@ -156,7 +156,7 @@ const publicEnrollmentSlice = createSlice({ _action: PayloadAction<{ enrollment: PublicEnrollment; examEventId: number; - }> + }>, ) { state.enrollmentSubmitStatus = APIResponseStatus.InProgress; }, diff --git a/frontend/packages/vkt/src/redux/sagas/publicEnrollment.ts b/frontend/packages/vkt/src/redux/sagas/publicEnrollment.ts index 96489d319..427cc6852 100644 --- a/frontend/packages/vkt/src/redux/sagas/publicEnrollment.ts +++ b/frontend/packages/vkt/src/redux/sagas/publicEnrollment.ts @@ -122,7 +122,7 @@ function* loadPublicEnrollmentUpdateSaga( action: PayloadAction<{ enrollment: PublicEnrollment; examEventId: number; - }> + }>, ) { const { enrollment, examEventId } = action.payload; @@ -142,7 +142,7 @@ function* loadPublicEnrollmentUpdateSaga( const response: AxiosResponse = yield call( axiosInstance.post, updateUrl, - body + body, ); yield put(storePublicEnrollmentSave(response.data)); } catch (error) { diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json index 29fbfb6cb..6fff96e12 100644 --- a/frontend/packages/yki/package.json +++ b/frontend/packages/yki/package.json @@ -26,7 +26,7 @@ "yki:tslint": "yarn g:tsc --pretty --noEmit" }, "dependencies": { - "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.3" + "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.4" }, "devDependencies": { "multer": "^1.4.5-lts.1" From 2f33624c0cea41871bb58e4be7da725033367e9b Mon Sep 17 00:00:00 2001 From: Jarkko Pesonen <435495+jrkkp@users.noreply.github.com> Date: Wed, 24 Jan 2024 12:32:56 +0200 Subject: [PATCH 2/4] VKT(Frontend) cookie banner cypress test fix --- .../tests/cypress/integration/public_enrollment.spec.ts | 8 ++++++++ .../tests/cypress/support/page-objects/cookieBanner.ts | 7 +++++++ 2 files changed, 15 insertions(+) create mode 100644 frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts diff --git a/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts b/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts index f39de7c50..adce44425 100644 --- a/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts +++ b/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts @@ -1,6 +1,7 @@ import { onPublicEnrollmentPage } from 'tests/cypress/support/page-objects/publicEnrollmentPage'; import { onPublicHomePage } from 'tests/cypress/support/page-objects/publicHomePage'; import { onToast } from 'tests/cypress/support/page-objects/toast'; +import { onCookieBanner } from 'tests/cypress/support/page-objects/cookieBanner'; beforeEach(() => { cy.openPublicEnrollmentPage(2); @@ -9,6 +10,8 @@ beforeEach(() => { describe('Public enrollment', () => { describe('to exam event with room', () => { it('reservation should have timer', () => { + onCookieBanner.closeBanner(); + onPublicHomePage.expectReservationTimeLeft('30', '00'); cy.tick(3000); onPublicHomePage.expectReservationTimeLeft('29', '57'); @@ -17,6 +20,8 @@ describe('Public enrollment', () => { }); it('reservation should allow renewal', () => { + onCookieBanner.closeBanner(); + onPublicHomePage.expectReservationTimeLeft('30', '00'); cy.tick(29 * 60 * 1000); onPublicHomePage.clickReservationRenewButton(); @@ -31,6 +36,8 @@ describe('Public enrollment', () => { it('should be able to fill out enrollment info', () => { cy.tick(3000); + + onCookieBanner.closeBanner(); onPublicEnrollmentPage.expectEnrollmentPersonDetails( 'Sukunimi:TestiläEtunimet:Tessa', ); @@ -88,6 +95,7 @@ describe('Public enrollment', () => { it('should display errors if mandatory info is missing', () => { cy.tick(3000); + onCookieBanner.closeBanner(); onPublicEnrollmentPage.clickNext(); onPublicEnrollmentPage.expectContactDetailsError( 'email', diff --git a/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts b/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts new file mode 100644 index 000000000..d0276bc2b --- /dev/null +++ b/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts @@ -0,0 +1,7 @@ +class CookieBanner { + closeBanner() { + cy.findByTestId('cookie-banner-accept-button').click(); + } +} + +export const onCookieBanner = new CookieBanner(); From a7fa74440bd8f149fec7478ba515e66e19a7292a Mon Sep 17 00:00:00 2001 From: Jarkko Pesonen <435495+jrkkp@users.noreply.github.com> Date: Fri, 26 Jan 2024 14:12:31 +0200 Subject: [PATCH 3/4] VKT(Frontend) set cookie banner cookie in cypress test --- .../tests/cypress/integration/public_enrollment.spec.ts | 7 ------- .../src/tests/cypress/integration/public_home_page.spec.ts | 7 +++++++ .../packages/vkt/src/tests/cypress/support/commands.ts | 1 + .../src/tests/cypress/support/page-objects/cookieBanner.ts | 5 ++++- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts b/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts index adce44425..6185fa261 100644 --- a/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts +++ b/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts @@ -1,7 +1,6 @@ import { onPublicEnrollmentPage } from 'tests/cypress/support/page-objects/publicEnrollmentPage'; import { onPublicHomePage } from 'tests/cypress/support/page-objects/publicHomePage'; import { onToast } from 'tests/cypress/support/page-objects/toast'; -import { onCookieBanner } from 'tests/cypress/support/page-objects/cookieBanner'; beforeEach(() => { cy.openPublicEnrollmentPage(2); @@ -10,8 +9,6 @@ beforeEach(() => { describe('Public enrollment', () => { describe('to exam event with room', () => { it('reservation should have timer', () => { - onCookieBanner.closeBanner(); - onPublicHomePage.expectReservationTimeLeft('30', '00'); cy.tick(3000); onPublicHomePage.expectReservationTimeLeft('29', '57'); @@ -20,8 +17,6 @@ describe('Public enrollment', () => { }); it('reservation should allow renewal', () => { - onCookieBanner.closeBanner(); - onPublicHomePage.expectReservationTimeLeft('30', '00'); cy.tick(29 * 60 * 1000); onPublicHomePage.clickReservationRenewButton(); @@ -37,7 +32,6 @@ describe('Public enrollment', () => { it('should be able to fill out enrollment info', () => { cy.tick(3000); - onCookieBanner.closeBanner(); onPublicEnrollmentPage.expectEnrollmentPersonDetails( 'Sukunimi:TestiläEtunimet:Tessa', ); @@ -95,7 +89,6 @@ describe('Public enrollment', () => { it('should display errors if mandatory info is missing', () => { cy.tick(3000); - onCookieBanner.closeBanner(); onPublicEnrollmentPage.clickNext(); onPublicEnrollmentPage.expectContactDetailsError( 'email', diff --git a/frontend/packages/vkt/src/tests/cypress/integration/public_home_page.spec.ts b/frontend/packages/vkt/src/tests/cypress/integration/public_home_page.spec.ts index 7fd5a889e..d60409941 100644 --- a/frontend/packages/vkt/src/tests/cypress/integration/public_home_page.spec.ts +++ b/frontend/packages/vkt/src/tests/cypress/integration/public_home_page.spec.ts @@ -1,12 +1,19 @@ import { ExamLanguage } from 'enums/app'; import { onPublicHomePage } from 'tests/cypress/support/page-objects/publicHomePage'; import { publicExamEvents11 } from 'tests/msw/fixtures/publicExamEvents11'; +import { onCookieBanner } from 'tests/cypress/support/page-objects/cookieBanner'; describe('PublicHomePage', () => { beforeEach(() => { cy.openPublicHomePage(); }); + it('should close cookie banner', () => { + onCookieBanner.closeBanner(); + + onCookieBanner.getBanner().should('not.exist'); + }); + it('should show the filtered amount of exam events in table pagination', () => { onPublicHomePage.expectFilteredExamEventsCount(publicExamEvents11.length); diff --git a/frontend/packages/vkt/src/tests/cypress/support/commands.ts b/frontend/packages/vkt/src/tests/cypress/support/commands.ts index 3fbe18d3a..deef88404 100644 --- a/frontend/packages/vkt/src/tests/cypress/support/commands.ts +++ b/frontend/packages/vkt/src/tests/cypress/support/commands.ts @@ -13,6 +13,7 @@ Cypress.Commands.add( (examEventId: number, persistedState = '{}') => { cy.window().then((win) => { win.sessionStorage.setItem('persist:root', persistedState); + cy.setCookie('cookie-consent-vkt', 'true'); }); cy.visit( RouteUtils.replaceExamEventId( diff --git a/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts b/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts index d0276bc2b..5ad457e6e 100644 --- a/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts +++ b/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts @@ -1,6 +1,9 @@ class CookieBanner { + getBanner() { + return cy.findByTestId('cookie-banner-accept-button'); + } closeBanner() { - cy.findByTestId('cookie-banner-accept-button').click(); + this.getBanner().click(); } } From afefedadf6c0dc2474ec201672de862f39afc6ab Mon Sep 17 00:00:00 2001 From: Jarkko Pesonen <435495+jrkkp@users.noreply.github.com> Date: Tue, 30 Jan 2024 09:56:39 +0200 Subject: [PATCH 4/4] OTR(Frontend) Oops, cookie path fix --- frontend/packages/otr/src/components/layouts/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/otr/src/components/layouts/Header.tsx b/frontend/packages/otr/src/components/layouts/Header.tsx index d45aa187b..3a04c4f98 100644 --- a/frontend/packages/otr/src/components/layouts/Header.tsx +++ b/frontend/packages/otr/src/components/layouts/Header.tsx @@ -103,7 +103,7 @@ export const Header = (): JSX.Element => { buttonText={cookieTranslation('buttonText')} cookieTag="cookie-consent-otr" buttonAriaLabel={cookieTranslation('buttonAriaLabel')} - path="/akr" + path="/otr" > {cookieTranslation('description')}