diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx index d0ea0b8508a..076998d037a 100644 --- a/packages/compass-components/src/components/accordion.tsx +++ b/packages/compass-components/src/components/accordion.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import { spacing } from '@leafygreen-ui/tokens'; import { css } from '@leafygreen-ui/emotion'; -import Icon from '@leafygreen-ui/icon'; import { uiColors } from '@leafygreen-ui/palette'; import { useId } from '@react-aria/utils'; +import { Icon } from './leafygreen'; import { defaultFontSize } from '../compass-font-sizes'; const buttonStyles = css({ diff --git a/packages/compass-components/src/components/checkbox.tsx b/packages/compass-components/src/components/checkbox.tsx index 8e345a75675..abcd3316996 100644 --- a/packages/compass-components/src/components/checkbox.tsx +++ b/packages/compass-components/src/components/checkbox.tsx @@ -1,24 +1,15 @@ import React from 'react'; -import LeafyGreenCheckbox from '@leafygreen-ui/checkbox'; -import { css } from '@leafygreen-ui/emotion'; +import { Checkbox as LeafyGreenCheckbox } from './leafygreen'; import { Theme, useTheme } from '../hooks/use-theme'; -const checkboxOverrideStyles = css({ - fontWeight: 'bold', -}); - function Checkbox( props: React.ComponentProps ): ReturnType { const theme = useTheme(); return ( - + ); } diff --git a/packages/compass-components/src/components/confirmation-modal.tsx b/packages/compass-components/src/components/confirmation-modal.tsx index b844d45482c..922729b8041 100644 --- a/packages/compass-components/src/components/confirmation-modal.tsx +++ b/packages/compass-components/src/components/confirmation-modal.tsx @@ -1,8 +1,9 @@ import React, { useEffect } from 'react'; -import LeafyGreenConfirmationModal from '@leafygreen-ui/confirmation-modal'; import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging'; const { track } = createLoggerAndTelemetry('COMPASS-UI'); +import { ConfirmationModal as LeafyGreenConfirmationModal } from './leafygreen'; + function ConfirmationModal({ trackingId, ...props diff --git a/packages/compass-components/src/components/error-boundary.tsx b/packages/compass-components/src/components/error-boundary.tsx index 67ef3f7c880..2314ffb0093 100644 --- a/packages/compass-components/src/components/error-boundary.tsx +++ b/packages/compass-components/src/components/error-boundary.tsx @@ -1,9 +1,10 @@ import type { ErrorInfo } from 'react'; import React from 'react'; -import Banner from '@leafygreen-ui/banner'; import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; +import { Banner } from './leafygreen'; + const errorContainerStyles = css({ padding: spacing[3], width: '100%', diff --git a/packages/compass-components/src/components/file-input.tsx b/packages/compass-components/src/components/file-input.tsx index ad42153a5a5..427cd39aad1 100644 --- a/packages/compass-components/src/components/file-input.tsx +++ b/packages/compass-components/src/components/file-input.tsx @@ -3,8 +3,16 @@ import path from 'path'; import { css, cx } from '@leafygreen-ui/emotion'; import { uiColors } from '@leafygreen-ui/palette'; import { spacing } from '@leafygreen-ui/tokens'; +import { withTheme } from '../hooks/use-theme'; -import { Button, Icon, IconButton, Label, Link, Description } from '..'; +import { + Button, + Icon, + IconButton, + Label, + Link, + Description, +} from './leafygreen'; const { base: redBaseColor } = uiColors.red; @@ -79,10 +87,14 @@ const labelIconStyles = css({ }, }); -const disabledDescriptionStyles = css({ +const disabledDescriptionLightStyles = css({ color: uiColors.gray.dark1, }); +const disabledDescriptionDarkStyles = css({ + color: uiColors.gray.light1, +}); + export enum Variant { Horizontal = 'HORIZONTAL', Vertical = 'VERTICAL', @@ -98,6 +110,7 @@ function FileInput({ id, label, dataTestId, + darkMode, onChange, disabled, multi = false, @@ -115,6 +128,7 @@ function FileInput({ label: string; dataTestId?: string; onChange: (files: string[]) => void; + darkMode?: boolean; disabled?: boolean; multi?: boolean; optional?: boolean; @@ -171,6 +185,8 @@ function FileInput({ ); }; + const applyTheme = global?.process?.env?.COMPASS_LG_DARKMODE === 'true'; + return (
{label} @@ -261,4 +279,4 @@ function FileInput({ ); } -export default FileInput; +export default withTheme(FileInput); diff --git a/packages/compass-components/src/components/inline-definition.tsx b/packages/compass-components/src/components/inline-definition.tsx index 51a941335c2..c973d42486c 100644 --- a/packages/compass-components/src/components/inline-definition.tsx +++ b/packages/compass-components/src/components/inline-definition.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React from 'react'; -import { Body } from '@leafygreen-ui/typography'; import { css } from '@leafygreen-ui/emotion'; +import { Body } from './leafygreen'; import { Tooltip } from './tooltip'; import { mergeProps } from '../utils/merge-props'; diff --git a/packages/compass-components/src/components/inline-info-link.tsx b/packages/compass-components/src/components/inline-info-link.tsx index 6ef75151126..ad715f5e255 100644 --- a/packages/compass-components/src/components/inline-info-link.tsx +++ b/packages/compass-components/src/components/inline-info-link.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; -import IconButton from '@leafygreen-ui/icon-button'; -import Icon from '@leafygreen-ui/icon'; + +import { Icon, IconButton } from './leafygreen'; const infoButtonStyles = css({ marginTop: -spacing[2], diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx new file mode 100644 index 00000000000..8779be294c7 --- /dev/null +++ b/packages/compass-components/src/components/leafygreen.tsx @@ -0,0 +1,188 @@ +import type React from 'react'; + +import { withTheme } from '../hooks/use-theme'; + +// This file exports `@leafygreen-ui` components and wraps some of +// them with a listener to Compass' theme in the react context. + +// 1. Import the components we use from leafygreen. +import { default as Badge } from '@leafygreen-ui/badge'; +import { default as Banner } from '@leafygreen-ui/banner'; +import { default as LeafyGreenButton } from '@leafygreen-ui/button'; +import { default as LeafyGreenCheckbox } from '@leafygreen-ui/checkbox'; +import { default as LeafyGreenCard } from '@leafygreen-ui/card'; +import { default as LeafyGreenConfirmationModal } from '@leafygreen-ui/confirmation-modal'; +import { default as Icon } from '@leafygreen-ui/icon'; +import { default as LeafyGreenIconButton } from '@leafygreen-ui/icon-button'; +import { + AtlasLogoMark, + MongoDBLogoMark, + MongoDBLogo, +} from '@leafygreen-ui/logo'; +import { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu'; +import { + default as LeafyGreenModal, + Footer as LeafyGreenFooter, +} from '@leafygreen-ui/modal'; +import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group'; +import { + Radio, + RadioGroup as LeafyGreenRadioGroup, +} from '@leafygreen-ui/radio-group'; +import { + SegmentedControl as LeafyGreenSegmentedControl, + SegmentedControlOption, +} from '@leafygreen-ui/segmented-control'; +import { + Select as LeafyGreenSelect, + Option, + OptionGroup, +} from '@leafygreen-ui/select'; +import { + Table as LeafyGreenTable, + TableHeader, + Row, + Cell, +} from '@leafygreen-ui/table'; +import { Tabs as LeafyGreenTabs, Tab } from '@leafygreen-ui/tabs'; +import { default as LeafyGreenTextArea } from '@leafygreen-ui/text-area'; +import { default as LeafyGreenTextInput } from '@leafygreen-ui/text-input'; +import { default as Toast } from '@leafygreen-ui/toast'; +import { default as LeafyGreenToggle } from '@leafygreen-ui/toggle'; +import { default as LeafyGreenTooltip } from '@leafygreen-ui/tooltip'; +import { + H1, + H2, + H3, + Subtitle, + Body, + InlineCode, + InlineKeyCode, + Disclaimer, + Overline, + Label as LeafyGreenLabel, + Link, + Description as LeafyGreenDescription, +} from '@leafygreen-ui/typography'; + +// 2. Wrap the components that accept darkMode with Compass' theme. +const Button = withTheme( + LeafyGreenButton as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenButton; +const Card: typeof LeafyGreenCard = withTheme( + LeafyGreenCard as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenCard; +const Checkbox = withTheme( + LeafyGreenCheckbox as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenCheckbox; +const ConfirmationModal: typeof LeafyGreenConfirmationModal = withTheme( + LeafyGreenConfirmationModal as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenConfirmationModal; +const IconButton: typeof LeafyGreenIconButton = withTheme( + LeafyGreenIconButton as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenIconButton; +const Footer: typeof LeafyGreenFooter = withTheme( + LeafyGreenFooter +) as typeof LeafyGreenFooter; +const Modal = withTheme( + LeafyGreenModal as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenModal; +const RadioGroup: typeof LeafyGreenRadioGroup = withTheme( + LeafyGreenRadioGroup as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenRadioGroup; +const SegmentedControl: typeof LeafyGreenSegmentedControl = withTheme( + LeafyGreenSegmentedControl +) as typeof LeafyGreenSegmentedControl; +const Select: typeof LeafyGreenSelect = withTheme( + LeafyGreenSelect as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenSelect; +const Table = withTheme(LeafyGreenTable) as typeof LeafyGreenTable; +const Tabs = withTheme( + LeafyGreenTabs as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenTabs; +const TextArea: typeof LeafyGreenTextArea = withTheme(LeafyGreenTextArea); +const TextInput: typeof LeafyGreenTextInput = withTheme(LeafyGreenTextInput); +const Toggle = withTheme( + LeafyGreenToggle as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenToggle; +const Tooltip = withTheme( + LeafyGreenTooltip as React.ComponentType< + React.ComponentProps + > +) as typeof LeafyGreenTooltip; +const Label = withTheme(LeafyGreenLabel) as typeof LeafyGreenLabel; +const Description = withTheme( + LeafyGreenDescription +) as typeof LeafyGreenDescription; + +// 3. Export the leafygreen components. +export { + AtlasLogoMark, + Badge, + Banner, + Button, + Card, + Checkbox, + ConfirmationModal, + Icon, + IconButton, + Footer, + Menu, + MenuItem, + MenuSeparator, + Modal, + MongoDBLogoMark, + MongoDBLogo, + RadioBox, + RadioBoxGroup, + Radio, + RadioGroup, + SegmentedControl, + SegmentedControlOption, + Select, + Option, + OptionGroup, + Table, + TableHeader, + Row, + Cell, + Tab, + Tabs, + TextArea, + TextInput, + Toast, + Toggle, + Tooltip, + H1, + H2, + H3, + Subtitle, + Body, + InlineCode, + InlineKeyCode, + Disclaimer, + Overline, + Label, + Link, + Description, +}; diff --git a/packages/compass-components/src/components/modal.tsx b/packages/compass-components/src/components/modal.tsx index e25de4f5fdd..3d5bce3f56a 100644 --- a/packages/compass-components/src/components/modal.tsx +++ b/packages/compass-components/src/components/modal.tsx @@ -1,8 +1,9 @@ import React, { useEffect } from 'react'; -import LeafyGreenModal from '@leafygreen-ui/modal'; import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging'; const { track } = createLoggerAndTelemetry('COMPASS-UI'); +import { Modal as LeafyGreenModal } from './leafygreen'; + function Modal({ trackingId, ...props diff --git a/packages/compass-components/src/components/radio-box-group.tsx b/packages/compass-components/src/components/radio-box-group.tsx index 54e58dd8321..74561fb479a 100644 --- a/packages/compass-components/src/components/radio-box-group.tsx +++ b/packages/compass-components/src/components/radio-box-group.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; -import { RadioBoxGroup as LeafyGreenRadioBoxGroup } from '@leafygreen-ui/radio-box-group'; + +import { RadioBoxGroup as LeafyGreenRadioBoxGroup } from './leafygreen'; const radioBoxGroupStyles = css({ marginTop: spacing[1], diff --git a/packages/compass-components/src/components/toggle.tsx b/packages/compass-components/src/components/toggle.tsx index 6f50a3bc2df..5313f884b08 100644 --- a/packages/compass-components/src/components/toggle.tsx +++ b/packages/compass-components/src/components/toggle.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import LeafyGreenToggle from '@leafygreen-ui/toggle'; +import { Toggle as LeafyGreenToggle } from './leafygreen'; import { Theme, useTheme } from '../hooks/use-theme'; function Toggle( diff --git a/packages/compass-components/src/components/tooltip.tsx b/packages/compass-components/src/components/tooltip.tsx index db78f091671..e2255505fcd 100644 --- a/packages/compass-components/src/components/tooltip.tsx +++ b/packages/compass-components/src/components/tooltip.tsx @@ -1,8 +1,8 @@ /* eslint-disable react/prop-types */ import { useTooltipTriggerState } from '@react-stately/tooltip'; import { useTooltipTrigger } from '@react-aria/tooltip'; -import LeafyGreenTooltip from '@leafygreen-ui/tooltip'; import React, { useCallback, useRef } from 'react'; +import { Tooltip as LeafyGreenTooltip } from './leafygreen'; import { mergeProps } from '../utils/merge-props'; /** diff --git a/packages/compass-components/src/hooks/use-theme.tsx b/packages/compass-components/src/hooks/use-theme.tsx index 99868fd49f6..4f8b0bc212c 100644 --- a/packages/compass-components/src/hooks/use-theme.tsx +++ b/packages/compass-components/src/hooks/use-theme.tsx @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; -export enum Theme { +enum Theme { Light = 'Light', Dark = 'Dark', } @@ -29,4 +29,43 @@ function useTheme(): ThemeState { return useContext(ThemeContext); } -export { useTheme, ThemeProvider }; +interface WithThemeProps { + darkMode?: boolean; +} + +// High Order Component(HOC) used to inject Compass' theme pulled from the +// available ThemeProvider on the React context into the wrapped component. +const withTheme = function < + ComponentProps extends WithThemeProps = WithThemeProps +>( + WrappedComponent: React.ComponentType +): React.ComponentType { + const ComponentWithTheme = ( + props: ComponentProps, + ref: React.ForwardedRef< + React.ComponentType + > + ) => { + const theme = useTheme(); + + const applyTheme = global?.process?.env?.COMPASS_LG_DARKMODE === 'true'; + + return ( + + ); + }; + + const displayName = + WrappedComponent.displayName || WrappedComponent.name || 'Component'; + ComponentWithTheme.displayName = `withTheme(${displayName})`; + + return React.forwardRef(ComponentWithTheme) as typeof WrappedComponent; +}; + +export { Theme, ThemeProvider, useTheme, withTheme }; diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts index 2d7ca58d4f3..fc4d04e61d8 100644 --- a/packages/compass-components/src/index.ts +++ b/packages/compass-components/src/index.ts @@ -1,3 +1,5 @@ +export * from './components/leafygreen'; + export { default as emotion, flush, @@ -20,50 +22,23 @@ import { SpinLoader } from './components/spin-loader'; import { ResizeHandle, ResizeDirection } from './components/resize-handle'; import Accordion from './components/accordion'; export { FavoriteIcon } from './components/icons/favorite-icon'; +export { Variant as BadgeVariant } from '@leafygreen-ui/badge'; +export { Variant as BannerVariant } from '@leafygreen-ui/banner'; export { - default as Badge, - Variant as BadgeVariant, -} from '@leafygreen-ui/badge'; -export { Footer } from '@leafygreen-ui/modal'; -export { - default as Banner, - Variant as BannerVariant, -} from '@leafygreen-ui/banner'; -export { - default as Button, Size as ButtonSize, Variant as ButtonVariant, } from '@leafygreen-ui/button'; -export { default as Card } from '@leafygreen-ui/card'; + export { Checkbox } from './components/checkbox'; -export { default as Icon } from '@leafygreen-ui/icon'; -export { default as IconButton } from '@leafygreen-ui/icon-button'; export { default as LeafyGreenProvider } from '@leafygreen-ui/leafygreen-provider'; -export { - AtlasLogoMark, - MongoDBLogoMark, - MongoDBLogo, -} from '@leafygreen-ui/logo'; -export { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu'; + export { uiColors } from '@leafygreen-ui/palette'; export * as compassFontSizes from './compass-font-sizes'; export * as compassUIColors from './compass-ui-colors'; export { default as Portal } from '@leafygreen-ui/portal'; -export { RadioBox, Size as RadioBoxSize } from '@leafygreen-ui/radio-box-group'; -export { Radio, RadioGroup } from '@leafygreen-ui/radio-group'; -export { - Select, - Option, - OptionGroup, - Size as SelectSize, -} from '@leafygreen-ui/select'; -export { Tabs, Tab } from '@leafygreen-ui/tabs'; -export { default as TextArea } from '@leafygreen-ui/text-area'; -export { default as TextInput } from '@leafygreen-ui/text-input'; -export { - default as Toast, - Variant as ToastVariant, -} from '@leafygreen-ui/toast'; +export { Size as RadioBoxSize } from '@leafygreen-ui/radio-box-group'; +export { Size as SelectSize } from '@leafygreen-ui/select'; +export { Variant as ToastVariant } from '@leafygreen-ui/toast'; export { useToast, ToastArea } from './hooks/use-toast'; @@ -71,20 +46,7 @@ export { Toggle } from './components/toggle'; export { breakpoints, spacing } from '@leafygreen-ui/tokens'; export { Tooltip } from './components/tooltip'; -export { - H1, - H2, - H3, - Subtitle, - Body, - InlineCode, - InlineKeyCode, - Disclaimer, - Overline, - Label, - Link, - Description, -} from '@leafygreen-ui/typography'; + export { Accordion, CancelLoader, @@ -109,15 +71,11 @@ export { export { InlineDefinition } from './components/inline-definition'; import type { glyphs } from '@leafygreen-ui/icon'; export type IconGlyph = Extract; -export { - SegmentedControl, - SegmentedControlOption, -} from '@leafygreen-ui/segmented-control'; + export { ErrorBoundary } from './components/error-boundary'; export { InlineInfoLink } from './components/inline-info-link'; export { Placeholder } from './components/placeholder'; export { useDOMRect } from './hooks/use-dom-rect'; -export { Table, TableHeader, Row, Cell } from '@leafygreen-ui/table'; export { VirtualGrid } from './components/virtual-grid'; export { mergeProps } from './utils/merge-props'; export { useFocusRing } from './hooks/use-focus-ring'; diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts index 9c5da70f071..a75f1ab0f5d 100644 --- a/packages/compass-e2e-tests/helpers/selectors.ts +++ b/packages/compass-e2e-tests/helpers/selectors.ts @@ -39,7 +39,7 @@ export const AdvancedOptionsTabs = '[aria-label="Advanced Options Tabs"]'; export const SelectedAdvancedOptionsTab = `${AdvancedOptionsTabs} [aria-selected="true"]`; export const ConnectionFormSchemeRadios = - '#connection-schema-radio-box-group input[type="radio"]'; + '#connection-scheme-radio-box-group input[type="radio"]'; export const ConnectionFormHostInputs = '[aria-labelledby="connection-host-input-label"]'; export const ConnectionFormDirectConnectionCheckbox = @@ -72,7 +72,7 @@ export const ConnectionFormInputAWSSecretAccessKey = export const ConnectionFormInputAWSSessionToken = '[data-testid="connection-form-aws-secret-token-input"]'; export const ConnectionFormSSLConnectionRadios = - '#connection-schema-radio-box-group input[type="radio"]'; + '#tls-radio-box-group input[type="radio"]'; export const ConnectionFormTlsCaButton = '#tlsCAFile'; export const ConnectionFormTlsCertificateKeyButton = '#tlsCertificateKeyFile'; export const ConnectionFormTlsCaFile = '[data-testid="tlsCAFile-input"]'; @@ -134,7 +134,7 @@ export const advancedOptionsTabPanel = (tabName: string): string => { return `[role="tabpanel"][aria-label="${tabName}"]`; }; export const connectionFormSchemeRadio = (value: string): string => { - return `#connection-schema-radio-box-group input[value="${value}"]`; + return `#connection-scheme-radio-box-group input[value="${value}"]`; }; export const connectionFormAuthenticationMethodRadio = ( value: string @@ -150,7 +150,7 @@ export const connectionFormCanonicalizeHostNameRadio = ( return `#canonicalize-hostname-select input[value="${value}"]`; }; export const connectionFormSSLConnectionRadio = (value: string): string => { - return `#connection-schema-radio-box-group input[value="${value}"]`; + return `#tls-radio-box-group input[value="${value}"]`; }; export const connectionFormProxyMethodRadio = (value: string): string => { return `#ssh-options-radio-box-group input[value="${value}"]`; diff --git a/packages/compass/src/app/theme.js b/packages/compass/src/app/theme.js index 276828e3d6f..e7d675defe9 100644 --- a/packages/compass/src/app/theme.js +++ b/packages/compass/src/app/theme.js @@ -12,7 +12,9 @@ function enableDarkTheme() { global.hadronApp.theme = Theme.Dark; global.hadronApp.appRegistry?.emit('darkmode-enable'); - darkreader.enable(darkreaderOptions); + if (process?.env?.COMPASS_LG_DARKMODE !== 'true') { + darkreader.enable(darkreaderOptions); + } } function disableDarkTheme() { diff --git a/packages/compass/src/index.d.ts b/packages/compass/src/index.d.ts index fdb45eabc41..eca2b16a340 100644 --- a/packages/compass/src/index.d.ts +++ b/packages/compass/src/index.d.ts @@ -37,6 +37,13 @@ declare module 'process' { // Feature flags. USE_NEW_CONNECT_FORM?: 'true' | 'false'; + /** + * Currently Compass uses `darkreader` to globally change the views of + * Compass to a dark theme. Turning on this feature flag stops darkreader + * from being used and instead components which have darkMode + * support will listen to the theme to change their styles. + */ + COMPASS_LG_DARKMODE?: 'true' | 'false'; /** * Enables new tab in the instance workspace that shows saved diff --git a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx index 692f40d5708..b426e6f17c5 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx @@ -51,10 +51,10 @@ describe('SchemeInput', function () { fireEvent.click(standardSchemeRadioBox); }); - it('should call to update the connection string with standard schema', function () { + it('should call to update the connection string with standard scheme', function () { expect(updateConnectionFormFieldSpy.callCount).to.equal(1); expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({ - type: 'update-connection-schema', + type: 'update-connection-scheme', isSrv: false, }); }); @@ -99,16 +99,16 @@ describe('SchemeInput', function () { expect(srvRadioBox.getAttribute('aria-checked')).to.equal('false'); }); - describe('when the srv schema radio box is clicked', function () { + describe('when the srv scheme radio box is clicked', function () { beforeEach(function () { - const srvSchemaRadioBox = screen.getAllByRole('radio')[1]; - fireEvent.click(srvSchemaRadioBox); + const srvSchemeRadioBox = screen.getAllByRole('radio')[1]; + fireEvent.click(srvSchemeRadioBox); }); - it('should call to update the connection string with srv schema', function () { + it('should call to update the connection string with srv scheme', function () { expect(updateConnectionFormFieldSpy.callCount).to.equal(1); expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({ - type: 'update-connection-schema', + type: 'update-connection-scheme', isSrv: true, }); }); @@ -116,7 +116,7 @@ describe('SchemeInput', function () { }); }); - describe('when there is a schema error', function () { + describe('when there is a scheme error', function () { beforeEach(function () { const connectionStringUrl = new ConnectionStringUrl( 'mongodb://0ranges:p!neapp1es@outerspace:27017/?ssl=true' @@ -139,7 +139,7 @@ describe('SchemeInput', function () { ); }); - it('should render the schema conversion error', function () { + it('should render the scheme conversion error', function () { expect(screen.getByText('aaaa!!!1!')).to.be.visible; }); }); diff --git a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx index 3ceae0dce7e..df8b59f00dd 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx @@ -18,7 +18,7 @@ import { fieldNameHasError, } from '../../../utils/validation'; -enum MONGODB_SCHEMA { +enum MONGODB_SCHEME { MONGODB = 'MONGODB', MONGODB_SRV = 'MONGODB_SRV', } @@ -27,12 +27,12 @@ const descriptionStyles = css({ marginTop: spacing[2], }); -const regularSchemaDescription = +const regularSchemeDescription = 'Standard Connection String Format. The standard format of the MongoDB connection URI is used to connect to a MongoDB deployment: standalone, replica set, or a sharded cluster.'; -const srvSchemaDescription = +const srvSchemeDescription = 'DNS Seed List Connection Format. The +srv indicates to the client that the hostname that follows corresponds to a DNS SRV record.'; -function SchemaInput({ +function SchemeInput({ connectionStringUrl, errors, updateConnectionFormField, @@ -43,11 +43,11 @@ function SchemaInput({ }): React.ReactElement { const { isSRV } = connectionStringUrl; - const onChangeConnectionSchema = useCallback( + const onChangeConnectionScheme = useCallback( (event: React.ChangeEvent) => { updateConnectionFormField({ - type: 'update-connection-schema', - isSrv: event.target.value === MONGODB_SCHEMA.MONGODB_SRV, + type: 'update-connection-scheme', + isSrv: event.target.value === MONGODB_SCHEME.MONGODB_SRV, }); }, [updateConnectionFormField] @@ -55,31 +55,31 @@ function SchemaInput({ return ( <> -