Skip to content

Commit a4ea2b0

Browse files
lerouxbaddaleaxAnemy
authored
feat(sidebar) copy over csfle/non-genuine markers and modals to the new sidebar (#3406)
* copy over csfle/non-genuine markers and modals * rm console.log * Update packages/compass-sidebar/src/components/non-genuine-marker.tsx Co-authored-by: Anna Henningsen <[email protected]> * also cast on csfle marker * Update packages/compass-sidebar/src/components/non-genuine-marker.tsx Co-authored-by: Rhys <[email protected]> Co-authored-by: Anna Henningsen <[email protected]> Co-authored-by: Rhys <[email protected]>
1 parent 153cc8b commit a4ea2b0

File tree

6 files changed

+344
-4
lines changed

6 files changed

+344
-4
lines changed

‎packages/compass-components/src/components/modal-title.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const modalTitleStyles = css({
99
});
1010

1111
function ModalTitle(
12-
props: React.ComponentProps<typeof H3>
12+
props: Omit<React.ComponentProps<typeof H3>, 'as'>
1313
): React.ReactElement {
1414
return <H3 {...props} className={cx(modalTitleStyles, props.className)} />;
1515
}

‎packages/compass-sidebar/src/components/csfle-connection-modal.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, { useCallback } from 'react';
2+
import {
3+
css,
4+
spacing,
5+
Banner,
6+
Body,
7+
Description,
8+
ModalTitle,
9+
Label,
10+
Link,
11+
Toggle,
12+
Modal,
13+
} from '@mongodb-js/compass-components';
14+
15+
const toggleStyles = css({
16+
marginTop: spacing[3],
17+
marginBottom: spacing[3],
18+
marginRight: spacing[3],
19+
});
20+
21+
const toggleContainerStyles = css({
22+
display: 'flex',
23+
alignItems: 'center',
24+
});
25+
26+
const csfleBannerStyles = css({
27+
marginTop: spacing[3],
28+
});
29+
30+
export default function CSFLEConnectionModal({
31+
csfleMode,
32+
open,
33+
setOpen,
34+
setConnectionIsCSFLEEnabled,
35+
}: {
36+
csfleMode?: 'enabled' | 'disabled' | 'unavailable';
37+
open: boolean;
38+
setOpen: (isOpen: boolean) => void;
39+
setConnectionIsCSFLEEnabled: (isEnabled: boolean) => void;
40+
}) {
41+
const onChange = useCallback(
42+
(checked: boolean) => {
43+
setConnectionIsCSFLEEnabled(checked);
44+
},
45+
[setConnectionIsCSFLEEnabled]
46+
);
47+
48+
return (
49+
<Modal
50+
open={open}
51+
trackingId="csfle_connection_modal"
52+
setOpen={setOpen}
53+
data-test-id="csfle-connection-modal"
54+
>
55+
<div>
56+
<ModalTitle>In-Use Encryption Connection Options</ModalTitle>
57+
<Body>
58+
This connection is configured with In-Use Encryption enabled.
59+
</Body>
60+
<div className={toggleContainerStyles}>
61+
<Toggle
62+
className={toggleStyles}
63+
id="set-csfle-enabled"
64+
aria-labelledby="set-csfle-enabled-label"
65+
size="small"
66+
type="button"
67+
checked={csfleMode === 'enabled'}
68+
onChange={onChange}
69+
/>
70+
<Label id="set-csfle-enabled-label" htmlFor="set-csfle-enabled">
71+
Enable In-Use Encryption for this connection
72+
</Label>
73+
</div>
74+
<Description>
75+
Disabling In-Use Encryption only affects how Compass accesses data. In
76+
order to make Compass forget KMS credentials, the connection must be
77+
fully closed.
78+
</Description>
79+
</div>
80+
<Banner className={csfleBannerStyles}>
81+
In-Use Encryption is an Enterprise/Atlas-only feature of MongoDB.&nbsp;
82+
{/* TODO(COMPASS-5925): Use generic In-Use Encryption URL */}
83+
<Link href="https://dochub.mongodb.org/core/rqe-encrypted-fields">
84+
Learn More
85+
</Link>
86+
</Banner>
87+
</Modal>
88+
);
89+
}

‎packages/compass-sidebar/src/components/csfle-marker.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import {
3+
css,
4+
Icon,
5+
Badge,
6+
BadgeVariant,
7+
useFocusRing,
8+
spacing,
9+
} from '@mongodb-js/compass-components';
10+
11+
const badgeContainerStyles = css({
12+
padding: `0 ${spacing[3]}px ${spacing[3]}px`,
13+
});
14+
15+
const badgeButtonStyles = css({
16+
background: 'inherit',
17+
padding: 0,
18+
margin: 0,
19+
border: 'none',
20+
cursor: 'pointer',
21+
});
22+
23+
export default function CSFLEMarker({
24+
csfleMode,
25+
toggleCSFLEModalVisible,
26+
}: {
27+
csfleMode?: 'enabled' | 'disabled' | 'unavailable';
28+
toggleCSFLEModalVisible: () => void;
29+
}) {
30+
const focusRingProps = useFocusRing<HTMLButtonElement>();
31+
32+
if (!csfleMode || csfleMode === 'unavailable') {
33+
return null;
34+
}
35+
36+
return (
37+
<div className={badgeContainerStyles}>
38+
<button
39+
{...focusRingProps}
40+
type={focusRingProps.type as 'button'}
41+
data-testid="fle-connection-configuration"
42+
aria-label="Open connection In-Use Encryption configuration"
43+
title="Connection In-Use Encryption configuration"
44+
className={badgeButtonStyles}
45+
onClick={toggleCSFLEModalVisible}
46+
>
47+
<Badge
48+
variant={
49+
csfleMode === 'enabled'
50+
? BadgeVariant.DarkGray
51+
: BadgeVariant.LightGray
52+
}
53+
>
54+
<Icon glyph="Key" />
55+
In-Use Encryption
56+
</Badge>
57+
</button>
58+
</div>
59+
);
60+
}

‎packages/compass-sidebar/src/components/non-genuine-marker.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
3+
import {
4+
Badge,
5+
BadgeVariant,
6+
Icon,
7+
css,
8+
spacing,
9+
useFocusRing,
10+
} from '@mongodb-js/compass-components';
11+
12+
const nonGenuineMarkerContainer = css({
13+
padding: `0 ${spacing[3]}px ${spacing[3]}px`,
14+
});
15+
16+
const nonGenuineMarkerButton = css({
17+
background: 'inherit',
18+
padding: 0,
19+
margin: 0,
20+
border: 'none',
21+
cursor: 'pointer',
22+
});
23+
24+
export default function NonGenuineMarker({
25+
isGenuine,
26+
showNonGenuineModal,
27+
}: {
28+
isGenuine?: boolean;
29+
showNonGenuineModal: () => void;
30+
}) {
31+
const focusRingProps = useFocusRing<HTMLButtonElement>();
32+
33+
// isGenuine === undefined means we haven't loaded the info yet
34+
if (isGenuine !== false) {
35+
return null;
36+
}
37+
38+
return (
39+
<div className={nonGenuineMarkerContainer}>
40+
<button
41+
{...focusRingProps}
42+
type={focusRingProps.type as 'button'}
43+
data-testid="non-genuine-information"
44+
className={nonGenuineMarkerButton}
45+
onClick={showNonGenuineModal}
46+
>
47+
<Badge variant={BadgeVariant.Yellow}>
48+
<Icon glyph="Warning" />
49+
Non-genuine MongoDB
50+
</Badge>
51+
</button>
52+
</div>
53+
);
54+
}

‎packages/compass-sidebar/src/components/non-genuine-warning-modal.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { useCallback } from 'react';
2+
import {
3+
css,
4+
Banner,
5+
Button,
6+
Modal,
7+
Link,
8+
ModalFooter,
9+
ModalTitle,
10+
spacing,
11+
Body,
12+
ButtonVariant,
13+
BannerVariant,
14+
} from '@mongodb-js/compass-components';
15+
16+
const modalContentWrapperStyles = css({
17+
padding: 'initial',
18+
});
19+
20+
const modalContentStyles = css({
21+
padding: spacing[5],
22+
});
23+
24+
const modalBodyStyles = css({
25+
marginTop: spacing[3],
26+
marginBottom: spacing[2],
27+
});
28+
29+
const DESCRIPTION =
30+
'Some documented MongoDB features may work differently, be entirely missing' +
31+
' or incomplete, or have unexpected performance characteristics. ';
32+
const WARNING_BANNER =
33+
'This server or service appears to be an emulation of MongoDB rather than an official MongoDB product.';
34+
const LEARN_MORE_URL =
35+
'https://docs.mongodb.com/compass/master/faq/#how-does-compass-determine-a-connection-is-not-genuine';
36+
const MODAL_TITLE = 'Non-Genuine MongoDB Detected';
37+
38+
function NonGenuineWarningModal({
39+
isVisible,
40+
toggleIsVisible,
41+
}: {
42+
isVisible: boolean;
43+
toggleIsVisible: (visible: boolean) => void;
44+
}) {
45+
const onClose = useCallback(() => {
46+
toggleIsVisible(false);
47+
}, [toggleIsVisible]);
48+
49+
return (
50+
<Modal
51+
open={isVisible}
52+
trackingId="non_genuine_mongodb_modal"
53+
setOpen={onClose}
54+
contentClassName={modalContentWrapperStyles}
55+
>
56+
<div className={modalContentStyles}>
57+
<ModalTitle>{MODAL_TITLE}</ModalTitle>
58+
<Banner variant={BannerVariant.Warning}>{WARNING_BANNER}</Banner>
59+
<Body className={modalBodyStyles}>{DESCRIPTION}</Body>
60+
<Link
61+
href={LEARN_MORE_URL}
62+
target="_blank"
63+
data-test-id="non-genuine-warning-modal-learn-more-link"
64+
>
65+
Learn more
66+
</Link>
67+
</div>
68+
<ModalFooter>
69+
<Button
70+
onClick={onClose}
71+
variant={ButtonVariant.Primary}
72+
data-test-id="continue-button"
73+
>
74+
Continue
75+
</Button>
76+
</ModalFooter>
77+
</Modal>
78+
);
79+
}
80+
81+
export default NonGenuineWarningModal;

0 commit comments

Comments
 (0)