Remove ToastPresentation usage and use toaster to display messages (

#3573)

README.md

@@ -50,6 +50,9 @@ For incremental builds, the `rush build` command can be used to only build packa
 4. Locally commit changes: `git commit` (or use the Visual Studio Code user interface)
 5. Repeat steps 1-4 until ready to push changes
 6. Check for API signature changes: `rush extract-api`. This will update the signature files, located in `common/api`.
+    - Be sure that your branch is up to date with the target branch (i.e. `git merge origin/master`)
+    - Cleanup your build output: `rush clean`
+    - Rebuild the project: `rush build`
 7. Review any diffs to the API signature files in the `common/api` directory to ensure they are compatible with the intended release of the package.
     - If any differences are in packages not modified on this branch, revert the changes before committing.
 8. Add changelog entry (which could potentially cover several commits): `rush change`

common/api/appui-layout-react.api.md

@@ -9,6 +9,7 @@ import * as CSS from 'csstype';
 import { Draft } from 'immer';
 import { IconSpec } from '@itwin/core-react';
 import { Interaction } from 'scheduler/tracing';
+import { MessageSeverity } from '@itwin/appui-abstract';
 import { NoChildrenProps } from '@itwin/core-react';
 import { Omit } from '@itwin/core-react';
 import { OmitChildrenProp } from '@itwin/core-react';
@@ -2340,6 +2341,8 @@ export class StatusHelpers {
     // (undocumented)
     static getCssClassName(status: Status): string;
     static readonly INFORMATION_CLASS_NAME = "nz-status-information";
+    // (undocumented)
+    static severityToStatus(severity: MessageSeverity): Status;
     static readonly SUCCESS_CLASS_NAME = "nz-status-success";
     static readonly WARNING_CLASS_NAME = "nz-status-warning";
 }

common/api/appui-react.api.md

@@ -138,6 +138,8 @@ import { Subtract } from '@itwin/presentation-common';
 import { Tab } from '@itwin/appui-layout-react';
 import { TabMode } from '@itwin/appui-layout-react';
 import { TabState } from '@itwin/appui-layout-react';
+import { ToasterSettings } from '@itwin/itwinui-react/cjs/core/Toast/Toaster';
+import { ToastOptions } from '@itwin/itwinui-react';
 import { Tool } from '@itwin/core-frontend';
 import { ToolAdmin } from '@itwin/core-frontend';
 import { ToolAssistanceInstruction } from '@itwin/core-frontend';
@@ -459,7 +461,7 @@ export class ActivityCenterField extends React.Component<StatusFieldProps, Activ
     render(): React.ReactNode;
 }
 
-// @public
+// @public @deprecated
 export function ActivityMessage(props: ActivityMessageProps): JSX.Element;
 
 // @public
@@ -475,7 +477,7 @@ export interface ActivityMessageEventArgs {
 }
 
 // @public
