Revert "Refactor project list notification by using `onDismiss` on `Alert` instead of custom `Close` component (#12043)" (#12133)

This reverts commit 9a3f95c322a063b84094452c21cb734a379da978

GitOrigin-RevId: 31fb4b1d429e2e9c611178afc3dc3c662340be44

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,7 +20,6 @@ function Notification({
   ...props
 }: NotificationProps) {
   const [show, setShow] = useState(true)
-  const { t } = useTranslation()
 
   const handleDismiss = () => {
     if (onDismiss) {
@@ -36,12 +35,13 @@ function Notification({
 
   return (
     <li className={classnames('notification-entry', className)} {...props}>
-      <Alert
-        bsStyle={bsStyle}
-        onDismiss={onDismiss ? handleDismiss : undefined}
-        closeLabel={t('close')}
-      >
-        <div className="notification-entry-content">{children}</div>
+      <Alert bsStyle={bsStyle}>
+        {children}
+        {onDismiss ? (
+          <div className="notification-close">
+            <Close onDismiss={handleDismiss} />
+          </div>
+        ) : null}
       </Alert>
     </li>
   )

services/web/frontend/stories/style-guide.stories.js

@@ -234,7 +234,6 @@ 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>
@@ -247,21 +246,6 @@ 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,7 +240,8 @@ input.project-list-table-select-item[type='checkbox'] {
     margin-bottom: 0px;
   }
   .notification-entry {
-    .notification-entry-content {
+    .alert {
+      .box-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
       display: flex;
       flex-wrap: wrap;
       @media (min-width: @screen-sm-min) {

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

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