Hide tabs when stream query failed

Author: kagora-akamai

packages/manager/src/features/Delivery/Streams/Stream/StreamLanding.test.tsx

@@ -7,11 +7,22 @@ import {
   streamFactory,
 } from 'src/factories';
 import { StreamLanding } from 'src/features/Delivery/Streams/Stream/StreamLanding';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import type { Flags } from 'src/featureFlags';
 
+const queryMocks = vi.hoisted(() => ({
+  useStreamQuery: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useStreamQuery: queryMocks.useStreamQuery,
+  };
+});
+
 const streamId = 123;
 const mockDestinations = [
   akamaiObjectStorageDestinationFactory.build({ id: 1 }),
@@ -30,45 +41,83 @@ describe('StreamLanding', () => {
     });
   };
 
-  beforeEach(async () => {
-    server.use(
-      http.get(`*/monitor/streams/${streamId}`, () => {
-        return HttpResponse.json(mockStream);
-      })
-    );
+  describe('and stream has loaded successfully', () => {
+    beforeEach(async () => {
+      queryMocks.useStreamQuery.mockReturnValue({
+        data: mockStream,
+        isLoading: false,
+      });
+    });
+
+    describe('and metrics are not enabled', () => {
+      const flags = {
+        aclpLogs: {
+          enabled: true,
+          beta: false,
+          metricsEnabled: false,
+        },
+      };
+
+      it('should render the summary and not the metrics tab', async () => {
+        renderComponent(flags);
+
+        screen.getByText('Summary');
+        expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+      });
+    });
+
+    describe('and metrics are enabled', () => {
+      const flags = {
+        aclpLogs: {
+          enabled: true,
+          beta: false,
+          metricsEnabled: true,
+        },
+      };
+
+      it('should render the summary tab and metrics tab', async () => {
+        renderComponent(flags);
+
+        screen.getByText('Summary');
+        expect(screen.queryByText('Metrics')).toBeInTheDocument();
+      });
+    });
   });
 
-  describe('and metrics are not enabled', () => {
-    const flags = {
-      aclpLogs: {
-        enabled: true,
-        beta: false,
-        metricsEnabled: false,
-      },
-    };
+  describe('and stream is loading', () => {
+    beforeEach(async () => {
+      queryMocks.useStreamQuery.mockReturnValue({
+        isLoading: true,
+      });
+    });
 
-    it('should render the summary and not the metrics tab', async () => {
-      renderComponent(flags);
+    it('should render loading spinner', async () => {
+      renderComponent({});
 
-      screen.getByText('Summary');
+      expect(screen.queryByText('Summary')).not.toBeInTheDocument();
       expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+
+      const loadingElement = screen.queryByTestId('circle-progress');
+      expect(loadingElement).toBeInTheDocument();
     });
   });
 
-  describe('and metrics are enabled', () => {
-    const flags = {
-      aclpLogs: {
-        enabled: true,
-        beta: false,
-        metricsEnabled: true,
-      },
-    };
+  describe('and stream request threw error', () => {
+    const streamErrorMessage = 'Stream not found';
+    beforeEach(async () => {
+      queryMocks.useStreamQuery.mockReturnValue({
+        isLoading: false,
+        error: [{ reason: streamErrorMessage }],
+      });
+    });
+
+    it('should render error state with message', async () => {
+      renderComponent({});
 
-    it('should render the summary tab and metrics tab', async () => {
-      renderComponent(flags);
+      expect(screen.queryByText('Summary')).not.toBeInTheDocument();
+      expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
 
-      screen.getByText('Summary');
-      expect(screen.queryByText('Metrics')).toBeInTheDocument();
+      expect(screen.queryByText(streamErrorMessage)).toBeInTheDocument();
     });
   });
 });

packages/manager/src/features/Delivery/Streams/Stream/StreamLanding.tsx

@@ -1,3 +1,5 @@
+import { useStreamQuery } from '@linode/queries';
+import { Box, CircleProgress, ErrorState } from '@linode/ui';
 import { useParams } from '@tanstack/react-router';
 import * as React from 'react';
 import { useMemo } from 'react';
@@ -16,6 +18,7 @@ import { useIsACLPLogsEnabled } from 'src/features/Delivery/deliveryUtils';
 import { StreamMetrics } from 'src/features/Delivery/Streams/Stream/StreamMetrics';
 import { StreamEdit } from 'src/features/Delivery/Streams/StreamForm/StreamEdit';
 import { useTabs } from 'src/hooks/useTabs';
+import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import type { Tab } from 'src/hooks/useTabs';
 
@@ -45,6 +48,12 @@ export const StreamLanding = () => {
 
   const { handleTabChange, tabIndex, tabs } = useTabs(activeTabs);
 
+  const { isLoading: isLoadingStream, error: errorStream } = useStreamQuery(
+    Number(streamId)
+  );
+  const streamErrorDefaultMessage =
+    'There was an error retrieving stream. Please reload and try again.';
+
   const landingHeaderProps: LandingHeaderProps = {
     breadcrumbProps: {
       pathname: '/logs/delivery/streams/summary',
@@ -61,6 +70,24 @@ export const StreamLanding = () => {
     title: `Stream ${streamId}`,
   };
 
+  if (isLoadingStream) {
+    return (
+      <Box display="flex" justifyContent="center">
+        <CircleProgress />
+      </Box>
+    );
+  }
+
+  if (errorStream) {
+    return (
+      <ErrorState
+        errorText={
+          getAPIErrorOrDefault(errorStream, streamErrorDefaultMessage)[0].reason
+        }
+      />
+    );
+  }
+
   return (
     <>
       <DocumentTitleSegment segment="Stream" />

packages/manager/src/features/Delivery/Streams/StreamForm/StreamEdit.tsx

@@ -21,11 +21,9 @@ export const StreamEdit = () => {
     isLoading: isLoadingDestinations,
     error: errorDestinations,
   } = useAllDestinationsQuery();
-  const {
-    data: stream,
-    isLoading: isLoadingStream,
-    error: errorStream,
-  } = useStreamQuery(Number(streamId));
+  const { data: stream, isLoading: isLoadingStream } = useStreamQuery(
+    Number(streamId)
+  );
 
   const form = useForm<StreamAndDestinationFormType>({
     defaultValues: {
@@ -90,26 +88,17 @@ export const StreamEdit = () => {
           <CircleProgress size="md" />
         </Box>
       )}
-      {errorStream && (
-        <ErrorState
-          compact
-          errorText="There was an error retrieving stream. Please reload and try again."
-        />
-      )}
       {errorDestinations && (
         <ErrorState
           compact
           errorText="There was an error retrieving destinations. Please reload and try again."
         />
       )}
-      {!isLoadingStream &&
-        !isLoadingDestinations &&
-        !errorStream &&
-        !errorDestinations && (
-          <FormProvider {...form}>
-            <StreamForm mode="edit" streamId={streamId} />
-          </FormProvider>
-        )}
+      {!isLoadingStream && !isLoadingDestinations && !errorDestinations && (
+        <FormProvider {...form}>
+          <StreamForm mode="edit" streamId={streamId} />
+        </FormProvider>
+      )}
     </>
   );
 };