fix(compass-global-writes): handle loading error COMPASS-8446 (#6451)

Author: paula-stacho

packages/compass-global-writes/src/components/index.tsx

@@ -16,6 +16,7 @@ import ShardKeyInvalid from './states/shard-key-invalid';
 import ShardKeyMismatch from './states/shard-key-mismatch';
 import ShardingError from './states/sharding-error';
 import IncompleteShardingSetup from './states/incomplete-sharding-setup';
+import LoadingError from './states/loading-error';
 
 const containerStyles = css({
   display: 'flex',
@@ -90,6 +91,10 @@ function ShardingStateView({
     return <IncompleteShardingSetup />;
   }
 
+  if (shardingStatus === ShardingStatuses.LOADING_ERROR) {
+    return <LoadingError />;
+  }
+
   return null;
 }
 

packages/compass-global-writes/src/components/states/loading-error.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { expect } from 'chai';
+import { screen } from '@mongodb-js/testing-library-compass';
+import { LoadingError } from './loading-error';
+import { renderWithStore } from '../../../tests/create-store';
+
+const error = 'Test failure';
+
+function renderWithProps(
+  props?: Partial<React.ComponentProps<typeof LoadingError>>
+) {
+  return renderWithStore(<LoadingError error={error} {...props} />);
+}
+
+describe('LoadingError', function () {
+  it('renders the error', async function () {
+    await renderWithProps();
+    expect(screen.getByText(error)).to.exist;
+  });
+});

packages/compass-global-writes/src/components/states/loading-error.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ErrorSummary } from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+import { type RootState, ShardingStatuses } from '../../store/reducer';
+import { containerStyles } from '../common-styles';
+
+interface LoadingErrorProps {
+  error: string;
+}
+
+export function LoadingError({ error }: LoadingErrorProps) {
+  return (
+    <div className={containerStyles}>
+      <ErrorSummary errors={error} />
+    </div>
+  );
+}
+
+export default connect((state: RootState) => {
+  if (state.status !== ShardingStatuses.LOADING_ERROR) {
+    throw new Error('Error not found in LoadingError');
+  }
+  return {
+    error: state.loadingError,
+  };
+})(LoadingError);

packages/compass-global-writes/src/store/index.spec.ts

@@ -73,6 +73,9 @@ function createStore({
   hasShardKey = () => false,
   failsOnShardingRequest = () => false,
   failsOnShardZoneRequest = () => false,
+  failsToFetchClusterDetails = () => false,
+  failsToFetchDeploymentStatus = () => false,
+  failsToFetchShardKey = () => false,
   authenticatedFetchStub,
 }:
   | {
@@ -81,6 +84,9 @@ function createStore({
       hasShardKey?: () => boolean | AtlasShardKey;
       failsOnShardingRequest?: () => boolean;
       failsOnShardZoneRequest?: () => boolean;
+      failsToFetchClusterDetails?: () => boolean;
+      failsToFetchDeploymentStatus?: () => boolean;
+      failsToFetchShardKey?: () => boolean;
       authenticatedFetchStub?: never;
     }
   | {
@@ -89,6 +95,9 @@ function createStore({
       hasShardKey?: () => boolean | ShardKey;
       failsOnShardingRequest?: never;
       failsOnShardZoneRequest?: () => never;
+      failsToFetchClusterDetails?: never;
+      failsToFetchDeploymentStatus?: never;
+      failsToFetchShardKey?: () => boolean;
       authenticatedFetchStub?: () => void;
     } = {}): GlobalWritesStore {
   const atlasService = {
@@ -98,6 +107,9 @@ function createStore({
       }
 
       if (uri.includes('/clusters/')) {
+        if (failsToFetchClusterDetails()) {
+          return Promise.reject(new Error('Failed to fetch cluster details'));
+        }
         return createAuthFetchResponse({
           ...clusterDetails,
           geoSharding: {
@@ -108,6 +120,9 @@ function createStore({
       }
 
       if (uri.includes('/deploymentStatus/')) {
+        if (failsToFetchDeploymentStatus()) {
+          return Promise.reject(new Error('Failed to fetch deployment status'));
+        }
         return createAuthFetchResponse({
           automationStatus: {
             processes: hasShardingError() ? [failedShardingProcess] : [],
@@ -130,6 +145,10 @@ function createStore({
     }),
     automationAgentAwait: (_meta: unknown, type: string) => {
       if (type === 'getShardKey') {
+        if (failsToFetchShardKey()) {
+          return Promise.reject(new Error('Failed to fetch shardKey'));
+        }
+
         const shardKey = hasShardKey();
         return {
           response:
@@ -188,6 +207,35 @@ describe('GlobalWritesStore Store', function () {
   });
 
   context('scenarios', function () {
+    context('initial load fail', function () {
+      it('fails to fetch cluster details', async function () {
+        const store = createStore({
+          failsToFetchClusterDetails: () => true,
+        });
+        await waitFor(() => {
+          expect(store.getState().status).to.equal('LOADING_ERROR');
+        });
+      });
+
+      it('fails to fetch shard key', async function () {
+        const store = createStore({
+          failsToFetchShardKey: () => true,
+        });
+        await waitFor(() => {
+          expect(store.getState().status).to.equal('LOADING_ERROR');
+        });
+      });
+
+      it('fails to fetch deployment status', async function () {
+        const store = createStore({
+          failsToFetchDeploymentStatus: () => true,
+        });
+        await waitFor(() => {
+          expect(store.getState().status).to.equal('LOADING_ERROR');
+        });
+      });
+    });
+
     it('not managed -> sharding -> valid shard key', async function () {
       let mockShardKey = false;
       let mockManagedNamespace = false;
@@ -291,6 +339,52 @@ describe('GlobalWritesStore Store', function () {
       });
     });
 
+    context('pulling fail', function () {
+      it('sharding -> error (failed to fetch shard key)', async function () {
+        let mockFailure = false;
+        // initial state === sharding
+        clock = sinon.useFakeTimers({
+          shouldAdvanceTime: true,
+        });
+        const store = createStore({
+          isNamespaceManaged: () => true,
+          failsToFetchShardKey: Sinon.fake(() => mockFailure),
+        });
+        await waitFor(() => {
+          expect(store.getState().status).to.equal('SHARDING');
+        });
+
+        // sharding ends with a request failure
+        mockFailure = true;
+        clock.tick(POLLING_INTERVAL);
+        await waitFor(() => {
+          expect(store.getState().status).to.equal('LOADING_ERROR');
+        });
+      });
+
+      it('sharding -> error (failed to fetch deployment status)', async function () {
+        let mockFailure = false;
+        // initial state === sharding
+        clock = sinon.useFakeTimers({
+          shouldAdvanceTime: true,
+        });
+        const store = createStore({
+          isNamespaceManaged: () => true,
+          failsToFetchDeploymentStatus: Sinon.fake(() => mockFailure),
+        });
+        await waitFor(() => {
+          expect(store.getState().status).to.equal('SHARDING');
+        });
+
+        // sharding ends with a request failure
+        mockFailure = true;
+        clock.tick(POLLING_INTERVAL);
+        await waitFor(() => {
+          expect(store.getState().status).to.equal('LOADING_ERROR');
+        });
+      });
+    });
+
     it('sharding -> cancelling request -> not managed', async function () {
       let mockManagedNamespace = true;
       confirmationStub.resolves(true);