[CP-3004] Added toast component

libs/core/__deprecated__/renderer/store/reducers.ts

@@ -33,6 +33,7 @@ import {
   importsReducer,
   externalProvidersReducer,
   genericEntitiesReducer,
+  genericToastsReducer,
 } from "generic-view/store"
 import { appStateReducer } from "shared/app-state"
 import { activeDeviceRegistryReducer } from "active-device-registry/feature"
@@ -70,6 +71,7 @@ export const reducers = {
   genericDataTransfer: genericDataTransferReducer,
   helpV2: helpReducer,
   genericEntities: genericEntitiesReducer,
+  genericToasts: genericToastsReducer,
 }
 
 export const combinedReducers = combineReducers(reducers)

libs/generic-view/feature/src/lib/generic-toasts.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React, { FunctionComponent, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { ReduxRootState } from "Core/__deprecated__/renderer/store"
+import RecursiveLayout from "./recursive-layout"
+import { selectViewConfig } from "generic-view/store"
+import { createSelector } from "reselect"
+import { isEmpty } from "lodash"
+import styled from "styled-components"
+
+const selectToastsToRender = createSelector(selectViewConfig, (config) => {
+  return Object.entries(config || {})
+    .filter(([, { component }]) => ["toast"].includes(component))
+    .map(([key]) => key)
+})
+
+interface Props {
+  viewKey: string
+}
+
+export const GenericToasts: FunctionComponent<Props> = ({ viewKey }) => {
+  const toastsToRender = useSelector((state: ReduxRootState) =>
+    selectToastsToRender(state, { viewKey })
+  )
+  const toastsToRenderDependency = JSON.stringify(toastsToRender)
+
+  return useMemo(() => {
+    if (isEmpty(toastsToRender)) {
+      return null
+    }
+    return (
+      <ToastsWrapper>
+        {toastsToRender.map((toastKey) => {
+          return (
+            <RecursiveLayout
+              key={toastKey}
+              viewKey={viewKey}
+              componentKey={toastKey}
+            />
+          )
+        })}
+      </ToastsWrapper>
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toastsToRenderDependency, viewKey])
+}
+
+const ToastsWrapper = styled.div`
+  position: fixed;
+  right: 3.2rem;
+  bottom: 3.2rem;
+  z-index: 3;
+`

libs/generic-view/feature/src/lib/generic-view.tsx

@@ -10,6 +10,7 @@ import RecursiveLayout from "./recursive-layout"
 import GenericModals from "./generic-modals"
 import { useDevConsole } from "./use-dev-console"
 import { useDevViews } from "./use-dev-views/use-dev-views"
+import { GenericToasts } from "./generic-toasts"
 
 export const GenericView: FunctionComponent = () => {
   useDevConsole()
@@ -24,6 +25,7 @@ export const GenericView: FunctionComponent = () => {
     <GenericThemeProvider>
       <RecursiveLayout viewKey={currentViewKey} componentKey={"main"} />
       <GenericModals viewKey={currentViewKey} />
+      <GenericToasts viewKey={currentViewKey} />
     </GenericThemeProvider>
   )
 }

libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts

@@ -64,7 +64,7 @@ const view: View = {
       gridLayout: {
         columns: ["1fr", "1fr"],
         rows: [],
-        columnGap: "32px"
+        columnGap: "32px",
       },
     },
     childrenKeys: ["createContactsButton", "importContactsButton"],
@@ -117,6 +117,10 @@ const view: View = {
           entitiesType: "contacts",
           ids: [],
         },
+        {
+          type: "open-toast",
+          toastKey: "contactsDeletedToast",
+        },
         {
           type: "form-set-field",
           key: "selectedContacts",
@@ -125,6 +129,16 @@ const view: View = {
       ],
     },
   },
+  contactsDeletedToast: {
+    component: "toast",
+    childrenKeys: ["contactsDeletedToastMessage"],
+  },
+  contactsDeletedToastMessage: {
+    component: "p1-component",
+    config: {
+      text: "Contacts deleted",
+    },
+  },
   contactsFormWrapper: {
     component: "block-box",
     layout: {

libs/generic-view/models/src/index.ts

@@ -51,6 +51,7 @@ import { table } from "./lib/table"
 import { formConditionalRenderer } from "./lib/form-conditional-renderer"
 import { tableCell } from "./lib/table-cell"
 import { entitiesLoader } from "./lib/entities-loader"
+import { toast } from "./lib/toast"
 
 export * from "./lib/block-box"
 export * from "./lib/block-plain"
@@ -102,6 +103,7 @@ export * from "./lib/table-cell"
 export * from "./lib/form-conditional-renderer"
 export * from "./lib/entities-loader"
 export * from "./lib/common-validators"
+export * from "./lib/toast"
 
 export default {
   [blockBox.key]: blockBox,
@@ -156,4 +158,5 @@ export default {
   [table.key]: table,
   [tableCell.key]: tableCell,
   [entitiesLoader.key]: entitiesLoader,
+  [toast.key]: toast,
 } as const

libs/generic-view/models/src/lib/common-validators.ts

@@ -81,13 +81,19 @@ export const formActionValidator = z.union([
   }),
 ])
 
+export const toastActionValidator = z.object({
+  type: z.literal("open-toast"),
+  toastKey: z.string(),
+})
+
 export const buttonActionsValidator = z.array(
   z.union([
     modalActionValidator,
     navigateActionValidator,
     customActionValidator,
     formActionValidator,
     entityActionValidator,
+    toastActionValidator,
   ])
 )
 

libs/generic-view/models/src/lib/toast.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const dataValidator = z.undefined()
+
+const configValidator = z
+  .object({
+    animationDuration: z.number().nonnegative().optional(),
+    visibilityDuration: z.number().nonnegative().optional(),
+  })
+  .optional()
+
+export type ToastConfig = z.infer<typeof configValidator>
+
+export const toast = {
+  key: "toast",
+  dataValidator,
+  configValidator,
+} as const

libs/generic-view/store/src/index.ts

@@ -61,4 +61,8 @@ export * from "./lib/data-transfer/reducer"
 export * from "./lib/data-transfer/actions"
 export * from "./lib/data-transfer/abort-data-transfer.action"
 export * from "./lib/data-migration/data-migration-percentage-progress.interface"
+
+export * from "./lib/toasts/reducer"
+export * from "./lib/toasts/actions"
+
 export * from "./lib/action-names"

libs/generic-view/store/src/lib/action-names.ts

@@ -25,6 +25,9 @@ export enum ActionName {
   CloseDomainModals = "generic-modals/close-domain-modals",
   SetDeviceErrorModalOpened = "generic-modals/set-device-error-modal-opened",
 
+  OpenToast = "generic-toasts/open-toast",
+  RemoveToast = "generic-toasts/remove-toast",
+
   SetBackupProcess = "generic-backups/set-backup-process",
   CleanBackupProcess = "generic-backups/clean-backup-process",
   BackupProcessStatus = "generic-backups/backup-process-status",

libs/generic-view/store/src/lib/toasts/actions.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createAction } from "@reduxjs/toolkit"
+import { Toast } from "./reducer"
+import { ActionName } from "../action-names"
+
+export const openToast = createAction<Toast["key"]>(ActionName.OpenToast)
+export const removeToast = createAction(ActionName.RemoveToast)

libs/generic-view/store/src/lib/toasts/reducer.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createReducer } from "@reduxjs/toolkit"
+import { openToast, removeToast } from "./actions"
+
+export interface Toast {
+  key: string
+  opened?: boolean
+}
+
+interface GenericState {
+  queue: Toast[]
+}
+
+const initialState: GenericState = {
+  queue: [],
+}
+
+export const genericToastsReducer = createReducer(initialState, (builder) => {
+  builder.addCase(openToast, (state, action) => {
+    state.queue.push({
+      key: action.payload,
+    })
+  })
+  builder.addCase(removeToast, (state) => {
+    state.queue.shift()
+  })
+})

libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.ts

@@ -9,6 +9,7 @@ import {
   closeModal,
   deleteEntitiesDataAction,
   openModal,
+  openToast,
   replaceModal,
   selectActiveApiDeviceId,
   useScreenTitle,
@@ -90,6 +91,9 @@ export const useButtonAction = (viewKey: string) => {
             })
           )
           break
+        case "open-toast":
+          dispatch(openToast(action.toastKey))
+          break
         case "custom":
           action.callback()
           break

libs/generic-view/ui/src/lib/interactive/interactive.ts

@@ -8,6 +8,7 @@ import { TextModal } from "./modal/text-modal"
 import { ProgressBar } from "./progress-bar/progress-bar"
 import Form from "./form/form"
 import Tooltip from "./tooltip/tooltip"
+import { Toast } from "./toast/toast"
 import {
   form,
   formCheckboxInput,
@@ -25,6 +26,7 @@ import {
   modalVisibilityController,
   progressBar,
   textModal,
+  toast,
   tooltip,
   tooltipAnchor,
   tooltipContent,
@@ -50,4 +52,5 @@ export const interactive = {
   [tooltip.key]: Tooltip,
   [tooltipAnchor.key]: Tooltip.Anchor,
   [tooltipContent.key]: Tooltip.Content,
+  [toast.key]: Toast,
 }