-
Notifications
You must be signed in to change notification settings - Fork 188
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(search-indexes): add a drop down to choose a search index template
COMPASS-7173 (#4892) * chore: add template to both create and update modals * chore: replace template on creating and updating * chore: bump to the latest mongodb-constants * chore: bump to latest mongodb-constants * chore: fix dependencies * chore: fix linter issues * chore: fix peer deps * chore: fix package-lock * chore: fix peer deps * chore: fix potential weird behaviour on focus and applySnippet * chore: fix test, now codemirror content is async due to rafraf * chore: fix style issues in dropdown * chore: remove overflow hidden on body to avoid issues on small screens * chore: merge with main, fix dependencies * chore: minor fixes * chore: forgot to remove .only for testing * chore: bump constants package
- Loading branch information
Showing
12 changed files
with
321 additions
and
129 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
packages/compass-indexes/src/components/search-index-template-dropdown/index.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { ATLAS_SEARCH_TEMPLATES } from '@mongodb-js/mongodb-constants'; | ||
| import { expect } from 'chai'; | ||
| import { SearchIndexTemplateDropdown } from './'; | ||
| import sinon from 'sinon'; | ||
| import type { SinonSpy } from 'sinon'; | ||
|
|
||
| import { render, screen, cleanup } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| 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" | ||
| 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')!; | ||
|
|
||
| userEvent.click(dropDown); | ||
|
|
||
| const staticFieldMappingOption = await screen.findByText( | ||
| 'Static field mappings' | ||
| ); | ||
| userEvent.click(staticFieldMappingOption); | ||
|
|
||
| expect(onTemplateSpy).to.have.been.calledWith( | ||
| templateNamed('Static field mappings') | ||
| ); | ||
| }); | ||
| }); |
84 changes: 84 additions & 0 deletions
84
packages/compass-indexes/src/components/search-index-template-dropdown/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { ATLAS_SEARCH_TEMPLATES } from '@mongodb-js/mongodb-constants'; | ||
| import type { SearchTemplate } from '@mongodb-js/mongodb-constants'; | ||
| import React, { useState, useCallback } from 'react'; | ||
| import { | ||
| Select, | ||
| Option, | ||
| Icon, | ||
| css, | ||
| Tooltip, | ||
| } from '@mongodb-js/compass-components'; | ||
|
|
||
| const dropdownLabelStyles = css({ | ||
| display: 'flex', | ||
| pointerEvents: 'auto', // leafy green specifies none in the label, which is wrong | ||
| }); | ||
|
|
||
| const fillParentStyles = css({ | ||
| flexGrow: 1, | ||
| }); | ||
|
|
||
| type SearchIndexTemplateDropdownLabelProps = { | ||
| label: string; | ||
| tooltip: string; | ||
| }; | ||
|
|
||
| const SearchIndexTemplateDropdownLabel: React.FunctionComponent< | ||
| SearchIndexTemplateDropdownLabelProps | ||
| > = ({ label, tooltip }) => ( | ||
| <div className={dropdownLabelStyles}> | ||
| <span className={fillParentStyles}>{label}</span> | ||
| <Tooltip | ||
| align="right" | ||
| triggerEvent="hover" | ||
| trigger={({ children, ...props }) => ( | ||
| <div {...props}> | ||
| <Icon | ||
| data-testid="search-template-info-icon" | ||
| glyph="InfoWithCircle" | ||
| /> | ||
| {children} | ||
| </div> | ||
| )} | ||
| > | ||
| {tooltip} | ||
| </Tooltip> | ||
| </div> | ||
| ); | ||
|
|
||
| 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 ( | ||
| <Select | ||
| value={templateValue} | ||
| allowDeselect={false} | ||
| onChange={onChooseTemplate} | ||
| /* @ts-expect-error The label can be any React component, however, the type definition forces a string. */ | ||
| label={ | ||
| <SearchIndexTemplateDropdownLabel label="Template" tooltip={tooltip} /> | ||
| } | ||
| > | ||
| {ATLAS_SEARCH_TEMPLATES.map((template, idx) => ( | ||
| <Option key={idx} value={`${idx}`}> | ||
| {template.name} | ||
| </Option> | ||
| ))} | ||
| </Select> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.