-export function ActivityMessagePopup(props: ActivityMessagePopupProps): JSX.Element | null;
+export function ActivityMessagePopup(props: ActivityMessagePopupProps): JSX.Element;
 
 // @public
 export interface ActivityMessagePopupProps extends CommonProps {
@@ -1817,6 +1819,14 @@ export interface CursorUpdatedEventArgs {
     oldPt: PointProps;
 }
 
+// @internal
+export function CustomActivityMessageContent({ initialActivityMessageInfo }: {
+    initialActivityMessageInfo: ActivityMessageEventArgs;
+}): JSX.Element;
+
+// @internal
+export function CustomActivityMessageRenderer({ activityMessageInfo, dismissActivityMessage, cancelActivityMessage, settings }: CustomActivityMessageProps): JSX.Element;
+
 // @public
 export class CustomItemDef extends ActionButtonItemDef {
     constructor(props: CustomItemProps);
@@ -3892,6 +3902,9 @@ export class MessageManager {
     // @internal (undocumented)
     static closeAllMessages(): void;
     static displayInputFieldMessage(target: HTMLElement, messageText: NotifyMessageType, detailedMessage?: NotifyMessageType, priority?: OutputMessagePriority): void;
+    static displayMessage(message: NotifyMessageDetailsType, options?: ToastOptions, settings?: ToasterSettings): {
+        close: () => void;
+    } | undefined;
     static endActivityMessage(isCompleted: boolean): boolean;
     static getIconClassName(details: NotifyMessageDetailsType): string;
     static getIconType(details: NotifyMessageDetailsType): MessageBoxIconType;
@@ -3917,6 +3930,7 @@ export class MessageManager {
     static outputActivityMessage(message: NotifyMessageType, percentComplete: number): boolean;
     static outputMessage(message: NotifyMessageDetailsType): void;
     static outputPrompt(prompt: string): void;
+    static registerAnimateOutToElement(element: HTMLElement | null): void;
     static setMaxCachedMessages(max: number): void;
     static setToolAssistance(instructions: ToolAssistanceInstructions | undefined): void;
     static setupActivityMessageDetails(details: ActivityMessageDetails): boolean;
@@ -6037,7 +6051,7 @@ export class StatusBar extends React.Component<StatusBarProps, StatusBarState> {
     componentWillUnmount(): void;
     // (undocumented)
     render(): React.ReactNode;
-}
+    }
 
 // @public
 export function StatusBarCenterSection(props: CommonDivProps): JSX.Element;
@@ -6164,8 +6178,8 @@ export interface StatusFieldProps extends CommonProps {
     openWidget?: StatusBarFieldId;
 }
 
-// @public
-export function StatusMessageRenderer(props: StatusMessageRendererProps): JSX.Element | null;
+// @public @deprecated
+export function StatusMessageRenderer({ closeMessage, cancelActivityMessage: cancelActivityMessageProp, dismissActivityMessage, }: StatusMessageRendererProps): JSX.Element;
 
 // @public
 export interface StatusMessageRendererProps extends CommonProps {
@@ -6177,7 +6191,7 @@ export interface StatusMessageRendererProps extends CommonProps {
     dismissActivityMessage?: () => void;
 }
 
-// @public
+// @public @deprecated
 export function StickyMessage(props: StickyMessageProps): JSX.Element;
 
 // @public
@@ -6382,7 +6396,7 @@ export class TileLoadingIndicator extends React.PureComponent<StatusFieldProps,
     render(): JSX.Element;
     }
 
-// @public
+// @public @deprecated
 export function ToastMessage(props: ToastMessageProps): JSX.Element;
 
 // @public
@@ -7073,6 +7087,9 @@ export function useActiveStageId(): string;
 // @public
 export function useActiveViewport(): ScreenViewport | undefined;
 
+// @internal
+export function useActivityMessage({ activityMessageInfo, dismissActivityMessage, cancelActivityMessage, settings }: CustomActivityMessageProps): void;
+
 // @public
 export function useAnalysisAnimationDataProvider(viewport: ScreenViewport | undefined): AnalysisAnimationTimelineDataProvider | undefined;
 

common/api/summary/appui-react.exports.csv

@@ -34,9 +34,10 @@ public;ActiveContentChangedEventArgs
 internal;ActiveFrontstageDefProvider({ frontstageDef }:
 public;ActivityCenterField 
 public;ActivityMessage(props: ActivityMessageProps): JSX.Element
+deprecated;ActivityMessage(props: ActivityMessageProps): JSX.Element
 public;ActivityMessageCancelledEvent 
 public;ActivityMessageEventArgs
-public;ActivityMessagePopup(props: ActivityMessagePopupProps): JSX.Element | null
+public;ActivityMessagePopup(props: ActivityMessagePopupProps): JSX.Element
 public;ActivityMessagePopupProps 
 public;ActivityMessageProps
 public;ActivityMessageUpdatedEvent 
@@ -191,6 +192,8 @@ internal;CursorPopupUpdatePositionEventArgs
 internal;CursorPrompt
 public;CursorUpdatedEvent 
 public;CursorUpdatedEventArgs
+internal;CustomActivityMessageContent({ initialActivityMessageInfo }:
+internal;CustomActivityMessageRenderer({ activityMessageInfo, dismissActivityMessage, cancelActivityMessage, settings }: CustomActivityMessageProps): JSX.Element
 public;CustomItemDef 
 public;CustomItemProps 
 public;DeepReadonly
@@ -573,9 +576,11 @@ public;StatusBarWidgetControlArgs
 internal;StatusBarZone 
 internal;StatusBarZoneProps 
 public;StatusFieldProps 
-public;StatusMessageRenderer(props: StatusMessageRendererProps): JSX.Element | null
+public;StatusMessageRenderer({ closeMessage, cancelActivityMessage: cancelActivityMessageProp, dismissActivityMessage, }: StatusMessageRendererProps): JSX.Element
+deprecated;StatusMessageRenderer({ closeMessage, cancelActivityMessage: cancelActivityMessageProp, dismissActivityMessage, }: StatusMessageRendererProps): JSX.Element
 public;StatusMessageRendererProps 
 public;StickyMessage(props: StickyMessageProps): JSX.Element
+deprecated;StickyMessage(props: StickyMessageProps): JSX.Element
 public;StickyMessageProps
 public;SupportsViewSelectorChange
 public;SyncToolSettingsPropertiesEvent 
@@ -609,6 +614,7 @@ deprecated;TaskPropsList
 public;ThemeManager: import("react-redux").ConnectedComponent
 public;TileLoadingIndicator 
 public;ToastMessage(props: ToastMessageProps): JSX.Element
+deprecated;ToastMessage(props: ToastMessageProps): JSX.Element
 public;ToastMessageProps
 alpha;toggleAllCategories(viewManager: ViewManager, imodel: IModelConnection, display: boolean, viewport?: Viewport, forAllViewports?: boolean, filteredProvider?: IPresentationTreeDataProvider): Promise
 public;ToolActivatedEvent 
@@ -684,6 +690,7 @@ public;useActiveIModelConnection(): IModelConnection | undefined
 internal;useActiveModalFrontstageInfo(): ModalFrontstageInfo | undefined
 public;useActiveStageId(): string
 public;useActiveViewport(): ScreenViewport | undefined
+internal;useActivityMessage({ activityMessageInfo, dismissActivityMessage, cancelActivityMessage, settings }: CustomActivityMessageProps): void
 public;useAnalysisAnimationDataProvider(viewport: ScreenViewport | undefined): AnalysisAnimationTimelineDataProvider | undefined
 internal;useAvailableUiItemsProviders(): readonly string[]
 public;useBackstageManager: () => BackstageManager

common/changes/@itwin/appui-layout-react/vyki-toasts-refactor_2022-05-26-12-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-layout-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-layout-react"
+}

common/changes/@itwin/appui-react/vyki-toasts-refactor_2022-05-26-12-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Use toaster from iTwinUI to display messages",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

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

@@ -89,6 +89,7 @@ export const ComponentExamplesPage: React.FC<ComponentExamplesPageProps> = (prop
           );
         })}
       </div>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <StatusMessageRenderer />
     </div>
   );

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.registerAnimateOutToElement(null);
     return {
       title: "Messages",
       examples: [
@@ -904,7 +905,7 @@ export class ComponentExamplesProvider {
           }>Toast message</UnderlinedButton>),
         createComponentExample("Toast with link", undefined,
           <UnderlinedButton onActivate={
-            () => MessageManager.outputMessage(new ReactNotifyMessageDetails(OutputMessagePriority.Info, "This is an info message", this._reactMessage)
+            () => MessageManager.displayMessage(new ReactNotifyMessageDetails(OutputMessagePriority.Info, "This is an info message", this._reactMessage), undefined, {placement: "top"}
             )}>Toast with link</UnderlinedButton>),
         createComponentExample("Sticky", undefined,
           <UnderlinedButton onActivate={

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,27 @@ export class StatusHelpers {
         return StatusHelpers.WARNING_CLASS_NAME;
     }
   }
+
+  public static severityToStatus(severity: MessageSeverity): Status {
+    let status = Status.Information;
+
+    switch (severity) {
+      case MessageSeverity.None:
+      case MessageSeverity.Success:
+        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-layout-react/src/test/footer/message/Status.test.tsx

@@ -2,6 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+import { MessageSeverity } from "@itwin/appui-abstract";
 import { Status, StatusHelpers } from "../../../appui-layout-react";
 
 describe("<StatusHelpers />", () => {
@@ -24,4 +25,34 @@ describe("<StatusHelpers />", () => {
     const sut = StatusHelpers.getCssClassName(Status.Warning);
     sut.should.eq("nz-status-warning");
   });
+
+  it("should return information status", () => {
+    let res = StatusHelpers.severityToStatus(MessageSeverity.Information);
+    res.should.eq(Status.Information);
+
+    res = StatusHelpers.severityToStatus(MessageSeverity.Question);
+    res.should.eq(Status.Information);
+  });
+
+  it("should return success status", () => {
+    let res = StatusHelpers.severityToStatus(MessageSeverity.Success);
+    res.should.eq(Status.Success);
+
+    res = StatusHelpers.severityToStatus(MessageSeverity.None);
+    res.should.eq(Status.Success);
+  });
+
+  it("should return error status", () => {
+    let res = StatusHelpers.severityToStatus(MessageSeverity.Error);
+    res.should.eq(Status.Error);
+
+    res = StatusHelpers.severityToStatus(MessageSeverity.Fatal);
+    res.should.eq(Status.Error);
+  });
+
+  it("should return warning status", () => {
+    const res = StatusHelpers.severityToStatus(MessageSeverity.Warning);
+    res.should.eq(Status.Warning);
+
+  });
 });