diff --git a/app/components/Editor.tsx b/app/components/Editor.tsx index 94ba811d4..bd3072c5d 100644 --- a/app/components/Editor.tsx +++ b/app/components/Editor.tsx @@ -325,7 +325,7 @@ function Editor(props: Props, ref: React.RefObject | null) { ); return ( - + <> { }; handleReportBug = () => { - window.open(githubIssuesUrl()); + window.open(isCloudHosted ? feedbackUrl() : githubIssuesUrl()); }; render() { - const { t } = this.props; + const { t, component: Component = CenteredContent, showTitle } = this.props; if (this.error) { const error = this.error; const isReported = !!env.SENTRY_DSN && isCloudHosted; - const isChunkError = this.error.message.match( - /dynamically imported module/ - ); + const isChunkError = [ + "module script failed", + "dynamically imported module", + ].some((msg) => this.error?.message?.includes(msg)); if (isChunkError) { return ( - - -

- Loading Failed -

+ + {showTitle && ( + <> + +

+ Loading Failed +

+ + )} Sorry, part of the application failed to load. This may be @@ -81,16 +91,20 @@ class ErrorBoundary extends React.Component {

-
+ ); } return ( - - -

- Something Unexpected Happened -

+ + {showTitle && ( + <> + +

+ Something Unexpected Happened +

+ + )} { )}

-
+ ); } diff --git a/app/components/Flex.tsx b/app/components/Flex.tsx index 788606591..05e289ca0 100644 --- a/app/components/Flex.tsx +++ b/app/components/Flex.tsx @@ -10,6 +10,7 @@ const Flex = styled.div<{ column?: boolean; align?: AlignValues; justify?: JustifyValues; + wrap?: boolean; shrink?: boolean; reverse?: boolean; gap?: number; @@ -26,6 +27,7 @@ const Flex = styled.div<{ : "row"}; align-items: ${({ align }) => align}; justify-content: ${({ justify }) => justify}; + flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "initial")}; flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")}; gap: ${({ gap }) => (gap ? `${gap}px` : "initial")}; min-height: 0; diff --git a/app/components/List/Error.tsx b/app/components/List/Error.tsx index ca0fb58eb..b4bc6d720 100644 --- a/app/components/List/Error.tsx +++ b/app/components/List/Error.tsx @@ -30,7 +30,7 @@ export default function LoadingError({ error, retry, ...rest }: Props) { return ( - + {message}{" "} retry()}>{t("Click to retry")}… diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx index 40e2d0732..43c0f7a8a 100644 --- a/app/components/Modal.tsx +++ b/app/components/Modal.tsx @@ -16,6 +16,7 @@ import usePrevious from "~/hooks/usePrevious"; import useUnmount from "~/hooks/useUnmount"; import { fadeAndScaleIn } from "~/styles/animations"; import Desktop from "~/utils/Desktop"; +import ErrorBoundary from "./ErrorBoundary"; let openModals = 0; type Props = { @@ -82,7 +83,9 @@ const Modal: React.FC = ({ column reverse > - {children} + + {children} +
{title && ( @@ -112,7 +115,7 @@ const Modal: React.FC = ({ ev.stopPropagation()} column> {title &&

{title}

} - {children} + {children}
diff --git a/app/components/Sidebar/Right.tsx b/app/components/Sidebar/Right.tsx index 7c9f397c4..df5225349 100644 --- a/app/components/Sidebar/Right.tsx +++ b/app/components/Sidebar/Right.tsx @@ -4,6 +4,7 @@ import * as React from "react"; import styled, { useTheme } from "styled-components"; import breakpoint from "styled-components-breakpoint"; import { depths } from "@shared/styles"; +import ErrorBoundary from "~/components/ErrorBoundary"; import Flex from "~/components/Flex"; import ResizeBorder from "~/components/Sidebar/components/ResizeBorder"; import useMobile from "~/hooks/useMobile"; @@ -94,7 +95,7 @@ function Right({ children, border, className }: Props) { className={className} > - {children} + {children} {!isMobile && ( - + diff --git a/app/scenes/Document/components/Document.tsx b/app/scenes/Document/components/Document.tsx index 7f39fd903..7f8b011bf 100644 --- a/app/scenes/Document/components/Document.tsx +++ b/app/scenes/Document/components/Document.tsx @@ -400,7 +400,7 @@ class DocumentScene extends React.Component { : updateDocumentUrl(this.props.match.url, document); return ( - + {this.props.location.pathname !== canonicalUrl && (