Merge pull request #3063 from element-hq/valere/fix_add_close_button_in_widget_mode

Error: use a close button instead of go to home when in widget mode

Author: BillCarsonFr

src/App.tsx

@@ -72,7 +72,11 @@ export const App: FC = () => {
               <Suspense fallback={null}>
                 <ClientProvider>
                   <MediaDevicesProvider>
-                    <Sentry.ErrorBoundary fallback={ErrorPage}>
+                    <Sentry.ErrorBoundary
+                      fallback={(error) => (
+                        <ErrorPage error={error} widget={widget} />
+                      )}
+                    >
                       <DisconnectedBanner />
                       <Routes>
                         <SentryRoute path="/" element={<HomePage />} />

src/ClientContext.tsx

@@ -351,7 +351,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   }, [initClientState, onSync]);
 
   if (alreadyOpenedErr) {
-    return <ErrorPage error={alreadyOpenedErr} />;
+    return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
   }
 
   return (

src/ErrorView.tsx

@@ -12,13 +12,16 @@ import {
   type FC,
   type ReactNode,
   type SVGAttributes,
+  type ReactElement,
 } from "react";
 import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { RageshakeButton } from "./settings/RageshakeButton";
 import styles from "./ErrorView.module.css";
 import { useUrlParams } from "./UrlParams";
 import { LinkButton } from "./button";
+import { ElementWidgetActions, type WidgetHelpers } from "./widget.ts";
 
 interface Props {
   Icon: ComponentType<SVGAttributes<SVGElement>>;
@@ -35,6 +38,7 @@ interface Props {
    */
   fatal?: boolean;
   children: ReactNode;
+  widget: WidgetHelpers | null;
 }
 
 export const ErrorView: FC<Props> = ({
@@ -43,6 +47,7 @@ export const ErrorView: FC<Props> = ({
   rageshake,
   fatal,
   children,
+  widget,
 }) => {
   const { t } = useTranslation();
   const { confineToRoom } = useUrlParams();
@@ -51,6 +56,46 @@ export const ErrorView: FC<Props> = ({
     window.location.href = "/";
   }, []);
 
+  const CloseWidgetButton: FC<{ widget: WidgetHelpers }> = ({
+    widget,
+  }): ReactElement => {
+    // in widget mode we don't want to show the return home button but a close button
+    const closeWidget = (): void => {
+      widget.api.transport
+        .send(ElementWidgetActions.Close, {})
+        .catch((e) => {
+          // What to do here?
+          logger.error("Failed to send close action", e);
+        })
+        .finally(() => {
+          widget.api.transport.stop();
+        });
+    };
+    return (
+      <Button kind="primary" onClick={closeWidget}>
+        {t("action.close")}
+      </Button>
+    );
+  };
+
+  // Whether the error is considered fatal or pathname is `/` then reload the all app.
+  // If not then navigate to home page.
+  const ReturnToHomeButton = (): ReactElement => {
+    if (fatal || location.pathname === "/") {
+      return (
+        <Button kind="tertiary" className={styles.homeLink} onClick={onReload}>
+          {t("return_home_button")}
+        </Button>
+      );
+    } else {
+      return (
+        <LinkButton kind="tertiary" className={styles.homeLink} to="/">
+          {t("return_home_button")}
+        </LinkButton>
+      );
+    }
+  };
+
   return (
     <div className={styles.error}>
       <BigIcon className={styles.icon}>
@@ -63,20 +108,11 @@ export const ErrorView: FC<Props> = ({
       {rageshake && (
         <RageshakeButton description={`***Error View***: ${title}`} />
       )}
-      {!confineToRoom &&
-        (fatal || location.pathname === "/" ? (
-          <Button
-            kind="tertiary"
-            className={styles.homeLink}
-            onClick={onReload}
-          >
-            {t("return_home_button")}
-          </Button>
-        ) : (
-          <LinkButton kind="tertiary" className={styles.homeLink} to="/">
-            {t("return_home_button")}
-          </LinkButton>
-        ))}
+      {widget ? (
+        <CloseWidgetButton widget={widget} />
+      ) : (
+        !confineToRoom && <ReturnToHomeButton />
+      )}
     </div>
   );
 };

src/FullScreenView.tsx

@@ -17,6 +17,7 @@ import styles from "./FullScreenView.module.css";
 import { useUrlParams } from "./UrlParams";
 import { RichError } from "./RichError";
 import { ErrorView } from "./ErrorView";
+import { type WidgetHelpers } from "./widget.ts";
 
 interface FullScreenViewProps {
   className?: string;
@@ -47,11 +48,12 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
 
 interface ErrorPageProps {
   error: Error | unknown;
+  widget: WidgetHelpers | null;
 }
 
 // Due to this component being used as the crash fallback for Sentry, which has
 // weird type requirements, we can't just give this a type of FC<ErrorPageProps>
-export const ErrorPage = ({ error }: ErrorPageProps): ReactElement => {
+export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
   const { t } = useTranslation();
   useEffect(() => {
     logger.error(error);
@@ -63,7 +65,13 @@ export const ErrorPage = ({ error }: ErrorPageProps): ReactElement => {
       {error instanceof RichError ? (
         error.richMessage
       ) : (
-        <ErrorView Icon={ErrorIcon} title={t("error.generic")} rageshake fatal>
+        <ErrorView
+          widget={widget}
+          Icon={ErrorIcon}
+          title={t("error.generic")}
+          rageshake
+          fatal
+        >
           <p>{t("error.generic_description")}</p>
         </ErrorView>
       )}

src/RichError.tsx

@@ -10,6 +10,7 @@ import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import type { FC, ReactNode } from "react";
 import { ErrorView } from "./ErrorView";
+import { widget } from "./widget.ts";
 
 /**
  * An error consisting of a terse message to be logged to the console and a
@@ -31,7 +32,11 @@ const OpenElsewhere: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <ErrorView Icon={PopOutIcon} title={t("error.open_elsewhere")}>
+    <ErrorView
+      widget={widget}
+      Icon={PopOutIcon}
+      title={t("error.open_elsewhere")}
+    >
       <p>
         {t("error.open_elsewhere_description", {
           brand: import.meta.env.VITE_PRODUCT_NAME || "Element Call",

src/home/HomePage.tsx

@@ -13,6 +13,7 @@ import { ErrorPage, LoadingPage } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";
 import { usePageTitle } from "../usePageTitle";
+import { widget } from "../widget.ts";
 
 export const HomePage: FC = () => {
   const { t } = useTranslation();
@@ -23,7 +24,7 @@ export const HomePage: FC = () => {
   if (!clientState) {
     return <LoadingPage />;
   } else if (clientState.state === "error") {
-    return <ErrorPage error={clientState.error} />;
+    return <ErrorPage widget={widget} error={clientState.error} />;
   } else {
     return clientState.authenticated ? (
       <RegisteredView client={clientState.authenticated.client} />

src/livekit/useECConnectionState.test.tsx

@@ -60,7 +60,7 @@ test.each<[string, ConnectionError]>([
     const user = userEvent.setup();
     render(
       <MemoryRouter>
-        <GroupCallErrorBoundary recoveryActionHandler={vi.fn()}>
+        <GroupCallErrorBoundary recoveryActionHandler={vi.fn()} widget={null}>
           <TestComponent />
         </GroupCallErrorBoundary>
       </MemoryRouter>,

src/room/GroupCallErrorBoundary.test.tsx

@@ -30,6 +30,7 @@ import {
   UnknownCallError,
 } from "../utils/errors.ts";
 import { mockConfig } from "../utils/test.ts";
+import { ElementWidgetActions, type WidgetHelpers } from "../widget.ts";
 
 test.each([
   {
@@ -66,6 +67,7 @@ test.each([
         <GroupCallErrorBoundary
           onError={onErrorMock}
           recoveryActionHandler={vi.fn()}
+          widget={null}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
@@ -94,6 +96,7 @@ test("should render the error page with link back to home", async () => {
       <GroupCallErrorBoundary
         onError={onErrorMock}
         recoveryActionHandler={vi.fn()}
+        widget={null}
       >
         <TestComponent />
       </GroupCallErrorBoundary>
@@ -138,7 +141,10 @@ test("ConnectionLostError: Action handling should reset error state", async () =
 
     return (
       <BrowserRouter>
-        <GroupCallErrorBoundary recoveryActionHandler={reconnectCallback}>
+        <GroupCallErrorBoundary
+          recoveryActionHandler={reconnectCallback}
+          widget={null}
+        >
           <TestComponent fail={failState} />
         </GroupCallErrorBoundary>
       </BrowserRouter>
@@ -180,6 +186,7 @@ describe("Rageshake button", () => {
         <GroupCallErrorBoundary
           onError={vi.fn()}
           recoveryActionHandler={vi.fn()}
+          widget={null}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
@@ -203,3 +210,44 @@ describe("Rageshake button", () => {
     ).not.toBeInTheDocument();
   });
 });
+
+test("should have a close button in widget mode", async () => {
+  const error = new MatrixRTCFocusMissingError("example.com");
+  const TestComponent = (): ReactNode => {
+    throw error;
+  };
+
+  const mockWidget = {
+    api: {
+      transport: { send: vi.fn().mockResolvedValue(undefined), stop: vi.fn() },
+    },
+  } as unknown as WidgetHelpers;
+
+  const user = userEvent.setup();
+  const onErrorMock = vi.fn();
+  const { asFragment } = render(
+    <BrowserRouter>
+      <GroupCallErrorBoundary
+        widget={mockWidget}
+        onError={onErrorMock}
+        recoveryActionHandler={vi.fn()}
+      >
+        <TestComponent />
+      </GroupCallErrorBoundary>
+    </BrowserRouter>,
+  );
+
+  await screen.findByText("Call is not supported");
+
+  await screen.findByRole("button", { name: "Close" });
+
+  expect(asFragment()).toMatchSnapshot();
+
+  await user.click(screen.getByRole("button", { name: "Close" }));
+
+  expect(mockWidget.api.transport.send).toHaveBeenCalledWith(
+    ElementWidgetActions.Close,
+    expect.anything(),
+  );
+  expect(mockWidget.api.transport.stop).toHaveBeenCalled();
+});

src/room/GroupCallErrorBoundary.tsx

@@ -31,6 +31,7 @@ import {
 } from "../utils/errors.ts";
 import { FullScreenView } from "../FullScreenView.tsx";
 import { ErrorView } from "../ErrorView.tsx";
+import { type WidgetHelpers } from "../widget.ts";
 
 export type CallErrorRecoveryAction = "reconnect"; // | "retry" ;
 
@@ -40,11 +41,13 @@ interface ErrorPageProps {
   error: ElementCallError;
   recoveryActionHandler: RecoveryActionHandler;
   resetError: () => void;
+  widget: WidgetHelpers | null;
 }
 
 const ErrorPage: FC<ErrorPageProps> = ({
   error,
   recoveryActionHandler,
+  widget,
 }: ErrorPageProps): ReactElement => {
   const { t } = useTranslation();
 
@@ -77,6 +80,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
         Icon={icon}
         title={error.localisedTitle}
         rageshake={error.code == ErrorCode.UNKNOWN_ERROR}
+        widget={widget}
       >
         <p>
           {error.localisedMessage ?? (
@@ -102,12 +106,14 @@ interface BoundaryProps {
   children: ReactNode | (() => ReactNode);
   recoveryActionHandler: RecoveryActionHandler;
   onError?: (error: unknown) => void;
+  widget: WidgetHelpers | null;
 }
 
 export const GroupCallErrorBoundary = ({
   recoveryActionHandler,
   onError,
   children,
+  widget,
 }: BoundaryProps): ReactElement => {
   const fallbackRenderer: FallbackRender = useCallback(
     ({ error, resetError }): ReactElement => {
@@ -117,6 +123,7 @@ export const GroupCallErrorBoundary = ({
           : new UnknownCallError(error instanceof Error ? error : new Error());
       return (
         <ErrorPage
+          widget={widget ?? null}
           error={callError}
           resetError={resetError}
           recoveryActionHandler={(action: CallErrorRecoveryAction) => {
@@ -126,7 +133,7 @@ export const GroupCallErrorBoundary = ({
         />
       );
     },
-    [recoveryActionHandler],
+    [recoveryActionHandler, widget],
   );
 
   return (

src/room/GroupCallView.tsx

@@ -479,6 +479,7 @@ export const GroupCallView: FC<Props> = ({
 
   return (
     <GroupCallErrorBoundary
+      widget={widget}
       recoveryActionHandler={(action) => {
         if (action == "reconnect") {
           setLeft(false);