fix(dashboards): metric widgets error panel (#67781)

static/app/components/modals/metricWidgetViewerModal/visualization.tsx

@@ -167,7 +167,7 @@ export function MetricVisualization({
     );
   }, [timeseriesData, displayType, isLoading, queries, onOrderChange]);
 
-  if (!timeseriesData || isError) {
+  if (isError && !timeseriesData) {
     return (
       <StyledMetricChartContainer>
         {isLoading && <LoadingIndicator />}

static/app/views/dashboards/metrics/table.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useMemo} from 'react';
+import {useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {PanelTable, PanelTableHeader} from 'sentry/components/panels/panelTable';
@@ -35,12 +35,7 @@ export function MetricTableContainer({
       : {headers: [], rows: []};
   }, [timeseriesData, metricQueries]);
 
-  return (
-    <Fragment>
-      <LoadingScreen loading={isLoading} />
-      <MetricTable isLoading={isLoading} data={tableData} borderless />
-    </Fragment>
-  );
+  return <MetricTable isLoading={isLoading} data={tableData} borderless />;
 }
 
 interface MetricTableProps {

static/app/views/dashboards/metrics/widgetCard.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useMemo} from 'react';
+import {useMemo} from 'react';
 import type {InjectedRouter} from 'react-router';
 import styled from '@emotion/styled';
 import {ErrorBoundary} from '@sentry/react';
@@ -6,9 +6,8 @@ import type {Location} from 'history';
 
 import ErrorPanel from 'sentry/components/charts/errorPanel';
 import {HeaderTitle} from 'sentry/components/charts/styles';
-import EmptyMessage from 'sentry/components/emptyMessage';
 import TextOverflow from 'sentry/components/textOverflow';
-import {IconSearch, IconWarning} from 'sentry/icons';
+import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization, PageFilters} from 'sentry/types';
@@ -106,20 +105,6 @@ export function MetricWidgetCard({
     );
   }, [widget.displayType, metricQueries, timeseriesData, isLoading, showContextMenu]);
 
-  if (!timeseriesData || isError) {
-    if (isError) {
-      const errorMessage =
-        error?.responseJSON?.detail?.toString() || t('Error while fetching metrics data');
-      return (
-        <Fragment>
-          {renderErrorMessage?.(errorMessage)}
-          <ErrorPanel>
-            <IconWarning color="gray500" size="lg" />
-          </ErrorPanel>
-        </Fragment>
-      );
-    }
-  }
   return (
     <DashboardsMEPContext.Provider
       value={{
@@ -165,7 +150,7 @@ export function MetricWidgetCard({
         <ErrorBoundary>
           <WidgetCardBody
             isError={isError}
-            noData={timeseriesData?.data.length === 0}
+            timeseriesData={timeseriesData}
             renderErrorMessage={renderErrorMessage}
             error={error}
           >
@@ -178,29 +163,20 @@ export function MetricWidgetCard({
   );
 }
 
-function WidgetCardBody({children, isError, noData, renderErrorMessage, error}) {
-  if (isError) {
+function WidgetCardBody({children, isError, timeseriesData, renderErrorMessage, error}) {
+  if (isError && !timeseriesData) {
     const errorMessage =
       error?.responseJSON?.detail?.toString() || t('Error while fetching metrics data');
     return (
-      <Fragment>
+      <ErrorWrapper>
         {renderErrorMessage?.(errorMessage)}
         <ErrorPanel>
           <IconWarning color="gray500" size="lg" />
         </ErrorPanel>
-      </Fragment>
+      </ErrorWrapper>
     );
   }
 
-  if (noData) {
-    return (
-      <EmptyMessage
-        icon={<IconSearch size="xxl" />}
-        title={t('No results')}
-        description={t('No results found for the given query')}
-      />
-    );
-  }
   return children;
 }
 
@@ -228,3 +204,7 @@ const WidgetTitle = styled(HeaderTitle)`
   ${p => p.theme.overflowEllipsis};
   font-weight: normal;
 `;
+
+const ErrorWrapper = styled('div')`
+  padding-top: ${space(1)};
+`;