Skip to content

Commit d15111c

Browse files
ncarbonncarbon
committed
add theme-specific body styles and refactor CloudAIOptInBody for improved clarity and functionality
1 parent 95f09dc commit d15111c

File tree

1 file changed

+92
-73
lines changed

1 file changed

+92
-73
lines changed

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

Lines changed: 92 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
Theme,
1111
useDarkMode,
1212
MarketingModal,
13+
cx,
1314
} from '@mongodb-js/compass-components';
1415
import { AiImageBanner } from './ai-image-banner';
1516
import { closeOptInModal, optIn } from '../store/atlas-optin-reducer';
@@ -39,6 +40,14 @@ const bodyStyles = css({
3940
textAlign: 'center',
4041
});
4142

43+
const bodyLightThemeStyles = css({
44+
color: palette.gray.dark1,
45+
});
46+
47+
const bodyDarkThemeStyles = css({
48+
color: palette.gray.light2,
49+
});
50+
4251
const disclaimerStyles = css({
4352
color: palette.gray.dark1,
4453
marginTop: spacing[400],
@@ -47,6 +56,7 @@ const disclaimerStyles = css({
4756
});
4857

4958
const bannerStyles = css({
59+
width: '480px',
5060
padding: spacing[400],
5161
marginTop: spacing[400],
5262
textAlign: 'left',
@@ -57,15 +67,16 @@ const bannerStyles = css({
5767
const leafyGreenButtonSelector =
5868
'button[data-lgid="lg-button"]:not([aria-label="Close modal"])';
5969
const focusSelector = `&:focus-visible, &[data-focus="true"]`;
60-
const hoverActiveSelector = `&:hover, &[data-hover="true"], &:active, &[data-active="true"]`;
70+
const hoverSelector = `&:hover, &[data-hover="true"]`;
71+
const activeSelector = `&:active, &[data-active="true"]`;
6172
const focusBoxShadow = (color: string) => `
6273
0 0 0 2px ${color},
6374
0 0 0 4px ${palette.blue.light1};
6475
`;
6576
const disabledButtonStyles: Record<Theme, string> = {
6677
[Theme.Light]: css({
6778
[leafyGreenButtonSelector]: {
68-
[hoverActiveSelector]: {
79+
[`&, ${hoverSelector}, ${activeSelector}`]: {
6980
backgroundColor: palette.gray.light2,
7081
borderColor: palette.gray.light1,
7182
color: palette.gray.base,
@@ -82,7 +93,7 @@ const disabledButtonStyles: Record<Theme, string> = {
8293

8394
[Theme.Dark]: css({
8495
[leafyGreenButtonSelector]: {
85-
[hoverActiveSelector]: {
96+
[`&, ${hoverSelector}, ${activeSelector}`]: {
8697
backgroundColor: palette.gray.dark3,
8798
borderColor: palette.gray.dark2,
8899
color: palette.gray.dark1,
@@ -98,6 +109,77 @@ const disabledButtonStyles: Record<Theme, string> = {
98109
}),
99110
};
100111

112+
const CloudAIOptInBody: React.FunctionComponent<{
113+
isProjectAIEnabled: boolean;
114+
isSampleDocumentPassingEnabled: boolean;
115+
projectId?: string;
116+
}> = ({ isProjectAIEnabled, isSampleDocumentPassingEnabled, projectId }) => {
117+
const darkMode = useDarkMode();
118+
119+
const projectSettingsLink = projectId ? (
120+
<Link
121+
href={
122+
window.location.origin + '/v2/' + projectId + '#/settings/groupSettings'
123+
}
124+
target="_blank"
125+
hideExternalIcon
126+
>
127+
Project Settings
128+
</Link>
129+
) : (
130+
'Project Settings'
131+
);
132+
133+
const getCloudAIOptInBannerContent = () => {
134+
if (!isProjectAIEnabled) {
135+
// Both disabled case (main AI features disabled)
136+
return (
137+
<>
138+
AI features are disabled for project users with data access. Project
139+
Owners can enable Data Explorer AI features in {projectSettingsLink}.
140+
</>
141+
);
142+
} else if (!isSampleDocumentPassingEnabled) {
143+
// Only sample values disabled case
144+
return (
145+
<>
146+
AI features are enabled for project users with data access. Project
147+
Owners can disable these features or enable sending sample field
148+
values in Data Explorer AI features to improve their accuracy in{' '}
149+
{projectSettingsLink}.
150+
</>
151+
);
152+
} else {
153+
// Both enabled case
154+
return (
155+
<>
156+
AI features are enabled for project users with data access. Project
157+
Owners can disable Data Explorer AI features in {projectSettingsLink}.
158+
</>
159+
);
160+
}
161+
};
162+
163+
return (
164+
<Body
165+
className={cx(
166+
bodyStyles,
167+
darkMode ? bodyDarkThemeStyles : bodyLightThemeStyles
168+
)}
169+
>
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+
{getCloudAIOptInBannerContent()}
178+
</Banner>
179+
</Body>
180+
);
181+
};
182+
101183
export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
102184
isOptInModalVisible,
103185
isOptInInProgress,
@@ -114,9 +196,6 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
114196
const darkMode = useDarkMode();
115197
const currentDisabledButtonStyles =
116198
disabledButtonStyles[darkMode ? Theme.Dark : Theme.Light];
117-
const PROJECT_SETTINGS_LINK = projectId
118-
? window.location.origin + '/v2/' + projectId + '#/settings/groupSettings'
119-
: null;
120199

121200
useEffect(() => {
122201
if (isOptInModalVisible) {
@@ -136,72 +215,6 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
136215
onOptInModalClose();
137216
}, [track, onOptInModalClose]);
138217

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-
205218
return (
206219
<MarketingModal
207220
showBlob
@@ -231,7 +244,13 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
231244
</div>
232245
}
233246
>
234-
{isCloudOptIn && <CloudAiOptInBody />}
247+
{isCloudOptIn && (
248+
<CloudAIOptInBody
249+
isProjectAIEnabled={isProjectAIEnabled}
250+
isSampleDocumentPassingEnabled={isSampleDocumentPassingEnabled}
251+
projectId={projectId}
252+
/>
253+
)}
235254
</MarketingModal>
236255
);
237256
};

0 commit comments

Comments
 (0)