fix(indexes): check for vector search support when showing edit templates COMPASS-8235 (#6196)

Author: Anemy

packages/compass-indexes/src/components/search-index-template-dropdown/index.spec.tsx

@@ -9,41 +9,68 @@ import userEvent from '@testing-library/user-event';
 
 import React from 'react';
 
+const knnVectorText = 'KNN Vector field mapping';
+
 function templateNamed(name: string) {
   return ATLAS_SEARCH_TEMPLATES.find((t) => t.name === name);
 }
 
 describe('Search Index Template Dropdown', function () {
-  let onTemplateSpy: SinonSpy;
-
-  beforeEach(function () {
-    onTemplateSpy = sinon.spy();
-
-    render(
-      <SearchIndexTemplateDropdown
-        tooltip="Tooltip"
-        isVectorSearchSupported
-        onTemplate={onTemplateSpy}
-      />
-    );
-  });
-
   afterEach(cleanup);
 
-  it('notifies upwards with onTemplate when a new template is choosen', async function () {
-    const dropDown = screen
-      .getByText('Dynamic field mappings')
-      .closest('button')!;
+  describe('when rendered', function () {
+    let onTemplateSpy: SinonSpy;
+
+    beforeEach(function () {
+      onTemplateSpy = sinon.spy();
+
+      render(
+        <SearchIndexTemplateDropdown
+          tooltip="Tooltip"
+          isVectorSearchSupported
+          onTemplate={onTemplateSpy}
+        />
+      );
+    });
 
-    userEvent.click(dropDown);
+    it('notifies upwards with onTemplate when a new template is chosen', async function () {
+      const dropDown = screen
+        .getByText('Dynamic field mappings')
+        .closest('button')!;
+
+      userEvent.click(dropDown);
+
+      const staticFieldMappingOption = await screen.findByText(
+        'Static field mappings'
+      );
+      userEvent.click(staticFieldMappingOption);
+
+      expect(onTemplateSpy).to.have.been.calledWith(
+        templateNamed('Static field mappings')
+      );
+    });
+
+    it('does not shows the knn vector search template', function () {
+      userEvent.click(screen.getByRole('button', { name: 'Template' }));
+      expect(screen.queryByRole('option', { name: knnVectorText })).to.not
+        .exist;
+    });
+  });
 
-    const staticFieldMappingOption = await screen.findByText(
-      'Static field mappings'
-    );
-    userEvent.click(staticFieldMappingOption);
+  describe('when rendered with vector search disabled', function () {
+    beforeEach(function () {
+      render(
+        <SearchIndexTemplateDropdown
+          tooltip="Tooltip"
+          isVectorSearchSupported={false}
+          onTemplate={() => {}}
+        />
+      );
+    });
 
-    expect(onTemplateSpy).to.have.been.calledWith(
-      templateNamed('Static field mappings')
-    );
+    it('shows the knn vector search template', function () {
+      userEvent.click(screen.getByRole('button', { name: 'Template' }));
+      expect(screen.getByRole('option', { name: knnVectorText })).to.be.visible;
+    });
   });
 });

packages/compass-indexes/src/components/search-index-template-dropdown/index.tsx

@@ -14,18 +14,18 @@ import {
 const containerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[1],
+  gap: spacing[100],
 });
 
 const dropdownLabelStyles = css({
   display: 'flex',
-  gap: spacing[1],
+  gap: spacing[100],
   alignItems: 'center',
 });
 
 type SearchIndexTemplateDropdownProps = {
   tooltip: string;
-  isVectorSearchSupported?: boolean;
+  isVectorSearchSupported: boolean;
   onTemplate: (template: SearchTemplate) => void;
 };
 

packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx

@@ -119,7 +119,7 @@ type BaseSearchIndexModalProps = {
   initialIndexType?: string;
   isModalOpen: boolean;
   isBusy: boolean;
-  isVectorSearchSupported?: boolean;
+  isVectorSearchSupported: boolean;
   error: string | undefined;
   onSubmit: (index: {
     name: string;

packages/compass-indexes/src/components/search-indexes-modals/update-search-index-modal.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { expect } from 'chai';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { UpdateSearchIndexModal } from './update-search-index-modal';
+
+const knnVectorText = 'KNN Vector field mapping';
+
+function renderUpdateSearchIndexModal(
+  props?: Partial<React.ComponentProps<typeof UpdateSearchIndexModal>>
+) {
+  return render(
+    <UpdateSearchIndexModal
+      namespace="test.test"
+      indexName="testIndex"
+      isVectorSearchSupported
+      indexDefinition="testDefinition"
+      isModalOpen={true}
+      isBusy={false}
+      onUpdateIndex={() => {}}
+      onCloseModal={() => {}}
+      error={'Invalid index definition.'}
+      {...props}
+    />
+  );
+}
+
+describe('Base Search Index Modal', function () {
+  afterEach(cleanup);
+
+  describe('when rendered', function () {
+    beforeEach(function () {
+      renderUpdateSearchIndexModal();
+    });
+
+    it('does not show the KNN vector field mapping template', function () {
+      userEvent.click(screen.getByRole('button', { name: 'Template' }));
+      expect(screen.queryByRole('option', { name: knnVectorText })).to.not
+        .exist;
+    });
+  });
+
+  describe('when rendered and isVectorSearchSupported is false', function () {
+    beforeEach(function () {
+      renderUpdateSearchIndexModal({
+        isVectorSearchSupported: false,
+      });
+    });
+
+    it('shows the KNN vector field mapping template', function () {
+      userEvent.click(screen.getByRole('button', { name: 'Template' }));
+      expect(screen.getByRole('option', { name: knnVectorText })).to.be.visible;
+    });
+  });
+});

packages/compass-indexes/src/components/search-indexes-modals/update-search-index-modal.tsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import type { RootState } from '../../modules';
 import type { Document } from 'mongodb';
 import { BaseSearchIndexModal } from './base-search-index-modal';
+import { isAtlasVectorSearchSupportedForServerVersion } from '../../utils/vector-search-indexes';
 
 type UpdateSearchIndexModalProps = {
   namespace: string;
@@ -12,6 +13,7 @@ type UpdateSearchIndexModalProps = {
   indexType?: string;
   isModalOpen: boolean;
   isBusy: boolean;
+  isVectorSearchSupported: boolean;
   error: string | undefined;
   onUpdateIndex: (index: {
     name: string;
@@ -30,13 +32,15 @@ export const UpdateSearchIndexModal: React.FunctionComponent<
   indexType,
   isModalOpen,
   isBusy,
+  isVectorSearchSupported,
   error,
   onUpdateIndex,
   onCloseModal,
 }) => {
   return (
     <BaseSearchIndexModal
       namespace={namespace}
+      isVectorSearchSupported={isVectorSearchSupported}
       mode={'update'}
       initialIndexName={indexName}
       initialIndexType={indexType}
@@ -51,6 +55,7 @@ export const UpdateSearchIndexModal: React.FunctionComponent<
 };
 
 const mapState = ({
+  serverVersion,
   namespace,
   searchIndexes: {
     indexes,
@@ -59,6 +64,8 @@ const mapState = ({
 }: RootState) => {
   const index = indexes.find((x) => x.name === indexName);
   return {
+    isVectorSearchSupported:
+      isAtlasVectorSearchSupportedForServerVersion(serverVersion),
     namespace,
     isModalOpen,
     isBusy,