Remove ToastPresentation usage and use toaster to display messages

test-apps/ui-test-app/src/frontend/appui/frontstages/component-examples/ComponentExamplesProvider.tsx

@@ -895,6 +895,7 @@ export class ComponentExamplesProvider {
   };
 
   private static get messageSamples(): ComponentExampleCategory {
+    MessageManager.registerAnimateOutRef(null);
     return {
       title: "Messages",
       examples: [

ui/appui-layout-react/src/appui-layout-react/footer/message/Status.tsx

@@ -6,6 +6,8 @@
  * @module Message
  */
 
+import { MessageSeverity } from "@itwin/appui-abstract";
+
 /** Available status types of status message.
  * @internal
  */
@@ -42,4 +44,26 @@ export class StatusHelpers {
         return StatusHelpers.WARNING_CLASS_NAME;
     }
   }
+
+  public static severityToStatus(severity: MessageSeverity): Status {
+    let status = Status.Information;
+
+    switch (severity) {
+      case MessageSeverity.None:
+        status = Status.Success;
+        break;
+      case MessageSeverity.Information:
+        status = Status.Information;
+        break;
+      case MessageSeverity.Warning:
+        status = Status.Warning;
+        break;
+      case MessageSeverity.Error:
+      case MessageSeverity.Fatal:
+        status = Status.Error;
+        break;
+    }
+
+    return status;
+  }
 }

ui/appui-react/src/appui-react/messages/ActivityMessage.tsx

@@ -7,13 +7,21 @@
  */
 
 import * as React from "react";
-import { UiCore } from "@itwin/core-react";
-import { MessageHyperlink, MessageLayout, MessageProgress, Status } from "@itwin/appui-layout-react";
-import { Small } from "@itwin/itwinui-react";
-import { ToastPresentation } from "@itwin/itwinui-react/cjs/core/Toast/Toast";
+import { Icon, UiCore } from "@itwin/core-react";
+import {
+  Message,
+  MessageButton,
+  MessageHyperlink,
+  MessageLayout,
+  MessageProgress,
+  Status,
+} from "@itwin/appui-layout-react";
+import { ProgressLinear, Small, Text, toaster } from "@itwin/itwinui-react";
 import { UiFramework } from "../UiFramework";
-import { ActivityMessageEventArgs } from "../messages/MessageManager";
+import { ActivityMessageEventArgs, MessageManager } from "../messages/MessageManager";
 import { MessageLabel } from "./MessageLabel";
+import { HollowIcon } from "./HollowIcon";
+import { ToasterSettings } from "@itwin/itwinui-react/cjs/core/Toast/Toaster";
 
 /** Properties for a [[ActivityMessage]]
  * @public
@@ -26,37 +34,110 @@ export interface ActivityMessageProps {
 
 /** Activity Message React component
  * @public
+ * @deprecated
  */
 export function ActivityMessage(props: ActivityMessageProps) {
   const messageDetails = props.activityMessageInfo.details;
   const [percentCompleteLabel] = React.useState(UiFramework.translate("activityCenter.percentComplete"));
   const [cancelLabel] = React.useState(UiCore.translate("dialog.cancel"));
 
   return (
-    <ToastPresentation
-      category="informational"
-      hasCloseButton={true}
-      onClose={props.dismissActivityMessage}
-      content={
-        <MessageLayout
-          buttons={(messageDetails && messageDetails.supportsCancellation) &&
-            <MessageHyperlink onClick={props.cancelActivityMessage}>{cancelLabel}</MessageHyperlink>
-          }
-          progress={(messageDetails && messageDetails.showProgressBar) &&
+    <Message // eslint-disable-line deprecation/deprecation
+      status={Status.Information}
+      icon={<HollowIcon iconSpec="icon-info-hollow" />}
+    >
+      <MessageLayout
+        buttons={(messageDetails && messageDetails.supportsCancellation) ? (
+          <div>
+            <MessageHyperlink onClick={props.cancelActivityMessage}>
+              {cancelLabel}
+            </MessageHyperlink>
+            <span>&nbsp;</span>
+            <MessageButton onClick={props.dismissActivityMessage}>
+              <Icon iconSpec="icon-close" />
+            </MessageButton>
+          </div>
+        ) : (
+          <MessageButton onClick={props.dismissActivityMessage}>
+            <Icon iconSpec="icon-close" />
+          </MessageButton>
+        )}
+        progress={(messageDetails && messageDetails.showProgressBar) &&
             <MessageProgress
               status={Status.Information}
               progress={props.activityMessageInfo.percentage}
             />
+        }
+      >
+        <div>
+          <MessageLabel message={props.activityMessageInfo.message} className="uifw-statusbar-message-brief" />
+          {(messageDetails && messageDetails.showPercentInMessage) &&
+            <Small>{props.activityMessageInfo.percentage + percentCompleteLabel}</Small>
           }
-        >
-          <div>
-            <MessageLabel message={props.activityMessageInfo.message} className="uifw-statusbar-message-brief" />
-            {(messageDetails && messageDetails.showPercentInMessage) &&
-              <Small>{props.activityMessageInfo.percentage + percentCompleteLabel}</Small>
-            }
-          </div>
-        </MessageLayout>
+        </div>
+      </MessageLayout>
+    </Message>
+  );
+}
+
+interface CustomActivityMessageProps {
+  cancelActivityMessage?: () => void;
+  dismissActivityMessage?: () => void;
+  activityMessageInfo?: ActivityMessageEventArgs;
+  settings?: ToasterSettings;
+}
+
+/**
+ * Hook to render an Activity message.
+ */
+export function useActivityMessage({activityMessageInfo, dismissActivityMessage, cancelActivityMessage, settings}: CustomActivityMessageProps) {
+  const [cancelLabel] = React.useState(UiCore.translate("dialog.cancel"));
+  const recentToast = React.useRef<{close: () => void} | undefined>();
+  React.useEffect(() => {
+    toaster.setSettings(settings ?? {placement: "top"});
+  }, [settings]);
+
+  React.useEffect(() => {
+    if (activityMessageInfo?.restored) {
+      recentToast.current = toaster.informational(
+        <CustomActivityMessageContent initialActivityMessageInfo={activityMessageInfo} />,
+        { onRemove: dismissActivityMessage, type: "persisting", link: activityMessageInfo?.details?.supportsCancellation && cancelActivityMessage ? { title: cancelLabel, onClick: cancelActivityMessage } : undefined}
+      );
+    }
+    if (!activityMessageInfo) {
+      recentToast.current?.close();
+    }
+  }, [activityMessageInfo, cancelActivityMessage, cancelLabel, dismissActivityMessage]);
+}
+
+/**
+ * Component wrapping the `useActivityMessage` hook to use in class components.
+ */
+export function CustomActivityMessageRenderer({activityMessageInfo, dismissActivityMessage, cancelActivityMessage, settings}: CustomActivityMessageProps) {
+  useActivityMessage({activityMessageInfo, cancelActivityMessage, dismissActivityMessage, settings});
+
+  return <></>;
+}
+
+function CustomActivityMessageContent({initialActivityMessageInfo}: {initialActivityMessageInfo?: ActivityMessageEventArgs})  {
+  const [percentCompleteLabel] = React.useState(UiFramework.translate("activityCenter.percentComplete"));
+  const [activityMessageInfo, setActivityMessageInfo] = React.useState(initialActivityMessageInfo);
+
+  React.useEffect(() => {
+    const handleActivityMessageUpdatedEvent = (args: ActivityMessageEventArgs) => {
+      setActivityMessageInfo(args);
+    };
+
+    return MessageManager.onActivityMessageUpdatedEvent.addListener(handleActivityMessageUpdatedEvent);
+  }, []);
+
+  return (
+    <>
+      {activityMessageInfo?.message && <Text>{activityMessageInfo.message}</Text>}
+      {!!activityMessageInfo?.details?.showPercentInMessage &&
+        <Small>{`${activityMessageInfo.percentage} ${percentCompleteLabel}`}</Small>
       }
-    />
+      {activityMessageInfo?.details?.showProgressBar && <ProgressLinear value={activityMessageInfo?.percentage} />}
+    </>
   );
 }

ui/appui-react/src/appui-react/messages/ActivityMessagePopup.tsx

@@ -8,10 +8,9 @@
 
 import "./ActivityMessagePopup.scss";
 import * as React from "react";
-import classnames from "classnames";
 import { ActivityMessageEventArgs, MessageManager } from "../messages/MessageManager";
 import { CommonProps } from "@itwin/core-react";
-import { ActivityMessage } from "./ActivityMessage";
+import { useActivityMessage } from "./ActivityMessage";
 
 /** Properties for [[ActivityMessagePopup]] component
  * @public
@@ -26,22 +25,18 @@ export interface ActivityMessagePopupProps extends CommonProps {
  */
 export function ActivityMessagePopup(props: ActivityMessagePopupProps) {
   const [activityMessageInfo, setActivityMessageInfo] = React.useState<ActivityMessageEventArgs | undefined>(undefined);
-  const [isActivityMessageVisible, setIsActivityMessageVisible] = React.useState(false);
 
   React.useEffect(() => {
     const handleActivityMessageUpdatedEvent = (args: ActivityMessageEventArgs) => {
       setActivityMessageInfo(args);
-      if (args.restored)
-        setIsActivityMessageVisible(true);
     };
 
     return MessageManager.onActivityMessageUpdatedEvent.addListener(handleActivityMessageUpdatedEvent);
-  }, [isActivityMessageVisible]);
+  }, []);
 
   React.useEffect(() => {
     const handleActivityMessageCancelledEvent = () => {
       setActivityMessageInfo(undefined);
-      setIsActivityMessageVisible(false);
     };
 
     return MessageManager.onActivityMessageCancelledEvent.addListener(handleActivityMessageCancelledEvent);
@@ -53,20 +48,10 @@ export function ActivityMessagePopup(props: ActivityMessagePopupProps) {
   }, [props]);
 
   const dismissActivityMessage = React.useCallback(() => {
-    setIsActivityMessageVisible(false);
     props.dismissActivityMessage && props.dismissActivityMessage();
   }, [props]);
 
-  if (!activityMessageInfo || !isActivityMessageVisible)
-    return null;
+  useActivityMessage({activityMessageInfo, cancelActivityMessage, dismissActivityMessage});
 
-  return (
-    <div className={classnames("uifw-centered-popup", props.className)} style={props.style}>
-      <ActivityMessage
-        activityMessageInfo={activityMessageInfo}
-        cancelActivityMessage={cancelActivityMessage}
-        dismissActivityMessage={dismissActivityMessage}
-      />
-    </div>
-  );
+  return null;
 }

ui/appui-react/src/appui-react/messages/MessageManager.tsx

@@ -25,6 +25,8 @@ import { MessageSpan } from "./MessageSpan";
 import { PointerMessage } from "./Pointer";
 import { NotifyMessageDetailsType, NotifyMessageType } from "./ReactNotifyMessageDetails";
 import { StatusMessageManager } from "./StatusMessageManager";
+import { Small, toaster, ToastOptions } from "@itwin/itwinui-react";
+import { ToasterSettings } from "@itwin/itwinui-react/cjs/core/Toast/Toaster";
 
 class MessageBoxCallbacks {
   constructor(
@@ -143,6 +145,7 @@ export class MessageManager {
   private static _messages: NotifyMessageDetailsType[] = [];
   private static _ongoingActivityMessage: OngoingActivityMessage = new OngoingActivityMessage();
   private static _lastMessage?: NotifyMessageDetailsType;
+  // eslint-disable-next-line deprecation/deprecation
   private static _activeMessageManager = new StatusMessageManager();
 
   /** The MessageAddedEvent is fired when a message is added via outputMessage(). */
@@ -174,8 +177,12 @@ export class MessageManager {
   public static get messages(): Readonly<NotifyMessageDetailsType[]> { return this._messages; }
 
   /** Manager of active messages. */
+  /** @deprecated */
+  // eslint-disable-next-line deprecation/deprecation
   public static get activeMessageManager(): StatusMessageManager { return this._activeMessageManager; }
 
+  public static animateOutToRef: HTMLElement | null;
+
   /** Clear the message list. */
   public static clearMessages(): void {
     this._messages.splice(0);
@@ -221,6 +228,51 @@ export class MessageManager {
     MessageManager.addMessage(message);
   }
 
+  public static registerAnimateOutRef(el: HTMLElement | null) {
+    this.animateOutToRef = el;
+  }
+
+  /** Display a message.
+   * Works only with `Sticky` and `Toast` message types.
+   * @param  message  Details about the message to display.
+   * @param options Optionally override individual toast parameters.
+   * @param settings Optionally override all toasts settings (i.e. placement or order).
+   * @returns Object with reference to the message (i.e. to close it programmatically) if it was displayed.
+   */
+  public static displayMessage(message: NotifyMessageDetailsType, options?: ToastOptions, settings?: ToasterSettings) {
+    if (message.msgType !== OutputMessageType.Sticky && message.msgType !== OutputMessageType.Toast) {
+      return;
+    }
+    const toastOptions: ToastOptions = {
+      hasCloseButton: true,
+      duration: message.displayTime.milliseconds,
+      type:
+        message.msgType === OutputMessageType.Sticky
+          ? "persisting"
+          : "temporary",
+      animateOutTo: this.animateOutToRef,
+      ...options,
+    };
+    toaster.setSettings({ placement: "bottom", order: "ascending", ...settings });
+    const content = <>
+      {message.briefMessage}
+      {message.detailedMessage &&
+      <Small>{message.detailedMessage}</Small>
+      }
+    </>;
+    switch (message.priority) {
+      case OutputMessagePriority.Warning:
+        return toaster.warning(content, toastOptions);
+      case OutputMessagePriority.Info:
+        return toaster.informational(content, toastOptions);
+      case OutputMessagePriority.Error:
+      case OutputMessagePriority.Fatal:
+        return toaster.negative(content, toastOptions);
+      default:
+        return toaster.positive(content, toastOptions);
+    }
+  }
+
   /** Output a message and/or alert to the user.
    * @param  message  Details about the message to output.
    */

ui/appui-react/src/appui-react/messages/StatusMessageManager.tsx

@@ -22,6 +22,7 @@ export interface StatusMessage {
 
 /** Manager for Status messages
  * @internal
+ * @deprecated
  */
 export class StatusMessageManager {
   private _messages: ReadonlyArray<StatusMessage> = [];