feat(compass-global-writes): sharding in progress state COMPASS-8277 (#6347)

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.CANCELLING_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.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

@@ -3,11 +3,17 @@ import {
   Banner,
   BannerVariant,
   Body,
+  Button,
   css,
   Link,
   spacing,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
+import {
+  cancelSharding,
+  type RootState,
+  ShardingStatuses,
+} from '../../store/reducer';
 
 const nbsp = '\u00a0';
 
@@ -17,12 +23,33 @@ const containerStyles = css({
   gap: spacing[400],
 });
 
-export function ShardingState() {
+const btnStyles = css({
+  float: 'right',
+  height: spacing[600],
+});
+
+interface ShardingStateProps {
+  isCancellingSharding: boolean;
+  onCancelSharding: () => void;
+}
+
+export function ShardingState({
+  isCancellingSharding,
+  onCancelSharding,
+}: ShardingStateProps) {
   return (
     <div className={containerStyles}>
       <Banner variant={BannerVariant.Info}>
         <strong>Sharding your collection …</strong>
         {nbsp}this should not take too long.
+        <Button
+          className={btnStyles}
+          data-testid="cancel-sharding-btn"
+          onClick={onCancelSharding}
+          isLoading={isCancellingSharding}
+        >
+          Cancel Request
+        </Button>
       </Banner>
       <Body>
         Once your collection is sharded, this tab will show instructions on
@@ -39,4 +66,11 @@ export function ShardingState() {
   );
 }
 
-export default connect()(ShardingState);
+export default connect(
+  (state: RootState) => ({
+    isCancellingSharding: state.status === ShardingStatuses.CANCELLING_SHARDING,
+  }),
+  {
+    onCancelSharding: cancelSharding,
+  }
+)(ShardingState);

packages/compass-global-writes/src/plugin-title.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { expect } from 'chai';
+import { PluginTitle } from './plugin-title';
+import { render, screen } from '@mongodb-js/testing-library-compass';
+
+describe('PluginTitle', function () {
+  it('Renders a warning', function () {
+    render(<PluginTitle showWarning={true} />);
+    expect(screen.getByLabelText('warning')).to.be.visible;
+  });
+
+  it('Does not render a warning', function () {
+    render(<PluginTitle showWarning={false} />);
+    expect(screen.queryByLabelText('warning')).not.to.exist;
+  });
+});

packages/compass-global-writes/src/plugin-title.tsx

@@ -30,7 +30,7 @@ const iconStylesDark = css({
   color: palette.yellow.base,
 });
 
-const PluginTitle = ({ showWarning }: { showWarning: boolean }) => {
+export const PluginTitle = ({ showWarning }: { showWarning: boolean }) => {
   const darkMode = useDarkMode();
   return (
     <div data-testid="global-writes-tab-title" className={containerStyles}>
@@ -50,6 +50,7 @@ const PluginTitle = ({ showWarning }: { showWarning: boolean }) => {
             >
               <Icon
                 glyph="ImportantWithCircle"
+                aria-label="warning"
                 className={cx(
                   warningIconStyles,
                   iconStylesLight,

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;