+);
+
+type SearchIndexTemplateDropdownProps = {
+ tooltip: string;
+ onTemplate: (template: SearchTemplate) => void;
+};
+
+export const SearchIndexTemplateDropdown: React.FunctionComponent<
+ SearchIndexTemplateDropdownProps
+> = ({ tooltip, onTemplate }) => {
+ const [templateValue, setTemplateValue] = useState('0');
+
+ const onChooseTemplate = useCallback(
+ (value: string) => {
+ setTemplateValue(value);
+ onTemplate(ATLAS_SEARCH_TEMPLATES[+value]);
+ },
+ [onTemplate]
+ );
+
+ return (
+
+ }
+ >
+ {ATLAS_SEARCH_TEMPLATES.map((template, idx) => (
+
+ ))}
+
+ );
+};
diff --git a/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.spec.tsx b/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.spec.tsx
index 2d1a24f7614..7e6e4569cfe 100644
--- a/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.spec.tsx
+++ b/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.spec.tsx
@@ -1,14 +1,25 @@
+import { ATLAS_SEARCH_TEMPLATES } from '@mongodb-js/mongodb-constants';
import { expect } from 'chai';
import { BaseSearchIndexModal } from './base-search-index-modal';
import sinon from 'sinon';
import type { SinonSpy } from 'sinon';
-import { render, screen, cleanup } from '@testing-library/react';
+import { render, screen, cleanup, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { getCodemirrorEditorValue } from '@mongodb-js/compass-editor';
+function normalizedTemplateNamed(name: string) {
+ const snippet =
+ ATLAS_SEARCH_TEMPLATES.find((t) => t.name === name)?.snippet || '';
+ // code mirror 'changes' the template placeholders, so let's do the same
+ // this regexp removes `tab` markers to their default value, for example:
+ // ${1:default} => default
+ //
+ return snippet.replace(/\${\d+:([^}]+)}/gm, '$1');
+}
+
describe('Create Search Index Modal', function () {
let onSubmitSpy: SinonSpy;
let onCloseSpy: SinonSpy;
@@ -88,4 +99,27 @@ describe('Create Search Index Modal', function () {
expect(onSubmitSpy).to.have.been.calledOnceWithExactly('default', {});
});
});
+
+ describe('templates', function () {
+ it('replaces the contents of the index editor when a template is selected', 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);
+
+ await waitFor(() => {
+ const indexDef = getCodemirrorEditorValue('definition-of-search-index');
+
+ expect(indexDef).to.equal(
+ normalizedTemplateNamed('Static field mappings')
+ );
+ });
+ });
+ });
});
diff --git a/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx b/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx
index ef90a7ed0a9..f583a605acd 100644
--- a/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx
+++ b/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
Modal,
ModalFooter,
@@ -16,11 +16,15 @@ import {
ErrorSummary,
Body,
Banner,
+ rafraf,
} from '@mongodb-js/compass-components';
import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
+import type { EditorRef } from '@mongodb-js/compass-editor';
import _parseShellBSON, { ParseMode } from 'ejson-shell-parser';
import type { Document } from 'mongodb';
import { useTrackOnChange } from '@mongodb-js/compass-logging';
+import { SearchIndexTemplateDropdown } from '../search-index-template-dropdown';
+import type { SearchTemplate } from '@mongodb-js/mongodb-constants';
// Copied from packages/compass-aggregations/src/modules/pipeline-builder/pipeline-parser/utils.ts
function parseShellBSON(source: string): Document[] {
@@ -36,10 +40,24 @@ function parseShellBSON(source: string): Document[] {
const bodyStyles = css({
display: 'flex',
flexDirection: 'column',
- overflow: 'hidden',
gap: spacing[3],
});
+const templateToolbarStyles = css({
+ display: 'flex',
+ flexDirection: 'row',
+ gap: spacing[3],
+ padding: spacing[1],
+});
+
+const templateToolbarTextDescriptionStyles = css({
+ width: '60%',
+});
+
+const templateToolbarDropdownStyles = css({
+ width: '40%',
+});
+
const formContainerStyles = css({
display: 'flex',
flexDirection: 'column',
@@ -80,6 +98,8 @@ export const BaseSearchIndexModal: React.FunctionComponent<
onSubmit,
onClose,
}) => {
+ const editorRef = useRef(null);
+
const [indexName, setIndexName] = useState(initialIndexName);
const [indexDefinition, setIndexDefinition] = useState(
initialIndexDefinition
@@ -141,6 +161,16 @@ export const BaseSearchIndexModal: React.FunctionComponent<
onSubmit(indexName, indexDefinitionDoc);
}, [onSubmit, parsingError, indexName, indexDefinition]);
+ const onChangeTemplate = useCallback(
+ (template: SearchTemplate) => {
+ rafraf(() => {
+ editorRef.current?.focus();
+ editorRef.current?.applySnippet(template.snippet);
+ });
+ },
+ [editorRef]
+ );
+
return (
)}
-
-
-
- {mode === 'create' && (
-
- By default, search indexes will have the following search
- configurations. You can refine this later.
-
- )}
-
- View Atlas Search tutorials{' '}
-
-
-
+
+
+
+
+ {mode === 'create' && (
+
+ By default, search indexes will have the following search
+ configurations. You can refine this later.
+
+ )}
+
+ View Atlas Search tutorials{' '}
+
+
+