Skip to content

Commit 8caf1f8

Browse files
rubydongrubydong
committed
set up most of the styling for index flow
1 parent 4cddc04 commit 8caf1f8

File tree

3 files changed

+220
-67
lines changed

3 files changed

+220
-67
lines changed

‎packages/compass-indexes/src/components/create-index-form/create-index-form.tsx‎

Lines changed: 92 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import {
44
spacing,
55
Accordion,
66
Body,
7-
palette,
8-
Button,
97
RadioBoxGroup,
108
RadioBox,
119
} from '@mongodb-js/compass-components';
@@ -20,6 +18,7 @@ import {
2018
useConnectionSupports,
2119
} from '@mongodb-js/compass-connections/provider';
2220
import { usePreference } from 'compass-preferences-model/provider';
21+
import IndexFlowSection from './index-flow-section';
2322

2423
const createIndexModalFieldsStyles = css({
2524
margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -37,19 +36,6 @@ const createIndexModalFlowsStyles = css({
3736
marginBottom: spacing[600],
3837
});
3938

40-
const plainBorderedCalloutStyles = css({
41-
border: `1px solid ${palette.gray.light2}`,
42-
borderRadius: '12px',
43-
padding: spacing[600],
44-
minHeight: '132px',
45-
});
46-
47-
const coveredQueriesButtonStyles = css({
48-
height: spacing[600] + 4,
49-
float: 'right',
50-
marginTop: spacing[400],
51-
});
52-
5339
export type CreateIndexFormProps = {
5440
namespace: string;
5541
fields: Field[];
@@ -94,67 +80,106 @@ function CreateIndexForm({
9480
});
9581
}, [schemaFields]);
9682

97-
return (
98-
<>
83+
const showIndexesGuidanceIndexFlow =
84+
showIndexesGuidanceVariant && currentTab === 'IndexFlow';
85+
86+
// Default / Control view
87+
if (!showIndexesGuidanceVariant) {
88+
return (
9989
<div
10090
className={createIndexModalFieldsStyles}
10191
data-testid="create-index-form"
10292
>
103-
{showIndexesGuidanceVariant ? (
104-
<RadioBoxGroup
105-
aria-labelledby="index-flows"
106-
data-testid="create-index-form-flows"
107-
id="create-index-form-flows"
108-
onChange={(e) => {
109-
onTabClick(e.target.value as Tab);
110-
}}
111-
value={currentTab}
112-
className={createIndexModalFlowsStyles}
113-
>
114-
<RadioBox id="index-flow" value={'IndexFlow'}>
115-
Start with an Index
116-
</RadioBox>
117-
<RadioBox id="query-flow" value={'QueryFlow'}>
118-
Start with a Query
119-
</RadioBox>
120-
</RadioBoxGroup>
121-
) : (
122-
<Body weight="medium" className={indexFieldsHeaderStyles}>
123-
Index fields
124-
</Body>
125-
)}
93+
<Body weight="medium" className={indexFieldsHeaderStyles}>
94+
Index fields
95+
</Body>
96+
{fields.length > 0 &&
97+
(!showIndexesGuidanceVariant || showIndexesGuidanceIndexFlow) ? (
98+
<CreateIndexFields
99+
schemaFields={schemaFieldNames}
100+
fields={fields}
101+
serverVersion={serverVersion}
102+
isRemovable={!(fields.length > 1)}
103+
onSelectFieldNameClick={onSelectFieldNameClick}
104+
onSelectFieldTypeClick={onSelectFieldTypeClick}
105+
onAddFieldClick={onAddFieldClick}
106+
onRemoveFieldClick={onRemoveFieldClick}
107+
/>
108+
) : null}
126109

127-
{/* Only show the fields if user is in the Start with an index flow or if they're in the control */}
128-
<div
129-
className={
130-
showIndexesGuidanceVariant ? plainBorderedCalloutStyles : ''
131-
}
110+
<Accordion
111+
data-testid="create-index-modal-toggle-options"
112+
text="Options"
132113
>
133-
{fields.length > 0 &&
134-
(!showIndexesGuidanceVariant || currentTab === 'IndexFlow') ? (
135-
<CreateIndexFields
136-
schemaFields={schemaFieldNames}
137-
fields={fields}
138-
serverVersion={serverVersion}
139-
isRemovable={!(fields.length > 1)}
140-
onSelectFieldNameClick={onSelectFieldNameClick}
141-
onSelectFieldTypeClick={onSelectFieldTypeClick}
142-
onAddFieldClick={onAddFieldClick}
143-
onRemoveFieldClick={onRemoveFieldClick}
144-
/>
145-
) : null}
146-
<Button
147-
className={coveredQueriesButtonStyles}
148-
onClick={() => {
149-
// TODO in CLOUDP-311782
150-
// TODO in CLOUDP-311783
151-
}}
114+
<div
115+
data-testid="create-index-modal-options"
116+
className={createIndexModalOptionStyles}
152117
>
153-
Show me covered queries
154-
</Button>
155-
</div>
118+
<CheckboxInput name="unique"></CheckboxInput>
119+
<CollapsibleInput name="name"></CollapsibleInput>
120+
<CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
121+
<CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
122+
<CollapsibleInput name="wildcardProjection"></CollapsibleInput>
123+
<CollapsibleInput name="collation"></CollapsibleInput>
124+
{hasColumnstoreIndexesSupport(serverVersion) && (
125+
<CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
126+
)}
127+
<CheckboxInput name="sparse"></CheckboxInput>
128+
{showRollingIndexOption && (
129+
<CheckboxInput name="buildInRollingProcess"></CheckboxInput>
130+
)}
131+
</div>
132+
</Accordion>
156133
</div>
134+
);
135+
}
136+
137+
// Indexes Guidance Variant View
138+
return (
139+
<>
140+
<div
141+
className={createIndexModalFieldsStyles}
142+
data-testid="create-index-form"
143+
>
144+
<RadioBoxGroup
145+
aria-labelledby="index-flows"
146+
data-testid="create-index-form-flows"
147+
id="create-index-form-flows"
148+
onChange={(e) => {
149+
onTabClick(e.target.value as Tab);
150+
}}
151+
value={currentTab}
152+
className={createIndexModalFlowsStyles}
153+
>
154+
<RadioBox id="index-flow" value={'IndexFlow'}>
155+
Start with an Index
156+
</RadioBox>
157+
<RadioBox id="query-flow" value={'QueryFlow'}>
158+
Start with a Query
159+
</RadioBox>
160+
</RadioBoxGroup>
161+
</div>
162+
163+
{showIndexesGuidanceIndexFlow && (
164+
<IndexFlowSection
165+
createIndexFieldsComponent={
166+
fields.length > 0 ? (
167+
<CreateIndexFields
168+
schemaFields={schemaFieldNames}
169+
fields={fields}
170+
serverVersion={serverVersion}
171+
isRemovable={!(fields.length > 1)}
172+
onSelectFieldNameClick={onSelectFieldNameClick}
173+
onSelectFieldTypeClick={onSelectFieldTypeClick}
174+
onAddFieldClick={onAddFieldClick}
175+
onRemoveFieldClick={onRemoveFieldClick}
176+
/>
177+
) : null
178+
}
179+
/>
180+
)}
157181

182+
{/* TODO in CLOUDP-314036: update the accordion design */}
158183
<Accordion data-testid="create-index-modal-toggle-options" text="Options">
159184
<div
160185
data-testid="create-index-modal-options"

‎packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import {
2+
Body,
3+
Button,
4+
css,
5+
Icon,
6+
Link,
7+
palette,
8+
spacing,
9+
Tooltip,
10+
} from '@mongodb-js/compass-components';
11+
import React from 'react';
12+
13+
const headerStyles = css({
14+
marginBottom: spacing[200],
15+
});
16+
17+
const indexFieldsCalloutStyles = css({
18+
border: `1px solid ${palette.gray.light2}`,
19+
borderRadius: '12px',
20+
padding: spacing[600],
21+
minHeight: '132px',
22+
marginBottom: spacing[600],
23+
});
24+
25+
const coveredQueriesCalloutStyles = css({
26+
border: `1px solid ${palette.gray.light2}`,
27+
background: palette.gray.light3,
28+
borderRadius: '12px',
29+
padding: spacing[600],
30+
marginBottom: spacing[600],
31+
});
32+
33+
const coveredQueriesButtonStyles = css({
34+
height: spacing[600] + 4,
35+
float: 'right',
36+
marginTop: spacing[400],
37+
});
38+
39+
const codeStyles = css({
40+
fontFamily: 'Source Code Pro',
41+
});
42+
43+
const infoWithCircleIconStyles = css({
44+
color: palette.gray.dark1,
45+
marginLeft: spacing[200],
46+
});
47+
48+
const IndexFlowSection = ({
49+
createIndexFieldsComponent,
50+
}: {
51+
createIndexFieldsComponent: JSX.Element | null;
52+
}) => {
53+
return (
54+
<div>
55+
<Body baseFontSize={16} weight="medium" className={headerStyles}>
56+
Input Index
57+
</Body>
58+
<div className={indexFieldsCalloutStyles}>
59+
{createIndexFieldsComponent}
60+
61+
<Button
62+
className={coveredQueriesButtonStyles}
63+
onClick={() => {
64+
// TODO in CLOUDP-311782 generate covered queries
65+
// TODO in CLOUDP-311783 generate optimal queries
66+
}}
67+
>
68+
Show me covered queries
69+
</Button>
70+
</div>
71+
72+
<Body baseFontSize={16} weight="medium" className={headerStyles}>
73+
Covered Queries{' '}
74+
<Tooltip
75+
enabled={true}
76+
trigger={
77+
<span>
78+
<Icon
79+
glyph="InfoWithCircle"
80+
className={infoWithCircleIconStyles}
81+
/>
82+
</span>
83+
}
84+
triggerEvent="hover"
85+
align="top"
86+
justify="middle"
87+
>
88+
A covered query is a query that can be satisfied entirely using an
89+
index and does not have to examine any documents. If a query is
90+
covered, it is highly performant.
91+
</Tooltip>
92+
</Body>
93+
94+
<div className={coveredQueriesCalloutStyles}>
95+
{/* Covered Queries, clean up with actual covered queries examples in CLOUDP-311782 */}
96+
<Body baseFontSize={13} className={codeStyles}>
97+
{`{ awards.wins:3 }`} <br />
98+
{`{ awards.wins:3, imdb.rating:5 }`} <br />
99+
{`{ awards.wins:3, imdb.rating:5, awards.nominations:8 }`} <br />
100+
</Body>
101+
<p>
102+
<u>
103+
Follow the Equality, Sort, Range (ESR) Rule and this index is
104+
optimal for queries that have this pattern:
105+
</u>
106+
{/* Optimal queries, clean up with actual optimal queries in CLOUDP-311783 */}
107+
<Body baseFontSize={13} className={codeStyles}>
108+
{`{awards.wins : 5, imdb.rating: {$gt : 5} }.sort({ awards.nominations : 1 }`}
109+
</Body>
110+
</p>
111+
112+
<Link href="https://www.mongodb.com/docs/manual/core/query-optimization/">
113+
Learn More
114+
</Link>
115+
</div>
116+
</div>
117+
);
118+
};
119+
120+
export default IndexFlowSection;

‎packages/compass/src/app/styles/fonts.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,11 @@
7070
url('@{compass-fonts-path}/EuclidCircularA-RegularItalic-WebXL.woff')
7171
format('woff');
7272
}
73+
74+
/* Regular */
75+
@font-face {
76+
font-family: 'Source Code Pro';
77+
font-weight: 400, normal;
78+
src: url('font/SourceCodePro-Regular.otf.woff2') format('woff2'),
79+
url('font/SourceCodePro-Regular.otf.woff') format('woff');
80+
}

0 commit comments

Comments
 (0)