..

Author: paula-stacho

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

@@ -1,18 +1,52 @@
 import React from 'react';
 import { expect } from 'chai';
-import { screen } from '@mongodb-js/testing-library-compass';
+import { screen, userEvent } from '@mongodb-js/testing-library-compass';
 import { ShardingState } from './sharding';
 import { renderWithStore } from '../../../tests/create-store';
+import Sinon from 'sinon';
 
 function renderWithProps(
   props?: Partial<React.ComponentProps<typeof ShardingState>>
 ) {
-  return renderWithStore(<ShardingState {...props} />);
+  return renderWithStore(
+    <ShardingState
+      onCancelSharding={() => {}}
+      isCancellingSharding={false}
+      {...props}
+    />
+  );
 }
 
 describe('Sharding', function () {
   it('renders the info banner', async function () {
     await renderWithProps();
     expect(screen.getByRole('alert')).to.exist;
   });
+
+  it('sharding request can be cancelled', async function () {
+    const onCancelSharding = Sinon.spy();
+    await renderWithProps({
+      onCancelSharding,
+    });
+    const btn = screen.getByRole('button', { name: 'Cancel Request' });
+    expect(btn).to.be.visible;
+
+    userEvent.click(btn);
+
+    expect(onCancelSharding).to.have.been.calledOnce;
+  });
+
+  it('when cancelling is in progress, it cannot be triggered again', async function () {
+    const onCancelSharding = Sinon.spy();
+    await renderWithProps({
+      isCancellingSharding: true,
+      onCancelSharding,
+    });
+    const btn = screen.getByTestId('cancel-sharding-btn');
+    expect(btn.getAttribute('aria-disabled')).to.equal('true');
+
+    userEvent.click(btn);
+
+    expect(onCancelSharding).not.to.have.been.calledOnce;
+  });
 });

packages/compass-global-writes/src/components/states/sharding.tsx

@@ -7,7 +7,6 @@ import {
   css,
   Link,
   spacing,
-  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import {
@@ -50,13 +49,9 @@ export function ShardingState({
       >
         You can read more about Global Writes in our documentation.
         <Button
+          data-testid="cancel-sharding-btn"
           onClick={onCancelSharding}
-          disabled={isCancellingSharding}
-          leftGlyph={
-            isCancellingSharding ? (
-              <SpinLoader title="Cancelling Request" />
-            ) : undefined
-          }
+          isLoading={isCancellingSharding}
         >
           Cancel Request
         </Button>
@@ -67,7 +62,7 @@ export function ShardingState({
 
 export default connect(
   (state: RootState) => ({
-    isCancellingSharding: state.status === ShardingStatuses.CANCEL_SHARDING,
+    isCancellingSharding: state.status === ShardingStatuses.CANCELLING_SHARDING,
   }),
   {
     onCancelSharding: cancelSharding,

packages/compass-global-writes/src/services/atlas-global-writes-service.ts

@@ -42,7 +42,7 @@ export type ClusterDetailsApiResponse = {
   replicationSpecList: ReplicationItem[];
 };
 
-type AutomationAgentProcess = {
+export type AutomationAgentProcess = {
   statusType: string;
   workingOnShort: string;
   errorText: string;

packages/compass-global-writes/src/store/reducer.ts

@@ -37,6 +37,7 @@ enum GlobalWritesActionTypes {
   CancellingShardingErrored = 'global-writes/CancellingShardingErrored',
 
   NextPollingTimeoutSet = 'global-writes/NextPollingTimeoutSet',
+  NextPollingTimeoutCleared = 'global-writes/NextPollingTimeoutCleared',
 
   UnmanagingNamespaceStarted = 'global-writes/UnmanagingNamespaceStarted',
   UnmanagingNamespaceFinished = 'global-writes/UnmanagingNamespaceFinished',
@@ -94,6 +95,10 @@ type NextPollingTimeoutSetAction = {
   timeout: NodeJS.Timeout;
 };
 
+type NextPollingTimeoutClearedAction = {
+  type: GlobalWritesActionTypes.NextPollingTimeoutCleared;
+};
+
 type UnmanagingNamespaceStartedAction = {
   type: GlobalWritesActionTypes.UnmanagingNamespaceStarted;
 };
@@ -263,12 +268,15 @@ const reducer: Reducer<RootState, Action> = (state = initialState, action) => {
     (state.status === ShardingStatuses.NOT_READY ||
       state.status === ShardingStatuses.SHARDING)
   ) {
+    if (state.pollingTimeout) {
+      throw new Error('Polling was not stopped');
+    }
     return {
       ...state,
       status: ShardingStatuses.SHARDING_ERROR,
       shardKey: undefined,
       shardingError: action.error,
-      pollingTimeout: undefined,
+      pollingTimeout: state.pollingTimeout,
     };
   }
 
@@ -280,12 +288,15 @@ const reducer: Reducer<RootState, Action> = (state = initialState, action) => {
     (state.status === ShardingStatuses.NOT_READY ||
       state.status === ShardingStatuses.SHARDING)
   ) {
+    if (state.pollingTimeout) {
+      throw new Error('Polling was not stopped');
+    }
     return {
       ...state,
       status: getStatusFromShardKey(action.shardKey, state.managedNamespace),
       shardKey: action.shardKey,
       shardingError: undefined,
-      pollingTimeout: undefined,
+      pollingTimeout: state.pollingTimeout,
     };
   }
 
@@ -341,17 +352,33 @@ const reducer: Reducer<RootState, Action> = (state = initialState, action) => {
     };
   }
 
+  if (
+    isAction<NextPollingTimeoutClearedAction>(
+      action,
+      GlobalWritesActionTypes.NextPollingTimeoutCleared
+    ) &&
+    state.status === ShardingStatuses.SHARDING
+  ) {
+    return {
+      ...state,
+      pollingTimeout: undefined,
+    };
+  }
+
   if (
     isAction<CancellingShardingStartedAction>(
       action,
       GlobalWritesActionTypes.CancellingShardingStarted
     ) &&
     state.status === ShardingStatuses.SHARDING
   ) {
+    if (state.pollingTimeout) {
+      throw new Error('Polling was not stopped');
+    }
     return {
       ...state,
       status: ShardingStatuses.CANCELLING_SHARDING,
-      pollingTimeout: undefined,
+      pollingTimeout: state.pollingTimeout,
     };
   }
 
@@ -610,6 +637,7 @@ const startPollingForShardKey = (): GlobalWritesThunkAction<
   NextPollingTimeoutSetAction
 > => {
   return (dispatch) => {
+    console.log('START POLLING');
     const timeout = setTimeout(() => {
       void dispatch(fetchNamespaceShardKey());
     }, POLLING_INTERVAL);
@@ -635,6 +663,7 @@ export const fetchNamespaceShardKey = (): GlobalWritesThunkAction<
     getState,
     { atlasGlobalWritesService, logger, connectionInfoRef }
   ) => {
+    console.log('FETCHING KEY');
     const { namespace, status } = getState();
 
     try {