don't show error card in prod & make it fullscreen when running cypress (#16908)

* don't show error card in prod & make it fullscreen when running cypress

* fix height styling

frontend/src/metabase/App.jsx

@@ -7,7 +7,7 @@ import Navbar from "metabase/nav/containers/Navbar";
 import { IFRAMED, initializeIframeResizer } from "metabase/lib/dom";
 
 import UndoListing from "metabase/containers/UndoListing";
-import ErrorCard from "metabase/components/ErrorCard";
+import AppErrorCard from "metabase/components/AppErrorCard/AppErrorCard";
 
 import {
   Archived,
@@ -55,6 +55,7 @@ export default class App extends Component {
   }
 
   componentDidCatch(error, errorInfo) {
+    console.log("COMPONENT DID CATCH LOLE");
     this.setState({ errorInfo });
   }
 
@@ -69,7 +70,7 @@ export default class App extends Component {
           {errorPage ? getErrorComponent(errorPage) : children}
           <UndoListing />
         </div>
-        <ErrorCard errorInfo={errorInfo} />
+        <AppErrorCard errorInfo={errorInfo} />
       </ScrollToTop>
     );
   }

frontend/src/metabase/components/ErrorCard.jsx → frontend/src/metabase/components/AppErrorCard/AppErrorCard.jsx

 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
+import { t } from "ttag";
+
+import { isCypressActive, isProduction } from "metabase/env";
+
 import BodyComponent from "metabase/components/BodyComponent";
-import Card from "metabase/components/Card";
 import Icon from "metabase/components/Icon";
-import { t } from "ttag";
+import Button from "metabase/components/Button";
+import { FullscreenCard, FixedCard } from "./AppErrorCard.styled";
+
+const CardComponent = isCypressActive ? FullscreenCard : FixedCard;
+const isInEnvWhereErrorShouldBeShown = !isProduction || isCypressActive;
+
+export default BodyComponent(AppErrorCard);
 
-function ErrorCard({ errorInfo }) {
-  const [showError, setShowError] = useState(false);
+AppErrorCard.propTypes = {
+  errorInfo: PropTypes.shape({
+    componentStack: PropTypes.string,
+  }),
+};
+
+function AppErrorCard({ errorInfo }) {
+  const [hasNewError, setHasNewError] = useState(false);
 
   useEffect(() => {
     if (errorInfo) {
-      setShowError(true);
+      setHasNewError(true);
     }
   }, [errorInfo]);
 
+  const showError = hasNewError && isInEnvWhereErrorShouldBeShown;
+
   return showError ? (
-    <Card className="fixed right bottom zF" p={2} m={2} width={350}>
+    <CardComponent>
       <div className="flex justify-between align-center mb1">
         <div className="text-error flex align-center">
           <Icon name="info_outline" mr={1} size="20" />
           <h2>{t`Something went wrong`}</h2>
         </div>
-        <Icon
-          name="close"
-          className="pl1 cursor-pointer text-dark"
-          onClick={() => setShowError(false)}
+        <Button
+          onlyIcon
+          icon="close"
+          className="pl1"
+          onClick={() => setHasNewError(false)}
         />
       </div>
-      <pre style={{ height: "20vh" }} className="overflow-auto">
-        {errorInfo.componentStack}
-      </pre>
-    </Card>
-  ) : (
-    showError
-  );
+      <pre>{errorInfo.componentStack}</pre>
+    </CardComponent>
+  ) : null;
 }
-
-ErrorCard.propTypes = {
-  errorInfo: PropTypes.object,
-};
-
-export default BodyComponent(ErrorCard);

frontend/src/metabase/components/AppErrorCard/AppErrorCard.styled.jsx

+import styled from "styled-components";
+import Card from "metabase/components/Card";
+
+export const FullscreenCard = styled(Card)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100vh;
+  padding: 1rem;
+  z-index: 5;
+  overflow: auto;
+`;
+
+export const FixedCard = styled(Card)`
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 350px;
+  height: 500px;
+  margin: 1rem;
+  padding: 1rem;
+  z-index: 5;
+  overflow: auto;
+`;

frontend/src/metabase/components/ExplicitSize.jsx

@@ -6,10 +6,11 @@ import ResizeObserver from "resize-observer-polyfill";
 
 import cx from "classnames";
 import _ from "underscore";
+import { isCypressActive } from "metabase/env";
 
 // After adding throttling for resize re-renders, our Cypress tests became flaky
 // due to queried DOM elements are getting detached after re-renders
-const throttleDuration = window.Cypress ? 0 : 500;
+const throttleDuration = isCypressActive ? 0 : 500;
 
 export default ({ selector, wrapped } = {}) => ComposedComponent =>
   class extends Component {

frontend/src/metabase/env.js

+export const isCypressActive = !!window.Cypress;
+
+// eslint-disable-next-line no-undef
+export const isProduction = process.env.NODE_ENV === "production";

frontend/src/metabase/lib/dom.js

 import _ from "underscore";
+import { isCypressActive } from "metabase/env";
+
 // IE doesn't support scrollX/scrollY:
 export const getScrollX = () =>
   typeof window.scrollX === "undefined" ? window.pageXOffset : window.scrollX;
@@ -9,7 +11,7 @@ export const getScrollY = () =>
 // Cypress renders the whole app within an iframe, but we want to exlude it from this check to avoid certain components (like Nav bar) not rendering
 export const IFRAMED = (function() {
   try {
-    return !window.Cypress && window.self !== window.top;
+    return !isCypressActive && window.self !== window.top;
   } catch (e) {
     return true;
   }