chore(indexes): remove in progress only when a matching index shows up in real indexes list; cleanup rolling on a timeout (#6331)

* chore(indexes): remove in progress only when a matching index shows up in real indexes list; cleanup rolling on a timeout

* chore(indexes): add tests; cleanup polling on plugin deactivate

Author: gribnoysup

packages/compass-indexes/src/index.spec.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import Sinon from 'sinon';
+import {
+  CompassIndexesPlugin as CompassIndexesSubtab,
+  CompassIndexesHadronPlugin,
+} from './index';
+import {
+  createDefaultConnectionInfo,
+  createPluginTestHelpers,
+  screen,
+  userEvent,
+  waitFor,
+  within,
+} from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import {
+  indexCreationStarted,
+  prepareInProgressIndex,
+  rollingIndexTimeoutCheck,
+} from './modules/regular-indexes';
+
+describe('CompassIndexesPlugin', function () {
+  const sandbox = Sinon.createSandbox();
+
+  const dataService = {
+    indexes: () => [],
+    createIndex: () => ({}),
+  };
+
+  const atlasService = {
+    automationAgentRequest: () => ({}),
+    automationAgentAwait: () => ({ response: [] }),
+    authenticatedFetch: () => undefined,
+    cloudEndpoint: () => undefined,
+  };
+
+  const renderHelpers = createPluginTestHelpers(
+    CompassIndexesHadronPlugin.withMockServices({
+      dataService,
+      atlasService,
+      instance: {
+        on: () => undefined,
+        removeListener: () => undefined,
+        isWritable: true,
+      },
+      collection: {
+        on: () => undefined,
+        removeListener: () => undefined,
+        toJSON: () => ({}),
+      },
+    } as any)
+  );
+
+  function render() {
+    return renderHelpers.renderWithActiveConnection(
+      <CompassIndexesSubtab.content></CompassIndexesSubtab.content>,
+      {
+        ...createDefaultConnectionInfo(),
+        atlasMetadata: {
+          instanceSize: 'VERY BIG',
+          metricsType: 'replicaSet',
+        } as any,
+      }
+    );
+  }
+
+  afterEach(function () {
+    sandbox.reset();
+  });
+
+  describe('rolling indexes', function () {
+    it('should create a rolling index and show it in the table', async function () {
+      const result = await render();
+
+      await waitFor(() => {
+        expect(result.plugin.store.getState().regularIndexes).to.have.property(
+          'status',
+          'READY'
+        );
+      });
+
+      sandbox.stub(atlasService, 'automationAgentAwait').resolves({
+        response: [
+          {
+            status: 'rolling build',
+            indexName: 'field_a_1',
+            indexProperties: {},
+            indexType: { label: 'regular' },
+            keys: [{ name: 'field_a', value: '1' }],
+          },
+        ],
+      });
+
+      /** Create rolling index */
+
+      userEvent.click(screen.getByRole('button', { name: 'Create Index' }));
+
+      userEvent.type(screen.getByLabelText('Index fields'), 'field_a');
+      userEvent.click(screen.getByRole('option', { name: 'Field: "field_a"' }));
+
+      userEvent.click(screen.getByText('Select a type'));
+      userEvent.click(screen.getByText('1 (asc)'));
+
+      userEvent.click(screen.getByTestId('create-index-modal-toggle-options'));
+
+      userEvent.click(
+        screen.getByRole('checkbox', { name: 'Build in rolling process' }),
+        undefined,
+        { skipPointerEventsCheck: true }
+      );
+
+      userEvent.click(
+        within(screen.getByTestId('create-index-modal')).getByRole('button', {
+          name: 'Create Index',
+        })
+      );
+
+      const inProgressIndex =
+        result.plugin.store.getState().regularIndexes.inProgressIndexes[0];
+
+      expect(inProgressIndex).to.exist;
+
+      /** Wait for the row to appear with in-progress bagde first */
+
+      expect(
+        within(screen.getByTestId('indexes-row-field_a_1')).getByText(
+          'In Progress'
+        )
+      ).to.exist;
+
+      /** Now wait for the rolling index to show up */
+
+      await waitFor(() => {
+        expect(
+          within(screen.getByTestId('indexes-row-field_a_1')).getByText(
+            'Building'
+          )
+        ).to.exist;
+      });
+
+      /** At some point rolling index timeout check fires, but nothing changes */
+
+      result.plugin.store.dispatch(
+        rollingIndexTimeoutCheck(inProgressIndex.id)
+      );
+
+      expect(
+        within(screen.getByTestId('indexes-row-field_a_1')).getByText(
+          'Building'
+        )
+      ).to.exist;
+    });
+  });
+
+  it('should remove in progress rolling index on a timeout', async function () {
+    const result = await render();
+
+    await waitFor(() => {
+      expect(result.plugin.store.getState().regularIndexes).to.have.property(
+        'status',
+        'READY'
+      );
+    });
+
+    /** This time let's just do all the setup with actions directly, we tested UI above */
+
+    const inProgressIndex = prepareInProgressIndex('test', {
+      name: 'test_index',
+      spec: {},
+    });
+
+    result.plugin.store.dispatch(indexCreationStarted(inProgressIndex));
+
+    expect(screen.getByTestId('indexes-row-test_index')).to.exist;
+
+    /** Timeout check "fired" before index was returned from the API, index is removed */
+
+    result.plugin.store.dispatch(rollingIndexTimeoutCheck('test'));
+
+    expect(() => screen.getByTestId('indexes-row-test_index')).to.throw();
+  });
+});

packages/compass-indexes/src/index.ts

@@ -19,7 +19,7 @@ import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
 import { IndexesTabTitle } from './plugin-title';
 import { atlasServiceLocator } from '@mongodb-js/atlas-service/provider';
 
-const CompassIndexesHadronPlugin = registerHadronPlugin(
+export const CompassIndexesHadronPlugin = registerHadronPlugin(
   {
     name: 'CompassIndexes',
     component: function IndexesProvider({ children }) {

packages/compass-indexes/src/modules/index.ts

@@ -72,6 +72,10 @@ export type IndexesExtraArgs = {
   connectionInfoRef: ConnectionInfoRef;
   collection: Collection;
   rollingIndexesService: RollingIndexesService;
+  pollingIntervalRef: {
+    regularIndexes: ReturnType<typeof setInterval> | null;
+    searchIndexes: ReturnType<typeof setInterval> | null;
+  };
 };
 export type IndexesThunkDispatch<A extends Action = AnyAction> = ThunkDispatch<
   RootState,

packages/compass-indexes/src/modules/regular-indexes.spec.ts

@@ -467,7 +467,6 @@ describe('regular-indexes module', function () {
 
     it('starts and stops the polling', async function () {
       const pollInterval = 5000;
-      const tabId = 'my-tab';
 
       const collection = createMockCollection();
 
@@ -498,7 +497,7 @@ describe('regular-indexes module', function () {
       // initial load
       expect(indexesStub.callCount).to.equal(1);
 
-      store.dispatch(startPollingRegularIndexes(tabId));
+      store.dispatch(startPollingRegularIndexes());
 
       // poll
       clock.tick(pollInterval);
@@ -513,15 +512,15 @@ describe('regular-indexes module', function () {
       await waitForStatus('READY');
 
       // stop
-      store.dispatch(stopPollingRegularIndexes(tabId));
+      store.dispatch(stopPollingRegularIndexes());
 
       // no more polling
       clock.tick(pollInterval);
       expect(indexesStub.callCount).to.equal(3);
       await waitForStatus('READY');
 
       // open again
-      store.dispatch(startPollingRegularIndexes(tabId));
+      store.dispatch(startPollingRegularIndexes());
 
       // won't execute immediately
       expect(indexesStub.callCount).to.equal(3);
@@ -540,7 +539,7 @@ describe('regular-indexes module', function () {
       await waitForStatus('READY');
 
       // clean up
-      store.dispatch(stopPollingRegularIndexes(tabId));
+      store.dispatch(stopPollingRegularIndexes());
 
       expect(collection.fetch.callCount).to.equal(0);
     });