Fix "Show error details" keeps showing after clicked (#20824)

frontend/src/metabase/components/ErrorDetails.jsx

-/* eslint-disable react/prop-types */
-import React from "react";
-import { t } from "ttag";
-import cx from "classnames";
-
-export default class ErrorDetails extends React.Component {
-  state = {
-    showError: false,
-  };
-  render() {
-    const { details, centered, className } = this.props;
-    if (!details) {
-      return null;
-    }
-    return (
-      <div className={className}>
-        <div className={centered ? "text-centered" : "text-left"}>
-          <a
-            onClick={() => this.setState({ showError: true })}
-            className="link cursor-pointer"
-          >{t`Show error details`}</a>
-        </div>
-        <div
-          style={{ display: this.state.showError ? "inherit" : "none" }}
-          className={cx("pt3", centered ? "text-centered" : "text-left")}
-        >
-          <h2>{t`Here's the full error message`}</h2>
-          <div
-            style={{ fontFamily: "monospace" }}
-            className="QueryError2-detailBody bordered rounded bg-light text-bold p2 mt1"
-          >
-            {/* ensure we don't try to render anything except a string */}
-            {typeof details === "string"
-              ? details
-              : typeof details.message === "string"
-              ? details.message
-              : String(details)}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

frontend/src/metabase/components/ErrorDetails/ErrorDetails.tsx

+import React, { useState } from "react";
+import { t } from "ttag";
+import cx from "classnames";
+
+import { ErrorDetailsProps } from "./types";
+
+export default function ErrorDetails({
+  details,
+  centered,
+  className,
+}: ErrorDetailsProps) {
+  const [showError, setShowError] = useState(false);
+
+  if (!details) {
+    return null;
+  }
+
+  function toggleShowError() {
+    setShowError(showError => !showError);
+  }
+
+  return (
+    <div className={className}>
+      <div className={centered ? "text-centered" : "text-left"}>
+        <a onClick={toggleShowError} className="link cursor-pointer">
+          {showError ? t`Hide error details` : t`Show error details`}
+        </a>
+      </div>
+      <div
+        style={{ display: showError ? "inherit" : "none" }}
+        className={cx("pt3", centered ? "text-centered" : "text-left")}
+      >
+        <h2>{t`Here's the full error message`}</h2>
+        <div
+          style={{ fontFamily: "monospace" }}
+          className="QueryError2-detailBody bordered rounded bg-light text-bold p2 mt1"
+        >
+          {/* ensure we don't try to render anything except a string */}
+          {typeof details === "string"
+            ? details
+            : typeof details.message === "string"
+            ? details.message
+            : String(details)}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/metabase/components/ErrorDetails/index.ts

+export { default } from "./ErrorDetails";

frontend/src/metabase/components/ErrorDetails/types.ts

+export interface ErrorDetailsProps {
+  details: string | Record<string, any>;
+  centered?: boolean;
+  className?: string;
+}

frontend/src/metabase/containers/ErrorPages.jsx

@@ -6,7 +6,7 @@ import fitViewport from "metabase/hoc/FitViewPort";
 
 import Icon from "metabase/components/Icon";
 import EmptyState from "metabase/components/EmptyState";
-import ErrorDetails from "metabase/components/ErrorDetails";
+import ErrorDetails from "metabase/components/ErrorDetails/ErrorDetails";
 
 import NoResults from "assets/img/no_results.svg";
 import { ErrorPageRoot } from "./ErrorPages.styled";

frontend/src/metabase/query_builder/components/VisualizationError.jsx

@@ -8,7 +8,7 @@ import cx from "classnames";
 
 import MetabaseSettings from "metabase/lib/settings";
 import ErrorMessage from "metabase/components/ErrorMessage";
-import ErrorDetails from "metabase/components/ErrorDetails";
+import ErrorDetails from "metabase/components/ErrorDetails/ErrorDetails";
 import {
   QueryError,
   QueryErrorIcon,