From 23d9f46d307c6ed003f77c431ac8bd8395bb54ca Mon Sep 17 00:00:00 2001 From: Mehmet Salih Yavuz Date: Tue, 28 Jan 2025 21:13:43 +0300 Subject: [PATCH] chore(Network Errors): Update network errors on filter bars and charts (#31811) Co-authored-by: Geido <60598000+geido@users.noreply.github.com> --- .../ErrorMessageWithStackTrace.tsx | 4 ++ .../FrontendNetworkErrorMessage.test.tsx | 70 +++++++++++++++++++ .../FrontendNetworkErrorMessage.tsx | 8 ++- .../src/components/ErrorMessage/types.ts | 1 + .../FilterBar/FilterControls/FilterValue.tsx | 13 ++-- 5 files changed, 90 insertions(+), 6 deletions(-) create mode 100644 superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.test.tsx diff --git a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx index 6b457df52..9d3642457 100644 --- a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx +++ b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx @@ -35,6 +35,7 @@ type Props = { descriptionDetails?: ReactNode; errorMitigationFunction?: () => void; fallback?: ReactNode; + compact?: boolean; }; export default function ErrorMessageWithStackTrace({ @@ -48,6 +49,7 @@ export default function ErrorMessageWithStackTrace({ description, descriptionDetails, fallback, + compact, }: Props) { // Check if a custom error message component was registered for this message if (error) { @@ -57,6 +59,7 @@ export default function ErrorMessageWithStackTrace({ if (ErrorMessageComponent) { return ( ); } diff --git a/superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.test.tsx b/superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.test.tsx new file mode 100644 index 000000000..8e53f5f02 --- /dev/null +++ b/superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.test.tsx @@ -0,0 +1,70 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from 'spec/helpers/testing-library'; +import FrontendNetworkErrorMessage from './FrontendNetworkErrorMessage'; + +jest.mock( + 'src/components/Icons/Icon', + () => + ({ fileName }: { fileName: string }) => ( + + ), +); + +const mockedProps = { + error: { + error_type: ErrorTypeEnum.FRONTEND_NETWORK_ERROR, + extra: {}, + level: 'error' as ErrorLevel, + message: 'Error message', + }, + source: 'dashboard' as ErrorSource, + subtitle: 'Error message', +}; + +test('should render', () => { + const nullExtraProps = { + ...mockedProps, + error: { + ...mockedProps.error, + extra: null, + }, + }; + const { container } = render( + , + ); + expect(container).toBeInTheDocument(); +}); + +test('should render the error message', () => { + render(, { useRedux: true }); + expect(screen.getByText('Error message')).toBeInTheDocument(); +}); + +test("should render error message in compact mode if 'compact' is true", () => { + render(, { + useRedux: true, + }); + expect(screen.queryByText('Error message')).not.toBeInTheDocument(); + userEvent.click(screen.getByRole('button')); + expect(screen.getByText('Error message')).toBeInTheDocument(); +}); diff --git a/superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.tsx b/superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.tsx index 07d8567ca..303735ca4 100644 --- a/superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.tsx +++ b/superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.tsx @@ -24,10 +24,16 @@ import ErrorAlert from './ErrorAlert'; function FrontendNetworkErrorMessage({ error, subtitle, + compact, }: ErrorMessageComponentProps) { const { level, message } = error; return ( - + ); } export default FrontendNetworkErrorMessage; diff --git a/superset-frontend/src/components/ErrorMessage/types.ts b/superset-frontend/src/components/ErrorMessage/types.ts index ed05ef448..bb3d39c25 100644 --- a/superset-frontend/src/components/ErrorMessage/types.ts +++ b/superset-frontend/src/components/ErrorMessage/types.ts @@ -25,6 +25,7 @@ export type ErrorMessageComponentProps | null> = error: SupersetError; source?: ErrorSource; subtitle?: ReactNode; + compact?: boolean; }; export type ErrorMessageComponent = ComponentType; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx index 454d90603..1757cb6d5 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx @@ -45,7 +45,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { isEqual, isEqualWith } from 'lodash'; import { getChartDataRequest } from 'src/components/Chart/chartAction'; import Loading from 'src/components/Loading'; -import BasicErrorAlert from 'src/components/ErrorMessage/BasicErrorAlert'; import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace'; import { waitForAsyncData } from 'src/middleware/asyncEvent'; import { FilterBarOrientation, RootState } from 'src/dashboard/types'; @@ -55,6 +54,7 @@ import { } from 'src/dashboard/actions/dashboardState'; import { RESPONSIVE_WIDTH } from 'src/filters/components/common'; import { FAST_DEBOUNCE } from 'src/constants'; +import ErrorAlert from 'src/components/ErrorMessage/ErrorAlert'; import { dispatchHoverAction, dispatchFocusAction } from './utils'; import { FilterControlProps } from './types'; import { getFormData } from '../../utils'; @@ -106,6 +106,7 @@ const FilterValue: FC = ({ const dashboardId = useSelector( state => state.dashboardInfo.id, ); + const [error, setError] = useState(); const [formData, setFormData] = useState>({ inView: false, @@ -305,11 +306,13 @@ const FilterValue: FC = ({ return ( } />