diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx index e2b19ab532b..4847ebaa68c 100644 --- a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx +++ b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx @@ -18,6 +18,7 @@ import { useConnectionSupports, } from '@mongodb-js/compass-connections/provider'; import { usePreference } from 'compass-preferences-model/provider'; +import IndexFlowSection from './index-flow-section'; const createIndexModalFieldsStyles = css({ margin: `${spacing[600]}px 0 ${spacing[800]}px 0`, @@ -79,13 +80,22 @@ function CreateIndexForm({ }); }, [schemaFields]); + const showIndexesGuidanceIndexFlow = + showIndexesGuidanceVariant && currentTab === 'IndexFlow'; + const showIndexesGuidanceQueryFlow = + showIndexesGuidanceVariant && currentTab === 'QueryFlow'; + return ( <>
- {showIndexesGuidanceVariant ? ( + {!showIndexesGuidanceVariant ? ( + + Index fields + + ) : ( - ) : ( - - Index fields - )} - {/* Only show the fields if user is in the Start with an index flow or if they're in the control */} - {fields.length > 0 && - (!showIndexesGuidanceVariant || currentTab === 'IndexFlow') ? ( - 1)} - onSelectFieldNameClick={onSelectFieldNameClick} - onSelectFieldTypeClick={onSelectFieldTypeClick} - onAddFieldClick={onAddFieldClick} - onRemoveFieldClick={onRemoveFieldClick} - /> + {fields.length > 0 ? ( + // Variant UI + showIndexesGuidanceVariant && showIndexesGuidanceIndexFlow ? ( + 1)} + onSelectFieldNameClick={onSelectFieldNameClick} + onSelectFieldTypeClick={onSelectFieldTypeClick} + onAddFieldClick={onAddFieldClick} + onRemoveFieldClick={onRemoveFieldClick} + /> + } + /> + ) : ( + // Control UI + !showIndexesGuidanceQueryFlow && ( + 1)} + onSelectFieldNameClick={onSelectFieldNameClick} + onSelectFieldTypeClick={onSelectFieldTypeClick} + onAddFieldClick={onAddFieldClick} + onRemoveFieldClick={onRemoveFieldClick} + /> + ) + ) ) : null}
+ + {/* TODO in CLOUDP-314036: update the accordion design */}
{ + const renderComponent = (createIndexFieldsComponent?: JSX.Element) => { + render( + + ); + }; + it('renders the Input Index header', () => { + renderComponent(); + expect(screen.getByText('Input Index')).to.be.visible; + }); + + it('renders the Code Equivalent toggle', () => { + renderComponent(); + expect(screen.getByLabelText('Toggle Code Equivalent')).to.be.visible; + }); + + it('renders the Show me covered queries button', () => { + renderComponent(); + expect(screen.getByText('Show me covered queries')).to.be.visible; + }); + + it('renders the Covered Queries header', () => { + renderComponent(); + expect(screen.getByText('Covered Queries')).to.be.visible; + }); + + it('renders the provided createIndexFieldsComponent', () => { + const mockComponent = ( +
Mock Component
+ ); + renderComponent(mockComponent); + expect(screen.getByTestId('mock-component')).to.be.visible; + }); + + it('renders the covered queries examples', () => { + renderComponent(); + expect(screen.getByTestId('index-flow-section-covered-queries-examples')).to + .exist; + }); + + it('renders the optimal query examples', () => { + renderComponent(); + expect(screen.getByTestId('index-flow-section-optimal-query-examples')).to + .exist; + }); + + it('renders the Learn More link', () => { + renderComponent(); + const link = screen.getByText('Learn More'); + expect(link).to.be.visible; + }); +}); diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx new file mode 100644 index 00000000000..6dcbdfb0389 --- /dev/null +++ b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx @@ -0,0 +1,176 @@ +import { + Body, + Button, + css, + cx, + Label, + Link, + palette, + spacing, + Toggle, + fontFamilies, + InfoSprinkle, +} from '@mongodb-js/compass-components'; +import React from 'react'; + +const flexContainerStyles = css({ + display: 'flex', + alignItems: 'center', +}); + +const indexFieldsHeaderContainerStyles = css({ + justifyContent: 'space-between', + marginBottom: spacing[200], +}); + +const indexFieldsCalloutStyles = css({ + border: `1px solid ${palette.gray.light2}`, + borderRadius: '12px', + padding: spacing[600], + marginBottom: spacing[600], +}); + +const codeEquivalentToggleLabelStyles = css({ + marginRight: spacing[100], + fontWeight: 'normal', +}); + +const coveredQueriesHeaderContainerStyles = css({ + marginBottom: spacing[200], +}); + +const coveredQueriesCalloutStyles = css({ + border: `1px solid ${palette.gray.light2}`, + background: palette.gray.light3, + borderRadius: '12px', + padding: spacing[600], + marginBottom: spacing[600], +}); + +const buttonContainerStyles = css({ + display: 'flex', + justifyContent: 'right', +}); + +const coveredQueriesButtonStyles = css({ + float: 'right', + marginTop: spacing[400], +}); + +const underlineStyles = css({ + textDecoration: 'underline', +}); + +const codeStyles = css({ + fontFamily: fontFamilies.code, +}); + +const coveredQueriesHeaderStyles = css({ + marginRight: spacing[200], +}); + +export type IndexFlowSectionProps = { + createIndexFieldsComponent: JSX.Element | null; +}; + +const IndexFlowSection = ({ + createIndexFieldsComponent, +}: IndexFlowSectionProps) => { + return ( +
+
+ + Input Index + +
+ + + { + () => { + // TODO in CLOUDP-311784 + }; + }} + // checked={false} + /> +
+
+
+ {createIndexFieldsComponent} + +
+ +
+
+ +
+ + Covered Queries + + + + {' '} + A covered query is a query that can be satisfied entirely using an + index and does not have to examine any documents. If a query is + covered, it is highly performant. + +
+ +
+ {/* Covered Queries, clean up with actual covered queries examples in CLOUDP-311782 */} + + {`{ awards.wins:3 }`}
+ {`{ awards.wins:3, imdb.rating:5 }`}
+ {`{ awards.wins:3, imdb.rating:5, awards.nominations:8 }`}
+ +

+ + Follow the Equality, Sort, Range (ESR) Rule and this index is + optimal for queries that have this pattern: + + {/* Optimal queries, clean up with actual optimal queries in CLOUDP-311783 */} + + {`{ awards.wins : 5, imdb.rating: {$gt : 5} }.sort({ awards.nominations : 1 }`} + +

+ + + Learn More + +
+
+ ); +}; + +export default IndexFlowSection;