toasts and focus handling

Author: emrberk

packages/web-console/src/components/PopperToggle/index.tsx

@@ -114,23 +114,33 @@ export const PopperToggle = ({
   useTransition(container, _active, transitionTimeoutId)
 
   useEffect(() => {
-    setActive(typeof active === "undefined" ? _active || false : active)
-  }, [active, _active])
+    if (typeof active !== "undefined") {
+      setActive(active)
+    }
+  }, [active])
+
+  useEffect(() => {
+    document.body.appendChild(container)
+
+    return () => {
+      clearTimeout(transitionTimeoutId.current)
+      if (document.body.contains(container)) {
+        document.body.removeChild(container)
+      }
+    }
+  }, [container])
 
   useEffect(() => {
     document.addEventListener("mousedown", handleMouseDown)
     document.addEventListener("touchstart", handleMouseDown)
     document.addEventListener("keydown", handleKeyDown)
 
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      clearTimeout(transitionTimeoutId.current)
       document.removeEventListener("mousedown", handleMouseDown)
       document.removeEventListener("touchstart", handleMouseDown)
       document.removeEventListener("keydown", handleKeyDown)
-      document.body.contains(container) && document.body.removeChild(container)
     }
-  }, [container, handleMouseDown, handleKeyDown])
+  }, [handleMouseDown, handleKeyDown])
 
   return (
     <>

packages/web-console/src/components/Toast/index.tsx

@@ -2,63 +2,132 @@ import React from "react"
 import {
   ToastContainer as RTToastContainer,
   ToastContainerProps,
-  toast as _toast,
+  toast as rtToast,
   Slide,
   ToastOptions as RTToastOptions,
+  ToastContent,
 } from "react-toastify"
 import { useNotificationCenter as RTNotificationCenter } from "react-toastify/addons/use-notification-center"
 import { NotificationCenterItem as RNotificationCenterItem } from "react-toastify/addons/use-notification-center/useNotificationCenter"
 import { BadgeType } from "../../scenes/Import/ImportCSVFiles/types"
 import {
-  Check,
   CloseCircle,
   ErrorWarning,
   Information,
 } from "@styled-icons/remix-line"
+import { CheckmarkOutline } from "@styled-icons/evaicons-outline"
 import { theme } from "../../theme"
 
 import "react-toastify/dist/ReactToastify.css"
+import "../../styles/_toast.scss"
 
 interface StyledIconProps
   extends React.PropsWithRef<React.SVGProps<SVGSVGElement>> {
   size?: number | string
   title?: string | null
 }
 
-export const toast = _toast
+export type ToastOptions = RTToastOptions
 
 export const useNotificationCenter = RTNotificationCenter
 
 export type NotificationCenterItem<Data> = RNotificationCenterItem<Data>
 
-export type ToastOptions = RTToastOptions
-
 export const ToastIcon = ({
   type,
+  size = 18,
   ...props
 }: StyledIconProps & {
   type: BadgeType
 }) => {
   switch (type) {
     case BadgeType.SUCCESS:
-      return <Check {...props} color={theme.color.green} />
+      return <CheckmarkOutline {...props} size={size} color={theme.color.green} />
     case BadgeType.WARNING:
-      return <ErrorWarning {...props} color={theme.color.orange} />
+      return <ErrorWarning {...props} size={size} color={theme.color.orange} />
     case BadgeType.ERROR:
-      return <CloseCircle {...props} color={theme.color.red} />
+      return <CloseCircle {...props} size={size} color={theme.color.red} />
     case BadgeType.INFO:
     default:
-      return <Information {...props} color={theme.color.cyan} />
+      return <Information {...props} size={size} color={theme.color.cyan} />
   }
 }
 
+const toast = {
+  info: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.info(content, {
+      icon: <ToastIcon type={BadgeType.INFO} />,
+      className: "toast-info-container",
+      progressStyle: {
+        background: theme.color.cyan,
+      },
+      style: {
+        borderColor: theme.color.cyan,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  success: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.success(content, {
+      icon: <ToastIcon type={BadgeType.SUCCESS} />,
+      className: "toast-success-container",
+      progressStyle: {
+        background: theme.color.green,
+      },
+      style: {
+        borderColor: theme.color.green,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  warning: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.warning(content, {
+      icon: <ToastIcon type={BadgeType.WARNING} />,
+      className: "toast-warning-container",
+      progressStyle: {
+        background: theme.color.orange,
+      },
+      style: {
+        borderColor: theme.color.orange,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  error: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.error(content, {
+      icon: <ToastIcon type={BadgeType.ERROR} />,
+      progressStyle: {
+        background: theme.color.red,
+      },
+      className: "toast-error-container",
+      style: {
+        borderColor: theme.color.red,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  dismiss: rtToast.dismiss,
+  isActive: rtToast.isActive,
+}
+
+export { toast }
+
 export const ToastContainer = (props?: ToastContainerProps) => {
   const mergedProps: ToastContainerProps = {
     autoClose: 3000,
     draggable: false,
     position: "top-right",
     theme: "dark",
     transition: Slide,
+    hideProgressBar: false,
+    closeButton: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    pauseOnFocusLoss: false,
     ...props,
   }
 

packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx

@@ -226,19 +226,12 @@ const ErrorText = styled(Text)`
   margin-top: 0.2rem;
 `
 
-const Footer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
-
 type Props = {
   active: boolean
   onToggle: (active: boolean) => void
   values: Preferences
   onSave: (values: Preferences) => Promise<void>
   onValuesChange: (values: Preferences) => void
-  error: string | null
   trigger: ReactNode
 }
 
@@ -248,7 +241,6 @@ export const InstanceSettingsPopper = ({
   values, 
   onSave, 
   onValuesChange,
-  error,
   trigger,
 }: Props) => {
   const [isSaving, setIsSaving] = useState(false)
@@ -457,26 +449,23 @@ export const InstanceSettingsPopper = ({
               </ColorPickerContainer>
             )}
           </FormGroup>
-          <Footer>
-            {error && <ErrorText>{error}</ErrorText>}
-            <Buttons>
-              <StyledButton 
-                type="submit"
-                prefixIcon={isSaving ? <Loader /> : undefined} 
-                data-hook="topbar-instance-save-button"
-              >
-                Save
-              </StyledButton>
-              <StyledButton 
-                type="button"
-                onClick={() => onToggle(false)} 
-                skin="secondary" 
-                data-hook="topbar-instance-cancel-button"
-              >
-                Cancel
-              </StyledButton>
-            </Buttons>
-          </Footer>
+          <Buttons>
+            <StyledButton 
+              type="submit"
+              prefixIcon={isSaving ? <Loader /> : undefined} 
+              data-hook="topbar-instance-save-button"
+            >
+              Save
+            </StyledButton>
+            <StyledButton 
+              type="button"
+              onClick={() => onToggle(false)} 
+              skin="secondary" 
+              data-hook="topbar-instance-cancel-button"
+            >
+              Cancel
+            </StyledButton>
+          </Buttons>
         </StyledForm>
       </Wrapper>
     </PopperToggle>