@rpcbase/client 0.178.0 → 0.180.0-notifications.0

package/AppProvider/index.js

@@ -13,6 +13,7 @@ import {flagValues} from "config/flags"
 
 import {POSTHOG_KEY} from "env"
 import { useAuthRouter } from "../auth/useAuthRouter"
+import { NotificationsProvider, NotificationsList } from "../notifications"
 
 
 const PostHogWrapper = ({children, ...props}) => {
@@ -56,10 +57,13 @@ const AppProvider = ({children, ...props}) => {
   return (
     <PostHogWrapper>
       <HashStateProvider>
-        <div className={cx({"d-none": !!authComponent})}>
-          {children}
-        </div>
-        {authComponent}
+        <NotificationsProvider>
+          <div className={cx({"d-none": !!authComponent})}>
+            {children}
+          </div>
+          {authComponent}
+          <NotificationsList />
+        </NotificationsProvider>
       </HashStateProvider>
     </PostHogWrapper>
   )

package/auth/components/SignOut/index.js

@@ -14,6 +14,7 @@ import {AccountListItem} from "../AccountsList/AccountListItem"
 import {Footer} from "../Footer"
 
 import "./sign-out.scss"
+import { useNotifications } from "../../../notifications"
 
 // TODO: rts_disconnect
 // TODO: clear cache + db
@@ -26,6 +27,8 @@ export const SignOut = ({
 }) => {
   const {t} = useTranslation("rb.sign_out", {useSuspense: false})
 
+  const {addToast} = useNotifications()
+
   const [isSignedOut, setIsSignedOut] = useState(false)
 
   const [accounts, setAccounts] = useState()
@@ -44,13 +47,20 @@ export const SignOut = ({
     load()
   }, [])
 
-
   const onSignOut = async() => {
     // TODO: NYI handle sign out from multiple accounts here
     const res = await post("/api/v1/auth/sign_out")
     if (res.status === "ok") {
       signOut()
       setIsSignedOut(true)
+
+      const toast = addToast({
+        // id: `create-template-${Date.now()}`,
+        loading: false,
+        title: "Signed out",
+        message: "You have been signed out click here to sign back in",
+      })
+
       onSignOutSuccess()
     } else {
       throw new Error("unable to sign out")

package/notifications/Notification/index.js

@@ -0,0 +1,36 @@
+/* @flow */
+import * as React from "react"
+import { useCallback } from "react";
+
+import type {Notification as NotificationType} from "types/notification"
+
+import "./notification.scss"
+
+type Props = {
+  notification: NotificationType,
+  onClick?: () => void,
+}
+
+const Notification = ({ ref, notification, onClick }: Props) => {
+  const handleClick = useCallback(() => {
+    if (onClick) {
+      onClick();
+    }
+  }, [onClick]);
+
+  return (
+    <a
+      className={cx(["dropdown-item", notification.ack && "disabled"])}
+      href="#"
+      ref={ref}
+      onClick={handleClick}
+    >
+      <span>{notification.title}</span>
+      <p className="text-secondary mb-0" style={{whiteSpace: "initial"}}>
+        {notification.description}
+      </p>
+    </a>
+  );
+}
+
+export default Notification

package/notifications/Notification/notification.scss

@@ -0,0 +1 @@
+@import "helpers";

package/notifications/NotificationToast/HeaderStatus.js

@@ -0,0 +1,93 @@
+/* @flow */
+import {motion} from "framer-motion"
+import {useEffect, useRef, useState} from "react"
+
+import ActivityIndicator from "../../ui/ActivityIndicator"
+import LottiePlayer from "../../ui/LottiePlayer"
+
+import {SPRING_BOUNCY} from "../../ui/springs"
+
+import checkmarkAnimation from "../../ui/animations/checkmark.json"
+
+// TODO: we should have a way to unmount loader when animation complete
+const HeaderStatus = ({isLoading, status}) => {
+  const playerRef = useRef()
+
+  const initiallyLoading = useRef(isLoading)
+
+  const [hasLoader, setHasLoader] = useState(isLoading)
+
+  const [statusAnimatedVals, setStatusAnimatedVals] = useState({})
+  const [loaderAnimatedVals, setLoaderAnimatedVals] = useState({})
+
+  useEffect(() => {
+    // set initial seeker position, TODO: this doesn't work without the animation frame
+    requestAnimationFrame(() => {
+      playerRef.current?.setSeeker(16, false)
+    })
+  }, [])
+
+  const runTransition = () => {
+    setStatusAnimatedVals({scale: 1, opacity: 1})
+    setLoaderAnimatedVals({scale: 0, opacity: 0})
+    requestAnimationFrame(() => {
+      playerRef.current?.play()
+    })
+  }
+
+  useEffect(() => {
+    // TODO: why was it checking on initiallyLoading.current ?
+    // if (!isLoading && initiallyLoading.current) {
+    if (!isLoading) {
+      runTransition()
+    }
+  }, [isLoading])
+
+  const onLoaderAnimationComplete = () => {
+    setHasLoader(false)
+  }
+
+  return (
+    <div style={{position: "relative", background: "red", width: 28}}>
+      <motion.div
+        className="status-icon"
+        style={{position: "absolute", top: -11}}
+        initial={{scale: 0.5, opacity: 0}}
+        // initial={{scale: 1, opacity: 1}}
+        transition={SPRING_BOUNCY}
+        animate={statusAnimatedVals}
+      >
+        <LottiePlayer
+          className={cx("", {})}
+          ref={playerRef}
+          autoplay={false}
+          loop={false}
+          speed={1}
+          keepLastFrame={true}
+          src={checkmarkAnimation}
+          style={{
+            height: `${23}px`,
+            width: `${23}px`,
+            // opacity: .15,
+          }}
+          // onEvent={this.onPlayerEvent}
+        />
+      </motion.div>
+
+      {hasLoader && (
+        <motion.div
+          style={{position: "absolute", left: 1, top: -9}}
+          initial={{scale: 1, opacity: 1}}
+          // initial={{scale: 1, opacity: 0}}
+          transition={SPRING_BOUNCY}
+          animate={loaderAnimatedVals}
+          onAnimationComplete={onLoaderAnimationComplete}
+        >
+          <ActivityIndicator size={19} />
+        </motion.div>
+      )}
+    </div>
+  )
+}
+
+export default HeaderStatus

package/notifications/NotificationToast/index.js

@@ -0,0 +1,67 @@
+/* @flow */
+import assert from "assert"
+import {useRef} from "react"
+import Toast from "react-bootstrap/Toast"
+import {CSSTransition} from "react-transition-group"
+
+import {useNotifications} from "../NotificationsContext"
+
+import HeaderStatus from "./HeaderStatus"
+
+// TODO: mv to rb server
+// import ack_notification from "rpc!server/notifications/ack_notification"
+
+import "./notification-toast.scss"
+
+
+const NotificationToast = ({ nodeRef, notification }) => {
+  const { setNotifications } = useNotifications()
+
+  const { isLoading = false, status = "success", zIndex = 999 } = notification
+
+  const onClick = () => {
+    console.log("onclicknotif", notification)
+  }
+
+  // remove notification on close
+  const onClose = async () => {
+    console.log("onClose!!!")
+    if (notification.id) {
+      console.warn("ACK NOTIFICATION not copied to rb-server yet")
+      // const res = await ack_notification({
+      //   notification_id: notification.id,
+      //   ack_at_ms: Date.now(),
+      // })
+      // assert(res.status === "ok")
+    }
+
+    setNotifications((current) => {
+      return current.filter((n) => n.id !== notification.id)
+    })
+  }
+
+  // no header when no body
+  const hasBody = !!notification.body
+
+  return (
+      <Toast
+        ref={nodeRef}
+        className={cx("notifs-item mt-2 notification-toast", {"has-no-body": !hasBody})}
+        style={{position: "relative", zIndex}}
+        onClose={onClose}
+        animation={false}
+      >
+        <Toast.Header className="ps-2 py-2" closeButton={true}>
+          {notification.icon ? <div>{"<IC>"}</div> : <HeaderStatus isLoading={isLoading} status={status} />}
+
+          <div className="me-auto">{notification.title}</div>
+          {notification.type === "workflow" && <small>{notification.formatted_timestamp}</small>}
+          {notification.type === "intent" && <small>INTENT</small>}
+        </Toast.Header>
+
+        {hasBody && <Toast.Body onClick={onClick}>{notification.body}</Toast.Body>}
+      </Toast>
+  )
+}
+
+export default NotificationToast

package/notifications/NotificationToast/notification-toast.scss

@@ -0,0 +1,25 @@
+@import "helpers";
+
+.notification-toast.toast {
+  max-width: 260px;
+
+  .toast-header {
+    color: $gray-900;
+    font-weight: 600;
+  }
+
+  &.has-no-body {
+    background: $white !important;
+
+    .toast-header {
+      background: transparent !important;
+      border-bottom: none;
+    }
+  }
+
+  svg {
+    path {
+      fill: $green-500 !important;
+    }
+  }
+}

package/notifications/NotificationsContext/index.js

@@ -0,0 +1,84 @@
+/* @flow */
+import {useEffect, createContext, useContext} from "react"
+
+import {useNotificationsList} from "./useNotificationsList"
+
+// const ICONS_MAP = {
+//   warning: "warning",
+//   error: "danger",
+// }
+
+export const NotificationsContext = createContext()
+
+export const NotificationsProvider = ({value, children}) => {
+  const [notifications, setNotifications] = useNotificationsList([
+    // WARNING: Debug only, this breaks unit tests
+    {
+      title: "Hello world",
+      body: "helloooooo",
+      timestamp: Date.now(),
+      level: "error",
+      icon: "error",
+    },
+  ])
+
+  // A toast is displayed with notifications, but it is ephemeral and in the UI only
+  // they are used to provide feedback on an action that is a little longer than a simple form submit
+  // they are gone when the page refreshes
+  // toasts appear above modals
+  const addToast = ({
+    id,
+    title,
+    body,
+    timestamp = Date.now(),
+    zIndex = 2000,
+    isLoading = false,
+  }) => {
+    const toast = {
+      id: id || `notif-${Date.now().toString()}`,
+      title,
+      body,
+      timestamp,
+      zIndex,
+      level: "toast",
+      isLoading,
+      // icon: ICONS_MAP.error,
+    }
+
+    setNotifications((current) => {
+      const next = [...current]
+      next.push(toast)
+      return next
+    })
+
+    const dismiss = () => {
+      setNotifications((current) => {
+        const next = [...current]
+        return next.filter((notif) => notif.id !== id)
+      })
+    }
+
+    const update = (payload) => {
+      setNotifications((current) => {
+        const next = [...current]
+        return next.map((notif) => {
+          if (notif.id === id) {
+            // notif.isLoading = false
+            Object.assign(notif, payload)
+          }
+          return notif
+        })
+      })
+    }
+
+    return {dismiss, update}
+  }
+
+  return (
+    <NotificationsContext.Provider value={{notifications, setNotifications, addToast}}>
+      {children}
+    </NotificationsContext.Provider>
+  )
+}
+
+export const useNotifications = () => useContext(NotificationsContext)

package/notifications/NotificationsContext/useNotificationsList.js

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* @flow */
+import {useState, useEffect} from "react"
+
+import {useQuery} from "../../rts"
+
+import {ON_NOTIFICATION_RECEIVED_EVENT} from "../config"
+
+export const useNotificationsList = (initial = []) => {
+  const [allNotifications, setAllNotifications] = useState(initial)
+
+  const notificationsQuery = useQuery(
+    "Notification",
+    {
+      $or: [{ack_at_ms: null}, {ack_at_ms: {$exists: false}}],
+    },
+    {
+      projection: {
+        _owners: 0,
+      },
+    },
+  )
+
+  useEffect(() => {
+    if (!notificationsQuery.data) return
+
+    // console.log("NOTIFS TMP RETURN", notificationsQuery.data)
+    return
+
+    // console.log("got new notifs data", notificationsQuery.data)
+
+    // get all current ids
+    const allNotificationsIds = allNotifications.filter((n) => !!n.id).map((n) => n.id)
+
+    const insertNotifications = notificationsQuery.data.filter(
+      (n) => !allNotificationsIds.includes(n._id),
+    )
+
+    const notificationsDataIds = notificationsQuery.data.map((n) => n._id)
+
+    // remove all notifications that are from the notifications collection
+    const removeNotificationsIds = allNotifications
+      .filter((n) => !!n.id && n.col === "Notification")
+      .filter((n) => !notificationsDataIds.includes(n.id))
+      .map((n) => n.id)
+
+    // update our notifications
+    if (insertNotifications.length > 0 || removeNotificationsIds.length > 0) {
+      setAllNotifications((previous) => {
+        // copy and remove old notifs
+        const nextNotifs = [...previous].filter((n) => !removeNotificationsIds.includes(n.id))
+
+        const formattedNotifications = insertNotifications.map((n) => {
+          return {
+            id: n._id,
+            col: "Notification",
+            ...n.notification,
+            timestamp: n.server_timestamp_ms,
+          }
+        })
+
+        nextNotifs.unshift(...formattedNotifications)
+        return nextNotifs
+      })
+    }
+
+    // play animation if we added anything
+    if (insertNotifications.length > 0) {
+      const ev = new CustomEvent(ON_NOTIFICATION_RECEIVED_EVENT)
+      document.body.dispatchEvent(ev)
+    }
+  }, [notificationsQuery.data, allNotifications])
+
+  return [allNotifications, setAllNotifications]
+}

package/notifications/NotificationsList/index.js

@@ -0,0 +1,44 @@
+/* @flow */
+import assert from "assert"
+import {useEffect, useState, createRef} from "react"
+import {CSSTransition, TransitionGroup} from "react-transition-group"
+
+import ToastContainer from "react-bootstrap/ToastContainer"
+
+import {formatDistance} from "date-fns/formatDistance"
+
+import {useQuery} from "@rpcbase/client/rts"
+
+import {useNotifications} from "../NotificationsContext"
+import NotificationToast from "../NotificationToast"
+
+import useLLTs from "./useLLTs"
+
+import "./notifications.scss"
+
+export const NotificationsList = () => {
+  const {notifications, setNotifications} = useNotifications()
+
+  const llts = useLLTs()
+
+  const renderNotification = (notification, i) => {
+    const key = notification.id
+    const nodeRef = createRef()
+
+    return (
+      <CSSTransition key={notification.id} nodeRef={nodeRef} timeout={200} classNames="notifs-item">
+        <NotificationToast key={key} nodeRef={nodeRef} notification={notification} />
+      </CSSTransition>
+    )
+  }
+
+  return (
+    <ToastContainer position="bottom-end" className="pb-4 pe-3 ps-4" style={{position: "absolute", overflowY: "scroll", bottom: 0, right: 0}}>
+    <div className="notifications-list-wrapper">
+      <TransitionGroup className="transition-list">
+        {notifications.map(renderNotification)}
+      </TransitionGroup>
+    </div>
+    </ToastContainer>
+  )
+}

package/notifications/NotificationsList/notifications.scss

@@ -0,0 +1,33 @@
+@import "helpers";
+
+$transition-duration: 200ms;
+
+.notifications-list-wrapper {
+
+  .action-notification {
+    cursor: pointer;
+  }
+
+  .transition-list {
+    transition: max-height $transition-duration ease-in-out;
+  }
+
+  .notifs-item-enter {
+    opacity: 0;
+  }
+
+  .notifs-item-enter-active {
+    opacity: 1;
+    transition: opacity 400ms;
+  }
+
+  .notifs-item-exit {
+    opacity: 1;
+  }
+
+  .notifs-item-exit-active {
+    transform: translateX(390px);
+
+    transition: all $transition-duration ease-out;
+  }
+}

package/notifications/NotificationsList/useLLTs.js

@@ -0,0 +1,28 @@
+/* @flow */
+import assert from "assert"
+import {useEffect, useState} from "react"
+
+// TODO: fix ltts import to rb
+// import get_llts from "rpc!server/notifications/llt/get_llts"
+
+
+const useLLTs = () => {
+  const [llts, setLLTs] = useState([])
+
+  useEffect(() => {
+    const load = async() => {
+      // const res = await get_llts({
+      //   env_id: envContext.envId,
+      // })
+      const res =  {status: "ok", llts: []}
+      assert(res.status === "ok", "unable to retrieve llts")
+      setLLTs(res.llts)
+    }
+
+    load()
+  }, [])
+
+  return llts
+}
+
+export default useLLTs

package/notifications/NotificationsSettingsModal/SettingsForm.js

@@ -0,0 +1,52 @@
+/* @flow */
+import Form from "react-bootstrap/Form"
+import TimePicker from "react-time-picker"
+
+import {useStoredValue} from "@rpcbase/client"
+
+
+const TIME_FORMAT = "HH:mm"
+
+const timePickerProps = {
+  format: TIME_FORMAT,
+  maxDetail: "minute",
+  renderSecondHand: false,
+}
+
+const SettingsForm = () => {
+  const [isEnabled, setIsEnabled] = useStoredValue("has_notifications_enabled", "yes")
+
+  const [fromTime, setFromTime] = useStoredValue("notifications_from_time", "09:00")
+  const [toTime, setToTime] = useStoredValue("notifications_to_time", "22:00")
+
+  const onToggleNotifications = (e) => {
+    setIsEnabled(e.target.checked ? "yes" : "no")
+  }
+
+  return (
+    <div className="px-2 py-3">
+      <div>
+        <div className="h6 fw-bold">Enable Notifications</div>
+        <Form.Check
+          type="switch"
+          id="toggle-notifications-switch"
+          label={`Notifications are ${isEnabled ? "enabled" : "disabled"}`}
+          checked={isEnabled === "yes"}
+          onChange={onToggleNotifications}
+        />
+      </div>
+
+      <div className="mt-3">
+        <div className="h6 fw-bold">Notifications are allowed:</div>
+        <div className="">
+          <span className="me-2">From:</span>
+          <TimePicker onChange={setFromTime} value={fromTime} {...timePickerProps} />
+          <span className="me-2">To:</span>
+          <TimePicker onChange={setToTime} value={toTime} {...timePickerProps} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SettingsForm

package/notifications/NotificationsSettingsModal/index.js

@@ -0,0 +1,48 @@
+/* @flow */
+import ActivityIndicator from "@rpcbase/ui/ActivityIndicator"
+import Modal, {withHashStateModal} from "@rpcbase/ui/Modal"
+
+// import TemplatesView from "./TemplatesView"
+// import {TemplateContextProvider} from "./TemplateContext"
+
+// import DialogAnimatedPreview from "./components/DialogAnimatedPreview"
+// import TogglePreviewButton from "./components/TogglePreviewButton"
+
+import SettingsForm from "./SettingsForm"
+
+import BellGlyph from "static/icons/notifications/bell-glyph.svg"
+
+import "./notifications-settings.scss"
+
+
+const NotificationsSettingsModal = ({onHide}) => {
+  const isLoading = false
+
+  return (
+    <Modal className="channel-templates-modal" show scrollable={false} onHide={onHide}>
+      <Modal.Header className="close-top" closeButton>
+        <BellGlyph className="me-2 align-self-start mt-1" width={22} fill={"#0d6efd"} />
+        <div>
+          <div>Notifications</div>
+        </div>
+      </Modal.Header>
+      <Modal.Body className="p-0" style={{maxHeight: "70vh", overflow: "visible"}}>
+        {isLoading && (
+          <div className="d-flex flex-row align-items-center">
+            <ActivityIndicator size={24} />
+            <div className="ms-2">Loading text...</div>
+          </div>
+        )}
+
+        <SettingsForm />
+      </Modal.Body>
+      <Modal.Footer className="d-flex justify-content-between">
+        <div>
+          For more info see <a href="/docs/notifications">/docs/notifications</a>
+        </div>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+export default withHashStateModal(NotificationsSettingsModal, "showNotificationsSettingsModal")

package/notifications/NotificationsSettingsModal/notifications-settings.scss

@@ -0,0 +1 @@
+@import "helpers";

package/notifications/config.js

@@ -0,0 +1 @@
+export const ON_NOTIFICATION_RECEIVED_EVENT = "ON_NOTIFICATION_RECEIVED_EVENT"

package/notifications/index.js

@@ -0,0 +1,4 @@
+export * from "./NotificationsContext"
+export * from "./NotificationsList"
+
+export * from "./config"