Skip to content

Commit 95f09dc

Browse files
ncarbonncarbon
committed
Refactor AIOptInModal to improve button styles and extract cloud opt-in body component for better readability
1 parent 4b9716b commit 95f09dc

File tree

1 file changed

+102
-100
lines changed

1 file changed

+102
-100
lines changed

‎packages/compass-generative-ai/src/components/ai-optin-modal.tsx‎

Lines changed: 102 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -54,49 +54,48 @@ const bannerStyles = css({
5454

5555
// TODO: The LG MarketingModal does not provide a way to disable the button
5656
// so this is a temporary workaround to make the button look disabled.
57+
const leafyGreenButtonSelector =
58+
'button[data-lgid="lg-button"]:not([aria-label="Close modal"])';
5759
const focusSelector = `&:focus-visible, &[data-focus="true"]`;
58-
const hoverSelector = `&:hover, &[data-hover="true"]`;
59-
const activeSelector = `&:active, &[data-active="true"]`;
60+
const hoverActiveSelector = `&:hover, &[data-hover="true"], &:active, &[data-active="true"]`;
6061
const focusBoxShadow = (color: string) => `
6162
0 0 0 2px ${color},
6263
0 0 0 4px ${palette.blue.light1};
6364
`;
6465
const disabledButtonStyles: Record<Theme, string> = {
65-
[Theme.Light]: css`
66-
button {
67-
&,
68-
${hoverSelector}, ${activeSelector} {
69-
background-color: ${palette.gray.light2};
70-
border-color: ${palette.gray.light1};
71-
color: ${palette.gray.base};
72-
box-shadow: none;
73-
cursor: not-allowed;
74-
}
66+
[Theme.Light]: css({
67+
[leafyGreenButtonSelector]: {
68+
[hoverActiveSelector]: {
69+
backgroundColor: palette.gray.light2,
70+
borderColor: palette.gray.light1,
71+
color: palette.gray.base,
72+
boxShadow: 'none',
73+
cursor: 'not-allowed',
74+
},
7575

76-
${focusSelector} {
77-
color: ${palette.gray.base};
78-
box-shadow: ${focusBoxShadow(palette.white)};
79-
}
80-
}
81-
`,
82-
83-
[Theme.Dark]: css`
84-
button {
85-
&,
86-
${hoverSelector}, ${activeSelector} {
87-
background-color: ${palette.gray.dark3};
88-
border-color: ${palette.gray.dark2};
89-
color: ${palette.gray.dark1};
90-
box-shadow: none;
91-
cursor: not-allowed;
92-
}
76+
[focusSelector]: {
77+
color: palette.gray.base,
78+
boxShadow: focusBoxShadow(palette.white),
79+
},
80+
},
81+
}),
9382

94-
${focusSelector} {
95-
color: ${palette.gray.dark1};
96-
box-shadow: ${focusBoxShadow(palette.black)};
97-
}
98-
}
99-
`,
83+
[Theme.Dark]: css({
84+
[leafyGreenButtonSelector]: {
85+
[hoverActiveSelector]: {
86+
backgroundColor: palette.gray.dark3,
87+
borderColor: palette.gray.dark2,
88+
color: palette.gray.dark1,
89+
boxShadow: 'none',
90+
cursor: 'not-allowed',
91+
},
92+
93+
[focusSelector]: {
94+
color: palette.gray.dark1,
95+
boxShadow: focusBoxShadow(palette.black),
96+
},
97+
},
98+
}),
10099
};
101100

102101
export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
@@ -137,9 +136,76 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
137136
onOptInModalClose();
138137
}, [track, onOptInModalClose]);
139138

