feat: cancel sharding

Author: paula-stacho

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

@@ -5,6 +5,7 @@ import {
   spacing,
   WorkspaceContainer,
   SpinLoaderWithLabel,
+  ConfirmationModalArea,
 } from '@mongodb-js/compass-components';
 import type { RootState, ShardingStatus } from '../store/reducer';
 import { ShardingStatuses } from '../store/reducer';
@@ -55,7 +56,10 @@ function ShardingStateView({
     return <UnshardedState />;
   }
 
-  if (shardingStatus === ShardingStatuses.SHARDING) {
+  if (
+    shardingStatus === ShardingStatuses.SHARDING ||
+    shardingStatus === ShardingStatuses.CANCEL_SHARDING
+  ) {
     return <ShardingState />;
   }
 
@@ -73,7 +77,9 @@ export function GlobalWrites({ shardingStatus }: GlobalWritesProps) {
   return (
     <div className={containerStyles}>
       <WorkspaceContainer className={workspaceContentStyles}>
-        <ShardingStateView shardingStatus={shardingStatus} />
+        <ConfirmationModalArea>
+          <ShardingStateView shardingStatus={shardingStatus} />
+        </ConfirmationModalArea>
       </WorkspaceContainer>
     </div>
   );

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

@@ -3,11 +3,18 @@ import {
   Banner,
   BannerVariant,
   Body,
+  Button,
   css,
   Link,
   spacing,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
+import {
+  cancelSharding,
+  type RootState,
+  ShardingStatuses,
+} from '../../store/reducer';
 
 const nbsp = '\u00a0';
 
@@ -17,7 +24,15 @@ const containerStyles = css({
   gap: spacing[400],
 });
 
-export function ShardingState() {
+interface ShardingStateProps {
+  isCancellingSharding: boolean;
+  onCancelSharding: () => void;
+}
+
+export function ShardingState({
+  isCancellingSharding,
+  onCancelSharding,
+}: ShardingStateProps) {
   return (
     <div className={containerStyles}>
       <Banner variant={BannerVariant.Info}>
@@ -34,9 +49,27 @@ export function ShardingState() {
         hideExternalIcon
       >
         You can read more about Global Writes in our documentation.
+        <Button
+          onClick={onCancelSharding}
+          disabled={isCancellingSharding}
+          leftGlyph={
+            isCancellingSharding ? (
+              <SpinLoader title="Cancelling Request" />
+            ) : undefined
+          }
+        >
+          Cancel Request
+        </Button>
       </Link>
     </div>
   );
 }
 
-export default connect()(ShardingState);
+export default connect(
+  (state: RootState) => ({
+    isCancellingSharding: state.status === ShardingStatuses.CANCEL_SHARDING,
+  }),
+  {
+    onCancelSharding: cancelSharding,
+  }
+)(ShardingState);

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

@@ -1,6 +1,6 @@
 import type { Action, Reducer } from 'redux';
 import type { GlobalWritesThunkAction } from '.';
-import { openToast } from '@mongodb-js/compass-components';
+import { openToast, showConfirmation } from '@mongodb-js/compass-components';
 import type { ManagedNamespace } from '../services/atlas-global-writes-service';
 
 export function isAction<A extends Action>(
@@ -30,6 +30,10 @@ enum GlobalWritesActionTypes {
   SubmittingForShardingFinished = 'global-writes/SubmittingForShardingFinished',
   SubmittingForShardingErrored = 'global-writes/SubmittingForShardingErrored',
 
+  CancellingShardingStarted = 'global-writes/CancellingShardingStarted',
+  CancellingShardingFinished = 'global-writes/CancellingShardingFinished',
+  CancellingShardingErrored = 'global-writes/CancellingShardingErrored',
+
   UnmanagingNamespaceStarted = 'global-writes/UnmanagingNamespaceStarted',
   UnmanagingNamespaceFinished = 'global-writes/UnmanagingNamespaceFinished',
   UnmanagingNamespaceErrored = 'global-writes/UnmanagingNamespaceErrored',
@@ -68,6 +72,19 @@ type SubmittingForShardingErroredAction = {
   type: GlobalWritesActionTypes.SubmittingForShardingErrored;
 };
 
+type CancellingShardingStartedAction = {
+  type: GlobalWritesActionTypes.CancellingShardingStarted;
+};
+
+type CancellingShardingFinishedAction = {
+  type: GlobalWritesActionTypes.CancellingShardingFinished;
+  managedNamespace?: ManagedNamespace;
+};
+
+type CancellingShardingErroredAction = {
+  type: GlobalWritesActionTypes.CancellingShardingErrored;
+};
+
 type UnmanagingNamespaceStartedAction = {
   type: GlobalWritesActionTypes.UnmanagingNamespaceStarted;
 };
@@ -102,6 +119,12 @@ export enum ShardingStatuses {
    */
   SHARDING = 'SHARDING',
 
+  /**
+   * State when user cancels the sharding and
+   * we are waiting for server to accept the request.
+   */
+  CANCEL_SHARDING = 'CANCEL_SHARDING',
+
   /**
    * Sharding failed.
    */
@@ -434,6 +457,56 @@ export const createShardKey = (
   };
 };
 
+export const cancelSharding = ():
+  | GlobalWritesThunkAction<
+      Promise<void>,
+      | CancellingShardingStartedAction
+      | CancellingShardingFinishedAction
+      | CancellingShardingErroredAction
+    >
+  | undefined => {
+  return async (dispatch, getState, { atlasGlobalWritesService, logger }) => {
+    const confirmed = await showConfirmation({
+      title: 'Confirmation',
+      description: 'Are you sure you want to cancel the sharding request?',
+    });
+
+    if (!confirmed) return;
+
+    const { namespace } = getState();
+    dispatch({
+      type: GlobalWritesActionTypes.CancellingShardingStarted,
+    });
+
+    try {
+      await atlasGlobalWritesService.unmanageNamespace(namespace);
+      dispatch({
+        type: GlobalWritesActionTypes.CancellingShardingFinished,
+      });
+    } catch (error) {
+      logger.log.error(
+        logger.mongoLogId(1_001_000_331),
+        'AtlasFetchError',
+        'Error cancelling the sharding process',
+        {
+          error: (error as Error).message,
+        }
+      );
+      openToast('global-writes-cancel-sharding-error', {
+        title: `Failed to cancel the sharding process: ${
+          (error as Error).message
+        }`,
+        dismissible: true,
+        timeout: 5000,
+        variant: 'important',
+      });
+      dispatch({
+        type: GlobalWritesActionTypes.CancellingShardingErrored,
+      });
+    }
+  };
+};
+
 const setNamespaceBeingSharded = (
   managedNamespace?: ManagedNamespace
 ): GlobalWritesThunkAction<void, SubmittingForShardingFinishedAction> => {