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

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>
   )

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>

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) {

services/web/frontend/stylesheets/components/alerts.less

@@ -48,6 +48,7 @@
     top: -2px;
     right: -21px;
     color: inherit;
+    text-shadow: none;
   }
 }