139+
const CloudAiOptInBody = () => (
140+
<Body className={bodyStyles}>
141+
AI-powered features in Data Explorer supply users with an intelligent
142+
toolset to build faster and smarter with MongoDB.
143+
<Banner
144+
data-testid="ai-optin-cloud-banner"
145+
variant={isProjectAIEnabled ? 'info' : 'warning'}
146+
className={bannerStyles}
147+
>
148+
{(() => {
149+
if (!isProjectAIEnabled) {
150+
// Both disabled case (main AI features disabled)
151+
return (
152+
<>
153+
AI features are disabled for project users with data access.
154+
Project Owners can enable Data Explorer AI features in{' '}
155+
{PROJECT_SETTINGS_LINK !== null ? (
156+
<Link href={PROJECT_SETTINGS_LINK} target="_blank">
157+
Project Settings
158+
</Link>
159+
) : (
160+
'Project Settings'
161+
)}
162+
.
163+
</>
164+
);
165+
} else if (!isSampleDocumentPassingEnabled) {
166+
// Only sample values disabled case
167+
return (
168+
<>
169+
AI features are enabled for project users with data access.
170+
Project Owners can disable these features or enable sending
171+
sample field values in Data Explorer AI features to improve
172+
their accuracy in{' '}
173+
{PROJECT_SETTINGS_LINK !== null ? (
174+
<Link href={PROJECT_SETTINGS_LINK} target="_blank">
175+
Project Settings
176+
</Link>
177+
) : (
178+
'Project Settings'
179+
)}
180+
.
181+
</>
182+
);
183+
} else {
184+
// Both enabled case
185+
return (
186+
<>
187+
AI features are enabled for project users with data access.
188+
Project Owners can disable Data Explorer AI features in{' '}
189+
{PROJECT_SETTINGS_LINK !== null ? (
190+
<Link href={PROJECT_SETTINGS_LINK} target="_blank">
191+
Project Settings
192+
</Link>
193+
) : (
194+
'Project Settings'
195+
)}
196+
.
197+
</>
198+
);
199+
}
200+
})()}
201+
</Banner>
202+
</Body>
203+
);
204+
140205
return (
141206
<MarketingModal
142207
showBlob
208+
blobPosition="top right"
143209
title={
144210
isCloudOptIn
145211
? 'Use AI Features in Data Explorer'
@@ -165,71 +231,7 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
165231
</div>
166232
}
167233
>
168-
{isCloudOptIn && (
169-
<Body className={bodyStyles}>
170-
AI-powered features in Data Explorer supply users with an intelligent
171-
toolset to build faster and smarter with MongoDB.
172-
<Banner
173-
data-testid="ai-optin-cloud-banner"
174-
variant={isProjectAIEnabled ? 'info' : 'warning'}
175-
className={bannerStyles}
176-
>
177-
{(() => {
178-
if (!isProjectAIEnabled) {
179-
// Both disabled case (main AI features disabled)
180-
return (
181-
<>
182-
AI features are disabled for project users with data access.
183-
Project Owners can enable Data Explorer AI features in{' '}
184-
{PROJECT_SETTINGS_LINK !== null ? (
185-
<Link href={PROJECT_SETTINGS_LINK} target="_blank">
186-
Project Settings
187-
</Link>
188-
) : (
189-
'Project Settings'
190-
)}
191-
.
192-
</>
193-
);
194-
} else if (!isSampleDocumentPassingEnabled) {
195-
// Only sample values disabled case
196-
return (
197-
<>
198-
AI features are enabled for project users with data access.
199-
Project Owners can disable these features or enable sending
200-
sample field values in Data Explorer AI features to improve
201-
their accuracy in{' '}
202-
{PROJECT_SETTINGS_LINK !== null ? (
203-
<Link href={PROJECT_SETTINGS_LINK} target="_blank">
204-
Project Settings
205-
</Link>
206-
) : (
207-
'Project Settings'
208-
)}
209-
.
210-
</>
211-
);
212-
} else {
213-
// Both enabled case
214-
return (
215-
<>
216-
AI features are enabled for project users with data access.
217-
Project Owners can disable Data Explorer AI features in{' '}
218-
{PROJECT_SETTINGS_LINK !== null ? (
219-
<Link href={PROJECT_SETTINGS_LINK} target="_blank">
220-
Project Settings
221-
</Link>
222-
) : (
223-
'Project Settings'
224-
)}
225-
.
226-
</>
227-
);
228-
}
229-
})()}
230-
</Banner>
231-
</Body>
232-
)}
234+
{isCloudOptIn && <CloudAiOptInBody />}
233235
</MarketingModal>
234236
);
235237
};

0 commit comments

Comments
 (0)