feat(compass-indexes): Add view support to indexes tab COMPASS-9667

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

@@ -113,27 +113,49 @@ describe('IndexesToolbar Component', function () {
         });
       });
     });
-
-    it('should not render a warning', function () {
-      expect(screen.queryByText('Readonly views may not contain indexes')).to
-        .not.exist;
-    });
   });
 
   describe('when it is a readonly view', function () {
-    beforeEach(function () {
-      renderIndexesToolbar({
-        isReadonlyView: true,
+    describe('and server version is < 8.1+', function () {
+      beforeEach(function () {
+        renderIndexesToolbar({
+          isReadonlyView: true,
+          indexView: 'search-indexes',
+        });
       });
-    });
 
-    it('should not render the create index button', function () {
-      expect(screen.queryByText('Create Index')).to.not.exist;
+      it('should not render the create index button', function () {
+        expect(screen.queryByText('Create Index')).to.not.exist;
+      });
+
+      it('should not render the create search index button', function () {
+        expect(screen.queryByText('Create Search Index')).to.not.exist;
+      });
+
+      it('should not render the refresh button', function () {
+        expect(screen.queryByText('Refresh')).to.not.exist;
+      });
     });
+    describe('and server version is > 8.1+', function () {
+      beforeEach(function () {
+        renderIndexesToolbar({
+          isReadonlyView: true,
+          serverVersion: '8.1.0',
+          indexView: 'search-indexes',
+        });
+      });
+
+      it('should not render the create index button', function () {
+        expect(screen.queryByText('Create Index')).to.not.exist;
+      });
 
-    it('should render a warning', function () {
-      expect(screen.getByText('Readonly views may not contain indexes.')).to.be
-        .visible;
+      it('should render the create search index button <8.1', function () {
+        expect(screen.getByText('Create Search Index')).to.be.visible;
+      });
+
+      it('should not render the refresh button', function () {
+        expect(screen.queryByText('Refresh')).to.be.visible;
+      });
     });
   });
 
@@ -332,5 +354,27 @@ describe('IndexesToolbar Component', function () {
       expect(segmentControl.closest('button')).to.have.attr('disabled');
       expect(onChangeViewCallback).to.not.have.been.calledOnce;
     });
+
+    describe('and readonly view >8.1', function () {
+      beforeEach(function () {
+        renderIndexesToolbar({
+          isReadonlyView: true,
+          onIndexViewChanged: onChangeViewCallback,
+          serverVersion: '8.1.0',
+        });
+      });
+
+      it('it renders tabs with Indexes disabled and automatically selects Search Indexes', function () {
+        const indexesTab = screen.getByText('Indexes');
+        expect(indexesTab).to.be.visible;
+        expect(indexesTab.closest('button')).to.have.attr('disabled');
+
+        expect(screen.getByText('Search Indexes')).to.be.visible;
+        expect(onChangeViewCallback).to.have.been.calledOnce;
+        expect(onChangeViewCallback.firstCall.args[0]).to.equal(
+          'search-indexes'
+        );
+      });
+    });
   });
 });

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

@@ -1,24 +1,23 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
 import {
-  withPreferences,
   usePreference,
+  withPreferences,
 } from 'compass-preferences-model/provider';
 import {
   Button,
-  ErrorSummary,
-  Tooltip,
-  WarningSummary,
-  Link,
   css,
-  spacing,
+  DropdownMenuButton,
+  ErrorSummary,
   Icon,
-  SpinLoader,
-  SignalPopover,
+  Link,
   PerformanceSignals,
-  DropdownMenuButton,
   SegmentedControl,
   SegmentedControlOption,
+  SignalPopover,
+  spacing,
+  SpinLoader,
+  Tooltip,
 } from '@mongodb-js/compass-components';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import semver from 'semver';
@@ -107,9 +106,15 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   readOnly, // preferences readOnly.
 }) => {
   const isSearchManagementActive = usePreference('enableAtlasSearchIndexes');
+  const mongoDBMajorVersion = parseFloat(
+    serverVersion.split('.').slice(0, 2).join('.')
+  );
   const { atlasMetadata } = useConnectionInfo();
   const showInsights = usePreference('showInsights') && !errorMessage;
-  const showCreateIndexButton = !isReadonlyView && !readOnly && !errorMessage;
+  const showCreateIndexButton =
+    (!isReadonlyView || mongoDBMajorVersion > 8.0) &&
+    !readOnly &&
+    !errorMessage;
   const refreshButtonIcon = isRefreshing ? (
     <div className={spinnerStyles}>
       <SpinLoader title="Refreshing Indexes" />
@@ -118,12 +123,19 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
     <Icon glyph="Refresh" title="Refresh Indexes" />
   );
 
+  useEffect(() => {
+    // If the view is readonly, set the default tab to 'search-indexes'
+    if (isReadonlyView && indexView !== 'search-indexes') {
+      onIndexViewChanged('search-indexes'); // Update redux state
+    }
+  }, [indexView, isReadonlyView, onIndexViewChanged]);
+
   return (
     <div
       className={indexesToolbarContainerStyles}
       data-testid="indexes-toolbar-container"
     >
-      {!isReadonlyView && (
+      {(!isReadonlyView || mongoDBMajorVersion > 8.0) && (
         <div data-testid="indexes-toolbar">
           <div className={toolbarButtonsContainer}>
             {showCreateIndexButton && (
@@ -139,7 +151,9 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
                       isWritable={isWritable}
                       onCreateRegularIndexClick={onCreateRegularIndexClick}
                       onCreateSearchIndexClick={onCreateSearchIndexClick}
-                    ></CreateIndexButton>
+                      isReadonlyView={isReadonlyView}
+                      indexView={indexView}
+                    />
                   </div>
                 }
               >
@@ -173,6 +187,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
                 signals={PerformanceSignals.get('too-many-indexes')}
               />
             )}
+
             {isSearchManagementActive && (
               <SegmentedControl
                 size="xsmall"
@@ -182,13 +197,34 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
                 value={indexView}
                 data-testid="indexes-segment-controls"
               >
-                <SegmentedControlOption
-                  data-testid="regular-indexes-tab"
-                  value="regular-indexes"
-                >
-                  Indexes
-                </SegmentedControlOption>
-                {!isSearchIndexesSupported && (
+                {isReadonlyView && (
+                  <Tooltip
+                    align="top"
+                    justify="end"
+                    enabled={true}
+                    renderMode="portal"
+                    trigger={
+                      <SegmentedControlOption
+                        data-testid="regular-indexes-tab"
+                        value="regular-indexes"
+                        disabled={isReadonlyView}
+                      >
+                        Indexes
+                      </SegmentedControlOption>
+                    }
+                  >
+                    Readonly views may not contain standard indexes.
+                  </Tooltip>
+                )}
+                {!isReadonlyView && (
+                  <SegmentedControlOption
+                    data-testid="regular-indexes-tab"
+                    value="regular-indexes"
+                  >
+                    Indexes
+                  </SegmentedControlOption>
+                )}
+                {!isSearchIndexesSupported && !isReadonlyView && (
                   <Tooltip
                     align="top"
                     justify="end"
@@ -227,7 +263,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
                     )}
                   </Tooltip>
                 )}
-                {isSearchIndexesSupported && (
+                {(isSearchIndexesSupported || isReadonlyView) && (
                   <SegmentedControlOption
                     data-testid="search-indexes-tab"
                     value="search-indexes"
@@ -240,14 +276,8 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
           </div>
         </div>
       )}
-      {isReadonlyView ? (
-        <WarningSummary
-          warnings={['Readonly views may not contain indexes.']}
-        />
-      ) : (
-        !!errorMessage && (
-          <ErrorSummary data-testid="indexes-error" errors={[errorMessage]} />
-        )
+      {!!errorMessage && (
+        <ErrorSummary data-testid="indexes-error" errors={[errorMessage]} />
       )}
     </div>
   );
@@ -259,6 +289,8 @@ type CreateIndexButtonProps = {
   isWritable: boolean;
   onCreateRegularIndexClick: () => void;
   onCreateSearchIndexClick: () => void;
+  isReadonlyView: boolean;
+  indexView: IndexView;
 };
 
 type CreateIndexActions = 'createRegularIndex' | 'createSearchIndex';
@@ -271,6 +303,8 @@ export const CreateIndexButton: React.FunctionComponent<
   isWritable,
   onCreateRegularIndexClick,
   onCreateSearchIndexClick,
+  isReadonlyView,
+  indexView,
 }) => {
   const onActionDispatch = useCallback(
     (action: CreateIndexActions) => {
@@ -284,7 +318,23 @@ export const CreateIndexButton: React.FunctionComponent<
     [onCreateRegularIndexClick, onCreateSearchIndexClick]
   );
 
-  if (isSearchIndexesSupported && isSearchManagementActive) {
+  if (isReadonlyView && isSearchManagementActive) {
+    if (indexView === 'search-indexes') {
+      return (
+        <Button
+          disabled={!isWritable}
+          onClick={onCreateSearchIndexClick}
+          variant="primary"
+          size="small"
+        >
+          Create Search Index
+        </Button>
+      );
+    }
+
+    return null;
+  }
+  if (!isReadonlyView && isSearchIndexesSupported && isSearchManagementActive) {
     return (
       <DropdownMenuButton
         data-testid="multiple-index-types-creation-dropdown"

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

@@ -45,20 +45,8 @@ const renderIndexes = async (
 
   if (props) {
     const state = store.getState();
-
-    const allProps: Partial<RootState> = {
-      indexView: props.indexView ?? 'regular-indexes',
-      regularIndexes: {
-        ...state.regularIndexes,
-        ...props.regularIndexes,
-      },
-      searchIndexes: {
-        ...state.searchIndexes,
-        ...props.searchIndexes,
-      },
-    };
-
-    Object.assign(store.getState(), allProps);
+    const newState = { ...state, ...props };
+    Object.assign(store.getState(), newState);
   }
 
   render(
@@ -332,5 +320,69 @@ describe('Indexes Component', function () {
 
       expect(getSearchIndexesStub.callCount).to.equal(2);
     });
+
+    it('renders search indexes list if isReadonlyView >8.0 and has indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves(searchIndexes);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '8.1.0',
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('search-indexes-list')).to.exist;
+      });
+    });
+
+    it('renders correct empty state if isReadonlyView >8.0 and has no indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves([]);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '8.1.0',
+      });
+
+      expect(screen.getByText('No search indexes yet')).to.be.visible;
+      expect(screen.getByText('Create Atlas Search Index')).to.be.visible;
+    });
+
+    it('renders correct empty state if isReadonlyView 8.0 and has no indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves([]);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '8.0.0',
+      });
+
+      expect(screen.queryByTestId('upgrade-cluster-banner-8.0')).to.exist;
+      expect(screen.queryByText('No standard indexes')).to.exist;
+      expect(screen.queryByText('Create Atlas Search Index')).to.not.exist;
+    });
+    it('renders correct empty state if isReadonlyView <8.0 and has no indexes', async function () {
+      const getSearchIndexesStub = sinon.stub().resolves([]);
+      const dataProvider = {
+        getSearchIndexes: getSearchIndexesStub,
+      };
+      await renderIndexes(undefined, dataProvider, {
+        indexView: 'search-indexes',
+        isReadonlyView: true,
+        serverVersion: '7.0.0',
+      });
+
+      expect(
+        screen.queryByTestId('upgrade-cluster-banner-less-than-8.0')
+      ).to.exist;
+      expect(screen.queryByText('No standard indexes')).to.exist;
+      expect(screen.queryByText('Create Atlas Search Index')).to.not.exist;
+    });
   });
 });