Merge pull request #30613 from overleaf/revert-30251-ac-dismiss-ciam-notification

[web] Revert "Make CIAM login notification dismissible (with cookies)"

GitOrigin-RevId: d7b7fac350dbc5479487341800320d4917f27d1b

services/web/app/src/infrastructure/ExpressLocals.mjs

@@ -337,18 +337,6 @@ export default async function (webRouter, privateApiRouter, publicApiRouter) {
     next()
   })
 
-  webRouter.use(function (req, res, next) {
-    const KEY_PREFIX = 'readnotif-'
-    const dismissedNotifications = []
-    for (const cookieName in req.cookies) {
-      if (cookieName.startsWith(KEY_PREFIX)) {
-        dismissedNotifications.push(cookieName.slice(KEY_PREFIX.length))
-      }
-    }
-    res.locals.dismissedNotifications = dismissedNotifications
-    next()
-  })
-
   webRouter.use(function (req, res, next) {
     res.locals.ExposedSettings = {
       isOverleaf: Settings.overleaf != null,

services/web/app/views/_mixins/ciam_mixins.pug

@@ -109,26 +109,16 @@ mixin ciamErrorNotification
 			.notification-content
 				block
 
-mixin ciamInfoNotification(options)
-	- var {dismissId, dismissCookiePaths = ['/']} = options
-	if dismissId && dismissedNotifications.includes(dismissId)
-		// Notification has been dismissed, do not render
-	else
-		.notification.notification-ds.notification-type-info(
-			role='alert'
-			aria-live='polite'
-			data-ol-dismiss-id=dismissId
-			data-ol-dismiss-cookie-paths=dismissCookiePaths.join(',')
-		)
-			.notification-icon
-				ph-info(aria-hidden='true')
-			.notification-content-and-cta
-				.notification-content
-					block
-			if dismissId
-				.notification-close-btn
-					button(aria-label=translate('close') data-ol-dismiss-button)
-						ph-x
+mixin ciamInfoNotification
+	.notification.notification-ds.notification-type-info(
+		role='alert'
+		aria-live='polite'
+	)
+		.notification-icon
+			ph-info(aria-hidden='true')
+		.notification-content-and-cta
+			.notification-content
+				block
 
 mixin ciamOrDivider
 	p.ciam-login-register-or-text-container= translate('login_register_or').toUpperCase()

services/web/app/views/_mixins/notification.pug

@@ -12,35 +12,27 @@ mixin notificationIcon(type)
 		+material-symbol('warning')
 
 mixin notification(options)
-	- var {ariaLive, id, type, title, content, disclaimer, className, dismissId, dismissCookiePaths = ['/']} = options
+	- var {ariaLive, id, type, title, content, disclaimer, className} = options
 	- var classNames = `notification notification-type-${type} ${className ? className : ''} ${isActionBelowContent ? 'notification-cta-below-content' : ''}`
 
-	if dismissId && dismissedNotifications.includes(dismissId)
-		//- Notification has been dismissed, do not render
-	else
-		div(
-			aria-live=ariaLive
-			role='alert'
-			id=id
-			class=classNames
-			data-ol-dismiss-id=dismissId
-			data-ol-dismiss-cookie-paths=dismissCookiePaths.join(',')
-		)
-			.notification-icon
-				+notificationIcon(type)
-			.notification-content-and-cta
-				.notification-content
-					if title
-						p
-							b #{title}
-					| !{content}
-					block
-				//- TODO: handle action
-				//- if action
-				//- 	.notification-cta
-				if disclaimer
-					.notification-disclaimer #{disclaimer}
-			if dismissId
-				.notification-close-btn
-					button(aria-label=translate('close') data-ol-dismiss-button)
-						+material-symbol('close')
+	div(aria-live=ariaLive role='alert' id=id class=classNames)
+		.notification-icon
+			+notificationIcon(type)
+		.notification-content-and-cta
+			.notification-content
+				if title
+					p
+						b #{title}
+				| !{content}
+				block
+			//- TODO: handle action
+			//- if action
+			//- 	.notification-cta
+			if disclaimer
+				.notification-disclaimer #{disclaimer}
+		//- TODO: handle dismissible notifications
+		//- TODO: handle onDismiss
+		//- if isDismissible
+		//- 	.notification-close-btn
+		//- 		button(aria-label=translate('close'))
+		//- 			+material-symbol("close")

services/web/frontend/js/bootstrap.ts

@@ -1,5 +1,4 @@
 import './features/bookmarkable-tab/index'
 import './features/tooltip/index'
 import './features/navbar/index'
-import './features/notifications/dismissible-notifications'
 import 'bootstrap'

services/web/frontend/js/features/form-helpers/form-phosphor-icons.ts

@@ -4,4 +4,3 @@ import '@phosphor-icons/webcomponents/PhEye'
 import '@phosphor-icons/webcomponents/PhInfo'
 import '@phosphor-icons/webcomponents/PhEyeSlash'
 import '@phosphor-icons/webcomponents/PhWarningCircle'
-import '@phosphor-icons/webcomponents/PhX'

services/web/frontend/js/features/notifications/dismissible-notifications.ts

@@ -1,44 +0,0 @@
-import getMeta from '@/utils/meta'
-
-const KEY_PREFIX = 'readnotif-'
-
-function setDismissedNotification(dismissId: string, cookiePaths: string[]) {
-  const name = `${KEY_PREFIX}${dismissId}`
-  const cookieDomain = getMeta('ol-ExposedSettings').cookieDomain
-  const oneYearInSeconds = 60 * 60 * 24 * 365
-
-  for (const path of cookiePaths) {
-    const cookieAttributes =
-      `; path=${path}` +
-      '; domain=' +
-      cookieDomain +
-      '; max-age=' +
-      oneYearInSeconds +
-      '; SameSite=Lax; Secure'
-    document.cookie = `${name}=1;${cookieAttributes}`
-  }
-}
-
-function hydrateDismissibleNotification(notification: HTMLElement) {
-  const dismissId = notification.dataset.olDismissId
-  if (!dismissId) return
-
-  const dismissCookiePaths = notification.dataset.olDismissCookiePaths
-    ? notification.dataset.olDismissCookiePaths.split(',')
-    : ['/']
-
-  const dismissButton = notification.querySelector<HTMLButtonElement>(
-    '[data-ol-dismiss-button]'
-  )
-
-  if (dismissButton) {
-    dismissButton.addEventListener('click', () => {
-      setDismissedNotification(dismissId, dismissCookiePaths)
-      notification.hidden = true
-    })
-  }
-}
-
-document
-  .querySelectorAll<HTMLElement>('[data-ol-dismiss-id]')
-  .forEach(hydrateDismissibleNotification)

services/web/frontend/stylesheets/ds/components/notification.scss

@@ -27,32 +27,4 @@
   &.notification-type-info {
     background-color: var(--ds-color-blue-50);
   }
-
-  .notification-close-btn {
-    align-self: flex-start;
-    padding: var(--ds-spacing-400) 0 0;
-    height: auto;
-
-    button {
-      @include ds-heading-sm-regular;
-
-      color: var(--ds-color-neutral-950);
-      padding: var(--ds-spacing-150);
-
-      &:hover,
-      &:focus {
-        background-color: var(--ds-color-blue-100);
-      }
-
-      &:active {
-        background-color: var(--ds-color-blue-200);
-      }
-
-      &:focus-visible {
-        background: transparent;
-
-        @include ds-focus-outline;
-      }
-    }
-  }
 }