Skip to content
Snippets Groups Projects
Unverified Commit 85161494 authored by Nicolò Pretto's avatar Nicolò Pretto Committed by GitHub
Browse files

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
parent d0020aae
No related branches found
No related tags found
No related merge requests found
......@@ -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",
......
......@@ -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");
......
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>
);
......@@ -170,7 +170,6 @@ describe("InteractiveQuestion", () => {
await waitForLoaderToBeRemoved();
expect(screen.getByText("Error")).toBeInTheDocument();
expect(screen.getByText("Question not found")).toBeInTheDocument();
});
});
......@@ -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();
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment