add close button to error toast

pixiebrix · Nov 14, 2024 · d7a93eb · d7a93eb
1 parent 2199aa3
commit d7a93eb
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/applications/browser-extension/src/components/richTextEditor/RichTextEditor.module.scss b/applications/browser-extension/src/components/richTextEditor/RichTextEditor.module.scss
@@ -44,10 +44,29 @@
 }
 
 .error {
+  display: flex !important;
+  align-items: center;
   color: #dc3545;
   padding: 4px 8px;
   font-size: 0.875rem;
   position: absolute;
   bottom: 4px;
   left: 4px;
+
+  :global(.btn) {
+    margin-left: 8px;
+    color: #dc3545;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+
+    &:focus,
+    &:active,
+    &:hover,
+    &:active:focus {
+      color: #dc3545;
+      background-color: transparent;
+      box-shadow: none !important;
+    }
+  }
 }
diff --git a/applications/browser-extension/src/components/richTextEditor/RichTextEditor.tsx b/applications/browser-extension/src/components/richTextEditor/RichTextEditor.tsx
@@ -25,9 +25,12 @@ import React, { useState } from "react";
 import Toolbar from "@/components/richTextEditor/toolbar/Toolbar";
 import { type UUID } from "@/types/stringTypes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+import {
+  faExclamationCircle,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";
 import ErrorContext from "@/components/richTextEditor/ErrorContext";
-import { Toast } from "react-bootstrap";
+import { Button, Toast } from "react-bootstrap";
 
 type EditorProps = EditorProviderProps & {
   // A PixieBrix asset database ID to use for uploading images. If not included, the image extension will be disabled.
@@ -71,7 +74,22 @@ const RichTextEditor: React.FunctionComponent<EditorProps> = ({
           ]}
           slotBefore={<Toolbar />}
           slotAfter={
-              <Toast show={Boolean(error)} onClose={() => {setError(null)}} className={styles.error} autohide><FontAwesomeIcon icon={faExclamationCircle} /> {error}</Toast>
+            <Toast
+              show={Boolean(error)}
+              onClose={() => {
+                setError(null);
+              }}
+              className={styles.error}
+              autohide
+              animation={false}
+              delay={5000}
+            >
+              <FontAwesomeIcon className="mr-2" icon={faExclamationCircle} />{" "}
+              {error}
+              <Button variant="outline-danger" onClick={() => setError(null)}>
+                <FontAwesomeIcon icon={faTimes} />
+              </Button>
+            </Toast>
           }
           {...props}
         />

diff --git a/applications/browser-extension/src/components/richTextEditor/toolbar/ImageButton/index.tsx b/applications/browser-extension/src/components/richTextEditor/toolbar/ImageButton/index.tsx
@@ -23,7 +23,7 @@ import { faImage } from "@fortawesome/free-solid-svg-icons";
 import { assertNotNullish } from "@/utils/nullishUtils";
 import useUploadAsset from "@/components/richTextEditor/toolbar/ImageButton/useUploadAsset";
 import { validateUUID } from "@/types/helpers";
-import {useShowError} from "@/components/richTextEditor/ErrorContext";
+import { useShowError } from "@/components/richTextEditor/ErrorContext";
 
 const getAssetDatabaseId = (editor: Editor) => {
   const imageExtension = editor.options.extensions.find(
@@ -71,9 +71,7 @@ const ImageButton: React.FunctionComponent = () => {
           .setImage({ src: downloadUrl.href, alt: "" })
           .run();
       } catch (error) {
-        // TODO: Implement error message handling in UI
-        setError("Failed to upload image asset, try again");
-
+        setError("Failed to upload image, try again");
         reportError(
           new Error("Failed to upload image asset", {
             cause: error,