import React from 'react'; import { Button, ButtonSize, ButtonVariant, Subtitle, Body, Link, spacing, palette, css, cx, useDarkMode, } from '@mongodb-js/compass-components'; import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging'; const { track } = createLoggerAndTelemetry('COMPASS-CONNECT-UI'); const formHelpContainerStyles = css({ position: 'relative', margin: 0, width: spacing[5] * 10, display: 'inline-block', }); const sectionContainerStyles = css({ margin: 0, padding: spacing[4], paddingBottom: 0, }); const atlasContainerStyles = css({ backgroundColor: palette.green.light3, paddingBottom: spacing[4], }); const atlasContainerDarkModeStyles = css({ backgroundColor: palette.green.dark3, }); const titleStyles = css({ fontSize: '14px', }); const descriptionStyles = css({ marginTop: spacing[2], }); const createClusterContainerStyles = css({ marginTop: spacing[2], }); const createClusterButtonStyles = css({ fontWeight: 'bold', }); const createClusterButtonLightModeStyles = css({ background: palette.white, '&:hover': { background: palette.white, }, '&:focus': { background: palette.white, }, }); function AtlasHelpSection() { const darkMode = useDarkMode(); return (
New to Compass and don't have a cluster? If you don't already have a cluster, you can create one for free using{' '} MongoDB Atlas
); } function FormHelp(): React.ReactElement { return (
How do I find my connection string in Atlas? If you have an Atlas cluster, go to the Cluster view. Click the 'Connect' button for the cluster to which you wish to connect. See example
How do I format my connection string? See example
); } export default FormHelp;