chore(compas-indexes): store real indexes and in-progress indexes as separate lists

packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx

@@ -189,7 +189,9 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
           warnings={['Readonly views may not contain indexes.']}
         />
       ) : (
-        !!errorMessage && <ErrorSummary errors={[errorMessage]} />
+        !!errorMessage && (
+          <ErrorSummary data-testid="indexes-error" errors={[errorMessage]} />
+        )
       )}
     </div>
   );

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

@@ -95,7 +95,9 @@ describe('Indexes Component', function () {
       },
     });
     expect(screen.getByTestId('indexes-toolbar')).to.exist;
-    // TODO: actually check for the error
+    expect(screen.getByTestId('indexes-error').textContent).to.equal(
+      'Some random error'
+    );
   });
 
   it('renders indexes toolbar when there is a search indexes error', async function () {
@@ -200,28 +202,20 @@ describe('Indexes Component', function () {
               ],
               usageCount: 20,
             },
+          ],
+          inProgressIndexes: [
             {
-              key: {},
-              ns: 'db.coll',
-              cardinality: 'single',
+              id: 'test-inprogress-index',
               name: 'item',
-              size: 0,
-              relativeSize: 0,
-              type: 'hashed',
-              extra: {
-                status: 'inprogress',
-              },
-              properties: [],
               fields: [
                 {
                   field: 'item',
                   value: 1,
                 },
               ],
-              usageCount: 0,
+              status: 'inprogress',
             },
           ],
-          inProgressIndexes: [],
           error: undefined,
           status: 'READY',
         },
@@ -263,29 +257,21 @@ describe('Indexes Component', function () {
               ],
               usageCount: 20,
             },
+          ],
+          inProgressIndexes: [
             {
-              key: {},
-              ns: 'db.coll',
-              cardinality: 'single',
+              id: 'test-inprogress-index',
               name: 'item',
-              size: 0,
-              relativeSize: 0,
-              type: 'hashed',
-              extra: {
-                status: 'failed',
-                regularError: 'regularError message',
-              },
-              properties: [],
               fields: [
                 {
                   field: 'item',
                   value: 1,
                 },
               ],
-              usageCount: 0,
+              status: 'failed',
+              error: 'Error message',
             },
           ],
-          inProgressIndexes: [],
           error: undefined,
           status: 'READY',
         },

packages/compass-indexes/src/components/regular-indexes-table/in-progress-index-actions.spec.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  cleanup,
+  render,
+  screen,
+  userEvent,
+} from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import type { SinonSpy } from 'sinon';
+
+import InProgressIndexActions from './in-progress-index-actions';
+
+describe('IndexActions Component', function () {
+  let onDeleteSpy: SinonSpy;
+
+  before(cleanup);
+  afterEach(cleanup);
+  beforeEach(function () {
+    onDeleteSpy = spy();
+  });
+
+  it('does not render the delete button for an in progress index that is still in progress', function () {
+    render(
+      <InProgressIndexActions
+        index={{
+          name: 'artist_id_index',
+          status: 'inprogress',
+        }}
+        onDeleteFailedIndexClick={onDeleteSpy}
+      />
+    );
+
+    const button = screen.queryByTestId('index-actions-delete-action');
+    expect(button).to.not.exist;
+  });
+
+  it('renders delete button for an in progress index that has failed', function () {
+    render(
+      <InProgressIndexActions
+        index={{
+          name: 'artist_id_index',
+          status: 'failed',
+        }}
+        onDeleteFailedIndexClick={onDeleteSpy}
+      />
+    );
+
+    const button = screen.getByTestId('index-actions-delete-action');
+    expect(button).to.exist;
+    expect(button.getAttribute('aria-label')).to.equal(
+      'Drop Index artist_id_index'
+    );
+    expect(onDeleteSpy.callCount).to.equal(0);
+    userEvent.click(button);
+    expect(onDeleteSpy.callCount).to.equal(1);
+  });
+});

packages/compass-indexes/src/components/regular-indexes-table/in-progress-index-actions.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback, useMemo } from 'react';
+import type { GroupedItemAction } from '@mongodb-js/compass-components';
+import { ItemActionGroup } from '@mongodb-js/compass-components';
+import type { InProgressIndex } from '../../modules/regular-indexes';
+
+type Index = {
+  name: string;
+  status: InProgressIndex['status'];
+};
+
+type IndexActionsProps = {
+  index: Index;
+  onDeleteFailedIndexClick: (name: string) => void;
+};
+
+type IndexAction = 'delete';
+
+const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
+  index,
+  onDeleteFailedIndexClick,
+}) => {
+  const indexActions: GroupedItemAction<IndexAction>[] = useMemo(() => {
+    const actions: GroupedItemAction<IndexAction>[] = [];
+
+    // you can only drop regular indexes or failed inprogress indexes
+    if (index.status === 'failed') {
+      actions.push({
+        action: 'delete',
+        label: `Drop Index ${index.name}`,
+        icon: 'Trash',
+      });
+    }
+
+    return actions;
+  }, [index]);
+
+  const onAction = useCallback(
+    (action: IndexAction) => {
+      if (action === 'delete') {
+        onDeleteFailedIndexClick(index.name);
+      }
+    },
+    [onDeleteFailedIndexClick, index]
+  );
+
+  return (
+    <ItemActionGroup<IndexAction>
+      data-testid="index-actions"
+      actions={indexActions}
+      onAction={onAction}
+    ></ItemActionGroup>
+  );
+};
+
+export default IndexActions;

packages/compass-indexes/src/components/regular-indexes-table/property-field.spec.tsx

@@ -9,6 +9,7 @@ import { expect } from 'chai';
 
 import PropertyField, { getPropertyTooltip } from './property-field';
 import getIndexHelpLink from '../../utils/index-link-helper';
+import type { HELP_URL_KEY } from '../../utils/index-link-helper';
 
 describe('PropertyField', function () {
   before(cleanup);
@@ -26,7 +27,8 @@ describe('PropertyField', function () {
         />
       );
 
-      ['ttl', 'partial'].forEach((type) => {
+      const helpFields = ['ttl', 'partial'];
+      for (const type of helpFields) {
         const badge = screen.getByTestId(`${type}-badge`);
         expect(badge).to.exist;
         expect(badge.textContent).to.equal(type);
@@ -35,9 +37,9 @@ describe('PropertyField', function () {
         });
         expect(infoIcon).to.exist;
         expect(infoIcon.closest('a')?.href).to.equal(
-          getIndexHelpLink(type.toUpperCase() as any)
+          getIndexHelpLink(type.toUpperCase() as HELP_URL_KEY)
         );
-      });
+      }
     });
 
     it('does not render cardinality badge when its single', function () {
@@ -69,7 +71,7 @@ describe('PropertyField', function () {
       render(
         <PropertyField
           cardinality={'single'}
-          extra={{ hidden: 'true' }}
+          extra={{ hidden: true }}
           properties={[]}
         />
       );