fix(alert): remove broken close button on Bootstrap 5 sites

Author: yomatters

src/edit-resource/EditResource.jsx

@@ -102,7 +102,7 @@ export default function EditResource({
     return (
       <div>
         {errors.map((error, index) => (
-          <Alert key={index} color="danger">
+          <Alert key={index} color="danger" dismissable={true}>
             {error}
           </Alert>
         ))}
@@ -114,7 +114,9 @@ export default function EditResource({
   return (
     <div className="edit-resource">
       {successMessage.message && (
-        <Alert color={successMessage.color}>{successMessage.message}</Alert>
+        <Alert color={successMessage.color} dismissable={true}>
+          {successMessage.message}
+        </Alert>
       )}
       <div>
         <h2>Resource Propeties</h2>

src/shared/Alert.jsx

@@ -1,18 +1,22 @@
-const Alert = ({ children, color }) => {
+// TODO: Make alerts dismissable on Bootstrap 5. Currently the dismiss feature
+// only works on Bootstrap 2 sites (e.g., Admin).
+const Alert = ({ children, color, dismissable = false }) => {
   return (
     <div
       className={`alert alert-${color} mt-3 alert-dismissible show`}
       role="alert"
     >
       {children}
-      <button
-        type="button"
-        className="close"
-        data-dismiss="alert"
-        aria-label="Close"
-      >
-        <span aria-hidden="true">&times;</span>
-      </button>
+      {dismissable && (
+        <button
+          type="button"
+          className="close"
+          data-dismiss="alert"
+          aria-label="Close"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      )}
     </div>
   );
 };