From 06b75ebee2620a86da5a9395a3a421329d7a5cf1 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Mon, 6 Mar 2023 07:34:38 -0700
Subject: [PATCH] Refactor project list notification by using `onDismiss` on
 `Alert` instead of custom `Close` component (#12043)

* Refactor project list notification by using `onDismiss` on `Alert` and not using the custom `Close` component

* Add dismissible alerts to storybook

GitOrigin-RevId: 9a3f95c322a063b84094452c21cb734a379da978
---
 .../components/notifications/notification.tsx    | 16 ++++++++--------
 .../web/frontend/stories/style-guide.stories.js  | 16 ++++++++++++++++
 .../frontend/stylesheets/app/project-list.less   |  3 +--
 .../frontend/stylesheets/components/alerts.less  |  1 +
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
index b60c543b3f..27b464c7e3 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { Alert, AlertProps } from 'react-bootstrap'
 import Body from './body'
 import Action from './action'
-import Close from './close'
 import classnames from 'classnames'
+import { useTranslation } from 'react-i18next'
 
 type NotificationProps = {
   bsStyle: AlertProps['bsStyle']
@@ -20,6 +20,7 @@ function Notification({
   ...props
 }: NotificationProps) {
   const [show, setShow] = useState(true)
+  const { t } = useTranslation()
 
   const handleDismiss = () => {
     if (onDismiss) {
@@ -35,13 +36,12 @@ function Notification({
 
   return (
     <li className={classnames('notification-entry', className)} {...props}>
-      <Alert bsStyle={bsStyle}>
-        {children}
-        {onDismiss ? (
-          <div className="notification-close">
-            <Close onDismiss={handleDismiss} />
-          </div>
-        ) : null}
+      <Alert
+        bsStyle={bsStyle}
+        onDismiss={onDismiss ? handleDismiss : undefined}
+        closeLabel={t('close')}
+      >
+        <div className="notification-entry-content">{children}</div>
       </Alert>
     </li>
   )
diff --git a/services/web/frontend/stories/style-guide.stories.js b/services/web/frontend/stories/style-guide.stories.js
index 7fb8f68d69..d8040a863e 100644
--- a/services/web/frontend/stories/style-guide.stories.js
+++ b/services/web/frontend/stories/style-guide.stories.js
@@ -234,6 +234,7 @@ export const Alerts = () => {
           <Col md={8} mdOffset={2}>
             <h2>Alerts</h2>
 
+            <h3>Non-dismissible alerts</h3>
             <Alert bsStyle="danger">
               An <code>.alert-danger</code> alert
             </Alert>
@@ -246,6 +247,21 @@ export const Alerts = () => {
             <Alert bsStyle="warning">
               An <code>.alert-warning</code> alert
             </Alert>
+
+            <hr />
+            <h3>Dismissible alerts</h3>
+            <Alert bsStyle="danger" onDismiss={() => {}}>
+              An <code>.alert-danger</code> alert
+            </Alert>
+            <Alert bsStyle="success" onDismiss={() => {}}>
+              An <code>.alert-success</code> alert
+            </Alert>
+            <Alert bsStyle="info" onDismiss={() => {}}>
+              An <code>.alert-info</code> alert
+            </Alert>
+            <Alert bsStyle="warning" onDismiss={() => {}}>
+              An <code>.alert-warning</code> alert
+            </Alert>
           </Col>
         </Row>
       </Grid>
diff --git a/services/web/frontend/stylesheets/app/project-list.less b/services/web/frontend/stylesheets/app/project-list.less
index afffeb558c..b0bcfb244a 100644
--- a/services/web/frontend/stylesheets/app/project-list.less
+++ b/services/web/frontend/stylesheets/app/project-list.less
@@ -240,8 +240,7 @@ input.project-list-table-select-item[type='checkbox'] {
     margin-bottom: 0px;
   }
   .notification-entry {
-    .alert {
-      .box-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
+    .notification-entry-content {
       display: flex;
       flex-wrap: wrap;
       @media (min-width: @screen-sm-min) {
diff --git a/services/web/frontend/stylesheets/components/alerts.less b/services/web/frontend/stylesheets/components/alerts.less
index e84a12d6e4..7702816fc2 100755
--- a/services/web/frontend/stylesheets/components/alerts.less
+++ b/services/web/frontend/stylesheets/components/alerts.less
@@ -48,6 +48,7 @@
     top: -2px;
     right: -21px;
     color: inherit;
+    text-shadow: none;
   }
 }