feat: add search indexes table COMPASS-7163 [WIP] (#4831)

* initial search indexes table

* move SortDirection

* connect in the toolbar and tables

* fixup

* load indexes from the UI

* turns out isReadonlyView !== readOnly

* make typescript happier

* simpler sort

* some tests

* test that search indexes errors show up

* fix test

* e2e selectors

* leftover

* indexes tests for search indexes

* add tests for the actions

* fixup

* e2e selector fixes

---------

Co-authored-by: svc-devtoolsbot <79531021+svc-devtoolsbot@users.noreply.github.com>

Author: lerouxb

packages/compass-e2e-tests/helpers/selectors.ts

@@ -918,10 +918,10 @@ export const explainPlanSummaryStat = (
 // Indexes tab
 export const IndexList = '[data-testid="indexes-list"]';
 export const indexComponent = (name: string): string => {
-  return `[data-testid="index-row-${name}"]`;
+  return `[data-testid="indexes-row-${name}"]`;
 };
-export const IndexFieldName = '[data-testid="index-name-field"]';
-export const IndexFieldType = '[data-testid="index-type-field"]';
+export const IndexFieldName = '[data-testid="indexes-name-field"]';
+export const IndexFieldType = '[data-testid="indexes-type-field"]';
 export const IndexToggleOptions =
   '[data-testid="create-index-modal-toggle-options"]';
 export const indexToggleOption = (fieldName: string) => {

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

@@ -12,7 +12,7 @@ import {
   useDOMRect,
 } from '@mongodb-js/compass-components';
 
-type SortDirection = 'asc' | 'desc';
+import type { SortDirection } from '../../modules';
 
 // When row is hovered, we show the delete button
 const rowStyles = css({
@@ -142,7 +142,7 @@ export function IndexesTable<Column extends string>({
     const _columns = sortColumns.map((name) => {
       return (
         <TableHeader
-          data-testid={`index-header-${name}`}
+          data-testid={`${dataTestId}-header-${name}`}
           label={name}
           key={name}
           className={tableHeaderStyles}
@@ -177,14 +177,14 @@ export function IndexesTable<Column extends string>({
             return (
               <Row
                 key={info.key}
-                data-testid={info['data-testid']}
+                data-testid={`${dataTestId}-${info['data-testid']}`}
                 className={rowStyles}
               >
                 {info.fields.map((field) => {
                   return (
                     <Cell
                       key={field.key ?? `${info.key}-${index}`}
-                      data-testid={field['data-testid']}
+                      data-testid={`${dataTestId}-${field['data-testid']}`}
                       className={cellStyles}
                     >
                       {field.children}
@@ -194,7 +194,7 @@ export function IndexesTable<Column extends string>({
                 {/* Index actions column is conditional */}
                 {canModifyIndex && (
                   <Cell
-                    data-testid="index-actions-field"
+                    data-testid={`${dataTestId}-actions-field`}
                     className={cellStyles}
                   >
                     {info.actions && (

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

@@ -1,4 +1,7 @@
 import React, { useCallback } from 'react';
+import { connect } from 'react-redux';
+import type AppRegistry from 'hadron-app-registry';
+import { withPreferences } from 'compass-preferences-model';
 import {
   Button,
   ErrorSummary,
@@ -15,9 +18,11 @@ import {
   SegmentedControl,
   SegmentedControlOption,
 } from '@mongodb-js/compass-components';
-import type AppRegistry from 'hadron-app-registry';
 import { usePreference } from 'compass-preferences-model';
 
+import type { RootState } from '../../modules';
+import { SearchIndexesStatuses } from '../../modules/search-indexes';
+
 const containerStyles = css({
   margin: `${spacing[3]}px 0`,
 });
@@ -45,16 +50,21 @@ const createIndexButtonContainerStyles = css({
 export type IndexView = 'regular-indexes' | 'search-indexes';
 
 type IndexesToolbarProps = {
+  // passed props:
   errorMessage: string | null;
+  hasTooManyIndexes: boolean;
+  isRefreshing: boolean;
+  onRefreshIndexes: () => void;
+  onChangeIndexView: (newView: IndexView) => void;
+
+  // connected:
   isReadonlyView: boolean;
   isWritable: boolean;
-  hasTooManyIndexes: boolean;
   localAppRegistry: AppRegistry;
-  isRefreshing: boolean;
   writeStateDescription?: string;
   isAtlasSearchSupported: boolean;
-  onRefreshIndexes: () => void;
-  onChangeIndexView: (newView: IndexView) => void;
+
+  // via withPreferences:
   readOnly?: boolean;
 };
 
@@ -101,7 +111,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   );
 
   return (
-    <div className={containerStyles}>
+    <div className={containerStyles} data-testid="indexes-toolbar-container">
       {!isReadonlyView && (
         <div data-testid="indexes-toolbar">
           <div className={toolbarButtonsContainer}>
@@ -266,3 +276,27 @@ export const CreateIndexButton: React.FunctionComponent<
     </Button>
   );
 };
+
+const mapState = ({
+  isWritable,
+  isReadonlyView,
+  description,
+  serverVersion,
+  appRegistry,
+  searchIndexes,
+}: RootState) => ({
+  isWritable,
+  isReadonlyView,
+  writeStateDescription: description,
+  localAppRegistry: (appRegistry as any).localAppRegistry,
+  serverVersion,
+  isAtlasSearchSupported:
+    searchIndexes.status !== SearchIndexesStatuses.NOT_AVAILABLE,
+});
+
+const mapDispatch = {};
+
+export default connect(
+  mapState,
+  mapDispatch
+)(withPreferences(IndexesToolbar, ['readOnly'], React));