feat(sdk): use Alert component for SDKError (#49895)

* wip: Alert component for SDKError

* use the alert component for the default sdk error component

* fix tests

* update e2e

e2e/test/scenarios/embedding-sdk/metabase-sdk-styles-tests.cy.spec.ts

@@ -112,7 +112,7 @@ describeSDK("scenarios > embedding-sdk > static-dashboard", () => {
           defaultBrowserFonteFamily,
         );
 
-        cy.findByText("Error").should(
+        cy.findByText(/Failed to fetch the user/).should(
           "have.css",
           "font-family",
           "Lato, sans-serif",

e2e/test/scenarios/embedding-sdk/static-dashboard-cors.cy.spec.js

@@ -90,7 +90,6 @@ describeSDK("scenarios > embedding-sdk > static-dashboard", () => {
     });
 
     cy.get("#metabase-sdk-root").within(() => {
-      cy.findByText("Error").should("be.visible");
       cy.findByText(
         "Failed to fetch the user, the session might be invalid.",
       ).should("be.visible");
@@ -153,7 +152,6 @@ describeSDK("scenarios > embedding-sdk > static-dashboard", () => {
     });
 
     cy.get("#metabase-sdk-root").within(() => {
-      cy.findByText("Error").should("be.visible");
       cy.findByText(
         "Failed to fetch the user, the session might be invalid.",
       ).should("be.visible");

enterprise/frontend/src/embedding-sdk/components/private/PublicComponentWrapper/SdkError.tsx

-import { t } from "ttag";
-
 import { useSdkSelector } from "embedding-sdk/store";
 import { getErrorComponent } from "embedding-sdk/store/selectors";
 import type { SdkErrorComponentProps } from "embedding-sdk/store/types";
-import { Center } from "metabase/ui";
+import Alert from "metabase/core/components/Alert";
+import { color } from "metabase/lib/colors";
+import { Box, Center } from "metabase/ui";
 
 export const SdkError = ({ message }: SdkErrorComponentProps) => {
   const CustomError = useSdkSelector(getErrorComponent);
@@ -17,9 +17,17 @@ export const SdkError = ({ message }: SdkErrorComponentProps) => {
   );
 };
 
+const FORCE_DARK_TEXT_COLOR = {
+  // The Alert component has a light background, we need to force a dark text
+  // color. The sdk aliases text-dark to the primary color, which in dark themes
+  // is a light color, making the text un-readable
+  "--mb-color-text-dark": color("text-dark"),
+} as React.CSSProperties;
+
 const DefaultErrorMessage = ({ message }: SdkErrorComponentProps) => (
-  <div>
-    <div>{t`Error`}</div>
-    <div>{message}</div>
-  </div>
+  <Box p="sm" style={FORCE_DARK_TEXT_COLOR}>
+    <Alert variant="error" icon="warning">
+      {message}
+    </Alert>
+  </Box>
 );

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.unit.spec.tsx

@@ -170,7 +170,6 @@ describe("InteractiveQuestion", () => {
 
     await waitForLoaderToBeRemoved();
 
-    expect(screen.getByText("Error")).toBeInTheDocument();
     expect(screen.getByText("Question not found")).toBeInTheDocument();
   });
 });

enterprise/frontend/src/embedding-sdk/components/public/StaticQuestion/StaticQuestion.unit.spec.tsx

@@ -125,7 +125,6 @@ describe("StaticQuestion", () => {
   it("should render an error if a question isn't found", async () => {
     setup({ isValidCard: false });
     await waitForLoaderToBeRemoved();
-    expect(screen.getByText("Error")).toBeInTheDocument();
     expect(
       screen.getByText("You don't have permissions to do that."),
     ).toBeInTheDocument();